综合 / 人工智能 · 2026-10-07 23:15 · 2 阅读 · 0 赞
Answer me with HTML:让 AI 把原理讲成一页网页
Answer me with HTML 是一个开源 Agent Skill,模型只写内容,排版、配色、画图交给自带 CLI,50 毫秒生成单文件 HTML,还能做 3b1b 风格讲解视频。
我让 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