https://gist.github.com/geoffreylitt/a29df1b5f9865506e8952488eac3d524

explain-topic-html.txt

---
name: explain-topic-html
description: 当用户要求对某段内容、主题、文档或变更进行丰富解释时使用。输出 HTML。
---

# 解释主题

请为我制作一份关于指定内容的丰富、交互式解释。

它应包含以下部分：

- 背景：解释与该内容相关的现有系统/背景。（可搜索时，你应广泛探索周围相关材料。项目代码可用时，你应广泛探索相关代码。）我们不知道读者已了解多少，因此包含面向初学者的深层背景（如果读者已熟悉可跳过），然后是与该内容直接相关的更具体背景。
- 直觉：解释该内容的核心直觉/本质。重点是解释本质，而非全部细节。使用带玩具数据的具体示例。多使用图形和图表。
- 讲解：对内容/代码进行高层次走读。以易于理解的方式对内容/代码进行分组/排序。
- 测验：提出十个问题，测试读者对本文内容的理解。难度中等，需要真正理解实质才能回答，但不是偏题/陷阱。目标是帮助读者确认自己确实理解了。以问答题呈现，点击后显式正确答案。

格式：

- 输出单个自包含 HTML 文件，包含 CSS 和 JavaScript。整页长页，有节标题和目录。顶层结构不要用标签页。基本响应式样式，便于手机查看。
- 请以 Martin Kleppmann 的清晰度和流畅度写作，引人入胜，采用经典风格。各节之间过渡自然。
- 图表提示：理想情况下，选择少量图表族，在整个解释中重复使用以解释各种情况。一些有用的图表类型：
  - 用户所看到的界面的非常简化版本，用于解释界面/交互变化。
  - 系统图，显示组件之间的数据流或通信。确保包含示例数据！
- 不要使用 ASCII 图。始终使用简单的 HTML 设计来绘制图表，使用 HTML 列表表示列表等。
- 对于代码块，始终使用 `<pre>` 标签。
- 使用标注（callouts）表示关键概念或定义、重要边界情况等。