一页 HTML 讲解 QingYunA/answer-me-with-html

Answer me with HTML

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

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

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

装好之后，像平时一样提问就行：

讲讲 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 倍 |

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

token 数存在 bench/corpus/tokens.json 里，运行 node bench/corpus.mjs 每次都得到同样的数字。页面本身可以下载。花费降得比 token 少，这里约便宜 15%，因为每一轮都还要读系统提示、你的问题和对话记录，用不用 skill 都一样。详见花费都花在哪。

解释视频省得更多：在一次小测试里，输出 token 少约 18 倍，快约 12 倍。

安装

需要本机装有 Node.js 20 或更高版本。不需要 npm install，CLI 已经打包在 skill 里了。还没装 Node.js？用下面推荐的方式安装，Agent 会先问你，再替你装好。

让 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 是写给 Agent 看的。它在 Claude Code 里装插件，在其他 Agent 里装 skill，已有安装会保留，除非缺少 Node.js 或版本低于 20，否则全程不向你提问，用"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

DeepSeek Harness 插件

在终端里执行。换成你在用的 profile，自带的是 web：

dsh plugin --profile web add github:QingYunA/answer-me-with-html

一条命令

npx skills add QingYunA/answer-me-with-html

它会问你装到哪个 Agent。安装器来自 vercel-labs/skills，支持 70 多种 Agent。

手动安装

把 skills/answer-me-with-html 这个目录放进你的 Agent 的 skill 目录就行。以 Claude Code 为例：

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 根据一份 JSON 规格画一张可交互的图。dsh-genui 这类 GenUI 插件在某一个聊天应用里显示组件。这个 skill 把整个问题答成一页：正文、表格、代码和图都有，模型只写一份 Markdown 稿件，任何能运行 shell 命令的 Agent 都能用。详见完整对比。

解释视频

Karpathy 说的"理解 LLM 输出"阶梯，最后一级是 3Blue1Brown 风格的解释视频。直接说"给 TCP 握手做个 3b1b 风格的视频"就行。

Agent 写的稿件和页面稿一样，只是多了旁白，每行一拍：

两端都在等待sequence Client -> Server: SYN Server -> Client: SYN-ACK 先是客户端开口，发一个 SYN，意思是"我想跟你建个连接"。
[Server] 听到了，回一个 SYN-ACK："收到，我这边也没问题。"

am video 把它做成一个播放页：图随旁白一步步画出来，镜头跟着方括号里的节点走。配音内嵌在页面里，离线也能播。播放器带章节栏（在场景之间跳转）、倍速按钮，以及一个导出按钮 —— 同一个视频由浏览器自己编码并下载（本地文件或 localhost 打开即可，不需要 ffmpeg）。加 --mp4 另存 MP4 文件（需要 ffmpeg），加 --webm 另存由页面自己编码的 WebM 文件（不需要 ffmpeg）。只有你要视频时 Agent 才会做。细节见解释视频的细节。

配置

用斜杠命令改配置，不用手动编辑配置文件。

| 在哪里 | 怎么改 |
| 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、close_after_reply（复制回复后关闭标签页）和 voice（视频配音）。默认值和可选值见参考。

高频模式（推荐）

打开高频模式后，每个结论都会附一页：只要这一轮给出了结论、总结、方案或对比，哪怕回答很短，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，不要弹出浏览器。闲聊、没有结论的一两句话、纯命令输出、我要求纯文本时除外。"

想关掉，把这条规则删掉即可。想让页面少一点？见少一点主动。

更新与清理

需要手动更新。Agent 每周向 GitHub 查一次最新版本号，有新版本就告诉你，不会上传任何内容。想更新，对 Agent 说"更新一下 answer-me-with-html"。页面会堆在 ~/.answer-me-with-html/ 里，说"清理一下页面"，Agent 会先问你再删。其他安装方式和全部选项见参考。

为什么做这个

Karpathy 发过一条推文。大意是 LLM 干的活越来越多，人反而越来越难跟上它的输出。比起读一大段文字，看一张图、一页网页要轻松得多。

我试过让 Agent 直接用 HTML 回答问题。页面不错，就是太慢：一页像样的网页要等一两分钟，大半时间花在输出几百行每次都差不多的 CSS 上。画流程图更麻烦：模型得自己算 SVG 坐标，箭头经常指到空白处。

所以 Answer me with HTML 把这些活从模型手里拿走了。模型只写内容，排版、配色、画图都交给 CLI。

原理

模型只需要写这样一份稿件：

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 算流程图坐标，按标签宽度拉开时序图间距。完整稿件 examples/tcp.md 会生成这一页：

特性

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

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

组件

Agent 会按信息的形状挑组件：

| 组件 | 适合什么 |
| flow | 架构、调用链、决策分支。自动布局，支持分组、判断框、数据库 |
| er | 数据模型：实体带字段（PK / FK / UK）和鸦爪式关系连线 |
| sequence | 几方之间按时间顺序来回发消息 |
| tree | 目录、模块、分类体系 |
| timeline | 历史、版本、阶段 |
| limits | 当前值和上限的对比 |
| annot | 逐词点评一句话 |
| kv | 元信息、图纸标题栏 |
| callout | 结论、提示、警告 |
| ask | 需要你在页面上做的决定，Agent 的建议项默认选中 |
| 代码块 | 从文件引用的真实代码（src= lines=），或手写的示意代码 |
| 表格 | 多维对比。单元格写 ok / no / warn 会变成 ✓ ✗ ! |

稿件格式（frontmatter、span、rows、原始 html/svg 块）和不经过 Agent 直接用命令行：见参考。每个组件的完整写法：am help <组件名>。

STE 受控写作检查

ASD-STE100 是一套受控英语，最早用来写飞机维修手册。它的规定很具体：句子不能太长，一个词只表达一个意思，操作步骤要用祈使句。Karpathy 提到，让 LLM 按这套规则写，读起来会清楚很多。

每次渲染都会检查其中容易用机器检查的部分：句长、常用词、被动语态，以及中文的错别字和含糊词。默认只提醒。用 /answer-me-with-html:config style strict 让不达标的稿件不生成，或者在单篇稿件里写 style:。完整规则见参考。

开发

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。

运行时依赖只有两个：marked 负责解析 Markdown，@dagrejs/dagre 负责流程图布局。打包时它们会被一起打进 am.mjs。

社区

有问题、想分享做出来的页面、有功能建议，或者只是想打个招呼，都欢迎来。

- Discord
- QQ 群：1127099407
- LINUX DO 中文开发者论坛

发现 bug 请提 GitHub issue。

Star 历史

License

MIT。主题可以内嵌的 Bangers 字体使用 SIL Open Font License 1.1。