Andrej Karpathy 在 X 上发过的一条帖子。他说，当 LLM 的输出越来越长，跟不上它反而是我们自己。
模型每秒钟能吐出几千个 token，但人类眼球处理长段文本的带宽并没有随着 GPT 的迭代变宽。我们需要的不是更多的字，而是更好的呈现方式。
然后我遇到了 answer-me-with-html —— 一个装在 Agent 里的 Skill，让模型在回答复杂问题时，直接交付一份可视化的 HTML 页面，而不是一屏文字。
这个项目三天前在 GitHub 上出现，目前已经冲到了 1.4K Star。
📦 6 Parts + Conclusion
👉 滑动
PART 01
项目简介
PART 02
核心亮点
PART 03
九种组件
PART 04
其他特性
PART 05
三种安装方式
PART ///
写在最后
01
PART
项目简介
answer-me-with-html 不是一个独立的 Web App，也不是一个让你写 prompt 的网站。
它是一个 Agent Skill，你把它装进你每天在用的 AI Coding Agent 里 —— Claude Code、Codex、Cursor、OpenCode，统统支持。
装好之后你就像以前一样提问，Agent 自己判断这是"一个值得做页面的问题"，然后它只写一段很短的 Markdown 草稿（标题 + 几个组件指令），剩下的布局、配色、画图、导出，全部交给 Skill 自带的 CLI 工具 am 去完成。
之后浏览器会弹出一份排版好的 HTML 页面，直接可以读，可以分享。
02
PART
核心亮点
answer-me-with-html 的核心哲学就一句话：让模型写它擅长的内容，把排版、布局、画图这些机械活交给程序。
README 里给了非常扎实的基准测试数据，我把表格贴在下面（来自原项目 bench 目录，模型为 Claude Sonnet 5.5，三种问题、各跑三次取中位数）：
指标直接让模型写 HTML用 answer-me-with-html优势倍率输出 token5,3418706.1× 更少耗时33 秒12 秒2.8× 更快单次成本$0.092$0.06727% 更便宜
差距在"解释视频"场景里拉得更开。
项目支持生成 3Blue1Brown 风格的无配音讲解视频。
同样是 TCP 握手主题，直接生成视频页面要 27,839 个 token、202 秒；用 am video 只要 1,566 个 token、17 秒 —— 17.8× token 节省，11.8× 加速。
03
PART
九种组件
Agent 会根据问题的类型自动选组件，不需要你手动指定。组件列表：
flow 架构图、调用链、决策分支。自动布局，支持分组、判断节点、数据库节点。
sequence 多角色之间按时间发生的消息交换，典型场景就是 TCP 握手。
tree 目录结构、模块树、分类体系。
timeline 历史事件、发布记录、项目阶段。
limits 一个值相对于它的上限是多少。
annot 一句话逐词标注，标问题词和替换建议。
kv 元数据、图纸标题块。
callout 结论、提示、警告。
table 多维度对比表。单元格里写 ok / no / warn 会自动渲染成 ✓ / ✗ / !。
04
PART
其他特性
自动布局，不画图也不错位。
写错了会自己告诉你怎么改。 草稿里的语法错误，CLI 会报行号、组件名，还会附一个正确例子。Agent 通常一轮就能修好。
双主题 + 明暗模式。 Blueprint 主题是工程蓝图风（白底、蓝色线条），shadcn 主题是干净的卡片风。每个主题都有 light / dark / auto 三种模式可以切换。
页面右上角的按钮直接点，也可以在草稿 frontmatter 里写 theme: blueprint 覆盖默认。
STE 写作检查。 这是 README 里最"额外"的一个功能，灵感来自 ASD-STE100（航空维护手册用的受控英语）。
项目把能被机器检查的 STE 规则翻译成了中英文规则集，每次渲染都会跑一遍：
英文句子不超过 20 词，中文不超过 35 字；描述不超过 25 词 / 45 字；单段落不超过 6 句。
常用词偏好，用 use 不用 utilize，用 优化 不用 进行优化。
中文错别字和模糊词（尽快、若干、大概、多次），以及"以上 / 以下 / 以内"跟数字连用时的歧义问题。
英文被动语态、中文一句里三个以上的"的"、"赋能""闭环"等套话。
默认是 warn 模式，只提示不改内容；设置成 strict 会拒绝渲染。
单文件无依赖。 生成出来的 .html 页面不引用任何 CDN 或网络字体，丢给别人双击就能开，也方便上传到内网或归档。
05
PART
三种安装方式
方式一：让你的 Agent 自己装（推荐）
直接复制这段话丢给 Claude Code / Codex / Cursor / OpenCode：
Install the Answer me with HTML skill: run
npx -y skills add QingYunA/answer-me-with-html -g -y,
and pass -a with your own agent name
(for Claude Code, -a claude-code).
Then read its SKILL.md and use it to make a page that
explains the TCP three-way handshake, so we know it works.
Agent 会自己跑安装、自己读 SKILL.md、自己做一张 TCP 握手工页来测试。
方式二：Claude Code 插件市场
在 Claude Code 里直接跑：
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html
方式三：手动安装
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 的 Skill 目录：Codex ~/.codex/skills/、Cursor ~/.cursor/skills/、OpenCode ~/.config/opencode/skill/。
安装完了怎么用
什么都不用配置。装好之后就像以前一样提问就行。如果你想手动调用 CLI：
am render draft.md # 把草稿渲染成 HTML
am video draft.md # 生成讲解视频页面
am video draft.md --mp4 # 额外导出 mp4（要 Chrome + ffmpeg + Node 22）
am config # 看当前配置
am config set open off # 关掉自动弹浏览器
am help <component> # 查某个组件的完整语法
常用配置项
没有配置文件要手动编辑，全部通过 slash 命令或 CLI 改：
键默认作用openon生成后自动弹浏览器。关了免得打断节奏alwayson总是开启模式（见下）themeblueprint默认主题：blueprint 或 shadcnmodeauto颜色模式：auto / light / darkstyle80STE 写作检查：off / 80（warn） / strict（拒绝渲染）voiceauto视频旁白：auto / elevenlabs / local / system / off
配置文件实际存在 ~/.answer-me-with-html/config.json 里，但你基本不需要去碰它。
Always-on 模式
默认情况下，Agent 只在"判断这问题值得做页面"时才会生成。如果你希望 每一次回答都带一张小页面（哪怕是一个对比、一个计划、一个总结），开 always-on 模式。
开了之后 Agent 每回合会收到一条约 90 token 的短提醒。每次它给出一个结论、对比、计划、总结时，都会自动附一张 2-4 个面板的小页面、路径贴在回复末尾。聊天、命令输出、纯文本请求不会触发，也不会弹浏览器。
Claude Code 再装一个插件就行：
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html
其他 Agent 的话，把 README 里那段规则粘贴进你的全局规则文件（比如 AGENTS.md）。
///
LAST
写在最后
answer-me-with-html 它在"让模型写内容、让程序做排版"这个切面上做得特别干净 —— 模型只写 Markdown + 几个组件指令，剩下全部交给 CLI，token 省出一个数量级。
Karpathy 那条 X 帖的核心观察值得我们再读一遍：当 LLM 的输出越来越强，真正的瓶颈变成了我们能不能跟得上。
answer-me-with-html 把这条洞察落成了一个真正能用的工具。它帮 Agent 回答更高效，也帮我们跟得上那个输出越来越长的模型。
GitHub：https://github.com/QingYunA/answer-me-with-html
如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️
在看你就赞赞我！
