[Github] answer-me-with-html – 让 AI 把复杂问题讲成一页 HTML

Github发现2026-11-07发布 WarpEdit

answer-me-with-html 是一个给 AI Agent 使用的开源 Skill：你照常提问，Agent 把答案写成简短的 Markdown 稿件，再由随附的命令行工具排成一页 HTML。文字、表格、代码和关系图可以放在同一张页面里，生成后能离线打开。它特别适合“道理都写出来了，但我还没看懂它们怎么连起来”的问题。

answer-me-with-html 将 Markdown 稿件经 CLI 渲染成 HTML 图文页面的概念封面

AI 写内容，CLI 接手排版和画图

让 AI 直接输出 HTML 也能得到漂亮页面，但模型往往要花不少篇幅写 CSS、标签，以及 SVG 里的坐标和连线。answer-me-with-html 把这部分工作交给固定的渲染器：模型决定讲什么、信息怎样分组，CLI 负责面板布局、主题和图形坐标。

比如解释 TCP 三次握手，模型可以写“客户端向服务器发送 SYN”这样的关系描述，不必自己计算箭头从哪个像素画到哪个像素。渲染器把关系变成时序图，把状态变化变成流程图；稿件格式出错时，还会指出行号、组件和正确示例，方便 Agent 修改后重新生成。

answer-me-with-html 官方示例：左侧为 TCP 问题的终端文字回答，右侧为包含图解的 HTML 页面 — 同一个 TCP 问题的两种呈现方式。图源：answer-me-with-html 官方仓库。

所以它更接近一套“给 Agent 用的解释稿格式和排版工具”，而不是又一个回答问题的模型。图画得整齐，不代表因果关系就正确；答案中的概念、数据和判断，仍然需要模型与使用者核对。

哪些问题值得变成一页 HTML

判断是否需要页面，可以先看信息之间有没有值得画出来的关系。一次握手有先后次序，几个方案有共同的比较维度，一个仓库有模块之间的调用关系；这些内容只用连续段落讲，读者往往得一边读、一边在脑子里重新排版。

想弄明白的问题	合适的组织方式	页面应帮你看清什么
TCP 两端怎样建立连接	时序图与状态图	消息往返和各端状态如何对应
两个缓存方案怎么选	按实际约束制作对照表	差异在哪，哪些条件会改变选择
项目模块怎样协作	目录树与调用关系图	文件位置和依赖方向分别是什么

answer-me-with-html 官方 TCP 中文页面示例，展示握手时序、状态迁移及相关说明 — TCP 官方示例把消息顺序与状态变化分开呈现，避免把所有解释塞进一张大图。

它提供流程图、时序图、树、时间线、图表、逐词标注等组件，也有供阅读者作选择的 ask 组件。组件多不等于每页都要塞满：比较就用同一组字段，讲先后顺序就用时序图。一条命令能说清的问题，普通回答反而更省事。

安装后，先用一个具体问题试出差别

普通页面生成需要本机有 Node.js 20 或更高版本，以及能够使用 Skill、运行 shell 命令的 Agent。仓库列出了 Claude Code、Codex、Cursor、OpenCode 等宿主。它不是把提示词复制进任意聊天框就能运行的网页插件，Agent 还需要能调用本地渲染工具。

项目给出的一条安装入口是：

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

安装器会让你选择目标 Agent。不要把开发者贡献代码时使用的整仓库 npm install 流程，当成普通使用者的必做步骤：这个 Skill 已经带有打包后的 CLI。安装完成后，可以让 Agent 执行这样一个任务：

用 answer-me-with-html 生成一页中文 HTML，解释 TCP 三次握手。把客户端与服务器的消息往返画成时序图，把状态变化单独说明，区分每一步发送和收到的内容。

这条提问同时交代了问题、语言和信息分组，比单独说“做得好看一点”更容易判断结果。打开页面后，可以沿箭头核对消息顺序，再检查状态变化是否能和每一次收发对应；如果只得到了几块带标题的文字卡片，还没有体现关系图的价值。

如果你还不熟悉作为输入稿件的格式，可以先看Markdown 是什么。这里的 Markdown 负责表达结构，最终阅读页则是由工具生成的 HTML。

一页文件带走答案，反馈仍要带回 Agent

页面默认保存在 ~/.answer-me-with-html/pages/。生成的 HTML 会内嵌所需样式、图形和 Markdown 原稿，不依赖 CDN 或外部网页字体；文件发给别人后，对方可以用浏览器离线查看。页面还提供主题、亮暗模式和源稿复制功能，长文可以采用单栏布局，关系密集的内容则适合多面板。

阅读者可以给面板添加评论，或回答页面中的选项题，再用“回复”按钮汇总成一条消息，贴回 Agent 对话。这是一条“阅读页面 → 整理反馈 → 回到对话”的路径，不是页面上的每次点击都会自动让模型继续工作的实时协作服务。

离线也有明确范围：生成后的页面可以离线读，不代表最初的 AI 回答过程可以离线完成。如果 Agent 使用云端模型，输入材料仍按该模型与宿主的方式处理；页面里写进了什么，分享这个文件时也就分享了什么。

直接把 HTML 发到聊天工具，有时只会显示成源代码附件。v0.5.11 加入了 am export，可以把现成页面导出为 PDF 或 PNG 切片；这个导出分支需要 Node.js 22 或更高版本，以及 Chrome、Chromium 或 Edge。导出适合让别人直接阅读，原 HTML 则保留主题切换、评论和选项等交互。

输出 token 与整体费用要分开看

项目 README 给出了一组作者测试：模型直接手写 HTML 平均输出 4,893 个 token，改写 Markdown 稿件后平均为 612 个，约为前者的八分之一。这个差距主要来自省去了逐字输出页面样式、标签和 SVG 坐标的过程，并不表示答案的内容也被压缩成原来的八分之一。

作者同时说明，在那组条件下，总费用约减少 15%，没有随输出 token 按同样比例下降，因为系统提示、问题和对话记录等输入部分仍然需要处理。这些是仓库自己的测试数据，不是本文的独立实测，也不能作为换一个模型、题目或上下文后仍能达到的固定收益。

比起只追“少了多少 token”，更值得判断的是：你是否经常需要把答案交给别人读、回头查，或者让几个人围绕同一组关系讨论。如果只是偶尔问一个语法问题，多生成一个文件未必更方便；如果经常需要理解架构、讲清流程或比较方案，把内容与页面绘制分开就更有意义。

开源许可与后续入口

answer-me-with-html 采用 MIT 许可证，可以在保留相应版权与许可声明的前提下使用、修改和分发。主题可内嵌的 Bangers 字体另采用 SIL Open Font License 1.1，不能只看仓库的 MIT 标记就忽略字体的单独条款。截至 2026 年 11 月 7 日，核验到的最新 Release 为 v0.5.11。

项目地址：QingYunA/answer-me-with-html

官网：https://answer-me-with-html.com/zh/
中文使用参考：https://github.com/QingYunA/answer-me-with-html/blob/main/docs/reference.zh-CN.md
版本记录：https://github.com/QingYunA/answer-me-with-html/releases