说实话,AI 最该淘汰的东西,可能就是满屏幕的文字,这个 Skill 有点意思

你有没有遇到过这种情况：问 AI 一个稍微复杂点的问题，它哗哗给你刷了一大屏文字，密密麻麻全是字，你硬着头皮看了三段就想关掉。

这个问题 Karpathy 也提过。他说，AI 干的活越来越多，人跟不上它产出的速度了。一张图、一个网页，比一堵文字墙好消化得多。

最近 GitHub 上有个项目就把这件事做了出来，叫 answer-me-with-html。你照常问问题，它把回答直接变成一个排版好的网页，该有图的地方有图，该有表格的地方有表格，打开浏览器就能看。

它到底做了什么

举个具体的例子。你在 Claude Code、WorkBuddy 或者 DeepSeek Harness 里输入：

PLAINTEXT
解释 TCP 三次握手的过程。

如果没装这个技能，AI 会给你写一段很长的文字解释。装了之后，AI 会先写一份简短的 Markdown 草稿，然后交给这个工具自带的命令行程序。大概 50 毫秒之后，浏览器就弹出一个页面，上面有时序图、状态流转图、标志位表格，排得清清楚楚。

为什么能这么快？因为 AI 只需要写内容，排版、配色、画图全交给工具去做。

项目作者测过，同样的问题，让模型直接手写 HTML 平均要将近 5000 个 token，其中 47% 花在画 SVG 图，15% 花在写 CSS，17% 花在 HTML 标签上。真正的内容只占 21%。

用了这个技能之后，模型只写 Markdown 草稿，平均 612 个 token，差了将近 8 倍。时间从 31 秒缩到 12 秒，快了两倍多。

这是我在 DeepSeek Harness 里测试的效果。

比如，还可以用它来梳理一下一些历史事件或者热点事件都行。我最近在读《资治通鉴》，读到了“垓下之围”，然后就让他帮我梳理一下“垓下之围”的事件过程。

制作的效果如下：

三步装好，不用折腾

你需要先装 Node.js 20 以上的版本。如果没装过也没关系，安装过程中它会问你要不要帮你装。

第一步：打开你的 AI 编程助手

Claude Code、Codex、Cursor、OpenCode 、WorkBuddy、DeepSeek Harness 都行，总共支持七十多个 Agent.

第二步：粘贴这一行话

PLAINTEXT
Install Answer me with HTML: read https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md and follow it.

把这行话粘贴到你的 Agent 对话框里回车。Agent 会自动读取安装说明，帮你把技能装好。装完之后它会用 TCP 三次握手的例子跑一遍，确认安装成功。

如果你的 Agent 打不开链接，也可以在终端直接跑：

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

第三步：开始提问

装好之后不需要任何额外配置，直接像平时一样问问题。

/answer-me-with-html 解释 DNS 域名解析的完整流程。

来看看实际效果

装好之后你可以试试这几个问题，每个问题会得到不同类型的可视化：

简单的问题它不会多此一举。比如你问“怎么用 ls 显示隐藏文件”，它知道这一句话就能说清楚，不会额外生成页面。

AI 自动判断什么时候该出页面：涉及多个概念的、有先后步骤的、需要对比的，它就会生成。当然你也可以直接说“用 HTML 解释一下”，强制让它出页面。

三套主题随便选

生成的页面有三种视觉风格：

blueprint 看起来像工程蓝图，蓝底白线，特别适合画流程图和架构图。

shadcn 是干净的卡片风格，现代感很强。

paper 像纸质文档，适合长篇阅读。

每套主题都有亮色和暗色两种模式。默认情况下，工具会自动选：图多的用 blueprint，文字多的用 paper。你也可以手动切换，页面右上角就有按钮。

还能生成讲解视频

这个功能特别酷。你跟 AI 说：

PLAINTEXT
制作一部 3Blue1Brown（3B1B）风格的 TCP 三次握手讲解视频。

它就会生成一个 3Blue1Brown 风格的讲解视频。图表会一步一步跟着旁白展开，镜头会自动跟踪当前讲到的节点。

AI 写的草稿跟普通页面差不多，只是多了一行旁白。比如：

PLAINTEXT
## 双方等待连接
```sequence
Client -> Server: SYN
Server -> Client: SYN-ACK
```
> 客户端发送 SYN 请求连接。
> [Server] 回复 SYN-ACK。

就这么点东西，工具把它变成带语音、带动画的视频页面。视频直接在浏览器里播放，断网也能看。你还能导出成 MP4（需要 ffmpeg）或者 WebM（不需要 ffmpeg，浏览器直接编码）。视频效果如下：

常开模式：每个回答都自动带页面

默认情况下，你得问一个比较复杂的问题，AI 才会生成页面。但项目提供了一个“常开模式”，打开之后，AI 每次给出总结、对比、方案的时候都会自动附带一个小页面，两到四个面板，安静放在回复末尾，不弹窗，不打断你。

开启方法很简单，把下面这段话粘贴给你的 Agent：

PLAINTEXT
开启“始终启用”模式，用于回答时生成 HTML 页面：添加一条全局规则：
[answer-me-with-html always-on]
每当回复中包含结论、总结、计划、比较、评测或解释时，无论内容长短，都必须同时使用 answer-me-with-html 技能制作一个页面（常规回答为 2～4 个面板），并在撰写回复之前，使用 --no-open 参数渲染该页面。
回复的最后必须按照该技能的 SKILL.md 中为当前运行环境规定的格式，附上页面链接。
以下情况除外：
- 日常闲聊；
- 不包含结论的一两句话简短回复；
- 纯命令输出；
- 用户明确要求纯文本的请求。

Agent 会自动把这条规则写到它的规则文件里（比如 Claude Code 的 ~/.claude/CLAUDE.md）。之后你就不用每次都特意说“用 HTML 回答”了，它自己就知道什么时候该附页面。

想关掉的话，删掉那条规则就行。

写作质量也帮你把关

这个工具还有一个容易被忽略的功能：写作检查。

每次生成页面的时候，工具会自动检查 AI 写的文字，参考了航空维修手册用的 ASD-STE100 标准。具体检查这些：

默认只是给个警告，不会拦着你。如果你想严格一点，可以开强制模式：

PLAINTEXT
将 answer-me-with-html 的配置风格设置为严格模式。

开了之后，不合格的草稿会被打回重写。

一些值得知道的细节

页面都存在本地。 生成的页面保存在 ~/.answer-me-with-html/pages/ 目录下。时间长了文件会越来越多，跟 Agent 说一声“clean up the pages”，它会问你确认之后帮你清理。

单个 HTML 文件，不依赖网络。 每个页面就是一个 .html 文件，没有 CDN 依赖，没有外部字体，断网照样打开。你直接把文件发给同事，对方双击就能看。

能在页面上回复。 页面右上角有个 Reply 按钮。你可以对任意一个面板写评论，或者在 AI 提供的选项里做选择。点 Reply 之后它会把你的反馈整理成一段话，你粘贴回 Agent 对话框，AI 就知道你的意见了。

支持引用真实代码。 代码块可以直接引用你项目里的文件（用 src= 和 lines= 指定），页面上显示的就是真实代码，不需要 AI 重新敲一遍。

支持中文界面。 简体中文、繁体中文、英文、日文都有对应的按钮和字体。

最后

这个工具解决的问题很直接：AI 越来越能写，人越来越看不完。与其让 AI 多写八倍的 token 去手搓 HTML，不如让它只写内容，把排版和画图交给专门的程序。

项目完全开源，MIT 协议，传送门：github.com/QingYunA/answer-me-with-html

装一下试试，你可能会发现自己再也不想看纯文字回答了。