Answer me with HTML Skill 技能

技能简介

Answer me with HTML 是一个开源的 Agent Skill：安装之后，当你向 Claude Code、Codex、Cursor 或 OpenCode 提出复杂问题时，它不再甩给你一整屏文字墙，而是生成一页排版好的 HTML 网页，把结论、图表、对比关系分面板呈现，方便直接阅读和转发。项目采用 MIT 协议，GitHub 188 Star，仓库自带完整基准测试数据可复现。它最大的特点是把"写页面"这件事从模型手里拿走——模型只写内容草稿，约 900 个输出 token，由技能内置的 CLI 负责布局、配色和图形绘制；实测同样的问题直接让模型手写 HTML 需要 6873 个输出 token、46 秒，用本技能只需 923 个 token、13 秒，速度提升约 3.6 倍，单次成本基本持平。

核心能力

1. 显著降低 token 消耗与等待时间：模型只产出 Markdown 内容稿，CSS、外层 div、SVG 坐标全部由 CLI 计算生成。
2. 代码级排版：面板跨列跨行由 span 属性控制，流程图用 dagre 自动布局，时序图按标签宽度自适应间距，标签不会被截断、网格不会留空。
3. 自带纠错：草稿写错时 CLI 会返回出错行号、组件名和一段正确示例，Agent 一次就能改对。
4. 两套主题（blueprint 工程图纸风、shadcn 卡片风），均支持亮色与暗色模式，草稿里写的主题优先于默认值。
5. 内置 ASD-STE100 简明写作检查：英文查长句、赘词、被动语态；中文查"进行优化"这类空转动词、一句三个"的"以及"赋能""闭环"等套话，strict 模式下不合格草稿拒绝渲染。
6. 单文件无依赖：每页是独立 HTML，不引用 CDN 和网络字体，可离线打开、随时转发。
7. 保留来源：生成的页面内嵌产出它的 Markdown，点"Copy source"即可取回，方便二次修改。

安装配置

1. 环境要求：Node.js 20 及以上；无需执行 npm install，CLI 已打包在技能目录内部。
2. 一条命令安装：npx skills add QingYunA/answer-me-with-html，安装器会询问要装进哪些 Agent，底层使用 vercel-labs/skills，支持 70 多种 Agent；也可以把这句话直接粘给 Agent，让它带上 -a claude-code 参数自行安装。
3. Claude Code 插件方式：先 /plugin marketplace add QingYunA/answer-me-with-html，再 /plugin install answer-me-with-html@answer-me-with-html。手动安装则把 skills/answer-me-with-html 目录复制到 ~/.claude/skills/（Codex 用 ~/.codex/skills/，Cursor 用 ~/.cursor/skills/，OpenCode 用 ~/.config/opencode/skill/），装完无需任何配置即可用。

使用步骤

1. 像平时一样提问，例如"讲讲 TCP 三次握手""这个仓库的模块是怎么组织的""Redis 还是 Memcached"。
2. Agent 自行判断值不值得做成页面：涉及关联概念、多步流程、多方对比时才会生成；一句"怎么看隐藏文件"只会有普通一行回答，也可直接说"用 HTML 解释"强制生成。
3. Agent 写出带 front matter 与组件代码块的 Markdown 草稿交给 CLI，约 50 毫秒渲染完成并自动在浏览器打开，页面保存在 ~/.answer-me-with-html/pages/。
4. 用 /answer-me-with-html:config 调整设置：open 控制是否自动打开浏览器、theme 选主题、mode 选亮暗、style 调写作检查严格程度；终端里也可用 am config set 修改，am render 命令支持不依赖 Agent 单独渲染任意草稿。

适用场景

1. 技术概念讲解：协议握手流程、框架模块关系、系统演进时间线，用 sequence、flow、timeline 组件把抽象关系画清楚。
2. 方案选型对比：Redis 与 Memcached 之类多路对比，生成带对勾、叉号标记的对比表并给出结论面板。
3. 代码库导览：目录树加调用关系图，快速看懂一个陌生仓库的结构。
4. 文稿逐句批注：annot 组件对段落逐句标注，指出问题词与修改建议，适合写作检查和内容审校。

适用人群

需要频繁向 Agent 求解技术问题的开发者，写技术文档、教程、方案评审的作者，习惯用可视化页面沉淀结论的知识工作者，以及对输出 token 成本和响应速度敏感的重度 Agent 用户。

工作原理

Agent 先产出一份简短 Markdown 草稿，每个二级标题对应一个面板，可用 span=2 跨两列、rows=2 跨两行，flow、sequence、tree、timeline、limits、annot、kv、callout 等组件由代码块声明。CLI 接手后续全部工作：选择 sheet 或 doc 模板、排布面板、套用主题，用 dagre 计算流程图坐标、按标签宽度调整时序图间距，标记为 ok、no、warn 的表格单元格自动渲染成对勾、叉号和感叹号，最后输出单个 HTML 并把源稿嵌入其中。草稿存在语法错误时，CLI 返回行号、组件名与正确示例供 Agent 一次修正；渲染前先跑写作检查，strict 模式下不达标直接拒绝。页面右上角按钮可切换主题、切换亮暗、复制源稿。

官方链接

GitHub 仓库：https://github.com/QingYunA/answer-me-with-html （中文文档 README.zh-CN.md，基准测试数据见 bench/ 目录，许可证 MIT）