Carreyda
← 返回文章

让 AI Agent 用一页 HTML 回答问题：Answer me with HTML 介绍与上手

一个把 Markdown 草稿渲染成可读 HTML 页面的 agent skill，模型只写内容，排版和绘图交给 CLI。

·4 分钟阅读

前言

用 AI Agent 写代码、做调研，经常会遇到一个问题：回答太长，读不动。

一大段终端文字里夹着流程、对比和结论，读完还要自己在脑子里画图。Karpathy 也提到过，随着 LLM 承担的工作越来越多，"跟上它的输出"本身变成了瓶颈，而图表和网页比纯文本好吸收得多。

最近看到一个叫 Answer me with HTML 的开源项目，思路很直接：让 Agent 用一页排版好的 HTML 来回答复杂问题。这篇文章介绍它是什么、怎么工作、怎么安装使用，以及我认为适合和不适合的场景。

它是什么

这是一个 agent skill，MIT 协议，兼容 Claude Code、Codex、Cursor、OpenCode 等能执行 shell 命令的 Agent。

装好之后，你照常提问：

> 解释一下 TCP 三次握手
> 梳理一下这个仓库的模块是怎么组织的
> Redis 还是 Memcached？

Agent 会判断这个问题值不值得做成页面。值得的话，它写一份简短的 Markdown 草稿，交给 skill 自带的 CLI（am），大约 50ms 后就得到一个单文件 HTML 页面，里面有时序图、状态图、对比表格等内容。

它不会滥用：一句话能答完的问题（比如 ls 怎么显示隐藏文件），依然只回一句话。

为什么不直接让模型写 HTML

模型现在写 HTML 已经不差，但项目作者发现了两个实际问题：

  • 慢：一个像样的页面要一两分钟，时间大多花在几乎每次都一样的 CSS 上。
  • 图不可靠：SVG 坐标要模型手算，箭头常常指向空白处。

作者统计了 9 个模型手写的页面，平均 4,893 tokens，构成如下：

页面组成 占比 使用该 skill 后
SVG 图（坐标、路径） 47% CLI 生成
CSS 15% CLI 生成
HTML 标签 17% CLI 生成
文字内容 21% 模型以 Markdown 写

也就是说，真正属于"内容"的只有大约五分之一。

作者的对比测试（Claude Sonnet 5.5，3 个话题各跑 3 次取中位数）结果：

直接要 HTML 使用 skill
模型输出 tokens 4,893 612
耗时 31 s 12 s

输出 token 约少 8 倍，耗时约快 2.6 倍。需要说明的是，整体账单只下降约 15%，因为每一轮对话仍然要读取 system prompt、你的问题和历史上下文，这部分成本 skill 省不掉。另外这是作者自己的小规模测试，数据请当参考。

工作原理

核心思想是一句话：模型只负责内容，CLI 负责排版和绘图。

模型写的草稿大概长这样（节选自项目示例）：

---
title: TCP three-way handshake
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

CLI 接手之后会：

  • 选择模板，安排面板（panel）位置
  • 应用主题
  • 用 dagre 自动布局流程图
  • 按标签宽度计算时序图的间距

坐标是算出来的，不是猜出来的，所以标签不会被截断，网格里也不会有空洞。

如果草稿写错了，CLI 会返回出错的行号、组件名和一个正确示例，Agent 通常一次就能修好。

组件一览

Agent 会根据信息的"形状"选择组件：

组件 适合内容
flow 架构、调用链、决策分支（自动布局）
er 数据模型：实体、字段（PK/FK/UK）、关系
sequence 多方之间随时间的消息往来
tree 目录、模块、分类体系
timeline 历史、版本、阶段
annot 对一句话逐词标注
callout 结论、提示、警告
ask 在页面上做决策，Agent 的建议默认选中
代码块 引用真实文件中的代码，或示意代码
表格 多方案对比，单元格写 ok / no / warn 会渲染成 ✓ ✗ !

想看某个组件的完整语法，可以运行 am help <component>。

特性

  • 单文件、离线：每个页面就是一个 .html，没有 CDN 和 web 字体，打开即用，也方便分享。
  • 三套主题：blueprint（工程图风格）、shadcn（卡片风格）、paper（适合长文阅读），均支持亮/暗模式。
  • 引用真实代码：代码块可以用 src= 和 lines= 引用项目文件，页面上展示的就是原代码，不是模型重新敲的。项目目录之外的文件以及存放密钥的文件会被拒绝。
  • 页面上直接作答：可以对任意面板写评论，也可以选择 ask 里的选项，点击 Reply 后会把这些内容合成一条消息，粘贴回 Agent 即可继续对话。
  • 保留源码：页面内嵌了生成它的 Markdown，点 "Copy source" 就能取回。
  • 写作检查：基于 ASD-STE100（飞机维修手册使用的受控英语）检查长句、冗词、被动语态等，默认只警告，设为 strict 则会拒绝不合格的草稿。
  • 多语言：简体中文、繁体中文、英文、日文有专门的按钮和字体，其他语言按英文按钮显示。

安装

需要 Node.js 20 或更高版本，不需要 npm install，CLI 已经打包在 skill 里。

方式一：让 Agent 自己装（推荐）

把下面这句话贴给你的 Agent：

Install Answer me with HTML: read https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md and follow it.

方式二：Claude Code 插件

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

方式三：一条命令

npx skills add QingYunA/answer-me-with-html

它会询问要装到哪些 Agent。

方式四：手动复制（以 Claude Code 为例）

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

装好后问一句 "Explain the TCP three-way handshake"，如果得到了一个带图的页面，就说明安装成功。

使用

skill 安装在全局目录，不需要任何项目级配置。进入任意项目启动 Agent，直接提问即可，也可以明确要求，例如"用 HTML 解释一下这个模块"。

生成的页面保存在 ~/.answer-me-with-html/pages/，不在项目目录里，所以不会弄脏你的 git 仓库。

Always-on 模式

默认情况下，只有复杂问题才会生成页面。官方推荐开启 always-on 模式：每当 Agent 给出结论、总结、方案或对比时（哪怕很短），都会附带一个 2 到 4 个面板的小页面，不自动弹出浏览器，只在回复末尾给出 file:// 路径。

开启方法是让 Agent 把一条规则写进规则文件（如 ~/.claude/CLAUDE.md 或 AGENTS.md），README 里提供了现成的提示词可以直接贴给 Agent。关闭时删除这条规则即可。注意 Claude Code 在 plan mode 下不会生成页面。

常用设置

用 slash command 修改，不需要手动改配置文件：

/answer-me-with-html:config              # 交互式询问要改什么（插件安装方式）
/answer-me-with-html:config open off     # 不自动打开浏览器

终端里也可以直接用 CLI：

am config                # 查看设置
am config set open off   # 修改设置
am config reset          # 恢复默认
am clean                 # 清理累积的页面

可配置项有 open、theme、mode、style、update_check 和 voice。

额外功能：Explainer 视频

对 Agent 说"做一个 3b1b 风格的 TCP 握手视频"，它会在同样的草稿格式上，为每个节点额外写一句旁白，然后由 am video 生成播放器页面：

  • 图随着旁白一步步构建，镜头跟随方括号里标注的节点
  • 语音内置在页面中，离线可播放
  • 带章节条、倍速按钮，以及浏览器端的导出按钮
  • 加 --mp4 可导出 MP4（需要 ffmpeg），加 --webm 可导出 WebM（不需要 ffmpeg）

Agent 只会在你明确要求时才做视频。

适合与不适合

适合

  • 概念之间有关联，需要"画出来"才好懂的问题
  • 多步骤流程、调用链、状态变化
  • 多方案对比，需要表格加结论
  • 梳理陌生代码库的结构
  • 需要在页面上对方案做选择，再把决定回传给 Agent

不太适合 / 需要注意

  • 简单问题没必要，好在它默认不会触发
  • 依赖能执行 shell 命令的 Agent
  • always-on 模式下，每次回复都多一步生成，会增加少量延迟
  • 页面会持续累积，需要定期 am clean
  • 性能数据来自作者自己的小规模测试，实际效果取决于你的模型和问题

小结

这个项目的价值不只在"把回答变成网页"，更在它的做法：

  1. 把模型不擅长又高度重复的部分交给确定性代码，比如坐标计算和 CSS。
  2. 让模型只写内容，用 Markdown 草稿作为中间表示，大幅减少输出量。
  3. 用结构化的报错让 Agent 自我修正，而不是靠重试碰运气。

这个思路可以迁移到很多"让 LLM 生成结构化产物"的场景。如果你经常被 Agent 的长文本回答淹没，值得装上试试。

参考链接
© 2026 Carreyda