Answer me with HTML：让 AI 把复杂问题讲成一页网页，输出 token 只要手写 HTML 的七分之一

用 AI 问一个稍微复杂点的问题——比如「讲讲 TCP 的三次握手和四次挥手」或者「Redis 和 Memcached 该怎么选」——你多半会收到一堵文字墙：几百行 Markdown，术语堆在段落里，看完还得在脑子里自己拼出一张图。问题不在模型不知道答案，而在「用纯文本讲清楚一件结构性的事」本来就别扭。

Answer me with HTML 换了个思路：它不是让模型把 HTML 一个字一个字打出来，而是把「排版、配色、画图」这些活从模型手里拿走，只让模型写一份很短的 Markdown 稿件，剩下的交给一个本地 CLI 在约 50 毫秒内渲染成一页单文件 HTML。项目 2026 年 10 月 2 日建仓，几天内冲到 1700+ 星，采用 MIT 协议。项目地址：github.com/QingYunA/answer-me-with-html。

它到底解决什么问题

让 AI 直接输出 HTML 当然也行，现在的模型写得已经不错。真正的问题是输出 token 的账：每一行 CSS、每一层 div、每一个 SVG 坐标，都得模型逐字生成，而你在屏幕前等的正是这些 token。

这个 skill 把这些重复劳动交给 CLI。模型只写内容——标题、分段、几张表的对照、几段流程描述——然后本地工具负责选模板、排面板、套主题、算坐标。据项目给出的基准测试（同一个问题、同一个模型、3 个题目各跑 3 次取中位数，Claude Sonnet 5.5）：

做解释视频时差距更夸张：让模型手写一个 3Blue1Brown 风格的 TCP 握手动画页，输出 27,839 个 token、耗时 202 秒；改用内置的 am video，只需 1,566 个 token、17 秒——少了约 17.8 倍，快了约 11.8 倍。

作者也坦率说明了代价：skill 会多出两轮很短的对话，每一轮都要重读上下文。在「重上下文」的环境里（约 5.1 万个 token 的工具、规则和 skill），多出的两轮可能比省下的 token 更贵，实测 skill 反而贵约 20%。所以它不是无脑更快，而是把成本挪到了更划算的地方。

模型只需要写这么一点

整个方案的巧劲在稿件格式上。模型写的是一份带 frontmatter 的短 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 算流程图的节点坐标，按标签宽度拉开时序图的间距。也就是说，版面由代码计算，而不是让模型去猜——文字不会被截断，网格里也不会留空洞，箭头也不会指向空白处。

它会按信息的形状挑组件

作者在 README 里列了一张表，说清楚什么内容该配什么组件：

• flow：架构、调用链、决策分支，自动布局，支持分组、判断框、数据库图标。
• sequence：几方之间按时间顺序来回发消息，适合协议握手这类场景。
• tree：目录、模块、分类体系。
• timeline：历史、版本、阶段。
• limits：当前值和上限的对比。
• annot：逐词点评一句话，适合文案评审。
• kv / callout：元信息、图纸标题栏，以及结论、提示、警告。
• 表格：多维对比，单元格写 ok / no / warn 会自动变成 ✓ ✗ !。

要不要出页面由 Agent 判断：概念之间关系复杂、有多步流程、要做多维对比，才出页面；一句「ls 怎么看隐藏文件」这种一句话能说清的问题，照常直接回答，不会硬塞给你一页网页。

解释视频：理解输出的最后一级台阶

Karpathy 提过一个「理解 LLM 输出」的阶梯，最高一级是解释视频。Answer me with HTML 也做了这件事：直接说「给 TCP 握手做个 3b1b 风格的视频」就行。

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

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

am video 把它做成一个播放页，几个细节挺讲究：

• 逐步构建：第 N 句旁白播出时，图上出现第 N 步，箭头一笔画出来。
• 镜头聚焦：旁白里写 [Server]，镜头就推向这个节点并高亮，整张图始终留在画面里，不会被裁掉。
• 跨场景变形：下一个场景里同名的节点，会从旧位置平滑移到新位置，而不是硬切。
• 音画同步：配置了 ELEVENLABS_API_KEY 就用 ElevenLabs 配音，否则用系统语音，每一拍的时长等于这句音频的长度。音频内嵌在页面里，离线也能播。

安装只要一句话

要求本机装有 Node.js 20 及以上。不需要 npm install，CLI 已经打包在 skill 里。最省事的办法是让 Agent 自己装——把下面这段话粘给 Claude Code、Codex、Cursor 或 OpenCode：

帮我安装 Answer me with HTML：读
https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md，照着做。

或者在终端里一条命令：

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

安装器来自 vercel-labs/skills，支持 70 多种 Agent，会提示你装到哪一个。装好后不需要任何配置，像平时一样提问即可。

三套主题，单文件零依赖

页面产物是一个 .html 文件，不引用任何 CDN 或外部字体——断网也能打开，发给别人也能看，右上角能切换主题、切换亮暗，还能「复制源稿」把生成这一页的 Markdown 拿回来改。内置三套主题：

• blueprint：图纸风，适合有图表的页面。
• shadcn：卡片风，界面感强。
• paper：适合读长文。

默认由 CLI 按内容自动选：长文用 paper，有图表用 blueprint。三套都带亮色和暗色，也可以添加自己的主题。多语言方面，简体中文、繁体中文、英文和日文是完整支持，页面按钮、主题名、字体和视频播放器都有对应语言。

顺手做个受控写作检查

这是个容易被忽略但很实用的功能。项目把 ASD-STE100（最早的航空维修手册受控英语规范）里「容易被机器检查」的部分做成了中英双语版，每次渲染时顺带检查稿件：

• 句长：操作步骤不超过 20 个英文词或 35 个汉字，描述性句子不超过 25 词或 45 字，每段最多 6 句。
• 用词：英文把 utilize 换成 use、prior to 换成 before；中文删掉虚动词，比如「进行优化」直接写「优化」。
• 句式：提示英文被动语态、一句里用了三个以上的「的」，以及「赋能」「闭环」这类套话。
• 中文词表：错别字（登陆→登录）、含糊的量词（尽快、若干、大概），以及一词多写（单击→点击、键入→输入）。

默认只提醒、不拦着，也可以用 style: strict 调成「不达标不生成」。

坦白的取舍

它不是那种「装了你就再也离不开」的工具，而是一个明确知道自己边界的小 skill。作者的取舍写在明面上：提速在「轻上下文」环境里稳定成立，但在重上下文环境里，多出来的两轮对话可能让总花费不降反升；高频模式会为每个结论都生成一页，好处是不用每次开口要页面，代价是页面会越堆越多（可以随时 am clean 清理）。

此外更新是手动的，工具每周在后台向 GitHub 查一次版本号，不上传任何内容，有新版本时才提醒你。运行时依赖只有 marked 和 @dagrejs/dagre 两个，打包时一起打进 am.mjs。

项目背景也值得一提：作者说自己试过让 Agent 直接写 HTML，页面不错但太慢，一页要等一两分钟，大半时间花在重复输出 CSS 上；画流程图更麻烦，模型得自己算 SVG 坐标，箭头经常指到空白处。所以才有了「模型只写内容、排版交给工具」这个分工。仓库地址：github.com/QingYunA/answer-me-with-html，也可以在 LINUX DO 社区讨论。

小结

Answer me with HTML 抓住了一个正在变得普遍的痛点：AI 的输出越来越长，人却越来越难跟上。它没有去卷模型能力，而是把「表达」这件事工程化——用一份极短的稿件换一页能看懂的网页，把 token 花在内容而不是版面上。对于每天和 Agent 打交道、又不想读文字墙的人来说，这是个值得装上的小工具。装上一句话，剩下的交给它。