智能体之AI交互性课件制作
大约 17 分钟
智能体之AI交互性课件制作
相关信息
当教学从 “知识传递” 转向 “能力建构”，课件早已不再是板书的电子化替代品。学生需要可观察、可操作、可验证的学习载体，教师需要能适配不同课堂节奏、支持分层教学的演示工具 ——交互课件 正是回应这一需求的核心方案。但在实际制作中，多数创作者常面临三重困境：
- 复杂交互效果依赖专业编程能力，制作周期长难以匹配教学进度；
- 学科场景差异化大，通用模板难以适配生物结构、化学机理、物理过程、历史脉络的不同表达需求；
- 创意构思与落地实现之间存在明显的技术鸿沟。
人工智能工具的普及，正在重构课件制作的生产方式：它既可以辅助快速生成素材、搭建框架，也能配合低代码方案实现丰富的交互效果，让一线教师和普通课件制作者无需深耕前端技术，也能产出高质量的交互教学资源。
今天我们以**“实操落地、学科适配、低门槛可复用 ”**为核心原则，不堆砌抽象概念，不讲解复杂代码，聚焦一线教学最常用的四大核心学科 —— 生物、化学、物理、历史，提供完整的 AI 交互课件制作路径。
在后续内容中，我们将先建立交互课件的基础认知，梳理通用 AI 工具链与制作流程；再逐一进入各学科实战案例：
- 生物学科：从人体脏器到生理过程，实现 3D 模型交互与动态原理演示
- 化学学科：拆解分子结构与反应过程，分步模拟微观变化
- 物理学科：还原机械运动与物理规律，可调控的原理动画
- 历史学科：打造时空互动地图与事件脉络，沉浸式叙事学习
1. 医学课件
前言
定义
- 打开workbuddy，输入下列提示词，点击生成，等待生成结果
# 智能体之 AI 交互性课件制作（完善版提示词）
你是一名资深的前端交互开发工程师 + 生物教学课件设计师。请帮我制作一个可以本地直接运行的 HTML 互动课件，主题为：
**【呼吸系统与肺泡气体交换 3D 互动课件】**
---
## 一、开发目标
制作一个适合中学生生物课堂使用的 3D 互动课件，既能用于课堂演示，也适合录制短视频展示。需体现 3 个核心知识点：
1. 呼吸系统整体结构
2. 吸气 / 呼气运动
3. 肺泡气体交换
## 二、模型资源
优先围绕以下 3 个 glb 模型路径编写代码（约定路径，后续可替换）：
models/respiratory-system.glb <!-- 呼吸系统整体模型 -->
models/lung-motion.glb <!-- 肺部运动模型 -->
models/alveolus.glb <!-- 肺泡模型 -->
**降级策略（必须实现）**：加载 glb 失败或文件不存在时，不得白屏报错，改用 Three.js 程序化几何体（CylinderGeometry 建气管/支气管、SphereGeometry 缩放建左右肺、小球簇建肺泡）自动顶替，并在控制台打印警告。保证**第一次打开就能跑起来**。
## 三、技术要求
1. Three.js（锁定 r160+），使用 ES Module + importmap 引入；优先从本地 `libs/three.module.js` 加载，缺失时回退 CDN（unpkg/jsdelivr 双保险）。
2. GLTFLoader 从同一版本目录加载，不混用版本。
3. 若模型自带骨骼/节点动画，优先用 `AnimationMixer` + `clip.name` 调用原生动画；无动画时用缩放/位移动画模拟（吸气=肺 group scale 1.0→1.25，呼气反向）。
4. 单页应用，3 个场景共用一个 WebGL 渲染器，切换场景时只换 Scene 内容（性能友好）。
5. 桌面 Chromium 浏览器优先，1920×1080 下录屏效果最佳。
## 四、整体结构：3 个独立教学场景（顶部 Tab 切换）
### 场景 A：整体呼吸系统（模型：respiratory-system.glb）
- 鼠标拖拽旋转（OrbitControls）、滚轮缩放、双击复位视角（相机回到初始位姿，平滑过渡 0.5s）。
- 中文标签用 CSS2DRenderer 或投影到屏幕坐标的 HTML 标注：**鼻/口、气管、支气管、左肺、右肺、肺泡（概念引出）**。
- 点击标签：对应部位高亮（emissive 变色 + 轻微脉冲），弹出简短知识卡（2~3 句话，如"气管：空气进出肺部的通道，由 C 形软骨环支撑，保持气道畅通"）。
- 「空气路径演示」按钮：发光粒子沿 鼻/口 → 气管 → 支气管 → 肺 的 CatmullRomCurve3 路径流动，粒子带拖尾光效，全程约 4 秒，可重复触发。
- 标签、按钮、面板全部中文；界面简洁、科技感、适合课堂投影。
### 场景 B：呼吸运动（模型：lung-motion.glb）
- 三个按钮：**吸气 / 呼气 / 自动循环**（自动循环 = 吸呼各 2 秒往复，再点一次停止）。
- 有原生动画调原生，没有就做缩放模拟：吸气时肺放大 + 膈肌下移，呼气反向。
- 右侧简短说明：
- **吸气**：胸腔扩大（膈肌下降、肋骨上提），肺扩张，肺内气压 < 大气压，外界空气进入肺。
- **呼气**：胸腔缩小（膈肌上升、肋骨下降），肺回缩，肺内气压 > 大气压，气体排出。
- 界面极简，录屏一眼看懂；当前状态用大字提示「吸气中…/呼气中…」。
### 场景 C：肺泡气体交换（模型：alveolus.glb）
- 半透明肺泡囊 + 一根毛细血管缠绕（模型有就用模型的，没有就程序化补）。
- 「气体交换演示」按钮：红色粒子（CO₂）从血管一侧穿膜进入肺泡，蓝色粒子（O₂）从肺泡穿膜进入血液，粒子带图例说明（O₂/CO₂ 颜色常显）。
- 右侧简短说明：
- **O₂**：肺泡 → 血液（与血红蛋白结合，运往全身）。
- **CO₂**：血液 → 肺泡（代谢废物，呼出体外）。
- 交换方向用箭头动画强化，录屏一眼看懂。
## 五、课堂互动：随堂选择题
- 每个场景讲解完毕后弹出 2 道单选题（共 6 题），例如：
- A 场景：「气管的 C 形软骨环的作用是？」
- B 场景：「吸气时肺内气压与大气压的关系？」
- C 场景：「肺泡中 O₂ 的扩散方向是？」
- 答对：绿色反馈 + 进入下一知识点；答错：红色提示 + 展示解析后重答，不阻塞流程。
- 底部显示进度（第 X/6 题），全部答完弹出完成面板。
## 六、演示模式（录短视频专用）
「演示模式」按钮点击后，自动按 25 秒时间轴执行：
| 时间 | 内容 |
|---|---|
| 0–8s | 场景 A：依次高亮鼻→气管→支气管→肺（每个约 2s） |
| 8–15s | 自动切到场景 B：播吸气(2s) → 呼气(2s) → 自动循环(3s) |
| 15–23s | 自动切到场景 C：播放 O₂/CO₂ 交换动画 |
| 23–25s | 黑底总结语淡入：「把抽象知识点，变成能看、能点、能提问的互动模型。」 |
- 演示期间隐藏所有按钮，右下角显示「演示中… 点击任意处退出」。
- 演示模式不弹选择题（纯观赏），退出后恢复交互。
## 七、界面与代码要求
1. 配色：深色科技风底（#0a1628 系），主色青蓝（#4fd1c5），高亮橙（#ff9f43），红涨绿跌规则不适用、粒子红=CO₂、蓝=O₂。
2. 顶部：课件标题 + 3 个场景 Tab；右侧：知识面板；底部：功能按钮条。字体系统默认无衬线，中文优先。
3. 代码结构清晰、带中文注释；关键区块用 `<!-- ===== 场景A：xxx ===== -->` 分隔，方便后续修改。
4. 输出：优先 `index.html + style.css + main.js` 三文件结构（用 ES Module 相对引用），`libs/` 放 three.js，`models/` 放 glb。
5. 不依赖任何后端、构建工具、npm install；双击 index.html 或本地静态服务器均可运行。
## 八、验收清单
- [ ] 双击 index.html 即可打开（无模型也能跑，程序化模型兜底）
- [ ] 三个场景可切换，交互全部可用
- [ ] 6 道选择题流程完整
- [ ] 演示模式完整播放 25s 并可中途退出
- [ ] 全中文界面，代码注释齐全结果如下：
2. 化学学科
前言
定义
- 打开workbuddy，输入下列提示词，点击生成，等待生成结果
# 智能体之 AI 交互性课件制作（化学学科）
你是一名资深的前端交互开发工程师 + 化学教学课件设计师。请帮我制作一个可以本地直接运行的 HTML 互动课件，主题为：
**【氧气·氢气·碳酸钙与盐酸——常见化学反应 3D 互动课件】**
---
## 一、开发目标
制作一个适合中学化学课堂使用的 3D 互动课件，既能用于课堂演示，也适合录制短视频展示。需体现 3 个核心知识点：
1. 常见物质分子结构（O₂、H₂、H₂O、CO₂、HCl、CaCO₃）
2. 两个经典反应实验（电解水、碳酸钙与稀盐酸）
3. 三种基本反应类型的微观本质（分解、化合、复分解）
## 二、技术要求
1. Three.js r160+，ES Module + importmap 引入，CDN（unpkg）加载，双击 HTML 即可运行，无后端、无构建工具。
2. 单文件 HTML 优先（内联 CSS/JS），所有代码带中文注释，关键区块用 `===== 场景X =====` 分隔。
3. 预留 `GLB_PATHS = {A,B,C}` 扩展口：填入模型路径后自动加载 glb 并支持 AnimationMixer 原生动画；加载失败自动回退程序化几何体（球棍模型 / 玻璃器皿拼装），保证第一次就能跑起来。
4. 桌面 Chromium 浏览器优先，1920×1080 录屏效果最佳；联网加载失败时显示离线提示（8 秒看门狗）。
## 三、整体结构：3 个独立教学场景（顶部 Tab 切换）
### 场景A：分子结构
- 程序化球棍模型展示 6 种物质：氧气 O₂、氢气 H₂、水 H₂O、二氧化碳 CO₂、氯化氢 HCl、碳酸钙 CaCO₃，两行三列排布，元素统一配色（O 红 / H 白 / C 灰 / Cl 绿 / Ca 紫，页面常显图例）。
- 支持拖拽旋转、滚轮缩放、双击平滑复位（0.5s）；可选自动旋转开关。
- 点击分子（射线拾取或点标签）：对应分子高亮脉冲 + 相机聚焦 + 右侧知识卡（分子式大字 + 2~3 句知识说明）。
- 「分子巡览」按钮：依次自动聚焦每种物质（每个约 1.5s），相当于"空气路径演示"的知识巡游。
### 场景B：反应实验
- 左侧**水电解器**：玻璃水槽、双电极、倒扣试管、电源盒导线；「通电电解」按钮后气泡上浮（负极 H₂ 白色 ×2 频率、正极 O₂ 红色 ×1 频率），试管内气体柱逐渐生长（负极高约正极 2 倍）。
- 右侧**锥形瓶装置**：大理石碎块 + 稀盐酸 + 导管 + 澄清石灰水试管；「加入盐酸」按钮后 CO₂ 橙色气泡从石块表面冒出、气泡沿导管曲线移动、4 秒后澄清石灰水**变浑浊**（液体颜色过渡动画）。
- 提供「重置实验」按钮；顶部状态胶囊大字提示当前过程（录屏一眼看懂）。
- 右侧面板显示两个方程式：
- 2H₂O —通电→ 2H₂↑ + O₂↑（口诀：正氧负氢）
- CaCO₃ + 2HCl → CaCl₂ + H₂O + CO₂↑
### 场景C：微观世界
- 粒子级动画演示三种基本反应类型，每个一个按钮：
- 💧 **分解反应**（电解水）：2 个 H₂O → 断键闪烁 → 原子飞行重排 → 生成 2H₂ + O₂
- 🔥 **化合反应**（氢气燃烧）：2H₂ + O₂ → 点燃闪光 → 生成 2H₂O
- 🪨 **复分解反应**（碳酸钙+盐酸）：CaCO₃ + 2HCl → 互相交换成分 → 生成 CaCl₂ + H₂O + CO₂↑（CO₂ 带气泡光晕上浮）
- 动画流程统一：化学键断裂闪烁 → 原子飞行到新位置 → 新键渐入形成 → 产物标签弹出。
- 每次播放前自动清空上一次演示，方程式以状态胶囊显示。
## 四、随堂选择题闯关
- 每场景 2 道单选题，共 6 题，覆盖：氧气性质、水的构成、正氧负氢、CO₂ 检验、反应类型判断、石灰水变浑浊原理。
- 答对：绿色反馈 + 进入下一题；答错：红色提示 + 解析后重答，不阻塞流程。
- **答对当前场景全部题目后解锁下一场景 Tab（🔒 → 可点击）**，全部通关显示完成提示。
## 五、演示模式（录短视频专用）
「演示模式」按钮点击后，自动执行约 25 秒时间轴（演示期间隐藏所有 UI，右下角提示"点击任意处退出"）：
| 时间 | 内容 |
|---|---|
| 0–8s | 场景A：分子巡览，依次聚焦 6 种物质 |
| 8–16s | 场景B：先播电解水（正氧负氢），再播碳酸钙+盐酸（石灰水变浑浊） |
| 16–23s | 场景C：播放分解反应 + 复分解反应微观动画 |
| 23–25s | 黑底总结语淡入：「把抽象的化学反应，变成能看、能点、能提问的互动模型。」 |
注意：演示模式切换场景必须绕过答题解锁（加 force 参数）。
## 六、界面与代码要求
1. 深色科技风底（#0a1628），主色青蓝（#4fd1c5），高亮橙（#ff9f43）；布局：顶部标题+场景 Tab+演示按钮，右侧知识面板，底部按场景分组的功能按钮条，左下元素图例。
2. 3D 中文标签用屏幕投影 HTML 实现，点击可交互，区分普通标签 / 高亮标签 / 产物标签三种样式。
3. 所有提示用状态胶囊 / 面板，禁止 alert。
4. 代码结构清晰、带中文注释，方便化学老师后续自行修改分子定义（`MOL_DEFS` 数据表）、知识卡文案（`MOL_INFO` 表）、题库（`QUIZ` 表）。
## 七、验收清单
- [ ] 双击 HTML 即可运行（无模型也能跑，程序化模型兜底）
- [ ] 三场景可切换，B/C 需答题解锁
- [ ] 电解水气泡频率体现 2:1，石灰水可变浑浊并可重置
- [ ] 三种微观反应动画可重复播放、互不干扰
- [ ] 6 道选择题流程完整，解锁机制正常
- [ ] 演示模式完整播放约 25s、可中途退出且状态正确还原
---
## 附：主题迁移说明
本提示词与已产出的《化学反应3D互动课件.html》实现一一对应。想迁移到其他化学主题（如金属活动性顺序、酸碱中和滴定、燃烧条件探究），只需替换四项：
1. 分子/物质定义数据表
2. 实验装置几何体
3. 方程式与知识卡文案
4. 选择题题库3.提取制作课件技能Skill
前言
定义
每次需要输入繁杂的提示词，非常耗时，所以需要提取制作课件技能Skill，只需要输入主题，就可以生成对应的提示词，然后根据提示词生成课件。
- 打开workbuddy，输入下列提示词，点击生成，等待生成结果
参考下面的内容，制作skill技能，安装到workbuddy中
---
name: interactive-3d-courseware
description: 中学多学科 AI 交互式 3D 课件制作方法论。当用户要求制作"3D 互动课件"、"交互式教学课件"、"HTML 互动课件"、"可交互知识点演示"，或提到生物/化学/物理/地理等学科的 3D 可视化教学需求时使用本技能。覆盖课件结构设计、Three.js 技术方案、交互模式（拖拽旋转/标签高亮/粒子演示）、随堂选择题、演示模式时间轴、模型降级策略与验收清单。
agent_created: true
---
# 交互式 3D 课件制作方法论
## 目的
提供一套经过验证的单页 HTML 3D 互动课件制作框架，适用于中学生物、化学、物理、地理等学科。课件可本地双击运行、无后端、适合课堂投影演示与录制短视频。
## 触发场景
- 用户提出某学科的"3D 互动课件 / 交互式课件"需求
- 用户要求把抽象知识点做成"能看、能点、能提问"的可视化教学工具
- 已有 glb/gltf 模型，需要围绕模型搭建交互教学页面
## 课件标准结构（四层）
### 1. 场景层：按核心知识点切分（2~4 个场景，顶部 Tab 切换）
每个核心知识点一个独立场景，共用一个 WebGL 渲染器，切换时只换 Scene 内容。学科示例：
| 学科 | 场景拆分示例 |
|---|---|
| 生物 | 呼吸系统结构 → 呼吸运动 → 肺泡气体交换 |
| 化学 | 分子结构 → 化学键形成 → 反应过程 |
| 物理 | 电路连接 → 电流流动 → 电磁感应 |
| 地理 | 地球圈层 → 板块运动 → 大气环流 |
### 2. 交互层：每个场景必配的基础交互
- OrbitControls 拖拽旋转 + 滚轮缩放 + 双击平滑复位（0.5s 过渡）
- 中文结构标签（CSS2DRenderer 或屏幕投影 HTML 标注），点击高亮部位 + 弹出 2~3 句知识卡
- 每场景一个"过程演示"按钮：发光粒子沿 CatmullRomCurve3 路径流动，模拟动态过程（空气流动 / 电流 / 化学反应 / 物质扩散）
- 若模型自带骨骼动画，优先 AnimationMixer 调原生 clip；无动画时用缩放/位移模拟
### 3. 互动层：随堂选择题闯关
- 每场景 2 道单选题，共 4~8 题
- 答对：绿色反馈 + 进入下一知识点；答错：红色提示 + 解析后重答，不阻塞流程
- 底部显示进度（第 X/N 题），全部答完弹出完成面板
### 4. 演示层：一键录屏模式（20~30 秒）
固定时间轴自动执行，四阶段结构：
| 阶段 | 占比 | 内容 |
|---|---|---|
| 结构展示 | ~30% | 场景依次高亮主要部件（每个 2s） |
| 动态过程 | ~30% | 切到动态场景，播放核心动画（吸气呼气/电流/反应） |
| 微观演示 | ~30% | 切到微观/机制场景，播放粒子交换动画 |
| 总结收尾 | ~10% | 黑底总结语淡入（如"把抽象知识点，变成能看、能点、能提问的互动模型"） |
演示期间隐藏所有按钮，右下角提示"点击任意处退出"，不弹选择题。
## 技术方案（固定约定）
1. Three.js r160+，ES Module + importmap；本地 `libs/three.module.js` 优先，缺失回退 CDN（unpkg/jsdelivr）
2. GLTFLoader 同版本目录加载，不混版本
3. 文件结构：`index.html + style.css + main.js`，`libs/` 放 three.js，`models/` 放 glb
4. 无构建工具、无 npm、双击 index.html 或本地静态服务器均可运行
5. **模型降级策略（必须）**：glb 加载失败或不存在时，程序化几何体顶替（CylinderGeometry/SphereGeometry 等组合），控制台打警告，保证第一次打开就能跑
6. 代码带中文注释，关键区块用 `<!-- ===== 场景X：xxx ===== -->` 分隔，方便教师后续自行调整
## 视觉规范
- 深色科技风底（#0a1628 系），主色青蓝（#4fd1c5），高亮橙（#ff9f43）
- 粒子/元素用语义化配色并带常显图例（如 O₂=蓝、CO₂=红；正极=红、负极=蓝）
- 中文界面优先，系统默认无衬线字体
- 布局：顶部标题+场景 Tab，右侧知识面板，底部功能按钮条
- 状态大字提示（"吸气中…/呼气中…"），录屏一眼看懂，界面极简
## 制作流程
1. 与用户确认：学科、知识点清单、是否已有 glb 模型（约定 `models/*.glb` 路径）
2. 按四层结构出完善版提示词（含验收清单）交用户确认
3. 先做程序化模型版本跑通全流程，模型到位后替换
4. 按验收清单自测：双击可跑、场景切换、选择题流程、演示模式完整播放、全中文注释
## 学科迁移要点
换学科时只换三样：模型/几何体、知识卡文案、选择题题库。四层结构、技术方案、视觉规范全部复用。
这样就可以使用了
4.使用技能做生物课件
前言
总结
课堂作业
参考下面的步骤，完成以下课件吧！！
- 茎的运输作用：红墨水沿导管上升的粒子动画，和您呼吸系统课件的“血液路径”同款技术
- 呼吸器官+肺活量：可以直接复用您现有的呼吸系统课件框架，加上“测量肺活量”互动
- 食物链/食物网：3D 群落里点选生物连线成链