第 1 课 教师 AI 备课新范式：Codex 与创意课件全景图
本课定位
帮助老师从“AI 帮我写点东西”升级到“AI 帮我搭一套可讲、可互动、可复用的课件系统”。
本课技术框架
- Codex 聊天与任务模式
- 网页课件基本结构
- Markdown / 文档素材整理
- 浏览器运行环境
学习目标
- 理解本课程 30 节课如何从零走到创意课件作品集
- 区分讲义、课件、互动课件、游戏课件和 3D / 体感课件
- 完成个人学科方向与第一批课堂创意清单
课前准备
- 准备 1 节自己最熟悉的课程主题
- 带来现有 PPT、讲义或教案
- 整理课堂中最想解决的 3 个难点
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 讲师展示 5 类不同风格课件案例 | 讲师展示 5 类不同风格课件案例，建立震撼感与目标感 |
| 10-20 分钟 | 解释网页课件为什么适合教师：投屏方便、传播方便、可互动、易复用 | 解释网页课件为什么适合教师：投屏方便、传播方便、可互动、易复用 |
| 20-35 分钟 | 用 Codex 演示如何把传统教案拆成“页面 + 交互 + 素材 + 讲解节奏” | 用 Codex 演示如何把传统教案拆成“页面 + 交互 + 素材 + 讲解节奏” |
| 35-50 分钟 | 学员盘点自己的学科、课型和最想做的创意课件方向 | 学员盘点自己的学科、课型和最想做的创意课件方向 |
| 50-60 分钟 | 形成第一份课程创意清单和课件升级目标 | 形成第一份课程创意清单和课件升级目标 |
核心讲授点
- 老师不需要先成为工程师，先学会把课堂目标说成可实现的页面任务
- 网页课件最大的优势，是能把文字、图像、动画、交互、音视频、摄像头统一到一个投屏界面里
- 创意课件不是为了炫，而是为了让抽象知识更容易被看见、被操作、被记住
课堂案例
总览示范：一节“物理斜抛运动”如何升级成互动课件
从普通 PPT 出发，拆成导入页、实验模拟页、参数拖拽页、课堂提问页和课后挑战页，让老师一眼理解本课程的最终方向。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“教师 AI 备课新范式：Codex 与创意课件全景图”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中物理八年级
- 课题：斜抛运动的轨迹与速度分解
- 教学目标：让学生看懂斜抛运动的水平速度不变、竖直速度变化，并能解释轨迹为什么是抛物线
- 课堂难点：学生只能背公式，看不见速度分量如何变化
- 课堂节奏：2 分钟情境导入 -> 8 分钟现象观察 -> 15 分钟参数拖拽 -> 10 分钟追问讨论 -> 5 分钟总结
- 现有素材：教案 1 份、轨迹示意图 2 张、实验数据表 1 份、课堂提问 4 条
- 本次要做的课件：网页课件结构、页面清单、所需素材清单，以及适合交给 Codex 的开发步骤
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中物理八年级
- 课题：斜抛运动的轨迹与速度分解
- 教学目标：让学生看懂斜抛运动的水平速度不变、竖直速度变化，并能解释轨迹为什么是抛物线
- 课堂难点：学生只能背公式，看不见速度分量如何变化
- 课堂节奏：2 分钟情境导入 -> 8 分钟现象观察 -> 15 分钟参数拖拽 -> 10 分钟追问讨论 -> 5 分钟总结
- 现有素材：教案 1 份、轨迹示意图 2 张、实验数据表 1 份、课堂提问 4 条
- 本次要做的课件：网页课件结构、页面清单、所需素材清单，以及适合交给 Codex 的开发步骤
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中物理八年级
- 课题：斜抛运动的轨迹与速度分解
- 教学目标：让学生看懂斜抛运动的水平速度不变、竖直速度变化，并能解释轨迹为什么是抛物线
- 课堂难点：学生只能背公式，看不见速度分量如何变化
- 课堂节奏：2 分钟情境导入 -> 8 分钟现象观察 -> 15 分钟参数拖拽 -> 10 分钟追问讨论 -> 5 分钟总结
- 现有素材：教案 1 份、轨迹示意图 2 张、实验数据表 1 份、课堂提问 4 条
- 本次要做的课件：网页课件结构、页面清单、所需素材清单，以及适合交给 Codex 的开发步骤
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一份《我的创意课件方向清单》与一份《首个课件项目上下文包》
创意扩展
- 把一个传统 PPT 重新拆成网页章节结构
- 为同一节课同时设计“普通版”和“游戏化版”两个方向