可视化教学讲解

本 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 等屏幕录制工具