explain-visually

以可视化方式讲解

构建一个 HTML 页面，通过文字、示例和图表讲解一个概念。

理解源材料

1. 阅读相关源材料。
2. 确定受众、核心观点、组成部分、顺序、决策、权衡，以及有用的下一步行动。
3. 区分已核实的事实和假设。不要臆造缺失的行为。
4. 选出适合用视觉方式讲解的关系。

组织讲解

开门见山地给出答案。使用少量章节，每个章节讲解一个部分。

使用具体标题。先定义术语，再使用。优先使用真实名称、路径、命令、界面、状态和观察到的行为，而不是泛泛的标签。

只有在源材料支持时，才加入前后对比、顺序、比较、层级或状态变化。结尾说明读者接下来应该做什么。不要重复总结。

构建成品

• 创建一个自包含的 HTML 文件，除非用户要求其他结构。
• 使用语义化 HTML、内联 CSS 和内联 SVG。除非项目已提供运行时依赖，或用户明确要求，否则避免使用此类依赖。
• 选择适合主题的颜色、字体和布局。不要默认重复使用同一套配色、字体组合、仪表板或幻灯片模板。
• 使用响应式字体和间距。移动端章节应自然延展，不要保持桌面端的宽高比。
• 使用 SVG 展示流程、关系、状态和架构。使用 HTML 和 CSS 展示比较、时间线、卡片和带注释的示例。
• 保持标签简短，并将说明放在图表旁边。
• 对于包含三个或更多组成部分的内容，分阶段构建图表。重绘前一阶段的状态，每次添加一个组成部分。
• 只有在交互有助于讲解时才添加，例如更改输入、显示状态或比较两种情况。
• 确保控件支持键盘操作，并为有意义的图形提供文本说明。

除非图表、渐变、图标或动效有助于讲解源材料，否则不要添加。

验证

在可用的真实浏览器或渲染器中打开成品，并检查桌面端和窄屏移动端的显示效果。

检查：

• 没有文字被裁切、重叠或溢出
• 各种屏幕宽度下的字体和图表标签均清晰易读
• 焦点状态可见，控件可通过键盘操作
• 对比度充足；如果存在动画，则支持减少动态效果
• 没有控制台错误、缺失资源或网络请求失败
• 每项事实性陈述都有源材料支持

修复问题后再返回文件。如果没有可用的浏览器或渲染器，请说明尚未验证布局。

返回成品链接，并简短说明所用的源材料及检查过的屏幕宽度。不要叙述构建过程。