把大段 agent 回答变成可读的 HTML 页面

让 agent 解释 TCP 三次握手，你得到的是一面文字墙。Answer me with HTML 用一页回答：时序图、状态图、对比表——一个离线可打开的 .html 文件。关键在于，模型从头到尾没写过 HTML。

为什么这个 Skill 重要

agent 只写一份简短的 Markdown 草稿，skill 自带的 CLI 把它变成成品页面——模板、面板排布、主题、图表坐标都由代码计算，不靠模型猜。README 的实测数据：在 9 个样例页面上，手写 HTML 平均输出 4,893 个 token，草稿只要 612 个，约 1/8；得到回答的中位时间从 31 秒降到 12 秒（3 个话题 × 3 次，Claude Sonnet 5.5）。页面落在 ~/.answer-me-with-html/pages/，是不带任何 CDN 链接和网页字体的单文件，离线可开，也很容易分享。

安装

需要 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

安装器会询问要装进哪些 agent；按 README 的说法，它使用 vercel-labs/skills，支持 70 多个 agent。装完无需任何配置。

实战：解释 TCP 三次握手

1. 像平常一样提问：请解释 TCP 三次握手。
2. agent 用 skill 的组件写草稿——flow、er、sequence、tree、timeline、limits、annot、kv、callout、ask、代码块、表格——然后交给 CLI。
3. 约 50 毫秒后页面生成：CLI 自动选模板、排布图表，并从三个主题（blueprint、shadcn、paper）中选取，均带明暗两种模式。

草稿有错时，CLI 会返回行号、出错的组件和一个正确示例，agent 一次就能修好——按 README 的说法。页面上还有交互：给任何面板写批注、用 ask 组件直接在页面上回答 agent 留下的待定决策，然后按 Reply 把全部内容粘回聊天。

另一种模式值得跑一次：讲解视频。要求来一段「3b1b 风格的 TCP 握手视频」——agent 为每个节拍配一行旁白，am video 渲染出一个逐步搭建图表的播放页。导出在浏览器里完成；--mp4 需要 ffmpeg，--webm 不需要。

技巧

• 打开 always-on 模式（默认关闭，README 推荐开启）：每条结论、总结或对比都会附一个小型 2–4 面板页面，短回答的可读性向长回答看齐。只需往你的规则文件里贴一条规则。
• 草稿会按改编自 ASD-STE100 的规则检查——句子长度、冗长短语、被动语态。默认只警告；严格模式会拒绝不合格的草稿。
• 代码块可以用 src= 和 lines= 引用你文件里的真实代码行，页面上展示的就是真代码；文件夹外的文件和存密钥的文件会被拒绝。
• 每个页面都内嵌了生成它的 Markdown——「Copy source」一键取回草稿。
• 一句话的问题得到一句话的回答：页面值不值得开由 agent 判断，你也可以用「explain it in HTML」强制开启。

何时不用这个 Skill

快速事实查询不需要页面，README 自己的示例就说明了这点：怎么用 ls 显示隐藏文件——不会生成页面，直接给答案。如果你想要的只是一张交互式图表，README 将其与 Archify 对比——后者从 JSON 规格生成一张交互图；GenUI 类插件则把组件留在单一聊天应用内。另外，上文数字是 README 在 Claude Sonnet 5.5 上的基准测试——你的模型和提示词组合会带来不同结果。

查看 排行榜 了解更多 skill。