ARTICLE · 1238332
AI 回答太长?Answer me with HTML 把重点做成一页图解
AI技能图鉴 / AI SKILL ATLAS
ARCHIVE 080 · ANSWER ME WITH HTML
FIELD GUIDE/OPEN SOURCE/VISUAL EXPLAINER
AI 回答太长？Answer me with HTML 把重点做成一页图解
分类：可视化讲解 / 图表 / 讲解视频
来源：https://github.com/QingYunA/answer-me-with-html
CATALOG / 目录
PHASE00
一次普通提问
·选择图表
·生成页面
·继续讨论
向 AI 问一个原理，回答里很容易同时出现好几个概念。读到后面，还得回头确认谁调用谁、哪一步在前。
Answer me with HTML 会把这类回答做成一页网页。流程能看箭头，方案能放在同一张表里比较，文字说明跟图放在一起。它还支持在页面上批注，以及制作带旁白的讲解视频。
关注AI技能图鉴，持续介绍AI技能
它解决什么问题
理解一次网络请求，既要知道消息先后，也要知道两端各自发生了什么。看一个项目，需要分清文件夹层级和模块之间的调用。比较两个工具，则想把功能和使用条件放在一起，看看差别。
这个 Skill 会按内容选择合适的图表。流程、层级、时间变化和方案对比，都有对应的表达方式。读者可以顺着图看过程，也可以先看结论，再回头找依据。
从一个问题到一页图解
装好后，可以向 Agent 提问。
讲讲 TCP 三次握手。
提问生成图解页，选择和批注汇总后可复制回对话。
选择图表
按问题安排内容
Skill 会判断回答里有哪些关系需要画出来，再把内容分成几个区块。每个区块讲清一件事。
TCP 这种有消息往来的问题，适合用时序图表现先后顺序。仓库里的 TCP 示例还放了状态变化图、报文标志位表，以及为什么要握手三次的解释。
看图时，可以先沿箭头看消息怎么走，再对照旁边的说明。几部分内容在同一页里，查起来方便。
生成页面
把图和说明放在一起
内容准备好后，自带工具会安排页面布局，画出图表，再把文字和表格放进去。生成的是一个 HTML 文件，用浏览器就能打开，离线也能看。
它还会检查稿件里的长句、啰嗦用词和部分错别字。默认先给提醒，帮助 Agent 把说明改得更简洁。
继续讨论
在页面上留下反馈
看到没明白的地方，可以给所在区块写评论，也可以直接标注某段文字、表格或代码。
如果回答里有需要你决定的方案，页面能显示选项。选好后，点击“回复”，就能把选择和批注汇总成一段消息，复制回 Agent 的对话里。
哪段需要补充、哪种方案更合适，都能带着对应内容一起反馈。
这些图表还能用在哪些地方
学习知识时，可以用流程图看步骤，用时间线看发展过程。整理一组数字时，柱状图适合放在一起比较，折线图适合看变化，环形图可以看各部分的占比。
看代码项目时，目录树能交代文件怎么分，关系图能说明模块怎么连接。页面还可以直接引用项目文件中的代码片段，保留原文件的行号，方便对照。涉及数据库结构时，也有实体关系图可用。
比较工具时，可以把差异整理成表格。修改文案时，则能逐句标出问题词和建议改法。页面也支持数学公式，讲知识点时可以把公式和文字说明放在一起。
还可以做成带旁白的讲解视频
需要视频讲解时，它能在图解稿上加旁白，把内容做成一个可播放的页面。
图表随讲解逐步出现，播放页支持章节跳转和倍速。
讲到哪一步，图上就出现哪一步。讲到某个节点，镜头可以靠近并高亮它。播放页支持章节跳转和倍速，想重看某一段，点对应章节就行。
配音可以使用系统语音，也可以接入 ElevenLabs 或本地语音服务。音频会放进播放页，生成好后，离线也能播放。
页面外观和阅读方式也能调整
内置的 blueprint 像工程图纸，shadcn 是简洁卡片，paper 适合读长文。工具可以按内容自动选主题，也能切换亮色、暗色。中文页面有对应的按钮文字。
字号可以调大，图表也会跟着放大。主题、明暗和自动打开浏览器这些设置，可以直接用自然语言告诉 Agent。
每个页面还保留了生成它的 Markdown 原稿，通过“复制原稿”就能取回。网页文件方便保存，原稿则方便继续修改。
如果希望日常的总结、方案和对比也附上一页图解，可以开启高频模式。它默认关闭，开启后会生成小页面，并在回复里附上路径。页面只生成，不自动弹出。
它是怎么把页面做出来的
模型负责写内容稿，使用的是扩展 Markdown。排版、配色和图表坐标，由 Skill 自带的命令行工具处理。
比如稿件里写明谁向谁发送消息，工具就按顺序画时序图；写明节点之间的连接，工具就安排流程图。文字和图表会沿用同一套主题。
安装与前置条件
它适用于能加载 Skill、运行命令的 Agent。官方列出了 Claude Code、Codex、Cursor、OpenCode 的安装方式。基础页面生成需要 Node.js 20 或更高版本，工具已经打包在 Skill 里。
可以把下面这段话发给 Agent。
帮我安装 Answer me with HTML：读 https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md，照着做。也可以在终端运行官方安装命令，再选择要装到哪个 Agent。
npx skills add QingYunA/answer-me-with-htmlClaude Code 还有插件安装方式，具体步骤在官方安装指南里。
如果需要由命令行另存视频文件，MP4 和 WebM 导出需要 Chrome、Node.js 22 或更高版本；MP4 还需要 ffmpeg。
适合谁
经常用 AI 学原理、读项目，或者需要比较工具的人，可以试试它。做知识分享、讲方案的人，也能把图解页作为讲解材料。
装好后，拿一个你正想弄明白的问题开始就行。先沿着图看一遍，再把疑问标在对应的位置，继续和 Agent 讨论。
关注AI技能图鉴，持续介绍AI技能
