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，模型只写一份 Markdown 稿件。同样的问题，稿件平均 612 个 token，约为手写 HTML 的 1/8。要写的少，等的时间就短（3 个题目 × 每题 3 次，取中位数，Claude Sonnet 5.5，普通的 Claude Code 环境）：

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

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。

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 会给每个结论都附一页，而不只是复杂问题。只需要在规则文件里加一条规则。

你说什么，会得到什么

要不要出页面由 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 才会做。细节见解释视频的细节。

配置

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

配置项有 open（自动打开浏览器）、theme、mode（亮色或暗色）、style（写作检查）、scale（页面文字大小，图表跟着变大）、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 个面板），先渲染页面，再写文字回复，回复最后按 SKILL.md 对当前宿主的要求附上页面链接，不要先写文字再渲染。哪怕回答很短也要出，不要因为答案不长就跳过。渲染时加 --no-open，不要弹出浏览器。闲聊、没有结论的一两句话、纯命令输出、我要求纯文本时除外。另外，子 Agent 向父 Agent 汇报属于内部材料，不是给用户的回复：按父 Agent 的要求返回完整结论与证据，除了任务明确要求出页面，否则不要生成页面。"

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

更新与清理

需要手动更新。使用时，CLI 最多每天在后台向 GitHub 查一次新版本；有新版本时，最多每三天向 Agent 提示一次，不会上传任何内容。想更新，对 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}

(CLOSED) -> LISTEN: 被动打开
LISTEN -> SYN_RCVD: 收 SYN / 发 SYN+ACK
SYN_RCVD -> *ESTABLISHED: 收 ACK

剩下的都由 CLI 完成：选模板、排面板、套主题，用 [dagre](https://github.com/dagrejs/dagre) 算流程图坐标，按标签宽度拉开时序图间距。完整稿件 [examples/tcp.md](https://github.com/QingYunA/answer-me-with-html/blob/main/examples/tcp.md) 会生成这一页：

<p align="center">

</p>

## 特性

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

<table>
  <tr>
    <td width="50%"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td align="center"><sub>blueprint 图纸风（<a href="https://github.com/QingYunA/answer-me-with-html/blob/main/examples/ste100.md">examples/ste100.md</a>）</sub></td>
    <td align="center"><sub>单栏长文模板 + 暗色（<a href="https://github.com/QingYunA/answer-me-with-html/blob/main/examples/architecture.md">examples/architecture.md</a>）</sub></td>
  </tr>
</table>

## 组件

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

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

稿件格式（frontmatter、`span`、`rows`、原始 `html`/`svg` 块）和不经过 Agent 直接用命令行：见[参考](https://github.com/QingYunA/answer-me-with-html/blob/main/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:`。完整规则见[参考](https://github.com/QingYunA/answer-me-with-html/blob/main/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。

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

社区

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

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

发现 bug 请提 GitHub issue。

Star 历史

License

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