一个 Agent Skill · 支持 Claude Code、Codex、Cursor、OpenCode、Pi
提一个难题，
收到一页图解，
而不是一堵文字墙。
Agent 只写一份简短的 Markdown 稿件，skill 自带的 CLI 把它排成一页带图表、表格和版式的 HTML。模型要写的 token，只有手写这页 HTML 的约 1/7。
- 项目
- Answer me with HTML
- 版本
- 0.4.14
- 许可
- MIT
- 输出
- 约 1/7 token
- 产物
- 1 个 .html，离线可看
- 适用于
- Claude Code · Codex · Cursor · OpenCode · Pi
一堵文字墙，还是一页图
同一个问题，同一个模型。没有 skill 时，你得一行一行往下读，在脑子里自己拼出全貌；用了 skill，时序图、状态图、对照表和提醒，一眼就能看全。
FIG. 1"讲讲 TCP 三次握手"，两种回答。
像平时一样提问就行
| 你说 | 你会得到 |
|---|---|
| "讲讲 TCP 三次握手" | 时序图、状态迁移图、标志位对照表 |
| "这个仓库的模块是怎么组织的" | 目录结构树，加一张模块调用关系图 |
| "Redis 和 Memcached 怎么选" | 多维对比表，用 ✓ ✗ 标出差异，最后给结论 |
| "这段文案哪里写得不好" | 逐句标注，标出问题词和改法 |
| "Kubernetes 是怎么发展起来的" | 时间线，关键节点高亮 |
| "给缓存改造做个方案" | 直接引用文件里的真实代码，待定的问题做成选项，在页面上就能回答 |
"ls 怎么看隐藏文件" | 不出页面。一句话能说清的问题照常回答 |
模型只写内容，画图交给 CLI
让模型直接写 HTML，每一行 CSS、每一层 div、每一个 SVG 坐标都得它一个字一个字打出来，而你等的正是这些输出 token。这里模型只写内容，剩下的都由 CLI 完成。
模型写的
---
title: TCP 三次握手与四次挥手
---
## A 三次握手 {span=2}
```sequence num
客户端 -> 服务器: SYN, seq=x
服务器 -> 客户端: SYN+ACK, seq=y, ack=x+1
客户端 -> 服务器: ACK, ack=y+1
note 客户端, 服务器: ESTABLISHED
```
## C 状态迁移 {span=2}
```flow LR
(CLOSED) -> LISTEN: 被动打开
LISTEN -> SYN_RCVD: 收 SYN / 发 SYN+ACK
SYN_RCVD -> *ESTABLISHED: 收 ACK
```CLI 替它写的
- CSS 33.3 KB
- 页面脚本 34.4 KB
- SVG 8.5 KB
- HTML 8.1 KB
- 46×
- 页面比稿件多出的体量，一个字都不用模型来写
- 361
- 个 SVG 坐标，由布局代码算出，不靠模型猜
- 282
- 条 CSS 规则，覆盖主题的亮色和暗色
- 0
- 个网络请求。打开页面不连 CDN，也不加载外部字体
数据来自完整的 examples/tcp.md（63 行）。
在线试用
这里跑的就是真实的渲染器，只是打包成了浏览器版。改稿件，页面跟着你的输入实时更新。所有内容都留在你本机。
按 Tab 插入两个空格。先按 Esc 再按 Tab，可以离开编辑器。
CLI 给 Agent 的就是这段报错：行号、组件名、正确示例都有，Agent 照着改一次就好。
- 渲染
- —
- 大小
- —
- 面板
- —
- 组件
- —
- STE
- —
带 src= 的代码块会引用真实文件，只能在 CLI 里用；本地图片同理。
组件
Agent 会按信息的形状挑组件。每张卡片都是用几行稿件实时渲染出来的，点一下就能在上面的编辑器里打开。
每个组件的完整写法，一条命令就能查到。
am help <component>
三套主题，各有亮暗
同一份稿件，换一套主题实时重新渲染。默认由 CLI 按内容挑：长文用 paper，有图表用 blueprint。你也可以加自己的主题。
每一页的右上角也都能随时切换主题和明暗。
讲解视频
Karpathy 说的"理解 LLM 输出"阶梯，最后一级就是讲解视频。直接说"给 TCP 握手做个 3b1b 风格的视频"就行。下面就是一个真实的 am video 播放页。
- 1逐步构建
第 N 句旁白播出时，图上出现第 N 步，箭头一笔一笔画出来。
- 2镜头聚焦
旁白里写
[Server]，镜头就推向这个节点并高亮它。 - 3跨场景变形
下一个场景里同名的节点，会平滑移到新位置，而不是硬切。
- 4配音
设置了密钥就用 ElevenLabs，否则用系统语音，都没有就只出字幕。加
--mp4另存 1080p 视频。
示例视频的整份稿件只有 835 个字符，也就是几百个输出 token。
只有你要视频时 Agent 才会做。完整语法：am help video。
## 两端都在等待
```sequence
Client -> Server: SYN
Server -> Client: SYN-ACK
```
> 先是客户端开口，发一个 SYN，意思是"我想跟你建个连接"。
> [Server] 听到了，回一个 SYN-ACK："收到，我这边也没问题。"基准测试
同一个模型、同样的问题，两种方式各做一遍：一种让模型直接写 HTML，一种用 skill。提速在哪种环境里都成立，花费则取决于你的环境。
页面 · 普通的 Claude Code 环境
讲解视频 · 手写播放页 vs am video
- 环境
- 普通 Claude Code：只有项目设置，没有 MCP 服务
- 模型
- Claude Sonnet 5.5
- 页面
- 3 个题目 × 每题 3 次，取中位数
- 视频
- 1 个题目、5 次运行（手写 3 次，am video 2 次），取中位数。只能看量级，不是精确倍数
STE 受控写作检查
ASD-STE100 是一套受控英语，最早用来写飞机维修手册，规定很具体：句子要短，一个词只表达一个意思，步骤用祈使句。CLI 把其中能用机器检查的部分做成了中英双语规则，每次渲染都会检查。拿你自己的文字试试。
- 句长步骤不超过 35 字，描述不超过 45 字，每段最多 6 句
- 用词"进行优化"直接写"优化"；登陆 → 登录
- 句式一句里三个以上"的"、"赋能""闭环"这类套话
安装
本机需要 Node.js 20 或更高版本。不需要 npm install，CLI 已经打包在 skill 里了。
把下面这段话粘贴给你的 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 看的：已有安装会保留，全程不向你提问，最后用 TCP 页面验证一遍，给你一份汇报。
在 Claude Code 里依次执行：
/plugin marketplace add QingYunA/answer-me-with-html /plugin install answer-me-with-html@answer-me-with-html
它会问你装到哪个 Agent。安装器来自 vercel-labs/skills，支持 70 多种 Agent。
npx skills add QingYunA/answer-me-with-html
把 skills/answer-me-with-html 目录放进你的 Agent 的 skill 目录。以 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
其他 Agent 的 skill 目录：Codex 是 ~/.codex/skills/，Cursor 是 ~/.cursor/skills/，OpenCode 是 ~/.config/opencode/skill/。
- 依赖
- Node.js 20+
- npm install
- 不需要
- 联网
- 每周查一次新版本，可关闭
- 配置
- 无需配置