零代码做出高级感互动教具，我试了3个AI工具后选了这个

摩擦力互动演示网页的难度稍微大一点，我是用谷歌AI Studio里的Build模式和飞象老师同时来做一样的提示词。踩坑后的选择——飞象老师在做的过程中我发现，Studio里的Build模式在3D建模上确实更强，但不是单纯的原生网页，它是在构建一个应用，会生成很多的文件，这在课堂上不实用。所以做了一半就放弃掉了。飞象老师做出来的网页相对来讲就比较符合我的需求。为什么我最终选择飞象老师？因为它懂教学场景。在制作网页过程中我测试过大多数AI工具，发现通用AI工具虽然强大，但不理解”弹簧测力计””摩擦力演示”这些教学专业元素。飞象老师基于大量教学数据训练，它知道物理教具应该长什么样、怎么交互，这大大降低了我的调试成本。假如从零开发一个教学网页，别的工具可能需要修改20次，但是飞象老师交互10次差不多就搞定了，效率极高。具体来说：Gemini：适合简单网页，但教育场景适配性弱，不理解教学专业元素Google AI Studio Build模式：3D建模强，但生成文件多、课堂不实用、卡顿，构建的是应用而非原生网页飞象老师：专为教育场景设计，生成的是单文件网页、可直接用于课堂、支持教学元素（如弹簧测力计、摩擦力演示）的快速调整接下来，我就以飞象老师为例，说一说怎样在原来的网页基础之上进行二次开发。如果你是零基础老师，飞象老师也有大量现成模板（物理、化学、生物实验演示等），可以直接用。但如果你像我一样，想基于现有网页深度定制，飞象老师的”理解教学场景”能力会让你省很多调试时间。这也让我觉得二次开发比从零开始简单。第一步：复现原网页我把老师的原网页，直接上传给飞象老师，先让飞象老师复现这个网页。飞象老师还有个很实用的功能，它不仅能复现网页，还能自动识别代码中的教学元素。比如它能理解”这是一个测力计””这是摩擦力演示”，而不是把它们当成普通的图形。这让后续调整变得更加智能，我只需要说”把测力计改成仿真款”，它就知道要保留刻度、挂钩这些教学关键要素。 复现完之后，基本上和原来的差不多。

第二步：调整核心元素接下来需要基于现有的网页进行调整，首先要解决的就是弹簧测力计的问题。我上传弹簧测力计的图片，让他用图片上那个有刻度的仿真款，来替换原网页里面的弹簧测力计，但是怎么调都不对，最后只能一点点告诉他怎么画弹簧测力计。

比如，他给我的第一个测力计太简单了，就是一个方形的木块，也没有刻度什么的，只是两端加了一个挂钩。我就要告诉他弹簧测力计要有刻度，要在方块的上水平面等等。终于，调了几轮之后能用了。

第三步：逐个修复bug采用相同的方式一点点的改其他bug。这里有个点再次强调一遍（每一篇网页制作的教程我都会强调），就是先做核心功能，再优化UI，先做一个功能，再做第二个功能。发现问题时，要一个问题一个问题改，不要让AI同时改很多问题，很容易造成哪个都改不好的局面。第四步：拓展新页面设计滑动和滚动摩擦的效果对比。滑动摩擦的页面做完之后，课程设计中有滑动和滚动摩擦的效果对比环节，所以还需要加入一个新页面。方法同上，让他参照原来的页面功能，复用可用代码，做出滚动摩擦的页面即可，然后再修正。

在这个过程中有一个很有意思的地方，就是做滚动摩擦需要在木块底部加上圆木。它第一次做出来的效果是木块前进，圆木在底部水平旋转。

我说不要水平旋转。结果第二次做成了个像螺旋桨一样的竖直旋转。搞得我哭笑不得。

我说也不要竖直旋转，它只是在绕着自己的轴滚动。这才改成了围绕自己的轴旋转。第五步：测试与优化测试所有功能是否完善，完善之后再去优化UI界面，切记要在保证功能不变的基础上进行UI的优化和美观。这样，一个完整的网页就做出来了。说说飞象老师经过这次公开课的实践，我对飞象老师的整体评价是：它确实是目前最适合教育场景的AI网页生成工具。核心优势总结：

1. 懂教学场景：能识别弹簧测力计、摩擦力演示等教学元素，不是当成普通图形处理
2. 效率高：复现+优化只需2-3小时，比其他AI工具节省将近一半时间
3. 课堂实用：生成单文件网页，可直接用于课堂，无需复杂部署
4. 调试成本低：理解教学专业术语，调试次数从20多次降到10次以内
5. 支持深度定制：在复现基础上可灵活调整，满足个性化教学需求

适用人群：

• 有一定技术基础、想做网页开发或者二次开发的老师
• 零基础老师也能用，有大量现成模板（物理、化学、生物实验演示等）

飞象老师网址：https://www.feixianglaoshi.com建议：如果你是信息技术老师或课程开发者，飞象老师能大幅提升你的工作效率；如果你是学科老师，可以直接使用它的模板库，快速做出专业级的互动教具。PPT中的网页使用技巧最后说一下怎么在PPT中使用网页。因为公开课上是要把网页插入到PPT里播放的，而PPT播放网页就需要用到不坑盒子的插件。但是不坑盒子在WPS当中不会直接显示（希沃也一样）。需要设置一下：第一步：依次点击WPS的文件-选项。

第二步：点击信任中心，右侧找到最下方受信任的加载项。 在最下方”启动所有第三方COM加载项，重启WPS后生效”前面方框里打上对勾。

第三步：点击确定，重启WPS。这时候，在上方的工具栏中能够看到扑坑盒子的字样，就可以在PPT里面插入网页了。

插入网页后，在播放过程中还会遇到一个问题：在打开网页不操作的情况，直接点用电脑快捷键或者鼠标击下一页能够进入下一页；但是如果操作了网页，这些就都失效了，Esc也没用，不知道是不是我的个例（希沃没有测试过，需要用到网页的老师可以自己测一下）。那怎么办呢？这时我们可以看到网页下方有一个小箭头，点击这个箭头就可以跳到下一页了。

到这里，互动网页的设计和制作就聊完了。总的来说，用AI做互动网页的核心是“先复现再优化”，先让AI理解你的需求，再逐步调整细节。虽然过程中会遇到各种bug，但一个个解决后，就能得到符合课堂需求的工具。欢迎持续关注，也欢迎大家在评论区聊聊你在用AI做教学工具时遇到的坑以及解决方案。如果你对AI赋能教育感兴趣，也欢迎加入交流群一起学习讨论。