从作答到交付物为什么 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构成如下页面里的部分占比用 skill 后由谁写SVG 图坐标和路径47%CLICSS15%CLIHTML 标签17%CLI正文文字21%模型写成 Markdown也就是说模型手写 HTML 时约 79% 的输出 token 花在了版式与绘制上只有 21% 是知识本身。更糟的是让模型手算 SVG 坐标的结果是箭头经常指向空白处——它把精力浪费在了它最不擅长的事情上。于是这个项目确立了一条最核心的分工原则写在 skills/answer-me-with-html/SKILL.md 的第一行模型只写内容稿扩展 MarkdownamCLI 负责全部排版、配色、暗黑模式和图表坐标模型绝不手写 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 srcserver/routes.ts lines18-30直接按行号引用项目里的真实文件页面上的代码不是模型复述的而是磁盘上的原物按惯例存放密钥的文件会被拒绝嵌入。四、快 2.6 倍、省 8 倍 token基准数据说明了什么这条模型写内容、CLI 写版式的路到底值不值项目用可控实验回答了完整方法论与原始数据在 bench/README.md可复现。同一问题、同一模型Claude Sonnet 5.5、每种方式各跑 3 次取中位数直接要 HTMLAnswer me with HTML差异模型要写的 token4,893612少 8 倍耗时31 秒12 秒快 2.6 倍两组数字值得分别解读输出 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 编码 WebMsrc/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
