article-to-html 是一个文档转 HTML 的技能，用于把对话上下文中的 Markdown 草稿或任意文档渲染成单文件的「论文提案」风格 HTML 页面。
用途
它面向需要把文档快速排版为可独立分发的 HTML 的场景。输出复用 references/template.html 中定义的「paper proposal」设计系统，包含衬线正文、等宽元信息、编号章节、内联 SVG 图表、提示框、表格以及可选的 JS 交互。
主要能力
- 从对话上下文或指定 Markdown 文件获取源文档。
- 提取文档骨架：标题、副标题、TL;DR、章节列表，以及是否需要图表、表格、交互。
- 读取 references/template.html 作为脚手架，复用其完整 CSS 与结构。
- 读取 references/components.md 选取本轮需要的组件片段。
- 需要图表时参考 references/svg-figures.md，用内联 SVG 绘制，不使用外部图片引用。
- 需要交互时参考 references/interactive.md，在 </body> 前追加 script 块。
- 输出到源文件同目录或当前工作目录下的 {slug}.html，文件名取标题的英文 slug 或用户指定名称。
- 报告文件路径与在浏览器中打开的一行命令。
使用方式
触发后按固定流程执行：获取源文档、提取骨架、读取模板、读取组件参考、按需绘制 SVG 或追加交互脚本、写出文件、报告路径。组件对照表帮助选择：引言/摘要用 .tldr 块，引用用 .callout.cite，警告用 .callout.warn，通用旁注用默认 .callout，三列并列概念用 .cards，N 列用 .cards cols-2/cols-4，对比矩阵用 table，流程/架构/时序/柱状图用内联 SVG，开放问题用带粗体引导语的 ol，参考链接用 footer 内的 ul。交互元素默认不启用，除非文档较长（≥3 章节且 ≥2 图表）或源文档本身是交互形态（教程、决策文档、供应商选型），可选交互包括章节折叠、代码复制按钮、表格筛选排序、暗色模式切换、TOC 与滚动监听、表单持久化到 localStorage 等。
设计约束
- 单文件：所有 CSS/SVG/JS 内联，无外部字体、无 CDN、无远程图片。
- 不改变 paper 配色：--paper: #f7f7f5 与 --ink: #1a1a1a 是视觉签名；用户明确要求不同氛围时可改 --accent/--warn，但保留 paper/ink。
- 衬线正文配等宽元信息：body 用 ui-serif，元信息槽位（.doc-eyebrow/.doc-meta/th/code/figcaption/.num）用 ui-monospace。
- 章节编号前缀：<h2><span class="num">01</span>章节标题</h2>，即使源文档无编号也添加。
- 图表需 figcaption：<figcaption><span class="fig-num">FIG 1</span>说明文字</figcaption>，FIG N 用强调色。
- TL;DR 始终置顶；源文档没有时，将前一两段压缩为约 60 词摘要放入。
- 除非用户明确要求，不添加「由 AI 生成」页脚水印。
命名与输出位置
文件名取标题的英文 slug，小写、连字符、不超过 40 字符；中文标题可用拼音或翻译关键词提示。输出位置：用户给了源 Markdown 路径则输出到同目录，否则输出到当前工作目录，用户指定路径则遵从；同名文件存在时追加 -v2/-v3，不静默覆盖。
常见错误
包括擅自改配色、把正文换成无衬线字体、用 emoji 当图标、使用外部 img 链接、缺少 figcaption 编号、每段都加提示框（每篇提示框总数应 ≤5）、三列卡片硬塞 5 项、泄露示例中的领域专有名称等。
文件清单
references/template.html 为空白脚手架；references/components.md 为各组件可复制片段；references/svg-figures.md 为五种典型 SVG 图骨架；references/interactive.md 为 JS 片段；assets/example.html 为完成的参考渲染。