1.4K Star！这个开源 Agent Skill 把一屏文字墙撕成了可视化页面！一看就懂！

Andrej Karpathy 在 X 上发过的一条帖子。他说，当 LLM 的输出越来越长，跟不上它反而是我们自己。

模型每秒钟能吐出几千个 token，但人类眼球处理长段文本的带宽并没有随着 GPT 的迭代变宽。我们需要的不是更多的字，而是更好的呈现方式。

然后我遇到了 answer-me-with-html —— 一个装在 Agent 里的 Skill，让模型在回答复杂问题时，直接交付一份可视化的 HTML 页面，而不是一屏文字。

这个项目三天前在 GitHub 上出现，目前已经冲到了 1.4K Star。

项目简介

answer-me-with-html 不是一个独立的 Web App，也不是一个让你写 prompt 的网站。

它是一个 Agent Skill，你把它装进你每天在用的 AI Coding Agent 里 —— Claude Code、Codex、Cursor、OpenCode，统统支持。

装好之后你就像以前一样提问，Agent 自己判断这是”一个值得做页面的问题”，然后它只写一段很短的 Markdown 草稿（标题 + 几个组件指令），剩下的布局、配色、画图、导出，全部交给 Skill 自带的 CLI 工具 am 去完成。

之后浏览器会弹出一份排版好的 HTML 页面，直接可以读，可以分享。

02

PART

核心亮点

answer-me-with-html 的核心哲学就一句话：让模型写它擅长的内容，把排版、布局、画图这些机械活交给程序。

README 里给了非常扎实的基准测试数据，我把表格贴在下面（来自原项目 bench 目录，模型为 Claude Sonnet 5.5，三种问题、各跑三次取中位数）：

差距在”解释视频”场景里拉得更开。

项目支持生成 3Blue1Brown 风格的无配音讲解视频。

同样是 TCP 握手主题，直接生成视频页面要 27,839 个 token、202 秒；用 am video 只要 1,566 个 token、17 秒 —— 17.8× token 节省，11.8× 加速。

03

PART

九种组件

Agent 会根据问题的类型自动选组件，不需要你手动指定。组件列表：

flow 架构图、调用链、决策分支。自动布局，支持分组、判断节点、数据库节点。

sequence 多角色之间按时间发生的消息交换，典型场景就是 TCP 握手。

tree 目录结构、模块树、分类体系。

timeline 历史事件、发布记录、项目阶段。

limits 一个值相对于它的上限是多少。

annot 一句话逐词标注，标问题词和替换建议。

kv 元数据、图纸标题块。

callout 结论、提示、警告。

table 多维度对比表。单元格里写 ok / no / warn 会自动渲染成 ✓ / ✗ / !。

04

PART

其他特性

自动布局，不画图也不错位。

写错了会自己告诉你怎么改。 草稿里的语法错误，CLI 会报行号、组件名，还会附一个正确例子。Agent 通常一轮就能修好。

双主题 + 明暗模式。 Blueprint 主题是工程蓝图风（白底、蓝色线条），shadcn 主题是干净的卡片风。每个主题都有 light / dark / auto 三种模式可以切换。

页面右上角的按钮直接点，也可以在草稿 frontmatter 里写 theme: blueprint 覆盖默认。

STE 写作检查。 这是 README 里最”额外”的一个功能，灵感来自 ASD-STE100（航空维护手册用的受控英语）。

项目把能被机器检查的 STE 规则翻译成了中英文规则集，每次渲染都会跑一遍：

英文句子不超过 20 词，中文不超过 35 字；描述不超过 25 词 / 45 字；单段落不超过 6 句。

常用词偏好，用 use 不用 utilize，用 优化 不用 进行优化。

中文错别字和模糊词（尽快、若干、大概、多次），以及”以上 / 以下 / 以内”跟数字连用时的歧义问题。

英文被动语态、中文一句里三个以上的”的”、”赋能””闭环”等套话。

默认是 warn 模式，只提示不改内容；设置成 strict 会拒绝渲染。

单文件无依赖。 生成出来的 .html 页面不引用任何 CDN 或网络字体，丢给别人双击就能开，也方便上传到内网或归档。

05

PART

三种安装方式

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

直接复制这段话丢给 Claude Code / Codex / Cursor / OpenCode：

Install the Answer me with HTML skill: run
`npx -y skills add QingYunA/answer-me-with-html -g -y`,
and pass `-a` with your own agent name
(for Claude Code, `-a claude-code`).
Then read its SKILL.md and use it to make a page that
explains the TCP three-way handshake, so we know it works.


Agent 会自己跑安装、自己读 SKILL.md、自己做一张 TCP 握手工页来测试。

方式二：Claude Code 插件市场

在 Claude Code 里直接跑：

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


方式三：手动安装

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/。

安装完了怎么用

什么都不用配置。装好之后就像以前一样提问就行。如果你想手动调用 CLI：

am render draft.md           # 把草稿渲染成 HTML
am video draft.md            # 生成讲解视频页面
am video draft.md --mp4      # 额外导出 mp4（要 Chrome + ffmpeg + Node 22）
am config                    # 看当前配置
am config set open off       # 关掉自动弹浏览器
am help <component>          # 查某个组件的完整语法


常用配置项

没有配置文件要手动编辑，全部通过 slash 命令或 CLI 改：

配置文件实际存在 ~/.answer-me-with-html/config.json 里，但你基本不需要去碰它。

Always-on 模式

默认情况下，Agent 只在”判断这问题值得做页面”时才会生成。如果你希望 每一次回答都带一张小页面（哪怕是一个对比、一个计划、一个总结），开 always-on 模式。

开了之后 Agent 每回合会收到一条约 90 token 的短提醒。每次它给出一个结论、对比、计划、总结时，都会自动附一张 2-4 个面板的小页面、路径贴在回复末尾。聊天、命令输出、纯文本请求不会触发，也不会弹浏览器。

Claude Code 再装一个插件就行：

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


其他 Agent 的话，把 README 里那段规则粘贴进你的全局规则文件（比如 AGENTS.md）。

///

LAST

写在最后

answer-me-with-html 它在”让模型写内容、让程序做排版”这个切面上做得特别干净 —— 模型只写 Markdown + 几个组件指令，剩下全部交给 CLI，token 省出一个数量级。

Karpathy 那条 X 帖的核心观察值得我们再读一遍：当 LLM 的输出越来越强，真正的瓶颈变成了我们能不能跟得上。

answer-me-with-html 把这条洞察落成了一个真正能用的工具。它帮 Agent 回答更高效，也帮我们跟得上那个输出越来越长的模型。

GitHub：https://github.com/QingYunA/answer-me-with-html

如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️

在看你就赞赞我！