这个开源工具,让 AI 的回答从文字墙变成可视化的图

问 AI 一个复杂问题，你会收到什么？

三段能刷三屏的文字。概念套概念，条目套条目。读完全文，你还得自己在脑子里把它拼成一张图——拼完那一刻，脑子比问之前还累。

这件事有解，而且解法简单得出乎意料——让 AI 别再写小作文了。它写份短草稿，剩下的交给工具去排。

一句话说清：Answer me with HTML 是一个开源 Agent Skill，AI 只写一份简短的 Markdown 稿件，它自带的 CLI 把稿件渲染成一页带图表、表格和版式的 HTML。模型要写的 token，只有手写 HTML 的约 1/8。

地址先放这儿，省得你一会儿再翻：

在线体验：answer-me-with-html.com/zh（不用装东西，打开就能玩） GitHub：github.com/QingYunA/answer-me-with-html（MIT 协议）

一堵墙，还是一页图

去年 Karpathy 发过一条推文，大意是：LLM 干的活越来越多，人反而越来越难跟上它的输出。这话放在日常里特别真实。

你问它「鸦片战争为什么会爆发」。它给你三段文字加一个列表。条约、时间线、因果链，全得你在脑子里完成。

给孩子辅导历史、给老师备课，这个毛病更明显。一节课的知识点被 AI 铺成几百字，谁还有耐心逐行读完？

这个项目的思路只有一句话：模型负责内容，工具负责形状。

模型写一份很短的 Markdown 草稿——想画一条时间线，就写一行「1839 | 林则徐虎门销烟」；CLI 自动排版、自动算坐标、自动套主题。大约 50 毫秒，一页图出来。

它怎么做到的

草稿的写法直白到不像代码。这是我为这篇稿子现写的一份，讲光合作用，总共 1,334 字节：

(阳光) --> [类囊体薄膜]: 光反应 · 需要光水 --> [类囊体薄膜]: 原料[类囊体薄膜] --> 氧气: 副产物[类囊体薄膜] --> ATP与NADPH: 能量搬运工二氧化碳 --> [叶绿体基质]: 暗反应ATP与NADPH --> [叶绿体基质]: 供能[叶绿体基质] --> 葡萄糖: 储能产物

就这么多。渲染出来的页面 115.5KB，流程图、对比表、提醒框全齐。多出来的体量，一个字都不用模型写。

模型直接写 HTML，到底在写什么？官方数了 9 页手写页面：SVG 坐标和路径占 47%，CSS 占 15%，HTML 标签占 17%。真正的内容，只占 21%。近 8 成功夫，花在排版上。

所以官方基准测试里，同一个问题，让模型直接写 HTML，平均 4,893 个输出 token、等 31 秒；用这个 skill，稿件 612 token、12 秒。token 少 8 倍，速度快 2.6 倍。

讲解视频更夸张。做个 3b1b 风格的教学视频，手写播放页要 27,839 token、202 秒；用它 1,566 token、17 秒。

作者是谁

关于作者 QingYunA，公开信息不多，我不编。

能查到的：项目 10 月 9 日上线，到现在不到一周，3.3k star、227 个 fork、5 个未关闭的 issue。这个涨速在开源圈算快。

他为什么做这个，README 里有段大实话：试过让 Agent 直接写 HTML 回答问题，页面不错，就是太慢：一页像样的网页等一两分钟，大半时间花在输出几百行每次都差不多的 CSS 上。画流程图更头疼，模型得自己算 SVG 坐标，箭头经常指到空白处。

所以他把这些活从模型手里拿走了。

我实际跑了一遍

说得多不如跑一遍。环境：Windows，Node 22.22.2，项目版本 0.5.3。

clone 之后不用 npm install——CLI 已打包进 skill，运行时依赖只有 marked 和 dagre 两个，都打进去了。直接渲染：第一次 1.334 秒，第二次 1.043 秒。这里头大部分是 Node 进程启动，纯渲染就是几十毫秒的事。

产物我验过：一个 120KB 的 .html，断网能开，发给别人能看。我把整个文件翻了一遍，除一个指回 GitHub 的文字链接，零外部请求。不连 CDN，不加载外部字体。

为验证它不只服务程序员，我写了两份非技术稿件扔给 CLI：一份生物课的光合作用，一份历史课的「鸦片战争为什么会爆发」。STE 受控写作检查开严格模式，0 警告。流程图、时间线、因果链、对比表，全部正常。不是技术内容，一样出图。

不好用的地方，挑三条说：

1. 默认自动弹浏览器。本地用要加 --no-open，不然每渲染一次弹一个标签页。
2. 需要 Node 20+。一点命令行都不想碰的人，用不了 CLI，只能玩在线版。
3. 项目太新。一周不到 3.3k star 是快，但意味着稳定性还没经过时间验证，5 个 open issue 就是证据。

还有个插曲。我想查它的实时数据，GitHub API 限流了，star 数最后是从 shields.io 的 badge 上扒下来的。跟项目无关，但说明它现在很热，热到接口都在被反复打。

怎么用

门槛从低到高，对号入座。

完全不想写代码的（学生、老师都算）：打开 answer-me-with-html.com/zh，左边编辑器右边实时渲染。把编辑器里默认那份稿件删掉，换成你要讲的一课、要复习的一章。30 秒出图，不用注册。

当老师的：下次备课，让 AI 把知识点写成 Markdown 草稿，渲染成页，上课直接投屏。一页图讲完的东西，比十页 PPT 更适合给后进生补差。

学生：复习时把一章内容让 AI 出一页图。重点不是图好看，是逼着 AI 把结构理出来。

它理不清的地方，就是你没学会的地方。

会写代码的（IT 人士）：一行命令装进你的 Agent，npx skills add QingYunA/answer-me-with-html。之后像平时一样提问就行。要不要出页面由 Agent 判断：概念关系复杂、有多步流程、要做多维对比，它才出。也可以直接说「用 HTML 讲一下」。

边界与代价

它不能替你思考。稿件的质量取决于你对内容的理解——AI 理顺的是表达，不是认知。

bench 数字来自官方测试（Claude Sonnet 5.5、普通 Claude Code 环境），不是我的机器，引用请知悉。我的实测只覆盖渲染本身。

MIT 协议，可放心用，可商用。页面内嵌的 Bangers 字体是 OFL 协议，打包分发时注意一下。

高频模式建议打开：每个结论附一页 2 到 4 个面板的小图。对写周报、做方案的人，这个比问答模式更值钱。三套主题（blueprint、shadcn、paper）带亮暗，页面上随时切换，也能加自己的主题。

结尾

双链再放一次：

在线体验：answer-me-with-html.com/zh GitHub：github.com/QingYunA/answer-me-with-html

感兴趣的朋友可以打开在线 playground，把编辑器里默认那份稿件，换成你明天要给一个人讲清楚的事。深度体验在你也使用场景中。

觉得有用，点个在看。