README

Answer me with HTML


  极速出页  |  ASD-STE100  |  讲解视频  |  单文件离线



  一个 Agent Skill：遇到复杂问题，Agent 不再甩给你一堵文字墙，而是给你一页能看懂的 HTML。模型要写的 token，只有它直接手写 HTML 的约 1/8。



  
  
  
  
  
  



  官网 · 安装 · 示例 · 视频 · 高频模式 · 参考文档 · English · 日本語



  


装好之后，像平时一样提问就行：


 讲讲 TCP 三次握手和四次挥手
 画一下这个仓库的模块关系
 Redis 和 Memcached 该怎么选


Agent 会写一份很短的 Markdown 稿件，交给 skill 自带的 CLI。大约 50 毫秒后，你就得到一页：

https://github.com/user-attachments/assets/1f13b1fe-70a9-4c39-8530-b12e553e17ea

24 秒演示，打开声音可以听到配乐。

 为什么不直接让 AI 输出 HTML？

当然可以，现在的模型写 HTML 已经写得不错了。但它写的大部分都不是内容。我们数了 9 页模型直接手写的 HTML，平均 4,893 个 token：

| 页面里的部分 | 占比 | 用这个 skill 后 |
| :--- | ---: | :--- |
| SVG 图：坐标和路径 | 47% | 由 CLI 生成 |
| CSS | 15% | 由 CLI 生成 |
| HTML 标签 | 17% | 由 CLI 生成 |
| 正文文字 | 21% | 模型来写，写成 Markdown |

用这个 skill，模型只写一份 Markdown 稿件。同样的问题，稿件平均 612 个 token，约为手写 HTML 的 1/8。要写的少，等的时间就短（3 个题目 × 每题 3 次，取中位数，Claude Sonnet 5.5，普通的 Claude Code 环境）：

| | 直接要 HTML | Answer me with HTML | |
| :--- | ---: | ---: | :--- |
| 模型要写的 token | 4,893 | 612 | 少 8 倍 |
| 耗时 | 31 秒 | 12 秒 | 快 2.6 倍 |


  


同一个问题、同一个模型，两种做法各答一遍，两页都能用。

token 数存在 bench/corpus/tokens.json 里，运行 node bench/corpus.mjs 每次都得到同样的数字。页面本身可以下载。花费降得比 token 少，这里约便宜 15%，因为每一轮都还要读系统提示、你的问题和对话记录，用不用 skill 都一样。详见花费都花在哪。

解释视频省得更多：在一次小测试里，输出 token 少约 18 倍，快约 12 倍。

 安装

需要本机装有 Node.js 20 或更高版本。不需要 npm install，CLI 已经打包在 skill 里了。还没装 Node.js？用下面推荐的方式安装，Agent 会先问你，再替你装好。

 让 Agent 帮你装（推荐）

把下面这段话粘贴给你的 Agent。Claude Code、Codex、Cursor、OpenCode 都可以：

 帮我安装 Answer me with HTML：读 https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md，照着做。

INSTALL.md 是写给 Agent 看的。它在 Claude Code 里装插件，在其他 Agent 里装 skill，已有安装会保留，除非缺少 Node.js 或版本低于 20，否则全程不向你提问，用"TCP 三次握手"页面验证后给你一份汇报。如果你的 Agent 打不开链接，用 npx -y skills add QingYunA/answer-me-with-html -g -y -a （Claude Code 是 -a claude-code）。

 Claude Code 插件

在 Claude Code 里执行：


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


 DeepSeek Harness 插件

在终端里执行。换成你在用的 profile，自带的是 web：

bash
dsh plugin --profile web add github:QingYunA/answer-me-with-html


 一条命令

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


它会问你装到哪个 Agent。安装器来自 vercel-labs/skills，支持 70 多种 Agent。


手动安装

把 skills/answer-me-with-html 这个目录放进你的 Agent 的 skill 目录就行。以 Claude Code 为例：

bash
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


其他 Agent 的 skill 目录：Codex 是 ~/.codex/skills/，Cursor 是 ~/.cursor/skills/，OpenCode 是 ~/.config/opencode/skill/。



装好后不需要任何配置。建议打开高频模式：Agent 会给每个结论都附一页，而不只是复杂问题。只需要在规则文件里加一条规则。

 你说什么，会得到什么

| 你说 | 你会得到 |
| :--- | :--- |
| "讲讲 TCP 三次握手" | 时序图、状态迁移图、标志位对照表 |
| "这个仓库的模块是怎么组织的" | 目录结构树，加一张模块调用关系图 |
| "Redis 和 Memcached 怎么选" | 多维对比表，用 ✓ ✗ 标出差异，最后给结论 |
| "这段文案哪里写得不好" | 逐句标注，标出问题词和改法 |
| "Kubernetes 是怎么发展起来的" | 时间线，关键节点高亮 |
| "给缓存改造做个方案" | 直接引用文件里的真实代码，待定的问题做成选项，在页面上就能回答 |
| "

Top issues

Discussions

Latest release

Send a page to a chat app: am export

Discord, Telegram, Slack and WeChat show an .html file as source. am export turns a rendered page into files they show (350, 354):

bash
am export page.html --pdf page.pdf      A4, the page's own print rules
am export page.html --png out/          out/page-1.png, out/page-2.png ...


- --png renders at 1200 CSS px wide and 2x, hides the toolbar, the reply and remark controls and the new-version notice, and cuts the page into slices no taller than 1800 CSS px. A cut falls in a gap between panels.
- Exporting into the same folder again removes the -.png slic