---
name: visual-teaching
description: 将任意知识点转化为可视化教学动画。生成自包含的 HTML 网页文件，用浏览器打开即可自动播放动画。适用于给学生或孩子讲解概念、原理、数学公式、历史事件等。当用户需要将知识点做成动画讲解时使用。
---

# 可视化教学讲解

> 本 Skill 来自《玩转 Skill：零门槛打造你的 AI 数字员工》第 11.1 节。
> 这是一个框架模板，不需要任何配置，开箱即用。
> 如果你有固定的视觉风格偏好（配色、字体等），可以创建 `references/style_guide.md` 来记录。

## 核心设计思路

本 Skill 让 AI 生成用 **GSAP**（GreenSock Animation Platform，一种广泛使用的网页动画库）驱动的 HTML 动画文件。

选择这个方案的原因：
- 网页代码是 AI 训练数据最丰富的领域，生成质量高、出错少
- 生成的文件用浏览器直接打开就能播放，不需要安装任何软件
- 修改方便——发现哪里不对，直接用自然语言说，AI 改完刷新浏览器即可
- GSAP 是互联网上使用最广泛的网页动画库之一，AI 对它非常熟悉

## 使用场景

用户提供了一个知识点（如"水的三态变化"、"光合作用"、"勾股定理"、"地球公转"等），需要生成一段可视化的动画讲解，让学生或孩子直观理解。

## 工作流程

### 第一步：拆解知识点，制定讲解大纲

理解用户提供的知识点，将其拆分为 3~6 个讲解环节。

拆分原则：
- 每个环节有明确的教学目标（"这一环节让学生理解什么"）
- 环节之间有逻辑递进关系
- 复杂知识点可以先拆出一个"前置概念"环节

输出讲解大纲，格式如下：
```
知识点：[XX]
讲解环节：
1. [环节名称]：[这个环节要展示和说明的核心内容]
2. [环节名称]：...
...
```

**将大纲展示给用户，必须等用户确认后才能进入下一步。**

用户可能要求增删环节、调整顺序，或修改某个环节的侧重点，根据反馈调整后再进行。

### 第二步：生成动画网页

根据用户确认后的讲解大纲，生成一个完整的 HTML 动画文件。

文件必须满足以下所有要求：

**技术要求**：
- 所有代码（HTML + CSS + JavaScript）放在**同一个文件**中
- GSAP 动画库从 CDN 加载（`https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js`），不依赖本地文件
- 在主流浏览器（Chrome/Edge/Safari）中正常运行

**布局要求**：
- 所有动画元素放置在一个 **1920×1080** 的居中固定容器内
- 所有图形和文字元素不得超出容器边界
- 同一时刻画面上的元素不得相互遮挡（关键图形和关键文字尤其注意）

**视觉要求**：
- 使用浅色、明亮、和谐的配色方案（背景干净，元素色彩丰富有层次）
- 大量使用 SVG 图形元素（形状、线条、图标），使画面精美、有设计感
- 知识相关的图形表达必须**准确**，与知识内容不能有矛盾（例如：画分子结构不能画错）
- 文字字号不小于 24px，确保在普通屏幕上清晰可读

**动画要求**：
- 使用 GSAP 驱动所有动画，确保动画流畅
- 动画**自动播放**，从头到尾完整演示整个讲解过程
- **禁止添加任何交互按钮**（播放/暂停/下一步等），打开即自动播放
- 各讲解环节之间有自然的过渡效果，不能生硬切换
- 单个知识点的动画总时长建议控制在 **1~3 分钟**

**旁白文字要求**：
- 每个讲解环节配有文字解说，跟随动画节奏依次出现
- 解说语言简洁易懂，从头到尾能把知识点**完整**讲清楚
- 旁白文字不得遮挡关键的图形动画元素

如果 `references/style_guide.md` 存在，阅读其中的视觉风格偏好并遵循。

生成完成后，将 HTML 文件保存到用户的工作目录，告知文件路径。

### 第三步：预览与对话式修改

告知用户文件已保存，提示："请用浏览器打开预览，看完告诉我哪里需要调整。"

用户的修改意见可能包括：

| 修改类型 | 示例说明 |
|:---|:------|
| 视觉调整 | "字太小了"、"背景太暗"、"颜色太单调" |
| 速度调整 | "动画太快了，来不及看"、"某一段停留时间太短" |
| 内容调整 | "第二个环节讲得不够清楚"、"能不能加一个对比的场景" |
| 结构调整 | "能不能在最后加一个总结"、"把第一个和第二个环节合并" |

根据修改意见，定位需要调整的代码段，修改后**重新生成完整的 HTML 文件**（替换原文件），提示用户刷新浏览器查看效果。

可以多轮修改，直到用户满意为止。

## 注意事项

- 数学公式用 SVG 绘制（确保精确），不要用 Unicode 特殊字符代替
- 如果知识点含有多个步骤（如算法演示、化学反应过程），每一步都要有明显的视觉区分
- 生物/化学类知识点的分子结构、细胞结构等图形一定要画对，宁愿简化也不画错
- 动画同一时刻屏幕上的元素不宜超过 5~6 个，否则会让学生不知道该看哪里
- 如果用户想把网页动画录制成视频文件，可以配合使用 OBS 或 ffmpeg 等屏幕录制工具
