它解决什么问题
大模型越能干，人越难跟上它的输出。读一大段文字，不如看一页网页。
左边：每一行 CSS、每一层 div、每一个 SVG 坐标都要占用输出 token，你等的正是这些；画流程图时模型还得自己算坐标，箭头经常指到空白处。
工作原理：四步
分工是全部设计的起点：人擅长想内容，代码擅长算版面。
你提问
像平时一样说话，比如"讲讲 TCP 三次握手"
Agent 判断
概念复杂、有流程、要对比 → 值得出一页；一句话能说清 → 纯文字
写短稿件
一份很短的 Markdown：标题、分面板、选组件，不碰 CSS
CLI 渲染
约 50 毫秒后：单文件 HTML，浏览器打开，断网可看
CLI 在 50 毫秒里做了什么
- 选模板
- 多面板一览（sheet）或线性讲解（doc），有图表默认图纸风
- 排面板
- 面板位置按内容自动计算，文字不截断、网格无空洞
- 画坐标
- 流程图用 dagre 算布局，时序图按标签宽度拉间距
- 套主题
- 三套主题 × 亮色/暗色，页面右上可随时切换
- 查写作
- 按 ASD-STE100 思路做中英双语写作检查（默认只提醒）
- 嵌原稿
- 每页内嵌生成它的 Markdown，点"复制源稿"可找回修改
实测数据：快多少、省多少
同一模型、同样问题，两种做法各做三遍取中位数（Claude Sonnet 5.5，三个题目）。灰色是直接写 HTML，蓝色是用这个 skill。
从稿到页：模型到底写了什么
左边是模型的全部工作——十几行；右边是 CLI 交出的页面（TCP 三次握手，图纸风）。不碰 CSS，不算 SVG 坐标。
三套主题，一键切换
同一份稿件，三种气质。点下面的按钮切换——这三张都是同一页（TCP 三次握手）的真实渲染截图。
三套都带亮色和暗色；页面右上角可随时切换主题与亮暗，也能复制生成这一页的 Markdown 原稿；支持自定义主题。
八个组件：按信息的形状选
一个面板只回答一个子问题。下面的每张小图，都是 CLI 真实渲染的效果截图。
A -> B: 说明；支持判断框、数据库、分组，坐标由 dagre 自动算。
A -> B: 请求；支持编号、备注、阶段分隔线。
标签 | 说明 加灰字备注。
时间 | 标题 | 说明；行首加 * 高亮该节点。
键: 值；适合放标题栏式的元信息。
callout warn 标题；info / ok / warn / err 四种语气。
[词]{点评}；{!red …} 标红问题词。
标签 | 13 / 20 | 单位；一目了然的进度感。普通 Markdown 表格也是"组件"：单元格写 ok / no / warn 会变成 ✓ / ✗ / ! 徽章。实在放不进组件的内容，才用 html / svg 块原样嵌入。
STE 受控写作检查
ASD-STE100 本是写飞机维修手册的受控英语。Karpathy 提到按它写会清楚很多，这个 skill 把好机器检查的部分做成了中英双语版，每次渲染顺带检查。
| 检查项 | 规则 |
|---|---|
| 句长 | 描述句不超 45 字，操作步骤不超 35 字，每段不超 6 句 |
| 用词 | 删虚动词： |
| 句式 | 用主动语态；一句里"的"不超三个；不用套话，如 |
| 中文词表 | 错别字： |
默认 style: 80 只提醒不拦；strict 不达标不生成；off 关闭。中文词表取自《简明技术中文》，只收几乎不会误报的词。上面带删除线的是故意展示的反例写法。
安装：三种方式
前置要求只有一个：本机有 Node.js 20 或更高版本。不需要 npm install，CLI 已打包在 skill 里。
让 Agent 代装
把 INSTALL.md 的安装指引粘贴给你的 Agent（Claude Code、Codex、Cursor、OpenCode 都行），它照着做，全程不问你，最后用"TCP 三次握手"页面验证。
装成插件
两条命令：
/plugin marketplace add 2023Anita/answer-me-with-html/plugin install answer-me-with-html@answer-me-with-htmlnpx 安装
安装器来自 vercel-labs/skills，支持 70 多种 Agent，会问你装到哪一个：
npx -y skills add 2023Anita/answer-me-with-html配置 · 高频模式 · 解释视频
配置速查
| 配置项 | 默认值 | 作用 |
|---|---|---|
open | on | 生成后自动用浏览器打开 |
theme | auto | 长文用 paper，有图表用 blueprint |
mode | auto | 跟随系统亮暗 |
style | 80 | 写作检查：只提醒 / 严格拦 / 关闭 |
update_check | on | 每周查一次新版本并提醒 |
voice | auto | 视频配音：有 ElevenLabs key 就用它，否则系统语音 |
三种改法：斜杠命令改；直接说"别再自动弹浏览器了"；终端跑 am config set open off。页面默认存在 ~/.answer-me-with-html/pages/。
高频模式 可选
打开后，每个结论都附一页：只要这轮给了结论、总结、方案或对比，Agent 就顺手出一页 2～4 个面板的小页面。只生成、不弹出，不打断手上的事。闲聊、无结论的一两句话、纯命令输出不受影响。
在 Agent 的规则文件里加一句话即可打开。代价是页面会堆在 ~/.answer-me-with-html/ 里，跑 am clean 清理。
解释视频：3Blue1Brown 风
视频稿件和页面稿一样，只多一条规则：> 开头的行是旁白，一行一拍。
- 逐步构建
- 第 N 句旁白播出时，图上出现第 N 步，箭头一笔画出来
- 镜头聚焦
- 旁白里写
[Server]，镜头推向该节点并高亮，整图始终在画面内 - 跨场景变形
- 相邻场景同名节点平滑移动到新位置，而不是硬切
- 配音
- 有
ELEVENLABS_API_KEY用 ElevenLabs，否则系统语音；每拍时长等于音频长度，音画同步 - 单个文件
- 音频内嵌，离线能播；
--mp4另存 1080p（需 Chrome + ffmpeg + Node 22+）
自测三题
点选项作答，做完看解析
Q1 · 在这个 skill 里，模型负责做什么？
Q2 · 流程图的节点坐标是谁算的？
Q3 · "ls 怎么看隐藏文件"这种问题会出页面吗？
术语翻卡
点卡片翻面