从"作答"到"交付物"：为什么 HTML 是 Agent 时代回答的标准答案

【免费下载链接】answer-me-with-htmlAnswer me with HTML — an agent skill that answers hard questions with a one-page HTML you can actually read. 让 AI Agent 用一页 HTML 回答复杂问题。项目地址: https://gitcode.com/gh_mirrors/an/answer-me-with-html

当你向一个 AI Agent 抛出"讲讲 TCP 三次握手"这样的问题，过去两年里最常见的结局是：屏幕上滚过几百行 Markdown 格式的纯文本，读起来像一份没有目录的说明书。而在 2025 年之后的社区讨论里，"作答"这个词本身正在被重构——Claude Code 的子代理坚持"先抓文档再作答"，Hister 让 AI 在个人索引上"检索、预览与作答"，lmarena 的 P2L 功能用对话方式让用户挑出"最适合作答的模型"。这些尝试指向同一个方向：回答的质量不再由"说了什么"决定，而由"以什么形态交付"决定。

answer-me-with-html 这个开源项目把这件事做到了一个可度量的程度：同一个模型、同一个问题，直接要求它输出 HTML，它平均要写 4,893 个 token、耗时 31 秒；换成这个 skill，模型只写一份 612 个 token 的 Markdown 稿件，12 秒后你拿到一页带图表、可点按、可离线打开的单文件 HTML。这篇文章从源码与基准数据出发，拆解"为什么 HTML 正在成为 Agent 回答的标准交付物"，以及这条路上的瓶颈、分工与下一步。

一、文字墙不是信息，是信息差的证据

纯文本作答的硬伤可以概括为三条：线性（一段接一段，无法表达"谁连接谁"）、无结构（关系、时序、状态迁移全靠读者脑补）、不可交互（看完就结束，无法在页面上做选择或留批注）。

英国卫生安全局在 PubHealthBench 基准上观察到的现象很有代表性：24 个模型在选择题上的表现都相当不错，但一旦进入自由作答，局限立刻暴露。选择题本身是一种"被结构化的作答"——选项替模型完成了信息组织；而自由文本要求模型自己承担全部的结构化工作，这正是其薄弱环节。结论很直接：模型并不缺知识，缺的是把知识组织成可读形态的能力。

Andrej Karpathy 在讨论 LLM 输出时提出过一个观点：当模型承担越来越多的工作，"跟上它的输出"反而成了人的瓶颈，一张图或一个页面远比一大段文字更容易消化。这句话点破了问题的本质——瓶颈已经从"生成"转移到"消费"。

这个仓库里最直观的证据是那张对比图：同一个 TCP 问题，左边是终端里的一堵文字墙，右边是带时序图、状态图和标志位表格的一页：

二、模型写的是内容，不是标签：token 都花在哪了

有人会问：现在的模型写 HTML 已经不错了，为什么不直接让它写？

答案是：模型手写的 HTML 里，真正算"内容"的部分少得可怜。项目统计了 9 页模型直接手写的 HTML（结果固化在 bench/corpus/tokens.json），平均 4,893 个 token，构成如下：

也就是说，模型手写 HTML 时，约 79% 的输出 token 花在了版式与绘制上，只有 21% 是知识本身。更糟的是，让模型手算 SVG 坐标的结果是"箭头经常指向空白处"——它把精力浪费在了它最不擅长的事情上。

于是这个项目确立了一条最核心的分工原则，写在 skills/answer-me-with-html/SKILL.md 的第一行：模型只写内容稿（扩展 Markdown），amCLI 负责全部排版、配色、暗黑模式和图表坐标，模型绝不手写 HTML / CSS / SVG。用 examples/architecture.md 里那张流程图的说法：模型决定讲什么、分几个面板、写关系与数据；CLI 负责排版、配色、计算图形坐标（借助 dagre 自动布局）和执行写作检查。

三、一页 HTML 的产品逻辑：可点按、可回读、可复用

HTML 之所以能成为交付物，不只是因为它"能显示"，而是因为它把回答变成了一个可操作的对象。

可点按：按信息的形状选组件。页面由 2 到 8 个面板组成，每个面板回答一个子问题，组件按信息形态匹配（注册表见 src/components/index.js）：流程与调用链用flow，消息往来用sequence，目录与模块用tree，历史与阶段用timeline，数据模型用er，逐词批注用annot，待定决策用ask。以 TCP 握手为例（完整稿件见 examples/tcp.en.md），一份只有几十行的稿件同时产出时序图、状态机、标志位表格和"为什么必须是三次"的结论面板，读者不用在正文里来回翻找关系。

可回读：单文件、离线、源稿还在。每一页都是单个.html文件，没有 CDN 链接、没有网络字体，离线能打开，方便分享（docs/reference.zh-CN.md）。页面内部嵌入生成它的那份 Markdown 源稿（隐藏的#am-source），点"复制源稿"即可取回；只改一个面板时用am patch原地替换对应##段落，不必重渲整页（src/cli.js）。页面右上角还能随时切换 blueprint / shadcn / paper 三套主题与明暗模式。更值得注意的是它对安全的处理：稿件里的<script>、<style>、<iframe>等危险标签会被过滤并按文字显示（src/raw-html.js），防止引用的不可信文本变成注入。

可复用：页面成为与 Agent 对话的协议。这是纯文本永远做不到的一层。每个面板都有评论入口，ask组件在页面上呈现决策选项（建议项默认选中），读者选择、批注后点"回复"，页面把决定与评论汇总成一段结构化的 Markdown 回复——以# Re: <页面标题>开头，逐条列出"确认了建议 / 未作答，保留建议"——粘贴回对话即可让 Agent 继续执行（生成逻辑在 src/runtime/reply-text.js，交互实现在 src/runtime/reply.js）。选择与评论通过 localStorage 持久化，刷新页面不丢。这意味着回答不再是终态文本，而是可以被审阅、被修改、被回传的工作产物。

代码部分还解决了"可信度"问题：```ts src=server/routes.ts lines=18-30直接按行号引用项目里的真实文件，页面上的代码不是模型复述的，而是磁盘上的原物；按惯例存放密钥的文件会被拒绝嵌入。

四、快 2.6 倍、省 8 倍 token：基准数据说明了什么

这条"模型写内容、CLI 写版式"的路到底值不值，项目用可控实验回答了（完整方法论与原始数据在 bench/README.md，可复现）。同一问题、同一模型（Claude Sonnet 5.5）、每种方式各跑 3 次取中位数：

两组数字值得分别解读：

• 输出 token 少 8 倍，收益远不止省钱。输出越少，等待越短，更重要的是模型把注意力全部留给内容本身，出错的概率随之下降。当稿件出现语法错误时，CLI 会返回出错行号、组件名和正确示例，Agent 通常一次就能改对——这是"把坐标计算交给确定性代码"的直接红利。
• 花费只省 15%，因为输出只是账单的一部分。项目把费用精确拆解后发现：直接写 HTML 时输出仅占总花费的 55%，其余大头是缓存写入与读取；而 skill 路径需要多轮读取、多载入约 4,000 个 token 的指令。换句话说，即便模型一个输出 token 都不写，最多也只能省下那 55%——这也解释了为什么"让模型手写 HTML"这条路在成本上天生有天花板。

在加载很重的真实环境中，收益进一步放大：输出 token 少 7.2 倍、快 3.5 倍、花费省 37%。

五、下一步：从页面到视频，从"问一次"到"常驻"

如果页面是"回答的交付物"，那视频就是"回答的下一步形态"。Karpathy 给 LLM 理解力画的阶梯，终点是解释型视频。这个项目用同一套分工把它实现了：am video把一份带旁白行的稿件渲染成 3Blue1Brown 风格的播放页——图表随旁白逐行构建，镜头跟随[节点名]聚焦，语音内置在页面里、离线可播。小规模测试中，手写一个自动播放视频页面要 27,839 个 token、202 秒，am video只需 1,566 个 token、17 秒——少 17.8 倍、快 11.8 倍。导出视频文件甚至不需要 ffmpeg：播放页用浏览器自带的 WebCodecs 编码 WebM（src/runtime/video-export.js），--mp4才走本机 Chrome 加 ffmpeg 的路线（src/video/export.js）。

另一个方向是"常驻"。默认关闭的 always-on 模式让 Agent 在每次给出结论、总结、计划或对比时，都附带一页 2 到 4 个面板的小页面，渲染时用--no-open不打断你，路径贴在回复末尾。回答从"你开口才生成"变成"每个结论都带交付物"——闲聊和一两句话的回复维持原样，纯文本的适用边界被清晰地保留下来。

把这几件事连起来看，答案形态的演进脉络是清晰的：自由文本 → 结构化页面 → 可回传的交互页 → 解释视频。每一步都在做同一件事——把模型的输出从"需要读者费力消化的一维文本"，转成"人可以扫读、点按、批注、带回修改的多维交付物"。HTML 之所以成为这个进程的标准答案，不是因为它是最终形态，而是因为它同时具备三个别的介质没有的性质：几乎零成本的解析与渲染生态、单文件离线可用的可携带性，以及页面内嵌结构化数据后与 Agent 对话的协议能力。文本回答了问题，而 HTML 交付了答案——这两者之间的差距，正是 Agent 时代"作答"与"交付物"之间的距离。

【免费下载链接】answer-me-with-htmlAnswer me with HTML — an agent skill that answers hard questions with a one-page HTML you can actually read. 让 AI Agent 用一页 HTML 回答复杂问题。项目地址: https://gitcode.com/gh_mirrors/an/answer-me-with-html