又一个爆火的 Skill：让 AI 把几百行复杂回答，压成一页 HTML

最近在 GitHub 上刷到一个 Skill，叫 answer-me-with-html，火得有点快。我点进去看的时候，开源才两周多，Star 已经 3600 多了。我自己装上用了几天，发现确实是好用啊，这篇就聊聊它到底是个什么东西。 项目简介 它装在 Claude Code、Codex、Cursor 这类工具里，装完不用配置。我们照常提问，碰到复杂一点的问题，回答会直接变成一页排版好的 HTML，图、表、代码块都在上面，浏览器打开就能读，不用再啃一屏文字。 我举个例子吧。以前问 AI「讲讲 TCP 三次握手和四次挥手」，它能给我写出上千字，客户端发了什么、服务端回了什么、状态怎么变的，全堆在段落里，我看完脑子里其实还是乱的。现在同样的问题丢给它，出来的是一页带时序图、状态迁移图和标志位对照表的页面，谁先发的 SYN、ACK 在哪一步，扫一眼就理清楚了。 出不出页面，AI 自己判断：关系复杂、流程多、要做几项对比，它才出；一句话能说清，就照常回。想主动要页面也行，直接说「用 HTML 讲一下……」就可以。 实际上手体验 安装这块其实没什么好多说的。我当时也没看教程，就把项目里那段安装指令原样复制下来，贴给了我正在用的 Agent，让它自己照着做。它自己去查了 Node.js 的版本（要 20 以上才行），自己装，装完还自己做了一页页面验证效果，最后给我发了份汇报。 整个过程我就点了几下确认，如果你习惯用命令行，也可以直接跑 npx skills add QingYunA/answer-me-with-html，安装器会问你要装到哪个 Agent，它支持的有 70 多种。 装完以后，我挑了几个平时工作里真会派给 AI 的活试了试。提示词我原样贴在下面，大家有兴趣可以直接拿去用。 1、调研最近几个月 GitHub 上的高增长项目： 调研最近三个月 GitHub 上 Star 增长最快的 5 个开源项目，给出每个项目的行业方向和发展趋势，最后给出一个整体的结论 这种调研放在以前，AI 能给我写出几千字的分析报告，看着头疼。现在一页就看完了，每个项目占一行，方向、趋势、数据都在表里排着，页面最后单独放了一块整体结论。 2、梳理技术架构的演变： 梳理国内 Java 过去十年微服务主流架构的演变历程 它整理出来一条完整的时间线，每个阶段用的什么主流方案、有哪些关键节点，都标在上面了，阶段之间怎么更替的也有线连着，顺着看一遍，十年怎么变过来的就清楚了。 如果不用 answer-me-with-html，可以看看 AI 给了我们多少内容，真没耐心看完： 3、做同类产品的综合对比： 统计 WorkBuddy、豆包、Qoder、Zcode、DeepSeek 等国内几大 Agent 的增长率、用户数等数据，综合比较，给出分析 这次出来的是一张多维对比表，配了图表，几家差在哪直接就能看到，页面最后也附了它给出的分析结论。 这几个活派下来，我感觉它出页面的时机把握得还可以，简单的问题不会硬出，该出的也都没漏掉。 为什么不直接让 AI 写 HTML 现在的模型写 HTML 已经写得不错了，问题是它写的大部分都不是内容。 作者在 README 里说，他数了 9 页模型直接手写出来的 HTML，平均下来一页要 4893 个 token。这些 token 都花在哪了，他拆出来算了笔账： 页面里的部分 占比 用这个 skill 之后 SVG 图的坐标和路径 47% CLI 生成 CSS 15% CLI 生成 HTML 标签 17% CLI 生成 正文文字 21% 模型写，写成 Markdown 直接要 HTML，模型近八成输出都花在排版和画图上，都是机械活。换成用这个 skill 的话，模型只需要写一份 Markdown 稿件，同样的问题，稿件平均只有 612 个 token，差不多是手写 HTML 的八分之一。 写得少，等的时间就短。作者自己跑了一组对比测试，3 个题目，每个题目各跑 3 次取中位数，用的模型是 Claude Sonnet 5.5，环境就是普通的 Claude Code： 直接要 HTML Answer me with HTML 模型要写的 token 4,893 612（少 8 倍） 耗时 31 秒 12 秒（快 2.6 倍） 不过有个地方得说清楚，不然容易被这组数字带偏。花费的下降幅度没有 token 那么夸张，实际上只便宜了 15% 左右。 原因也不难想，不管你用不用这个 skill，AI 每一轮都还要读系统提示、读你提的问题、读之前的对话记录，这部分开销是省不掉的。 页面的交互功能 这几天用下来，我发现生成出来的页面不光是拿来看的，上面还能做不少事。 页面右上角有一排按钮，可以换主题，也可以切亮色暗色。 主题一共三套，blueprint 是图纸的风格，shadcn 是卡片的风格，paper 比较适合读长文。默认情况下不用我们操心选哪个，它会根据内容自己定，长文就用 paper，图表多的就用 blueprint。 一个是在页面上直接回复。我们可以对着任意一个面板写评论，AI 如果有拿不定主意的地方，会把待定的问题做成可以点选的选项，它建议的那项默认是选中的。 点一下回复按钮，我们的选择和评论就会合成一段文字，复制贴回给 AI 就行了。我在调研那个页面里试过一次，它问我接下来想重点分析哪个方向，我勾完贴回去，它就接着往下做了，比之前来回打字说「第三段那个选项」方便多了。 另一个是可以找回原稿。每一页里面都内嵌了生成它的那份 Markdown 原稿，点一下复制源稿就能拿出来。觉得哪里写得不对，把原稿贴给 AI 让它改，重新渲染一版就好。 还有个细节我觉得做得不错。如果内容涉及代码，它可以直接引用我们项目文件里的真实代码，页面上显示的就是从文件里读出来的，不用担心 AI 抄错。 当然，当前目录以外的文件、还有存密钥的文件，它是读不了的，这个限制加得挺合理。 生成讲解视频 除了页面，它还能把回答做成讲解视频。我当时是接着架构演变那个话题，顺口说了一句： 给微服务架构演变做个 3Blue1Brown 风格的视频 出来的也是一个页面，不过这次是图会跟着旁白一步步画出来，边上有章节栏可以跳转，还有倍速按钮。配音是直接内嵌在页面里的，离线也能播。 想存成视频文件的话，页面上有个导出按钮，浏览器自己就能编码下载，不用装 ffmpeg；在命令行里加个 --webm 参数也行。要 MP4 格式的话就加 --mp4，这个倒是要用到 ffmpeg。 视频这块省得更多：作者的小测试里，输出 token 少约 18 倍，快约 12 倍。原因一样：画面由程序生成，模型只写旁白。平时它不会自己做视频，只有我们主动开口要了才做。 高频模式 默认情况下，只有复杂问题才会出页面。不过 README 里还提到一个高频模式，打开以后，只要这一轮对话里给出了结论、总结、方案或者对比，哪怕回答很短，AI 也会顺手生成一页 2 到 4 个面板的小页面，页面路径附在回复的最后。 我自己开了一天试了试，平时问个概念、让它给个结论，它都会顺手出一页小页面。这些页面只在后台生成，不会弹出来打断你手上的事，攒着回头一起翻也行。闲聊那种没有结论的一两句话，它是不出页面的。 想打开的话，把 README 里那段规则贴给 AI，让它写进自己的规则文件就行，比如 ~/.claude/CLAUDE.md 或者 AGENTS.md。哪天不想用了，把那条规则删掉就关了。页面多了以后会堆在 ~/.answer-me-with-html/ 这个目录里，跟 AI 说一声清理，它删之前会先问一声。 写在最后 我愿意写它，主要是分工清楚：模型只管写内容，排版交给程序，省 token、出页快，确实好用。 平时用 AI 多、常做调研对比、要方案的人，非常适合装一个。问简单问题它也不会乱出页面，这点做得挺好。 要留意的地方也有两个：生成的页面都是本地文件，堆多了记得清理；更新得手动，跟 AI 说一声更新一下就行。 开源地址 https://github.com/QingYunA/answer-me-with-html