让AI把复杂问题答成一张可读的 HTML 页面

先说结论

Answer Me With HTML 是一个值得放进工具箱的小技能。它解决的是 Agent 在 CLI 里回答复杂问题时常见的毛病——文字太长、结构太散、读完还是抓不住重点。它不生成新模型，只是改变呈现方式：让模型把答案排成一页 HTML，配标题、配小节、配必要的图示。

真正的问题

和AI协作时，越是想把问题讲透，回答越容易变成一堵墙。

一段两千字的 Markdown 解说，技术上没错，但在 CLI 里读起来很费劲。问题表现在三件事：

• 段落堆在一起，分不清主次。
• 没有图示，抽象概念只能靠脑补。
• 想前后对照，必须自己滚动搜索。

终端环境对结构化展示很挑剔。Markdown 在这里只剩粗体和列表，没办法分栏、加卡片、画示意图。复杂问题的解释一旦只能靠文字堆，门槛就上去了。

怎么做更省力

核心思路很简单：把“解释”从纯文本，换成“HTML 页面”。

具体做法分三步：

• 把问题拆解成几个并列的解答点，例如原理、步骤、风险、替代方案。
• 为每个点配独立的小节，配对应的小标题、说明和示例。
• 在 HTML 里用卡片、网格、对比表，把关系画出来，而不是写出来。

复杂问题一旦被排成一页 HTML，阅读路径就从“自己找”变成“跟着看”。这是它一周内拿下 1048 个 star 的根本原因。

<table> <thead><tr><th>输入方式</th><th>适合场景</th><th>阅读成本</th><th>维护成本</th></tr></thead> <tbody> <tr><td>纯 Markdown 长文</td><td>结论明确、点少</td><td>低</td><td>极低</td></tr> <tr><td>Answer Me With HTML</td><td>多分支、需对照、需图示</td><td>中</td><td>中</td></tr> <tr><td>完整 Web 应用</td><td>要交互、要后端</td><td>极低</td><td>极高</td></tr> </tbody> </table>

上表说明：当问题处在中间地带，HTML 单页比 Markdown 长文更易读，比完整 Web 应用更省力。它不是万能解，但正好填了 CLI 与网页之间那道空缺。

哪些坑要避开

这个技能有三个常被忽略的代价。

• 依赖模型本身。模型如果理解不到位，再好的排版也只是把混乱排整齐。
• HTML 输出有限度。图表只能画示意，不支持交互式探索，复杂数据仍要回到图表工具。
• 不是所有问题都适用。问一句“今天天气怎么样”，硬上 HTML 反而是过度包装。

另外，HTML 页面要可读，需要作者对页面结构有判断。如果只是机械地把段落转成 <div>，效果不会比 Markdown 好多少。

现在就能动手

如果你在用 Claude Code 这类 CLI 里的 Agent，先做两件事：

• 找一次最近被绕晕的解释场景，截下原文。
• 把同一个问题交给 Answer Me With HTML，对比两份输出，重点看结构和读完后能否讲清楚。

如果你是写工具或写文档的人，可以从 README 入手：把“安装”和“一句话示例”改成 HTML 卡片。读者扫一眼就能上手，比一段配置说明更入眼。

如果你的工作需要把流程图、架构图搬进 CLI，可以用 流程图架构助手 先出图，再用这个技能把图嵌进 HTML 页面，让答案同时有结构、有图示。