AI 互动课件教程
用 AI 做一个交互式周期表课件，老师也能跟着做
不需要会写代码。跟着提示词一步步做，就能生成一个可以在浏览器打开、适合课堂投屏的互动周期表课件。
这两年，AI 做课件这件事变化很快。
一开始，很多人用 AI 写教案、生成 PPT 大纲，或者帮忙整理课堂提问。
但现在更有意思的方向，是让 AI 帮老师做一些可以直接互动的小工具。
不是单纯多几张漂亮图片，而是让学生可以点、可以看、可以带着问题去观察。
我最近看到一个挺有代表性的例子。
作者 Dilum Sanjaya 做了一个交互式周期表 App。
它不是传统那种静态周期表，而是点击元素后，展示对应的原子结构、分子结构和学习卡片。
比如点击 Oxygen，可以看到氧原子的电子层结构，也可以看到 CO₂ 的分子结构。
点击 Sulfur，可以看到硫原子的结构，以及 H₂S 的分子示意。
点击 Calcium，可以看到 CaCl₂ 这类化合物的结构关系。
交互式周期表 App 总览界面这个 Demo 还有一个值得注意的地方。
作者提到，它的 UI 是用 GPT Images 2 做的，代码是用 Gemini 3.1 Pro 写的。
也就是说，它背后不一定是一支完整的产品团队，而更像是一个人借助 AI 工具快速做出的教学原型。
我看完之后的第一反应是：
如果老师愿意花一点时间，也可以用 AI 做出一个类似的课堂演示工具。
这篇就按老师能实操的方式拆一下。目标不是做一个商业产品，而是做一个能用于课堂展示的交互式周期表课件。
01 先明确：我们要做的不是完整软件
很多老师一听到「做 App」，可能会觉得太复杂。
其实不用想那么大。
我们第一版只做一个课堂演示版。
它只需要完成一个核心动作：
学生或老师点击一个元素，页面就展示这个元素的基础信息、原子结构和相关分子结构。
比如课堂上讲氧元素时，老师点击 Oxygen，屏幕中间出现氧原子的结构。
再切换到分子视图，展示 CO₂ 或 H₂O 的结构。
旁边配一句简单解释：
氧原子的最外层有 6 个电子，所以它容易和其他原子形成化学键。
这就够用了。
第一版不需要：
老师真正需要的是一个能辅助讲课的可视化工具。
02 它适合用在哪些课堂场景？
它比较适合这几类内容。
讲元素周期表
传统周期表信息很多，学生很容易只看到一堆格子。
交互式周期表可以让学生先点一个元素，再看到它的名称、符号、原子序数、原子量和元素类别。
H：Hydrogen，氢
O：Oxygen，氧
S：Sulfur，硫
Ca：Calcium，钙
学生不是死记，而是通过点击去探索。
底部 Molecular Shapes 卡片，用分子模型帮助学生理解结构做课堂互动
这个课件还可以用来做简单互动。
比如老师问：
学生点击 Oxygen 后自己观察。
这种方式比直接给答案更容易让学生参与进来。
03 第一步：先让 AI 帮你设计页面
老师不一定会设计界面。
没关系，可以先让 AI 帮你生成一个界面草图。
你可以把下面这段话发给 AI 绘图工具，或者发给能生成 UI 的 AI 工具。
Prompt：
设计一个适合中学化学课堂使用的交互式元素周期表课件界面。 界面要求： 1. 左侧展示元素周期表网格。 2. 中间展示选中元素的原子结构。 3. 右侧展示元素信息，包括名称、符号、原子序数、原子量、元素类别。 4. 下方展示相关分子结构和学习提示。 5. 风格清晰、现代、适合课堂大屏展示。 6. 字体要大，颜色对比明显，学生在教室后排也能看清楚。 7. 不要太花哨，以教学清晰为主。
如果你用英文工具，也可以这样写：
Prompt：
Design an interactive periodic table teaching slide for a middle school chemistry class. Requirements: - periodic table grid on the left - selected atom visualization in the center - element detail panel on the right - molecule example and learning tip at the bottom - large readable fonts - clear contrast for classroom projection - modern but not too flashy - suitable for teachers to use in class
这一步的目标不是直接生成最终课件。
你只是先确定它应该长什么样。
建议让 AI 生成 2-3 个版本，然后选一个最清楚、最适合课堂展示的。课堂课件不要只追求炫酷，学生能不能看清楚，才是第一位。
04 第二步：让 AI 生成一个网页课件
有了界面方向后，就可以让 AI 帮你生成一个简单网页。
如果你不会写代码，也没关系。
你可以把需求直接告诉 ChatGPT、Gemini、Claude 或其他 AI 编程工具，让它生成完整代码。
可以这样说：
Prompt：
请帮我做一个可以直接在浏览器打开的交互式元素周期表教学课件。 要求： 1. 使用 HTML、CSS、JavaScript。 2. 不需要安装任何环境。 3. 所有代码放在一个 HTML 文件里。 4. 打开文件后可以直接使用。 5. 页面适合中学化学课堂投屏展示。 功能： 1. 展示 20 个常见元素。 2. 点击元素后，显示元素详情：中文名、英文名、元素符号、原子序数、原子量、元素类别、简短教学解释。 3. 中间展示简化版原子结构：原子核、电子层、电子点。 4. 展示一个相关分子例子：Oxygen 显示 CO₂，Sulfur 显示 H₂S，Calcium 显示 CaCl₂。 5. 页面底部显示一个课堂提问。 6. UI 要清晰，适合投影。
这里有一个关键要求：
这是为了降低门槛。
老师不需要搭建 React，也不需要安装开发环境。
AI 生成一个 HTML 文件后，保存成：
periodic-table-class.html然后双击打开，就能在浏览器里使用。
05 第三步：先只做 20 个常见元素
不要一开始就做完整 118 个元素。
课堂演示版可以先做常见元素。
H Hydrogen 氢 C Carbon 碳 N Nitrogen 氮 O Oxygen 氧 Na Sodium 钠 Mg Magnesium 镁 Al Aluminum 铝 Si Silicon 硅 P Phosphorus 磷 S Sulfur 硫 Cl Chlorine 氯 K Potassium 钾 Ca Calcium 钙 Fe Iron 铁 Cu Copper 铜 Zn Zinc 锌 Ag Silver 银 I Iodine 碘 Au Gold 金 Hg Mercury 汞
这些元素足够覆盖很多基础课堂场景。
第一版的重点不是数据完整，而是让学生先动起来、看起来、理解起来。
06 第四步：让 AI 画出简化原子结构
可以继续让 AI 帮你加一个原子结构区域。
你可以这样要求：
Prompt：
请在页面中间增加一个原子结构可视化区域。 要求： 1. 根据选中元素的电子排布显示电子层。 2. 原子核显示在中心。 3. 每一层电子用圆形轨道表示。 4. 电子用小圆点表示。 5. 电子点可以有缓慢旋转动画。 6. 动画不要太快，避免影响课堂观看。 7. 点击不同元素时，原子结构要自动变化。
比如氧元素的电子排布是：
页面就显示两层电子轨道。
硫元素是：
页面就显示三层电子轨道。
这里不追求专业科研级准确。它是教学示意图，重点是帮助学生建立概念。
07 第五步：加入分子结构例子
讲完原子，再加入分子结构。
你可以让 AI 继续改：
Prompt：
请增加一个分子结构展示区域。 要求： 1. 当选择 Oxygen 时，显示 CO₂ 分子结构。 2. 当选择 Sulfur 时，显示 H₂S 分子结构。 3. 当选择 Calcium 时，显示 CaCl₂ 结构示意。 4. 用圆球表示不同原子。 5. 用线条表示原子之间的连接。 6. 显示分子名称、化学式和一句课堂解释。 7. 如果某个元素暂时没有对应分子，就显示“暂无分子示例，可由老师补充”。
CO₂：由 1 个碳原子和 2 个氧原子组成，结构可以简化理解为 O-C-O。
H₂S：由 2 个氢原子和 1 个硫原子组成，可以帮助学生理解硫和氢之间的成键关系。
CaCl₂：由钙离子和氯离子形成，可以用于讲解离子化合物。
08 第六步：每个元素加一句课堂解释
这一点很重要。
很多课件做得好看，但学生看完不知道重点在哪里。
所以每个元素最好配一句简单解释。
氧：氧是维持呼吸和燃烧的重要元素，最外层有 6 个电子。
钙：钙是构成骨骼和牙齿的重要元素，也常用于讲解离子化合物。
硫：硫常见于火山、矿物和一些含硫化合物中，最外层有 6 个电子。
钠：钠是一种活泼金属，容易失去最外层的 1 个电子。
课堂解释不要写成百科。
它应该像老师上课时会说的话。短一点，直接一点。
09 第七步：加课堂提问
这个课件最好不要只是展示。
可以在页面底部加一个「课堂提问」。
Oxygen：氧原子的最外层有几个电子？它为什么容易形成化学键？
Calcium：钙原子更容易失去电子还是得到电子？为什么？
Sodium：钠原子最外层只有 1 个电子，这说明它有什么化学性质？
这一步很适合课堂互动。
老师可以先让学生观察，再回答问题。这样课件就不是「老师播放，学生观看」，而是有一点参与感。
10 第八步：让 AI 帮你检查科学准确性
AI 生成内容之后，不要直接拿去上课。
化学数据必须检查。
至少要检查这些：
你可以把生成的元素数据再发给 AI，让它检查一遍：
Prompt：
请帮我检查下面这些元素数据是否适合中学化学课堂使用。 重点检查： 1. 元素名称 2. 元素符号 3. 原子序数 4. 原子量 5. 电子排布 6. 分子示例 7. 课堂解释是否准确 如果发现错误，请指出并给出修改建议。
但注意，AI 检查也不能完全替代老师判断。最终还是要以教材和权威资料为准。
11 实际课堂怎么用？
用法一：导入新课
上课一开始，老师先打开周期表页面。
不用马上讲定义。可以先问学生：
然后点击 Oxygen，让学生看到氧原子的结构和 CO₂ 分子例子。
这样比直接翻课本更容易进入状态。
用法二：讲电子层结构
讲原子结构时，可以依次点击：
让学生观察每个元素的电子层变化。
用法三：讲化学键
讲化学键时，可以点击：
Oxygen → CO₂ Sulfur → H₂S Calcium → CaCl₂让学生看原子如何组成分子或化合物，然后再回到教材里的化学式。
用法四：课堂小测
老师可以点击一个元素，只展示原子结构，先隐藏元素名称。
然后让学生猜：
这个原子有几层电子？最外层有几个电子？它可能是哪一类元素？这个互动非常简单，但比单纯背诵有意思。
12 直接复制给 AI 的完整 Prompt
如果你想直接做，可以复制下面这段。
完整 Prompt：
请帮我制作一个适合中学化学课堂使用的交互式元素周期表网页课件。 要求： 1. 使用 HTML、CSS、JavaScript。 2. 不需要任何外部依赖。 3. 所有代码写在一个 HTML 文件里。 4. 文件保存后，老师可以直接双击在浏览器打开。 5. 页面适合投屏展示，字体要大，颜色对比明显。 页面结构： 1. 左侧：元素周期表网格，包含 20 个常见元素。 2. 中间：原子结构可视化区域。 3. 右侧：元素详情区域。 4. 下方：分子结构示例和课堂提问。 元素数据至少包含： - Hydrogen 氢 H - Carbon 碳 C - Nitrogen 氮 N - Oxygen 氧 O - Sodium 钠 Na - Magnesium 镁 Mg - Aluminum 铝 Al - Silicon 硅 Si - Phosphorus 磷 P - Sulfur 硫 S - Chlorine 氯 Cl - Potassium 钾 K - Calcium 钙 Ca - Iron 铁 Fe - Copper 铜 Cu - Zinc 锌 Zn - Silver 银 Ag - Iodine 碘 I - Gold 金 Au - Mercury 汞 Hg 每个元素需要包含： - 中文名 - 英文名 - 元素符号 - 原子序数 - 原子量 - 元素类别 - 电子排布 - 一句适合课堂讲解的说明 交互要求： 1. 点击元素后，右侧显示元素详情。 2. 中间根据电子排布显示简化原子结构。 3. 原子结构包括：中心原子核、电子层轨道、电子点。 4. 电子可以缓慢旋转，但不要太花哨。 5. 下方显示相关分子或化合物示例。 6. 如果有分子示例，要显示分子名称、化学式、简化结构图和一句课堂解释。 7. 下方显示一个课堂提问，方便老师和学生互动。 分子示例： - Oxygen 显示 CO₂ - Sulfur 显示 H₂S - Calcium 显示 CaCl₂ - Hydrogen 显示 H₂ - Nitrogen 显示 NH₃ - Carbon 显示 CH₄ - Sodium 显示 NaCl - Chlorine 显示 HCl 设计风格： 1. 清晰、现代、适合课堂。 2. 可以使用深色背景，但必须保证投影时看得清楚。 3. 不要过度炫酷。 4. 重点是帮助学生理解元素、原子结构和分子结构。 5. 页面需要适配电脑屏幕和投影大屏。 最后请输出完整 HTML 代码。
13 如果 AI 第一次生成得不好
AI 第一次生成的版本可能不会完美。这很正常。
如果字太小：请把所有字体放大，适合教室投影。元素格子里的符号要明显，学生坐在后排也能看清。
如果界面太花：请减少装饰效果，不要太科幻。课堂使用以清晰为主。
如果原子结构太乱：请简化原子结构，只保留原子核、电子层和电子点。动画速度调慢。
如果数据不够：请继续补充常见元素数据，并确保适合中学化学课堂。
如果想改成中文：请把页面中的主要说明都改成中文，英文名可以保留在元素详情里。
如果想做成浅色课件：请把界面改成浅色背景，适合教室投影和白板环境。
14 老师使用时要注意什么
第一，先检查科学内容。
AI 很可能会写错数据，尤其是电子排布、分子解释、化学性质描述。上课前一定要对照教材检查。
第二，不要让动画抢走重点。
课件是辅助讲课，不是让学生看特效。如果动画太快、颜色太乱，反而影响理解。
第三，不要一次展示太多信息。
元素详情里不要塞百科内容。课堂上真正需要的是：
第四，最好配合提问使用。
不要只是老师点、学生看。可以让学生先观察，再回答。这样效果会好很多。
15 这类课件还能扩展到哪里？
周期表只是一个例子。
同样的方法还可以做很多课堂工具。
物理：电路连接模拟
生物：细胞结构互动图
地理：气候带互动地图
数学：函数图像变化演示
历史：时间线互动课件
科学：太阳系行星运动演示
做法都差不多：
最后
这个周期表 Demo 最值得借鉴的地方，不是它用了多先进的技术。
而是它提醒我们：
以前做这种东西，要会设计、会前端、会动画。
现在可以把需求说清楚，让 AI 先生成一个能用的版本。
第一版不用完美。
只要它能帮助学生看懂一个抽象概念，就已经有价值了。
比如这次的周期表课件，目标其实很简单：
让学生不只是背元素符号，而是真的看到：
如果一节课里，学生因为这个互动课件多理解了一点点，那它就值得做。
参考来源
X 帖子：Dilum Sanjaya，Fun interactive science app ideas | Part 5。Demo 展示了一个交互式周期表应用，作者说明 UI Design 使用 GPT Images 2，Code 使用 Gemini 3.1 Pro。
