零基础用 AI 做交互课件:从提示词到课堂演示,一篇跟着做
- 2026-10-09 08:25:26
才貌双全王老思
最近，我终于跑通了用 AI 制作交互课件的全流程，迫不及待想分享给大家。先看一下我做出的效果：
图01：把等高线放回立体山体上，学生更容易看清线条与地形之间的关系。
这次以初中地理的“等高线形成”为例。我想做一个演示：让水平切面穿过山体，再逐条显示不同海拔的等高线，帮助学生看懂这些线是怎么得到的。
做这样一个课件，需要我们想清楚教学要求，再让 AI 生成网页，自己测试，反馈修改，最后把文件带进课堂。下面就按这个顺序，一步一步来。
01
准备工具，选好工作空间
我这次用的是 WorkBuddy。你也可以选用豆包工作等同类 AI Agent 工具，沿用下面提需求、测试和反馈的思路。做这个案例时，先确认所选工具支持生成、修改网页文件，并能把文件保存下来。
先到软件官方网站下载、安装并登录。这里用我制作课件时的 WorkBuddy 界面演示：
图02：登录后的完整界面。找到输入框下方的“选择工作空间”。
工作空间，就是让 AI 保存和修改这次课件文件的位置。 新建一个专门放课件的文件夹，通过这个入口把它选为工作空间，尽量用英文命名。
这个例子里，我让 AI 把课件放在工作空间里的 contour-demo 文件夹。后面生成的网页和配套文件，都放在一起。
第一次尝试，可以先选一个小知识点。比如这次只解决一件事：让学生看懂等高线的形成过程。 目标明确了，后面才能判断做出来的课件是否有用。
02
写提示词，把四件事说清楚
接下来，我们可以把课件需求发给 AI 了。但这里先不要着急，想一想：要讲什么，谁来操作，怎么操作，画面怎样显示？
图03：写需求时，依次回答这四个问题。
第一，学科主题。 哪个学段、哪门学科，具体讲什么？这次是初中地理，主题是“等高线的形成”。
第二，使用者。 是老师操作给学生看，还是学生自己探索？这次由老师在课堂上操作。
第三，互动方式。 点一下按钮，画面要发生什么变化？这次希望每点一次，就显示一个海拔对应的切面与等高线；线旁标清海拔，还要能重置。
第四，显示要求。 字体要大，按钮要清楚，线条和山体的颜色容易区分，适合课堂投屏。
你可以先照这四项，各写一句话，再连起来。这样 AI 才知道，你想做的课件具体是什么样的。
03
把提示词输入进去，等待生成
这是我实际输入的内容。图里的颜色把四类要求分别标了出来，方便你看清每句话的作用。
图04：蓝色是学科主题，紫色是使用对象，绿色是交互与变化，黄色是显示要求。
下面这段可以直接复制。换知识点时，把学科、主题、模型和操作方式改成自己的要求：
制作提示词
请帮我做一个初中地理的交互网页课件，主题是等高线的形成。
这是老师操作给学生看，画面里有一座3D的双山峰模型，各自有山脊，两个山峰之间有山谷，点一下按钮，就显示一个海拔高度对应的切面，切面与山相交的地方就是等高线。再点一下，显示下一条。每条线旁边标清海拔，再加一个重置按钮，方便重新演示。
字体大一点，按钮清楚一点，线条和山体的颜色容易区分，适合课堂投屏，控制栏在右侧。
请直接在当前工作空间的 contour-demo 文件夹内实现，完成后告诉我打开哪个文件。
最后一句说明文件放在哪里，以及完成后应该打开哪个文件。如果你用了其他文件夹名，记得一起改掉。
确认工作空间已经选好，把提示词放进输入框，点击发送，等待 AI 完成。收到结果后，按它给出的文件位置和打开说明，查看生成的课件。
04
打开课件，自己先测试一遍
图05：打开网页后，左侧是山体和切面，右侧是海拔标记及操作按钮。
现在把页面打开，自己先点一遍。我会按这个顺序测试：
• 先看画面： 山体和等高线有没有显示？切面与山体相交的位置是否清楚？
• 再试旋转： 拖动山体，换个角度，看看双峰、山脊和山谷能不能看清。
• 再点按钮： 点“下一条”，看是否增加一条；点“重置”，看能否回到起点。
• 最后试投屏： 看海拔标记、字体和按钮，在教室里是否足够清楚。
如果出现问题，直接把发现的问题告诉 AI。比如点击按钮后，山体和等高线都没有显示，可以这样写：
修复提示词
点击“下一条”后，山体和等高线没有显示出来。请检查并修复。
说清楚“做了什么操作、出现什么结果”，AI 更容易找到要改的地方。它修好之后，重新打开页面，再试一次刚才出问题的操作。
05
不知道怎么改，也可以先讨论
测试时，还有一种情况：按钮能用，但操作起来太麻烦。
这个课件最初是逐条显示等高线。一共 8 条，每一条都要点一次，完整演示就要连续点 8 次。老师一边讲解，一边反复点击，用起来不太顺手。
图06：动图展示实际课件操作。每点击一次“下一条”，才增加一条等高线。
如果你不知道怎么改，可以先让 AI 提供方案。我这次给它的提示词是：
讨论提示词
每条等高线都要点一次，太麻烦。给我两个简化操作的方案，先别改。
图07：上方是我提出的问题；下方的分叉，表示 AI 给出的两个改进方案。
方案 A：一键成图。 一次点击，显示全部等高线，适合快速呈现整体结果。
方案 B：拖动滑杆。 通过拖动来控制海拔变化，适合边调整、边讲解形成过程。
选哪个，要看自己这节课准备怎样讲。我这次选择方案 A，再把决定告诉 AI：
修改提示词
按方案A修改：一键成图，保留重置。
先讨论，选好方案，再进行修改。这样每一步都知道自己在改什么。修改完成后，再检查一键成图和重置是否都能正常使用。
06
打包导出，把课件带进课堂
课件调整好之后，就可以让 AI 整理文件，准备上课使用。我的打包提示词很简单：
打包提示词
打包成离线课件。
网页和配套文件放在同一个文件夹。
图08：文件打包示意。网页和配套文件一起放进课件文件夹，再整体复制到 U 盘，在课堂电脑上打开测试。
这里要留意：有些课件除了网页主文件，还会用到图片、模型或脚本。把整理好的整个文件夹一起复制到 U 盘，再复制到课堂电脑上，按 AI 给出的说明打开入口文件。
如果准备离线使用，就在断网时打开一次，试试画面和按钮。上课前也投屏看一下，确认带过去的这一份能正常演示。
07
选一个知识点，做你的第一个演示
图09：提需求、生成、修改、导出。生成后自己测试，把问题反馈给 AI，再带进课堂。
到这里，我们就完成了一次从提需求、生成，到修改、导出的过程。
回头看，最关键的两件事是：先把教学要求说清楚，做出来之后自己试一遍。 想让学生看懂什么，就把这个目标放进提示词；哪里不好用，就把具体操作和结果告诉 AI。
现在，你可以选一个小知识点，做出自己的第一个演示。也欢迎在留言里告诉我：你教什么学科，最想用交互课件讲清楚哪个知识点？
