Answer me with HTML 实测让 AI 用一页图文网页回答复杂问题一、一个所有 Agent 用户都遇到的痛点你问 Claude Code、Codex 或者 Cursor 一个稍微复杂点的问题——比如帮我梳理这个仓库的模块关系、“比较一下 Redis 和 Memcached 的取舍”、“解释一下 TCP 三次握手”——它能写很多但最后留给你的往往是一大段文字。能读但费劲能复制但难比较想指出这里我没看懂还得重新用文字描述一遍。问题的本质是复杂内容需要先看见结构再继续追问。而纯文本恰恰丢掉了结构——流程图变成了首先……然后……最后……对比表变成了三段并列的段落状态迁移变成了一串句子。最近在 GitHub 上有一个叫Answer me with HTML的项目QingYunA/answer-me-with-html目前 2500 star专门解决这个问题。它的思路很直接别让 AI 直接写 HTML让它写一份扩展 Markdown再由一个 CLI 渲染成一页图文网页。我把它完整跑了一遍这篇文章记录调研和实测结果。二、它是什么一句话和一张架构图一句话Answer me with HTML 是一个 Agent skill 内置 CLI把 Agent 写的扩展 Markdown 稿件渲染成一个单文件、可离线打开的 HTML 页面。先看它的整体架构——这也是它和直接让 AI 写 HTML最大的区别所在┌─────────────────────────────────────────────────────────────┐ │ 用户提问 │ │ 解释 TCP 三次握手 / Redis 还是 Memcached │ └──────────────────────────┬──────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ AgentClaude Code / Codex / Cursor │ │ │ │ 产出一份「扩展 Markdown 稿件」约 600 token │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ --- │ │ │ │ title: TCP 三次握手 │ │ │ │ cols: 3 │ │ │ │ --- │ │ │ │ ## A 三次握手 {span2} │ │ │ │ mermaid sequenceDiagram num │ │ │ │ 客户端 - 服务器: SYN, seqx │ │ │ │ 服务器 -- 客户端: SYNACK, ackx1 │ │ │ │ │ │ │ └───────────────────────────────────────────────────────┘ │ └──────────────────────────┬──────────────────────────────────┘ │ 稿件交给 CLI ▼ ┌─────────────────────────────────────────────────────────────┐ │ am CLI随 skill 打包本地运行 │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │ │ │ 模板 主题 │ │ 图形自动布局 │ │ 单文件封装 │ │ │ │ sheet/doc │ │ dagre 算坐标 │ │ CSS/SVG 全内联 │ │ │ └──────────────┘ └──────────────┘ └──────────────────┘ │ │ │ │ 约 50ms 后 ──────────────────────────────▶ 单文件 HTML │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────┐ │ ~/.answer-me-with-html/ │ │ pages/*.html │ ← 离线可开零外部依赖 └──────────────────────────┘关键设计模型只负责内容写 Markdown页面结构、CSS、SVG 坐标由CLI 用代码计算。这是它性能优势的根本原因——下一节展开。三、原理为什么不让模型直接写 HTML这是这个项目最有意思的地方。README 里解释得很直接模型可以写 HTML但一页像样的 HTML 会消耗很多 token 在 CSS、HTML 标签、SVG 坐标和重复结构上。内容还没讲完模型先花了很多力气搭页面。项目方统计了 9 页模型手写的 HTML平均 4893 token构成如下页面组成占比谁来做SVG 图形坐标与路径47%CLI 生成CSS 样式15%CLI 生成HTML 标签17%CLI 生成文字内容21%模型写Markdown也就是说手写 HTML 里有约 79% 的 token 花在了搭页面而不是讲内容上。改成这个 skill 后模型只需写 Markdown 稿件官方小样本测试3 个题目 × 3 次运行取中位数Claude Sonnet 5.5 环境的结果直接要 HTMLAnswer me with HTML模型写出的 token4893612少 8 倍耗时31 秒12 秒快 2.6 倍注意两个诚实的边界这点值得肯定这些数字来自项目方的小样本自测不代表其他问题、模型和环境的表现账单下降幅度小于写作量这里约 15%——因为每一轮对话无论用不用这个 skill都要读系统提示词、你的问题和对话历史。另一个原理上的好处图表布局由代码计算不靠模型猜坐标。流程图箭头、时序图间距、面板位置都更容易稳定——用过让 AI 画图的人都知道模型手写的 SVG 经常箭头指歪、文字重叠。四、实测从安装到出页面4.1 环境与安装要求Node.js 20 或更高版本没有npm install步骤CLI 已打包在 skill 里。我本机是 Node v24.21.0直接克隆就能用gitclone--depth1https://github.com/QingYunA/answer-me-with-html.gitcdanswer-me-with-htmlnpminstall# 只有两个运行时依赖dagrejs/dagre、marked给 Agent 安装的话官方推荐把这句话粘贴给 Claude Code / Codex / CursorInstall Answer me with HTML: read https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md and follow it.或者一行命令安装器支持 70 种 Agentnpx skillsaddQingYunA/answer-me-with-html4.2 跑通官方示例我用官方自带的examples/tcp.md做第一次验证nodebin/am.js render examples/tcp.md --no-open-o/tmp/out_tcp.html真实输出✓ /tmp/out_tcp.html sheet · blueprint · 6 panels · sequence×2 callout×1 flow×1 kv×1 STE ✓ 0 warnings产物是一个91KB 的单文件 HTML我用命令检查了它的自包含性ls-lh/tmp/out_tcp.html# 91Kgrep-cEsrchttp|hrefhttp.*\.(css|js)/tmp/out_tcp.html# 0零外部资源grep-osvg/tmp/out_tcp.html|wc-l# 6内联 6 个 SVG零外部资源引用——这意味着它可以离线打开、可以直接发邮件、可以丢进任何文档系统不用担心 CSS/JS 加载失败。渲染出来的 TCP 三次握手页面长这样可以看到同一个技术解释被拆成了时序图、状态迁移图、关键数字和报文标志位几个区块。读者不用在一堆段落里自己拼图页面已经把三次握手单独拆成图表区。4.3 用我自己的题目测试跑通官方示例不算什么我换一个它没见过的题目——RocketMQ 消息发送链路--- title: RocketMQ 消息发送的完整链路 subtitle: 一条消息从生产者到消费者的旅程 cols: 3 source: RocketMQ 5.3.1 实测 --- 生产者发一条消息背后经历了路由查找、顺序写盘、索引构建、长轮询投递四个阶段。 ## A 发送链路 {span2 meta核心流程} mermaid sequenceDiagram num participants: 生产者, NameServer, Broker, 消费者 生产者 - NameServer: 拉取 Topic 路由 NameServer -- 生产者: 返回 Broker 地址列表 生产者 - Broker: 发送消息 note Broker: 顺序写入 CommitLog Broker -- 生产者: SEND_OK 消费者 - Broker: 长轮询拉取 Broker -- 消费者: 返回消息体 note 消费者: 处理并提交 offset后续面板略渲染输出✓ /tmp/out_rmq.htmlsheet · blueprint · 5 panels · sequence×1 kv×1 callout×1 flow×1STE ✓ 0 warnings产物 88KB5 个面板、5 个内联 SVG。截图如下  **实测结论**它对我给的新题目渲染正确——时序图、对比表格、流程状态图、提示框都正常生成排版清晰。 ### 4.4 组件能力清单 实测下来它支持这些组件用 代码围栏 组件名声明 | 组件 | 用途 | |---|---| | sequence | 时序图消息往来、num 可自动编号 | | flow | 流程图 / 架构图dagre 自动布局支持 TB/LR/BT/RL 方向 | | tree | 层级树组织架构 / 目录树支持 /-/~ 变更标记 | | timeline | 时间线 / 阶段 | | er | 实体关系图自动布局鸦爪式连接端 | | annot | 逐句批注下划线括号 注释红字标记错误 | | ask | **页面上让读者做选择**Reply 按钮汇总答案 | | callout | 结论 / 提示 / 警告条 | | kv | 键值网格 / 标题块元信息 | | limits | 数值 vs 阈值进度条 | | html / svg | 原样嵌入逃生舱口 | 模板有 3 种sheet图纸式面板网格默认、doc单栏阅读3 面板时自动生成目录、video讲解视频。主题有 blueprint工程图纸、shadcn卡片风、3b1b3Blue1Brown 暗色仅视频。 同一个内容换主题只改一个参数 bash node bin/am.js render examples/tcp.md --theme shadcn node bin/am.js render examples/tcp.md --theme paper两种主题的实际效果对比五、一个特色功能STE 受控语言检查项目名里带ASD-STE100——这是航空业的简化技术英语标准。这个 skill 内置了一个受控写作检查器会检查你的稿件文本句长中文程序性文本 ≤35 字、描述性 ≤45 字英文 ≤20 / ≤25 词段长一段最多 6 句非推荐词表中英文都有英文被动语态中文轻动词如进行、的字链、套话。我故意写了一段犯规的中文测试nodebin/am.js lint /tmp/ste_zh.md--stylestrict真实输出STE 4 warnings (fix the draft and run again): L8 [sentence-length] sentence has 56 characters (max 45): 请确保液压油箱被加满并且不要忘记检查压力值是否… L8 [word] light verb 进行相关 (进行) → use 相关 L10 [word] light verb 进行相关 (进行) → use 相关 L10 [de-chain] chained 的: 这是一个非常重要的需要进行相关处理的操作步骤的说明内容。 → split the sentence or remove extra 的英文测试同样有效触发sentence-length27 词超过 25 词上限。这个功能的实际价值写技术文档最容易犯的毛病就是长句、堆砌进行/相关/的的的STE 检查把它变成了一个可以自动跑的门禁。--style off关闭、80宽松、strict严格。六、边界它不做什么实测和 README 里有几条重要的边界值得说清楚1. 批注不会自动同步回聊天。你在页面里写评论或选选项后需要点回复按钮把汇总出来的内容复制回 Agent。它更像一个可视化工作台不是一个和聊天窗口实时双向同步的应用。2. 简单问题没必要出页面。问ls怎么看隐藏文件一句话就能讲清照常回答就行。强行把每个短问题都做成网页会让信息变重。README 里明确举了这个例子——这个克制是好的。3. 它不保证内容正确。页面再清楚里面的技术结论仍然要回到源码、文档和实际环境核对。它改善的是如何呈现复杂回答不是把 Agent 的回答自动变成事实。这一点非常关键——渲染得再漂亮内容错了也是错的。4. 它需要 Node.js 环境。没有 Node 20 就跑不了 CLI。不过 CLI 是纯本地运行的不上传任何内容到云端这对内部资料场景是加分项。七、什么时候该用它调研下来我的判断标准很简单——答案里有没有关系、顺序或取舍你的问题是否出页面页面上是什么“解释 TCP 三次握手”✅时序图 状态图 标志位表“这个仓库的模块怎么组织”✅目录树 调用关系图“Redis 还是 Memcached”✅多维对比表 结论 待确认条件“这段文案有什么问题”✅逐句标注问题词和改法“Kubernetes 是怎么来的”✅时间线 关键节点高亮“规划一下缓存改造”✅真实代码 开放决策做成页面选项“ls怎么看隐藏文件”❌一行回答就够了一句话总结答案需要图、表、步骤和选择时让 Agent 生成一页可离线打开的 HTML答案一句话就够时继续用普通聊天。八、总结Answer me with HTML 解决的是一个很具体的问题把 AI 那堵文字墙整理成一页能阅读、能比较、能批注的 HTML。它的核心设计思路值得学把写内容和搭页面分工——模型只写 Markdown 稿件CLI 用代码负责模板、主题、图形布局和单文件封装。这样既省 token官方测试约 1/8又让图表布局稳定不靠模型猜坐标。实测结论本文所有输出均为本机真实运行结果验证项结果项目真实性✅ GitHub 2500 starMIT 协议v0.5.0官方 TCP 示例✅ 91KB 单文件零外部资源6 个内联 SVG自定义题目RocketMQ✅ 88KB5 面板 5 图渲染正确组件能力✅ 时序/流程/树/时间线/ER/批注/选择等 11 类主题切换✅ blueprint / shadcn / paper 均正常STE 受控语言检查✅ 中英文均能真实触发警告离线可用✅ 零外部依赖可离线打开适合谁经常让 Codex、Claude 或 Cursor 解释架构、流程和方案取舍的人。如果你已经在用这些 Agent可以先拿一个复杂问题试试比如帮我把这个仓库的模块关系解释成一页页面而不是装上后到处套。最后提醒它改善的是呈现方式不是内容正确性。页面上的技术结论仍然要回到源码和实际环境核对——这一点对任何 AI 工具都成立。本文基于 Answer me with HTML v0.5.0 实测撰写所有命令输出与截图均来自本机真实运行。