让AI讲原理不再是一坨文字：这个Agent Skill直接渲染成一页HTML

我让 AI 讲个技术原理，它回我六段文字，读完像没读一样。

Answer me with HTML 就是来解决这件事的：它是一个开源的 Agent Skill，把应该画图、应该列出来的结论直接渲染成一页 HTML。

讲原理、比方案这类问题交给它正合适。它会先判断这个问题是否值得用一页纸来呈现，如果值得，模型只写一个很短的草稿，然后排版、配色、画图全部交给自带的 CLI，50 毫秒就出一张。

最后给你一个单独的 HTML 文件，不引用任何 CDN，没有网络也能用浏览器打开看。

模型只负责写内容，排版由程序来完成

直接让模型输出 HTML 代码，页面也能看。但是每一条 CSS、每一个 SVG 坐标都要它一字一句打出来，内容一多就得等很久。

这个 skill 把活拆开了：模型只写内容和组件声明，选模板、排面板、算坐标全由 CLI 完成。

官方基准：直接要 HTML 需要 5341 个输出 token，这里只要 870 个，少了 6.1 倍。时间从原来的 33 秒缩短到 12 秒，还节省 27% 的成本，页面反而更好看了。

比如问它：Redis 和 Memcached 应该怎么选

以前的回答是五到六段话，读完还是拿不定主意。

用上 Answer me with HTML，你会得到一个对比表，涵盖内存模型、持久化、线程模型、适用场景等各个维度，每一行代表一个维度。模型在单元格里只写 ok、no、warn，页面渲染出来就是 ✓ ✗ !，扫一眼就明白。

表格下面还有一条结论，什么场景用谁说得清清楚楚，照着选就行。

换一个题目也一样：问 TCP 三次握手，给你时序图和状态图；问仓库的模块关系，给你目录树和调用图。

手写的时候箭头经常指向空白的地方。交给 CLI 算就不会：九种组件按内容挑选，坐标和面板都是算出来的，标签不截断，箭头不飘移。

一句话生成 3b1b 风格的讲解视频

说一句“给 TCP 握手做 3b1b 风格的视频”，Agent 写一份带旁白的稿子，每行旁白对应一帧。

剩下的交给 skill 自带的命令行工具 am video。跑一条 am video，稿子就变成一个播放页：图示一拍一拍地出现，箭头一笔一笔地画，镜头跟着旁白走，说到哪儿亮到哪儿。

官方对比数据摆在下面：手写视频页需要 27839 个输出 token 和 202 秒；am video 只要 1566 个、17 秒。

配音优先使用 ElevenLabs，没有配音就用系统自带的语音；加 --mp4 可以导出 1080p 的视频，需要 Chrome、ffmpeg 和 Node.js 22+。

用 40 年前的航空规范，管住 AI 的废话

它使用了 ASD-STE100，这是一种受控英语，最初用来编写飞机维修手册：句子不能太长，一个词只能表示一个意思。

项目把可以被机器查询的部分做成中英文双语规则，在每次渲染的时候顺便检查：句子太长、废话套话、被动语态会被标出来，中文里“进行优化”会被提醒改成“优化”。

默认只提醒不拦截，要较真的话就开启 strict 模式，达不到要求就不生成。

除了排版之外，页面还有三种风格：blueprint 图纸风、shadcn 卡片风、paper 长文风，CLI 会根据内容来选择。

可以随时切换明暗模式，界面有简体中文、繁体中文、英文、日文。

对于经常让 AI 讲原理、做比较、出方案的人来说，这个 skill 的吸引力是相当明显的。

如何安装 Answer me with HTML

前提是 Node.js 20 以上，不需要 npm install，CLI 已经打包在 skill 里面。

Claude Code 用户安装插件版，执行两条命令：

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

其他 Agent 使用下面的命令安装：

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

支持 Claude Code、Codex、Cursor、OpenCode、Pi 等 70 多种 Agent。安装好之后不需要做任何配置，像平常一样提问就行。

写在最后

一句话就能回答的，它不会给一个页面——因为在上下文很大的环境里，那样反而更贵。这些问题作者都在 README 中写得明明白白，没有藏着。

但大多数时候账是算得过来的：它把排版、配色、画图的工作从模型那里接过来，让模型只管写内容。省下的不只是一次 token，还有你等它一行行输出 CSS 的那半分钟。

你要的不是一个更全的答案，是一个读完不用再读第二遍的答案。

开源地址：https://github.com/QingYunA/answer-me-with-html