answer-me-with-html：让 AI 用一页 HTML 回答，而不是甩你一面文字墙

问 AI 一个复杂问题，比如「讲讲 TCP 三次握手」，它通常回你一大段文字。读得完，但得自己脑内建图：先后顺序、角色你来我往、标志位对照……全靠脑补。

GitHub 上有个叫 QingYunA/answer-me-with-html 的项目，很多 star（写这篇时 2365 个）、MIT 协议，专治这个。它是一套 Agent Skill：装上之后，复杂问题 AI 不再回文字墙，而是给你一页能看的 HTML——有时序图、有状态迁移图、有对照表，还能离线打开、发给别人。

一句讲清它干嘛用：它把「AI 回答」从一堵文字墙变成一页排版好的网页，而且 AI 只需要写很短的内容稿，排版、配色、画图全交给命令行的工具完成。 这样回答更快、更省 token、更适合保存和分享。

先横向看看，平时大家怎么让 AI 回答复杂问题

在介绍它之前，先摆一下现有的几种做法，各有各的短板。

做法	得到什么	卡在哪
让万能 Agent 直接回答	一段长篇文字	复杂问题全靠读者脑补图，得自己梳理关系
让 Agent 直接输出 HTML	一页网页	慢：一页要等一两分钟，大半时间花在输出几百行重复的 CSS 和算 SVG 坐标
让 Agent 画一张图（如 Archify）	一张可交互的架构图	只有图，旁边的解释、对比、代码放不下
聊天气泡里渲染组件（GenUI 类插件）	聊天里的卡片、表单、图表	只在某一个聊天应用里能用，逃离那个界面就没法看

这儿共通的毛病是：要么文字没法读，要么页面太慢，要么只有图没有文，要么被锁在某个聊天工具里。 answer-me-with-html 的做法是把「写内容」和「排版画图」分开——模型只负责把内容写成一份简短的 Markdown 稿件，剩下的布局、配色、流程图坐标全交给配套的命令行程序。

它是什么：一套给 AI Agent 的「答成一页 HTML」工具

它不是一个你直接用起来的软件，而是一个 Skill——一套装进 AI Agent 的说明 + 可执行程序。装上之后，你照常提问，Agent 判断该不该出页面，该出就调它自带的命令行工具生成一页 HTML。

仓库里能看到的东西，主要分几层：

• skills/answer-me-with-html/：实际装进 Agent 的东西，里面有一份 SKILL.md 说明、参考文档，和一个打包好的命令行程序 am
• src/：生成页面的源代码，按组件、模板、主题、视频、语言分目录
• bench/：一份可复现的基准测试（后面细说，这是它最有诚意的部分）
• examples/：现成的示例稿件，比如 tcp.md 一步就渲染成 TCP 讲解页
• docs/、site/：说明文档和官网

装好之后，提问方式不变：

> 讲讲 TCP 三次握手和四次挥手
> 画一下这个仓库的模块关系
> Redis 和 Memcached 该怎么选

能不能保证这个项目能跑？作者说，装好它的 Skill 目录就行，它自带的命令行程序已经打包在里面，不需要 npm install，只需要本机有 Node.js 20 或以上。

它怎么用：三步，从装到出一页

第一步，装。 给 AI 一句话让 Agent 自己装，或者终端跑一条命令：

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

它会问装到哪个 Agent。手动装也行：把 skills/answer-me-with-html 目录丢进你的 Agent 的 skill 目录，比如 Claude Code 放到 ~/.claude/skills/，Codex 放到 ~/.codex/skills/。

第二步，问。 直接问就行，比如「讲讲 TCP 三次握手」。要是想让回复里每个结论都带一页，可以开「高频模式」——在 AI 的规则文件里加一条规则，让它凡是有结论、总结、方案、对比就顺手出一页 2 到 4 个小面板的页面。

第三步，看。 生成的一页 HTML 可以在浏览器里打开，页面右上角能切主题、切亮暗、汇总你的回复，还能一键复制生成这一页的 Markdown 原稿。页面保存在 ~/.answer-me-with-html/pages/。

我顺手验证了一下渲染过程，确实能跑通：

$ am render examples/tcp.md -o tcp.html --no-open
✓ tcp.html
  sheet · blueprint · 6 panels · sequence×2 callout×1 flow×1 kv×1

一秒钟不到，出一份 92K 的单文件 HTML，检查了一下：一个 CDN 都不引，离线打开没问题。

关键：它为什么快——模型只写字，绘图交给程序

核心思路是把活儿拆开。作者在 README 里给了一组数字，是数了 9 页模型直接手写的 HTML 得出的平均占比：

页面里的东西	占多少	用这个 skill 后
SVG 图：坐标和路径	47%	命令行程序生成
CSS	15%	命令行程序生成
HTML 标签	17%	命令行程序生成
正文文字	21%	模型来写，写成 Markdown

渲染过程实测能跑通，一步出结果：

模型写的是什么？就是一份很短的 Markdown 稿件。页面骨架用 ## 小节，小节后面标 {span} 控制占几个面板，图表用代码块写组件名：

---
title: TCP 三次握手与四次挥手
---
## A 三次握手 {span=2}
```sequence num
客户端 -> 服务器: SYN, seq=x
服务器 -> 客户端: SYN+ACK, seq=y, ack=x+1
```

剩下的交给 am：选模板、排面板、套主题、用 dagre 这个库算流程图坐标、按标签宽度拉开时序图的间距。版面是算出来的，不是模型猜的——所以文字不会被截断，网格里也不会有空洞。

它给你的一页里能放什么

Agent 会按信息的形状挑组件，粗配就有 12 种：

组件	适合什么
flow	架构、调用链、决策分支
er	数据模型：实体带字段，关系连线
sequence	几方之间按时间顺序来回发消息
tree	目录、模块、分类体系
timeline	历史、版本、阶段
annot	逐词点评一句话
ask	需要你在页面上做的决定，Agent 的建议默认选中
表格	多维对比，单元格写 ok/no/warn 会变成 ✓ ✗ !

代码块还能直接引用你文件里的真实代码（src= 加 lines=），页面上的代码就是真的，不是模型手抄的。当前文件夹以外的文件、以及存放密钥的文件，会被拒绝，算是一道安全闸。

要不要出页面由 Agent 自己判断：概念间关系复杂、有多步流程、要做多维对比才出；一句话能说清的问题照常文字回答。

测试开发视角，最值得说的是它的基准测试

站在测试的立场，这个仓库里最让人舒服的，是它那份能复现的基准测试——bench/ 目录，把它当成一个「对照实验」来看，处处是测试开发天天在强调的东西。

一是可复现。 它数 token 的语料和计数都放在仓库里，跑一条 node bench/corpus.mjs 就得到和 README 一模一样的数字；作者明确写了「语料和计数都不变，这些数字就不变」。我实测跑了一遍，输出的正是 4893 / 612、少 8.0 倍。数字不是拍脑袋，是能重跑出来的。

二是对照做干净。 同一个问题、同一个模型各答一遍，每格取 3 次的中位数；还特意区分了「普通环境」和「加载很重的环境」两种上下文，因为成本受环境影响很大。这不就是把「对照组 + 控制变量」这句话落到了 AI 工具身上？

三是诚实报结果。 它没有只挑好看的数字说。作者拆了花费构成：输出只占直接要 HTML 花费的 55%，所以哪怕 skill 一个输出 token 都不写，最多也只能省 55%——省出来的主要是缓存开销，不是全部。它甚至记了一笔「更早的一次测试里 skill 反而贵了约 20%」，因为那次缓存没命中。把不利数据也放出来，这比任何「快 8 倍」的宣传都可信。

四是自带质量门禁。 稿件写错时，am 会返回行号、组件名和一段正确示例，AI 照着改一次就行；am lint 按 ASD-STE100 受控英语的思路检查句长、绕词、被动语态，还有中文错别字和含糊词，默认只提醒，要严格模式才会拦截；连重构成熟尺寸都配了快照比对——改完代码跑 npm run snapshot，只要渲染出来的 HTML 变了就报错。

这套「可复现 + 对照 + 诚实 + 门禁」的底子，落到测试开发日常就是现成可借的动作：

• AI 工具的收益别信单点数字：用可复现的脚本重跑，建立自己的基线，不看宣传看实测
• 生产环境的上下文不一样，结论就要重测：轻环境和重环境成本差一倍不止
• 验收标准要可观察：am lint 这种把「句子太长」「用词太绕」变成规则的做法，和「翻译不出具体决定就删」是同一个道理

它值不值得装，取决于认不认这个起点：AI 回答「好不好”读」和「好不好用」一样，是能验证、能复现的。 如果认，answer-me-with-html 给的不只是一套把回答变网页的工具，更是一份怎么用数据证明「变好了」的示范。作者还加了 3Blue1Brown 风格的解释视频（am video），输出能省约 18 倍，属于同一套思路的延伸。

仓库地址：https://github.com/QingYunA/answer-me-with-html

#AI #Agent #Skill #HTML #可视化 #文档 #开源项目 #测试开发