Answer me with HTML

极速出页 | ASD-STE100 | 讲解视频 | 单文件离线

一个 Agent Skill：遇到复杂问题，Agent 不再甩给你一堵文字墙，而是给你一页能看懂的 HTML。
模型要写的 token，只有它直接手写 HTML 的约 1/8。

官网 · 安装 · 示例 · 视频 · 高频模式 · 参考文档 · English

同一个 TCP 问题的两种回答：左边是终端里的一堵文字墙，右边是带图表的一页能看懂的页面

装好之后，像平时一样提问就行： ``` > 讲讲 TCP 三次握手和四次挥手 > 画一下这个仓库的模块关系 > Redis 和 Memcached 该怎么选 ``` Agent 会写一份很短的 Markdown 稿件，交给 skill 自带的 CLI。大约 50 毫秒后，你就得到一页： https://github.com/user-attachments/assets/1f13b1fe-70a9-4c39-8530-b12e553e17ea

_{24 秒演示，打开声音可以听到配乐。}

## 为什么不直接让 AI 输出 HTML？当然可以，现在的模型写 HTML 已经写得不错了。但它写的大部分都不是内容。我们数了 9 页模型直接手写的 HTML，平均 4,893 个 token： | 页面里的部分 | 占比 | 用这个 skill 后 | | :--- | ---: | :--- | | SVG 图：坐标和路径 | 47% | 由 CLI 生成 | | CSS | 15% | 由 CLI 生成 | | HTML 标签 | 17% | 由 CLI 生成 | | 正文文字 | 21% | 模型来写，写成 Markdown | 用这个 skill，模型只写一份 Markdown 稿件。同样的问题，稿件平均 612 个 token，**约为手写 HTML 的 1/8**。要写的少，等的时间就短（3 个题目 × 每题 3 次，取中位数，Claude Sonnet 5.5，普通的 Claude Code 环境）： | | 直接要 HTML | Answer me with HTML | | | :--- | ---: | ---: | :--- | | 模型要写的 token | 4,893 | **612** | **少 8 倍** | | 耗时 | 31 秒 | **12 秒** | **快 2.6 倍** |

同一个 TCP 问题的两种做法

_{同一个问题、同一个模型，两种做法各答一遍，两页都能用。}

token 数存在 [bench/corpus/tokens.json](bench/corpus/tokens.json) 里，运行 `node bench/corpus.mjs` 每次都得到同样的数字。页面本身可以[下载](https://github.com/QingYunA/answer-me-with-html/releases/download/v0.4.14/bench-corpus-2026-10-07.zip)。花费降得比 token 少，这里约便宜 15%，因为每一轮都还要读系统提示、你的问题和对话记录，用不用 skill 都一样。详见[花费都花在哪](bench/README.md#where-the-cost-goes)。解释视频省得更多：在[一次小测试](bench/README.md#explainer-videos)里，输出 token 少约 18 倍，快约 12 倍。 ## 安装需要本机装有 [Node.js](https://nodejs.org/) 20 或更高版本。不需要 `npm install`，CLI 已经打包在 skill 里了。 ### 让 Agent 帮你装（推荐）把下面这段话粘贴给你的 Agent。Claude Code、Codex、Cursor、OpenCode 都可以： > 帮我安装 Answer me with HTML：读 https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md，照着做。 [INSTALL.md](INSTALL.md) 是写给 Agent 看的。它在 Claude Code 里装插件，在其他 Agent 里装 skill，已有安装会保留，全程不向你提问，用"TCP 三次握手"页面验证后给你一份汇报。如果你的 Agent 打不开链接，用 `npx -y skills add QingYunA/answer-me-with-html -g -y -a <你的 Agent 名>`（Claude Code 是 `-a claude-code`）。 ### Claude Code 插件在 Claude Code 里执行： ``` /plugin marketplace add QingYunA/answer-me-with-html /plugin install answer-me-with-html@answer-me-with-html ``` ### 一条命令 ```bash npx skills add QingYunA/answer-me-with-html ``` 它会问你装到哪个 Agent。安装器来自 [vercel-labs/skills](https://github.com/vercel-labs/skills)，支持 70 多种 Agent。

手动安装

把 `skills/answer-me-with-html` 这个目录放进你的 Agent 的 skill 目录就行。以 Claude Code 为例： ```bash git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html ``` 其他 Agent 的 skill 目录：Codex 是 `~/.codex/skills/`，Cursor 是 `~/.cursor/skills/`，OpenCode 是 `~/.config/opencode/skill/`。

装好后不需要任何配置。**建议打开[高频模式](#高频模式推荐)**：Agent 会给每个结论都附一页，而不只是复杂问题。只需要在规则文件里加一条规则。 ## 你说什么，会得到什么 | 你说 | 你会得到 | | :--- | :--- | | "讲讲 TCP 三次握手" | 时序图、状态迁移图、标志位对照表 | | "这个仓库的模块是怎么组织的" | 目录结构树，加一张模块调用关系图 | | "Redis 和 Memcached 怎么选" | 多维对比表，用 ✓ ✗ 标出差异，最后给结论 | | "这段文案哪里写得不好" | 逐句标注，标出问题词和改法 | | "Kubernetes 是怎么发展起来的" | 时间线，关键节点高亮 | | "给缓存改造做个方案" | 直接引用文件里的真实代码，待定的问题做成选项，在页面上就能回答 | | "`ls` 怎么看隐藏文件" | 不出页面。一句话能说清的问题照常回答 | 要不要出页面由 Agent 判断：概念之间关系复杂、有多步流程、要做多维对比，才会出页面。你也可以直接说"用 HTML 讲一下……"。页面保存在 `~/.answer-me-with-html/pages/`。页面右上角可以切换主题、切换亮暗、汇总你的回复，也可以复制生成这一页的 Markdown 原稿。 ## 和 Archify、GenUI 插件有什么不同？ [Archify](https://github.com/tt-a1i/archify) 根据一份 JSON 规格画一张可交互的图。[dsh-genui](https://github.com/omdsh-dev/dsh-genui) 这类 GenUI 插件在某一个聊天应用里显示组件。这个 skill 把整个问题答成一页：正文、表格、代码和图都有，模型只写一份 Markdown 稿件，任何能运行 shell 命令的 Agent 都能用。详见[完整对比](docs/compare.zh-CN.md)。 ## 解释视频 Karpathy 说的"理解 LLM 输出"阶梯，最后一级是 3Blue1Brown 风格的解释视频。直接说"给 TCP 握手做个 3b1b 风格的视频"就行。

blueprint 风格解释视频中的四帧：片头、高亮 Server 的时序图、流程图、对比表

Agent 写的稿件和页面稿一样，只是多了旁白，每行一拍： ````markdown ## 两端都在等待 ```sequence Client -> Server: SYN Server -> Client: SYN-ACK ``` > 先是客户端开口，发一个 SYN，意思是"我想跟你建个连接"。 > [Server] 听到了，回一个 SYN-ACK："收到，我这边也没问题。" ```` `am video` 把它做成一个播放页：图随旁白一步步画出来，镜头跟着方括号里的节点走。配音内嵌在页面里，离线也能播。播放器带章节栏（在场景之间跳转）、倍速按钮，以及一个导出按钮 —— 同一个视频由浏览器自己编码并下载（本地文件或 `localhost` 打开即可，不需要 ffmpeg）。加 `--mp4` 另存 MP4 文件（需要 ffmpeg），加 `--webm` 另存由页面自己编码的 WebM 文件（不需要 ffmpeg）。只有你要视频时 Agent 才会做。细节见[解释视频的细节](docs/video.zh-CN.md)。 ## 配置用斜杠命令改配置，不用手动编辑配置文件。 | 在哪里 | 怎么改 | | :--- | :--- | | Claude Code（插件安装） | `/answer-me-with-html:config` 会问你要改什么；`/answer-me-with-html:config open off` 直接改 | | 任意 Agent | `/answer-me-with-html config open off`，或者直接说"别再自动弹浏览器了" | | 终端 | `am config` 查看，`am config set open off` 修改，`am config reset` 恢复默认 | 配置项有 `open`（自动打开浏览器）、`theme`、`mode`（亮色或暗色）、`style`（写作检查）、`update_check` 和 `voice`（视频配音）。默认值和可选值见[参考](docs/reference.zh-CN.md#配置)。 ## 高频模式（推荐）打开高频模式后，**每个结论都会附一页**：只要这一轮给出了结论、总结、方案或对比，哪怕回答很短，Agent 也会顺手出一页 2～4 个面板的小页面，并在回复最后附上路径。这些页面只生成、不弹出，不会打断你手上的事。闲聊、没有结论的一两句话不受影响。Claude Code 处于 plan 模式时不会出页面。默认是关的。建议打开：不用每次开口要页面，短结论也和长篇一样好读。页面会堆在 `~/.answer-me-with-html/` 里，用 `am clean` 清理。想打开，把下面这段话粘贴给你的 Agent，让它写进自己的规则文件（比如 `~/.claude/CLAUDE.md` 或 `AGENTS.md`）： > 帮我打开 Answer me with HTML 的高频模式：在你的全局规则文件里加一条规则——"[answer-me-with-html always-on] 只要回复里给出了结论、总结、方案、对比、评审或讲解，就同时用 answer-me-with-html skill 生成一页 HTML（日常结论用 2～4 个面板），先渲染页面，再写文字回复，回复最后附上页面的 file:// 链接，不要先写文字再渲染。哪怕回答很短也要出，不要因为答案不长就跳过。渲染时加 --no-open，不要弹出浏览器。闲聊、没有结论的一两句话、纯命令输出、我要求纯文本时除外。" 想关掉，把这条规则删掉即可。想让页面少一点？见[少一点主动](docs/reference.zh-CN.md#少一点主动)。 ## 更新与清理需要手动更新。Agent 每周向 GitHub 查一次最新版本号，有新版本就告诉你，不会上传任何内容。想更新，对 Agent 说"更新一下 answer-me-with-html"。页面会堆在 `~/.answer-me-with-html/` 里，说"清理一下页面"，Agent 会先问你再删。其他安装方式和全部选项见[参考](docs/reference.zh-CN.md#更新与清理)。 ## 为什么做这个 Karpathy 发过[一条推文](https://x.com/karpathy/status/2105819303471976479)。大意是 LLM 干的活越来越多，人反而越来越难跟上它的输出。比起读一大段文字，看一张图、一页网页要轻松得多。我试过让 Agent 直接用 HTML 回答问题。页面不错，就是太慢：一页像样的网页要等一两分钟，大半时间花在输出几百行每次都差不多的 CSS 上。画流程图更麻烦：模型得自己算 SVG 坐标，箭头经常指到空白处。所以 Answer me with HTML 把这些活从模型手里拿走了。模型只写内容，排版、配色、画图都交给 CLI。 ## 原理模型只需要写这样一份稿件： ````markdown --- title: TCP 三次握手与四次挥手 --- ## A 三次握手 {span=2} ```sequence num 客户端 -> 服务器: SYN, seq=x 服务器 -> 客户端: SYN+ACK, seq=y, ack=x+1 客户端 -> 服务器: ACK, ack=y+1 note 客户端, 服务器: ESTABLISHED ``` ## C 状态迁移 {span=2} ```flow LR (CLOSED) -> LISTEN: 被动打开 LISTEN -> SYN_RCVD: 收 SYN / 发 SYN+ACK SYN_RCVD -> *ESTABLISHED: 收 ACK ``` ```` 剩下的都由 CLI 完成：选模板、排面板、套主题，用 [dagre](https://github.com/dagrejs/dagre) 算流程图坐标，按标签宽度拉开时序图间距。完整稿件 [examples/tcp.md](examples/tcp.md) 会生成这一页：

TCP 示例页面

## 特性 - **版面由代码计算:** 面板位置和图形坐标都是算出来的，不靠模型猜。文字不会被截断，网格里也不会留空洞。 - **出错能自己改:** 稿件写错时，CLI 会给出行号、组件名和一段正确示例。Agent 照着改一次就行。 - **三套主题:** blueprint 是图纸风，shadcn 是卡片风，paper 适合读长文。默认由 CLI 按内容自动选：长文用 paper，有图表用 blueprint。三套都带亮色和暗色，页面上可以用下拉框随时切换，也可以添加你自己的主题。 - **单文件、零依赖:** 产物是一个 `.html`，不引用任何 CDN 或外部字体。断网也能打开，发给别人也能看。 - **多语言:** 简体中文、繁体中文、英文和日文都有对应的按钮和字体。其他语言也能用，按钮是英文。详见[语言](docs/reference.zh-CN.md#语言)。 - **写作检查:** 按 ASD-STE100 的思路检查稿件里的文字。句子太长、用词太绕、被动语态都会提醒。默认只提醒，不拦着。 - **真实代码，不靠手抄:** 代码块可以直接引用你文件里的几行（`src=` `lines=`），页面上的代码就是真实代码。当前目录以外的文件和存放密钥的文件会被拒绝。 - **在页面上回复:** 可以对任意面板写评论，也可以在 Agent 提出的决定（`ask`）里选选项。点"回复"按钮，你的选择和评论会合成一段文字，贴回给 Agent 即可。 - **能找回原稿:** 每页都内嵌了生成它的 Markdown。点"复制源稿"就能拿回来改。


_{blueprint 图纸风（examples/ste100.md）}	_{单栏长文模板 + 暗色（examples/architecture.md）}

## 组件 Agent 会按信息的形状挑组件： | 组件 | 适合什么 | | :--- | :--- | | `flow` | 架构、调用链、决策分支。自动布局，支持分组、判断框、数据库 | | `sequence` | 几方之间按时间顺序来回发消息 | | `tree` | 目录、模块、分类体系 | | `timeline` | 历史、版本、阶段 | | `limits` | 当前值和上限的对比 | | `annot` | 逐词点评一句话 | | `kv` | 元信息、图纸标题栏 | | `callout` | 结论、提示、警告 | | `ask` | 需要你在页面上做的决定，Agent 的建议项默认选中 | | 代码块 | 从文件引用的真实代码（`src=` `lines=`），或手写的示意代码 | | 表格 | 多维对比。单元格写 `ok` / `no` / `warn` 会变成 ✓ ✗ ! | 稿件格式（frontmatter、`span`、`rows`、原始 `html`/`svg` 块）和不经过 Agent 直接用命令行：见[参考](docs/reference.zh-CN.md)。每个组件的完整写法：`am help <组件名>`。 ## STE 受控写作检查 [ASD-STE100](https://www.asd-ste100.org/) 是一套受控英语，最早用来写飞机维修手册。它的规定很具体：句子不能太长，一个词只表达一个意思，操作步骤要用祈使句。Karpathy 提到，让 LLM 按这套规则写，读起来会清楚很多。每次渲染都会检查其中容易用机器检查的部分：句长、常用词、被动语态，以及中文的错别字和含糊词。默认只提醒。用 `/answer-me-with-html:config style strict` 让不达标的稿件不生成，或者在单篇稿件里写 `style:`。完整规则见[参考](docs/reference.zh-CN.md#写作检查)。 ## 开发 ```bash git clone https://github.com/QingYunA/answer-me-with-html.git && cd answer-me-with-html npm install npm test # 跑测试 AM_E2E=1 npm test # 连同视频端到端测试一起跑（需要系统 TTS、Chrome、ffmpeg） npm run smoke:install # 用 npx skills 真实安装一次，并校验插件清单（需要联网） npm run build # 改了 src/ 之后，重新打包 skills/answer-me-with-html/scripts/am.mjs npm run snapshot # 与 origin/main 对比生成的 HTML（重构不能改变它） ``` 维护约定（生成的打包文件、页面格式、快照比对、审 PR、发版）见 [CONTRIBUTING.md](CONTRIBUTING.md)。运行时依赖只有两个：[marked](https://github.com/markedjs/marked) 负责解析 Markdown，[@dagrejs/dagre](https://github.com/dagrejs/dagre) 负责流程图布局。打包时它们会被一起打进 `am.mjs`。 ## 社区也欢迎到 [LINUX DO](https://linux.do) 讨论和反馈。 ## Star 历史

## License [MIT](LICENSE)