answer-me-with-html：把 AI 长回答变成一页能读的 HTML
answer-me-with-html：模型只写草稿，自带 CLI 排版画图，把 AI 长回答变成一页能读的 HTML，token 约为手写 1/8。
Skill 资料
npx skills add QingYunA/answer-me-with-html --skill answer-me-with-html
问智能体一个技术原理，它回六段文字，读完像没读；让它画个图，它一行行手写 SVG 坐标，你干等半分钟。answer-me-with-html 是开发者 QingYunA 2026 年 10 月 2 日开源的 Agent Skill（MIT 协议）：模型只写一份很短的 Markdown 草稿，排版、配色、画图全部交给 skill 自带的 CLI，最终产出一个不引用任何 CDN 的单页 HTML 文件，离线也能打开。公众号「开源日记」10 月 7 日推荐了它；截至 2026-10-08，这个创建仅六天的仓库已有 2,038 星。
模型只写草稿
SKILL.md 开头就立了规矩：不要手写 HTML、CSS 和 SVG。模型的工作只剩两件——判断这个问题值不值得用一页纸讲（概念关联 ≥ 3、有流程或时序、跨 ≥ 3 个维度的对比才算值得），然后写内容草稿；选模板、排面板、算坐标全由单文件 CLI am 完成（无依赖，只要 Node.js 20+）。为什么要这样拆？官方统计了模型手写的 9 个页面：真正的内容只占 token 的 21%，坐标、样式和标签全是体力活：
| 页面组成 | token 占比 | 这个 skill 里 |
|---|---|---|
| SVG 图（坐标和路径） | 47% | CLI 写 |
| CSS | 15% | CLI 写 |
| HTML 标签 | 17% | CLI 写 |
| 文本 | 21% | 模型写（Markdown） |
同一批问题的实测（3 题 × 3 次取中位数，Claude Sonnet 5.5，2026-10-07 基准）：模型输出从 4,893 token 降到 612，约 8 倍；耗时从 31 秒降到 12 秒。组件按信息形状选：流程用 flow、消息时序用 sequence、层级目录用 tree、历史阶段用 timeline、多维对比直接写 Markdown 表格，单元格里写 ok/no/warn，渲染成 ✓ ✗ ！徽章。坐标是 CLI 算出来的，箭头不会指向空白，标签不会截断。页面主题有 blueprint 图纸、shadcn 卡片、paper 长文三套，明暗可切；草稿语言跟随提问语言，中英日和繁中都支持。
受控写作管废话
answer-me-with-html 对正文文本另有一套约束，规则取自 ASD-STE100 受控英语——最初用于编写飞机维修手册的写作规范：一个句子说一件事、主动语态、一个词只有一个意思、步骤英文不超过 20 词（中文 35 字）。CLI 每次渲染时顺带检查：句子太长、被动语态、套话会被标出来；中文部分基于开源的 Simplified Technical Chinese，连轻动词（进行优化 → 优化）、错别字（登陆 → 登录）、模糊量词（尽快、若干）都提醒。默认只提醒不拦截，style: strict 下不达标不出页，style: off 可关闭。
一句话出讲解视频
am video 是 answer-me-with-html 的视频命令：说一句「给 TCP 握手做 3b1b 风格的视频」，智能体写一份每行旁白对应一帧的稿子，am video 命令把它变成播放页：图示逐拍出现、箭头一笔笔画、镜头跟着旁白走。官方对比（TCP 握手一题，2026-10-05 实测）：手写视频页要 27,839 token、202 秒；am video 只要 1,566 token、17 秒，约 17.8 倍的差距。配音优先走 ElevenLabs，没配 key 就用系统语音；加 --mp4 导出 1080p 视频，需要 Chrome、ffmpeg 和 Node.js 22+。
适合谁
answer-me-with-html 最适合常让智能体讲架构、比方案、查问题的人——问 Redis 和 Memcached 怎么选，得到的是一张对比表加一行结论，而不是五段拿不定主意的分析。它和 image-blaster 是同一个思路：模型只写内容和声明，重活交给程序；同栏目里 threejs-architecture-effects 则是把 3D 坐标从模型手里拿走。几点要先知道：
- 账单降幅远小于 token 降幅：官方基准里账单只降约 15%，因为每一轮照样要读系统提示词、问题和上下文，skill 说明本身约占 4,000 token（进缓存后后续页面不再重复付这笔）。
- 一句话能答的不会出页面：SKILL.md 明确小问题和闲聊不触发——上下文很大时页面反而更贵，这些边界 README 里写得很清楚。
- 仓库很新：2026-10-02 创建，六天 2,038 星，迭代快也意味着行为可能还会变。
安装要 Node.js 20+，无需 npm install。Claude Code 用插件市场装，其他智能体一条 npx skills add QingYunA/answer-me-with-html（facts 面板有完整命令，安装器 vercel-labs/skills 支持 70 多种智能体）。装完建议把 always-on 规则写进 CLAUDE.md 或 AGENTS.md，让每个结论都自动带一页。