article-to-html

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

article-to-html

Turn a document (from conversation context or a given markdown file) into a self-contained HTML file, reusing the "paper proposal" design system defined in

references/template.html

: serif body + monospace meta + numbered sections + inline SVG figures + callouts + tables + optional JS interactivity.

将文档（来自对话上下文或给定的Markdown文件）转换为自包含HTML文件，复用

references/template.html

中定义的「论文提案」设计系统：衬线字体正文 + 等宽字体元信息 + 带编号章节 + 内嵌SVG图表 + 提示框 + 表格 + 可选JS交互功能。

Flow after trigger

触发后的流程

Get the source. If the user gave a file path,
```
Read
```
it. If the draft is in conversation context, use that directly.
Extract document skeleton. Title, subtitle, TL;DR, section list, whether figures are needed, whether tables are needed, whether interactivity is needed.
Read the template.
```
Read
```
```
references/template.html
```
and use its full CSS + structure as the scaffold.
Read the component reference.
```
Read
```
```
references/components.md
```
and pick out the snippets you need this round.
If figures are needed: consult
```
references/svg-figures.md
```
and draw with inline SVG (no external image references — keep the file portable).
If interactivity is needed: consult
```
references/interactive.md
```
and append a
```
<script>
```
block before
```
</body>
```
.
Output.
```
Write
```
to
```
{same dir as source or current working dir}/{slug}.html
```
. Filename = English slug of the title, or whatever the user specified.
Report. One sentence with the file path + a one-line command to open it in a browser.

获取源文件：若用户提供了文件路径，则读取该文件；若草稿在对话上下文中，则直接使用。
提取文档框架：标题、副标题、TL;DR、章节列表，以及是否需要图表、表格和交互功能。
读取模板：读取
```
references/template.html
```
，使用其完整CSS和结构作为脚手架。
读取组件参考：读取
```
references/components.md
```
，挑选本次所需的代码片段。
若需要图表：参考
```
references/svg-figures.md
```
，使用内嵌SVG绘制（无外部图片引用——保证文件可移植）。
若需要交互功能：参考
```
references/interactive.md
```
，在
```
</body>
```
前添加
```
<script>
```
块。
输出文件：写入到「源文件所在目录或当前工作目录」下的
```
{slug}.html
```
。文件名是标题的英文slug，或用户指定的名称。
反馈结果：用一句话告知文件路径，以及一行在浏览器中打开该文件的命令。

Design invariants (do NOT break)

设计不变项（禁止修改）

Single file. All CSS / SVG / JS inline. No external fonts, no CDNs, no remote images.
Don't change the
paper
palette.
```
--paper: #f7f7f5
```
+
```
--ink: #1a1a1a
```
is this skill's visual signature. If the user explicitly asks for a different mood (dark mode, different accent), you can change
```
--accent
```
/
```
--warn
```
, but keep paper/ink.
Serif body + monospace meta.
```
body
```
uses
```
ui-serif
```
; every "metadata slot" (
```
.doc-eyebrow / .doc-meta / th / code / figcaption / .num
```
) uses
```
ui-monospace
```
. This mix is the signature.
Section numbering prefix.
```
<h2><span class="num">01</span>Section title</h2>
```
— small monospace, faint gray, 14px gap to the title. Add it even if the source has no numbers.

Figures need figcaption.

<figcaption><span class="fig-num">FIG 1</span>caption text</figcaption>

, the

FIG N

in accent color.

TL;DR always on top. If the source has no TL;DR, condense the first one or two paragraphs into a ~60-word summary and put it there.
No "generated by AI" footer watermark unless the user explicitly asks.

单文件：所有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>Section title</h2>
```
——小号等宽字体、浅灰色、与标题间距14px。即使源文档无编号，也要添加。

图表需配标题：

<figcaption><span class="fig-num">FIG 1</span>caption text</figcaption>

，其中

FIG N

使用强调色。

TL;DR始终置于顶部：若源文档无TL;DR，将前一两段浓缩为约60字的摘要并放在此处。
无「AI生成」页脚水印：除非用户明确要求。

Component cheat sheet

组件速查表

If the source contains...	Use...
Intro / abstract	`.tldr` block
Quotation	`.callout.cite` (with `.cite-source` )
Warning / heads-up	`.callout.warn`
Generic sidenote	`.callout` (default, white background)
Three parallel concepts / roles	`.cards` (three-column cards)
N parallel concepts	`.cards cols-2` / `cols-4`
Comparison / vendor matrix	`<table>`
Flow / architecture / timing / bar chart	inline SVG figure — see `references/svg-figures.md`
Open-questions list	`<ol>` with bold lead phrase per item
Reference links	`<footer>` containing a `<ul>`

若源文档包含...	使用...
引言/摘要	`.tldr` 块
引用内容	`.callout.cite` （搭配 `.cite-source` ）
警告/提示	`.callout.warn`
通用旁注	`.callout` （默认白色背景）
三个并行概念/角色	`.cards` （三列卡片）
N个并行概念	`.cards cols-2` / `cols-4`
对比/厂商矩阵	`<table>`
流程/架构/时序/条形图	内嵌SVG图表——详见 `references/svg-figures.md`
待解决问题列表	`<ol>` ，每项开头为粗体引导语
参考链接	`<footer>` 中包含 `<ul>`

Interactive elements (optional)

可选交互元素

The template is static by default. Add interactivity proactively when the document clearly benefits:

Section collapse / expand (long documents)
"Copy" button on code blocks
Table filter / sort (great for vendor comparison tables)
Dark mode toggle (persisted to localStorage)
TOC + scrollspy
Forms (e.g. for an RFC / decision doc, a "vote / leave comment" form persisted to localStorage)

Specific snippets in

references/interactive.md

. Default to none unless (a) the doc is long — ≥3 sections + ≥2 figures, or (b) the source is interaction-shaped (tutorial, decision doc, vendor selection).

模板默认是静态的。当文档明显从中受益时，主动添加交互功能：

章节折叠/展开（长文档）
代码块的「复制」按钮
表格筛选/排序（非常适合厂商对比表）
深色模式切换（保存至localStorage）
目录+滚动监听
表单（例如针对RFC/决策文档，保存至localStorage的「投票/留下评论」表单）

具体代码片段见

references/interactive.md

。默认不添加，除非满足以下条件之一：(a) 文档较长——≥3个章节 + ≥2个图表；(b) 源文档适合交互（教程、决策文档、厂商选型）。

Naming and output location

命名与输出位置

Filename: English slug of the title, lowercase, hyphenated, ≤40 chars. For Chinese titles, use pinyin or a translated keyword hint, e.g. 《新基建提案》→
```
infra-proposal.html
```
.
Output location:
- If the user gave a source markdown path, output in the same directory.
- Otherwise output in the current working directory.
- If the user specifies a path, honor it.
If a file with the same name exists, append
```
-v2
```
/
```
-v3
```
. Never silently overwrite the user's existing output.

文件名：标题的英文slug，小写，连字符分隔，长度≤40字符。对于中文标题，使用拼音或翻译后的关键词提示，例如《新基建提案》→
```
infra-proposal.html
```
。
输出位置：
- 若用户提供了源Markdown路径，则输出到同一目录。
- 否则输出到当前工作目录。
- 若用户指定路径，则遵循用户要求。
若同名文件已存在，追加
```
-v2
```
/
```
-v3
```
。绝不静默覆盖用户现有输出文件。

Common mistakes

常见错误

Recoloring the CSS. Don't touch paper/ink/accent unless the user said "different palette please". Visual consistency is the entire point.
Switching body to sans-serif. The whole "proposal paper" feel hinges on the serif body. Changing fonts breaks the look.
Using emoji as icons. The character vocabulary of this skill is uppercase monospace labels + small color blocks (
```
.mascot
```
/
```
.layer-icon
```
). No emoji unless the user explicitly asks.
External
<img src="https://...">
. Kills portability. Either inline SVG, base64, or omit.
Missing figcaption numbers. The
```
FIG 1 / FIG 2 / FIG 3
```
running labels are key to the "academic paper" feel.
Callout on every paragraph. Callouts highlight one or two passages, not decorate. Keep total callouts ≤ 5 per document.
Cramming 5 items into the three-column cards. Switch to
```
repeat(N, 1fr)
```
(or use the
```
.cols-N
```
modifier), don't force wrap.
Leaking domain-specific names from the example. The template is blank; if the source doesn't mention Crewlet / Anthropic / etc., the HTML shouldn't either.

修改CSS配色：除非用户说「请更换调色板」，否则不要修改paper/ink/accent配色。视觉一致性是核心。
将正文改为无衬线字体：「提案论文」的风格完全依赖衬线正文。修改字体会破坏整体观感。
使用emoji作为图标：本技能的视觉语言是大写等宽标签 + 小色块（
```
.mascot
```
/
```
.layer-icon
```
）。除非用户明确要求，否则不使用emoji。
使用外部
<img src="https://...">
：会破坏可移植性。要么内嵌SVG、base64编码，要么省略。
缺少图表标题编号：
```
FIG 1 / FIG 2 / FIG 3
```
的连续编号是「学术论文」风格的关键。
每个段落都加提示框：提示框用于突出一两个段落，而非装饰。每份文档的提示框总数≤5个。
将5个内容塞进三列卡片：切换为
```
repeat(N, 1fr)
```
（或使用
```
.cols-N
```
修饰符），不要强制换行。
泄露示例中的特定域名名称：模板是空白的；若源文档未提及Crewlet/Anthropic等名称，HTML中也不应出现。

File manifest

文件清单

```
references/template.html
```
— blank scaffold (full CSS + placeholder structure). Start here.
```
references/components.md
```
— cut-and-paste HTML snippets for every component.
```
references/svg-figures.md
```
— five typical SVG figure skeletons (architecture, timing, bar comparison, stacked layers, lifecycle).
```
references/interactive.md
```
— JS snippets (collapse, copy, table filter/sort, TOC, dark mode, form → localStorage, reading progress, figure zoom).
```
assets/example.html
```
— a completed reference render (the original Chinese article.html kept as a visual benchmark).

```
references/template.html
```
——空白脚手架（完整CSS + 占位结构）。从此处开始。
```
references/components.md
```
——所有组件的可复制HTML代码片段。
```
references/svg-figures.md
```
——五种典型SVG图表框架（架构、时序、条形对比、分层堆叠、生命周期）。
```
references/interactive.md
```
——JS代码片段（折叠、复制、表格筛选/排序、目录、深色模式、表单→localStorage、阅读进度、图表缩放）。
```
assets/example.html
```
——已完成的参考渲染示例（原始中文article.html作为视觉基准）。