当 LLM 的输出速度越来越快，真正的瓶颈不再是模型，而是我们人类阅读长文本的带宽。Andrej Karpathy 曾在 X 上指出：模型每秒能吐出几千个 token，但人类眼球处理文本的速度并没有随 GPT 迭代而提升。我们需要的不是更多的字，而是更好的呈现方式。
answer-me-with-html 正是为了解决这一问题而生。它是一个 Agent Skill，可以安装在你每天使用的 AI 编程工具中——Claude Code、Codex、Cursor、OpenCode 全部支持。装好之后，当你提出复杂问题时，Agent 会判断这是一个"值得做页面的问题"，然后生成一份可视化的 HTML 页面，而不是一屏纯文字。
这个项目上线三天，GitHub 已突破 1.4K Star。
项目简介
answer-me-with-html 不是独立的 Web App，也不是让你写 prompt 的网站。它是一个 Agent Skill，安装后你只需像往常一样提问，Agent 会自行判断是否需要生成可视化页面。如果需要，它只写一段简短的 Markdown 草稿（标题 + 几个组件指令），后续的布局、配色、画图、导出，全部交给 Skill 自带的 CLI 工具 am 完成。
最终浏览器会弹出一份排版精美的 HTML 页面，可以直接阅读，也可以分享给团队。
核心亮点
answer-me-with-html 的核心理念是：让模型写它擅长的内容，把排版、布局、画图这些机械活交给程序处理。官方基准测试（Claude Sonnet 5.5，三种问题各跑三次取中位数）显示：
| 指标 | 直接让模型写 HTML | 用 answer-me-with-html | 优势 |
|---|---|---|---|
| 输出 token | 5,341 | 870 | 6.1× 更少 |
| 耗时 | 33 秒 | 12 秒 | 2.8× 更快 |
| 单次成本 | $0.092 | $0.067 | 27% 更便宜 |
差距在"解释视频"场景里更加显著。项目支持生成 3Blue1Brown 风格的无配音讲解视频：
同样是 TCP 握手主题，直接生成视频页面需要 27,839 个 token、202 秒；而用 am video 只需 1,566 个 token、17 秒——17.8× token 节省，11.8× 加速。
九种组件
Agent 会根据问题类型自动选择组件，无需手动指定：
- flow：架构图、调用链、决策分支，自动布局，支持分组、判断节点、数据库节点
- sequence：多角色按时间发生的消息交换，典型场景如 TCP 握手
- tree：目录结构、模块树、分类体系
- timeline：历史事件、发布记录、项目阶段
- limits：一个值相对于上限的比例展示
- annot：一句话逐词标注，标问题词和替换建议
- kv：元数据、图纸标题块
- callout：结论、提示、警告
- table：多维度对比表，单元格写 ok/no/warn 自动渲染为 ✓/✗/!
其他特性
自动布局：无需手动画图，不错位。
语法检查：草稿语法错误时，CLI 会报告行号、组件名并附正确示例，Agent 通常一轮即可修复。
双主题 + 明暗模式：Blueprint 主题（工程蓝图风，白底蓝色线条）和 shadcn 主题（干净卡片风），均支持 light/dark/auto 三种模式。
STE 写作检查：基于 ASD-STE100 航空维护手册受控英语规则，自动检测句子长度、常用词偏好、错别字、模糊词等。默认 warn 模式（只提示），也可设为 strict 模式（拒绝渲染）。
单文件无依赖：生成的 HTML 页面不引用任何 CDN 或网络字体，双击即可打开，方便内网部署和归档。
三种安装方式
方式一：Agent 自动安装（推荐）
将以下命令发送给 Claude Code / Codex / Cursor / OpenCode：
npx -y skills add QingYunA/answer-me-with-html -g -yAgent 会自行完成安装、阅读 SKILL.md，并生成一张测试页面验证效果。
方式二：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
am config # 查看当前配置
am config set open off # 关闭自动弹浏览器
am help # 查组件语法Always-on 模式
默认情况下 Agent 只在"判断问题值得做页面"时生成。开启 always-on 模式后，每次回答都会附带一张 2-4 个面板的小页面，路径贴在回复末尾。聊天、命令输出、纯文本请求不会触发。
写在最后
answer-me-with-html 在"让模型写内容、让程序做排版"这个切面上做得特别干净——模型只负责 Markdown 和组件指令，其余全部交给 CLI，token 节省出一个数量级。
Karpathy 的核心观察值得再读一遍：当 LLM 的输出越来越强，真正的瓶颈变成了我们能否跟得上。answer-me-with-html 将这一洞察落成了一个真正可用的工具，既让 Agent 回答更高效，也帮我们跟上越来越长的模型输出。
