解释器信息图 是做什么的？
你构建一个单一的HTML页面，以出色的视觉解释器（如Bartosz Ciechanowski、The Pudding、distill.pub）的方式解释一个概念：通过滚动、交互式图表、现实世界类比和渐进深度。输出应使一个聪明的非专家在5分钟内理解一个复杂主题。
开始之前
获取基本要素：
- 概念——你在解释什么？
- 受众——谁在读？（默认为聪明的非专家）
- “为什么是现在”——这是为会议、课堂、视频、博客文章还是个人学习准备的？
- 深度——快速理解（一个屏幕）还是更深入的探索（长滚动）？
如果未指定，默认为：聪明的非专家，深度足够滚动浏览3-5分钟，无特定用例。
结构
大多数概念可以用5个节拍来解释。按此顺序构建页面：
1. 钩子（一个屏幕）
以问题或令人惊讶的事实开头，使概念值得理解。不是“什么是X”——而是像“为什么建在水上的桥梁从空盒子开始？”或“为什么30年按揭贷款的成本超过房价的2倍？”这样的问题。
2. 类比
将不熟悉的概念与读者已知的事物联系起来。该类比应在页面其余部分持续使用，而不是在介绍后丢弃。示例：
- 大型语言模型作为“增强版预测文本”
- 现金流作为“水流过管道”
- DNS作为“互联网的电话簿”
选择一个强有力的类比并坚持使用。混合类比会使读者困惑。
3. 机制（3-7个部分）
按顺序讲解事物实际是如何工作的。每个部分：
- 一个清晰的标题
- 一个简短的段落
- 一个视觉元素——图表、动画或交互式元素
- （可选）一个“点击深入探究”揭示区域，供好奇者使用
这是页面的核心。视觉元素是使其与博客文章不同的地方。
4. 常见误解
一个简短的部分，处理人们对这个主题常犯的错误。格式为“误解：X / 现实：Y”对。
5. 要点
一个段落，将所有内容与第1部分的钩子联系起来。给读者留下一个可以在晚宴上复述的句子。
视觉风格
- 米白色或暖白色背景——长时间阅读比纯白色更护眼
- 宽泛的排版——正文18-20px，行高1.6+，最大宽度65ch
- 一种强调色——用于高亮、链接以及每个图表中的关键元素
- SVG格式图表——在任何缩放级别下清晰，可通过CSS设置主题
- 动画有目的性，而非装饰性——动画用于展示随时间的变化（过程展开、数值增长、系统反应）。不要仅为动画而动画。
- 滚动驱动在需要时使用——对于序列和过程，使用滚动触发的动画，让读者控制节奏。对于静态图表，跳过滚动触发。
交互式元素（每页最多使用2-3个）
- 滑块/范围输入——调整参数并查看效果
- 切换开关——在两个状态之间切换（有/无，之前/之后）
- 点击揭示——为好奇读者提供的额外细节
- 逐步动画——“下一步”按钮，以读者自己的节奏逐步浏览过程
不要过度使用。三个精心设计的交互时刻胜过十个噱头。
技术实现
单一自包含的.html文件，保存为explainer-[主题缩写].html。无外部依赖——嵌入任意字体，内联编写SVG，仅使用原版JavaScript。
要求：
- 移动端友好——大多数读者会在手机上滚动浏览
- 可访问——语义化HTML，图表具有替代文本，交互元素可通过键盘导航
- 快速——应瞬间打开，无加载动画，无资源加载延迟
内容规则
- 以类比而非定义开头。 “神经网络是一个函数逼近器”是正确的但无用。“神经网络就像一堆调光开关，学习如何调高或调低自己”是有用的。
- 使用真实数字。 “大多数按揭贷款持续30年”是泛泛而谈。“一笔50万美元的按揭贷款，利率7%，30年总成本为120万美元——其中70万美元是利息”是令人印象深刻的。
- 展示而非讲述。 如果你发现自己写“想象一下...”，考虑是否可以直接用图表来展示。
- 不要卖弄聪明。 机智可以；过分努力的笑话会分散解释的注意力。目标是清晰，而非娱乐。
- 以问题或含义结尾。 一个好的解释器让读者思考，而不仅仅是知情。
为何如此构建
长篇文本解释器容易被略读和遗忘。幻灯片对于细微差别来说过于压缩。滚动式视觉页面处于恰到好处的中间地带：足够长以提供实质内容，足够视觉化以令人难忘，足够交互以吸引参与。做得好时，这种格式会让读者截图并分享。
生成之后
告知用户：
- 文件路径
- 如何打开它
- 一件他们可以要求改进的特定事项（你还没完成——解释器的初稿通常需要一轮“X部分感觉薄弱”的修改）
- 如何分享——文件是自包含的，所以他们可以邮件发送、放到Slack、或托管在任何地方