关于 explainer-infographic
用于制作单页 HTML 视觉讲解页的技能，面向希望让非专业读者理解复杂概念的内容创作者。它通过类比、滚动叙述、图示和少量交互逐步讲解，并要求输出自包含且可访问的文件。
主要功能
- 01按五段结构组织讲解内容
- 02用类比和图示解释机制
- 03加入最多三处交互元素
- 04生成自包含的 HTML 文件
- 05支持移动设备与键盘访问
适用场景
- 01制作供课堂使用的概念讲解页
- 02将复杂机制整理为可滚动的视觉说明
- 03创建可独立分享的单页学习材料
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/explainer-infographic确认已加载。
附带文件evals/evals.json
详细介绍
解释型信息图
制作一个单文件 HTML 页面，用优秀的视觉化讲解作品（Bartosz Ciechanowski、The Pudding、distill.pub）的方式解释一个概念：通过滚动浏览、交互式图表、现实生活中的类比，以及循序渐进的深入讲解，让聪明的非专业读者在 5 分钟内理解复杂主题。
开始之前
先了解基本信息：
- 概念 — 你要解释什么？
- 受众 — 谁会阅读？（默认是聪明的非专业读者）
- “为什么是现在” — 这是为了会议、课程、视频、博客文章，还是个人学习？
- 深度 — 快速建立直觉（一个屏幕），还是深入探索（长篇滚动阅读）？
如果未指定，默认设置为：面向聪明的非专业读者，内容足以支持 3-5 分钟的滚动阅读，不针对特定用途。
结构
大多数概念都可以分为 5 个部分来解释。按以下顺序构建页面：
1. 引子（一个屏幕）
以一个问题或令人惊讶的事实开场，让读者觉得这个概念值得了解。不要写“什么是 X”，可以写“为什么建在水上的桥要从空箱子开始？”或“为什么 30 年期房贷的总成本会超过房价的两倍？”
2. 类比
把陌生的概念与读者熟悉的事物联系起来。这个类比应贯穿页面后续内容，而不是只在引言中出现。示例：
- 把大模型比作“增强版预测文本”
- 把现金流比作“水在管道中流动”
- 把 DNS 比作“互联网的电话簿”
选一个有力的类比，并贯穿始终。混用类比会让读者困惑。
3. 工作原理（3-7 个部分）
按顺序讲解事物的实际运作方式。每个部分都应包含：
- 一个清晰的标题
- 一段简短说明
- 一种视觉呈现方式——图表、动画或交互元素
- （可选）一个“点击深入了解”内容，供好奇的读者查看
这是页面的核心。视觉内容正是它区别于博客文章的关键。
4. 常见误解
用一个简短的部分说明人们对这个主题常见的误解。采用“误区：X / 事实：Y”的形式。
5. 总结
用一段话将所有内容与第 1 部分的引子联系起来。最后留给读者一句可以在晚宴上复述的话。
视觉风格
- 米白色或暖白色背景 — 长时间阅读时比纯白色更护眼
- 宽松易读的排版 — 正文 18-20px，行高至少为 1.6，最大宽度为 65ch
- 一种强调色 — 用于高亮、链接，以及每个图表中的关键元素
- 使用 SVG 绘制图表 — 任意缩放都清晰，并可通过 CSS 更换主题
- 动画要有目的，而非装饰 — 用动画展示随时间发生的变化（过程展开、数值增长、系统响应）。不要只是因为能加动画就加。
- 在合适的地方由滚动触发 — 对于序列和流程，使用滚动触发的动画，让读者掌控阅读节奏。静态图表则无需滚动触发。
交互元素（每页最多使用 2-3 个）
- 滑块/范围输入 — 调整参数并查看效果
- 切换开关 — 在两种状态之间切换（有/无、之前/之后）
- 点击展开 — 为好奇的读者展示更多细节
- 逐步播放动画 — 使用“下一步”按钮，按照读者的节奏逐步讲解流程
不要过度使用。三个精心设计的交互环节胜过十个噱头。
技术实现
将页面保存为单个自包含的 .html 文件，文件名为 explainer-[topic-slug].html。不依赖外部资源——嵌入所需字体，将 SVG 代码直接写在文件中，仅使用原生 JS。
必需项：
- 适配移动设备——大多数读者会用手机滚动浏览
- 无障碍——使用语义化 HTML，为图表添加替代文本，交互元素支持键盘操作
- 快速——打开后应立即显示，不出现加载动画，也没有资源加载延迟
内容规则
- 先用类比开场，而不是先下定义。“神经网络是一种函数近似器”虽然正确，却毫无用处。“神经网络就像一组学会自行调节亮度的调光开关”才有帮助。
- 使用真实数字。“大多数房贷期限为 30 年”很笼统。“一笔利率为 7% 的 50 万美元房贷，30 年总成本为 120 万美元，其中 70 万美元是利息”则令人印象深刻。
- **展示，而不是空谈。**如果你发现自己在写“试想一下……”，不妨考虑能否直接用图示来呈现。
- **不要故作俏皮。**机智无妨，但刻意逗趣会分散读者对解释内容的注意力。目标是清晰，而非娱乐。
- **以一个问题或启示作结。**优秀的讲解会让读者继续思考，而不只是获取信息。
为什么要这样设计
长篇文字讲解很容易被读者扫读后遗忘。幻灯片又过于精简，难以呈现细微之处。可滚动的可视化页面恰到好处：内容足够充实，视觉效果足够令人印象深刻，互动性也足以吸引读者参与。设计得当时，这种形式会让读者忍不住截图分享。
生成后
告诉用户：
- 文件路径
- 如何打开文件
- 一件他们可以提出的具体改进要求（这项工作还没完成——讲解的初稿通常需要再修改一轮，例如指出“X 部分感觉比较薄弱”）
- 如何分享——该文件是独立完整的，因此可以通过电子邮件发送、放到 Slack 中，或托管在任何地方