夜雨聆风一、我是怎么做的
很多人以为做这种互动网页肯定要花好几个小时——放在AI出现之前，是的。现在不需要。全过程我和AI聊了6轮：
| 课间10分钟 | ||
核心功能在第4轮就已经跑通了。 后面两轮纯粹是为了让页面更好看、更适合教学。
整体效果如下面视频。具体网页互动体验，请浏览我的网站，网址链接附在文末。
那我是怎么做到的呢？三个秘诀——
秘诀1：结构化提示词，别搞含糊提问
以前我没摸透AI的脾气，只说「帮我做个气体扩散的动画」类似的话，结果AI生成了一堆不符合要求的代码——不是缺了隔板、就是分子数目不对，也不能调节数目和速度，折腾半小时啥也没搞定。
我第一次向DeepSeek提需求，是这样写的：
请帮我编写一个交互性网页动画，实现分子向真空扩散的微观模拟
方形容器，中央有可手动抽出的隔板，左侧是气体、右侧是真空 分子个数（1-80）、气体温度可手动调节 隔板可拖拽慢慢抽出，分子遵循物理规律运动、碰撞 实时显示左右分子数、开口高度、平均速率，深色科技风
就这么清晰的一条，AI直接给我生成了80%的核心代码，完全不用我改逻辑。
诀窍： 把需求拆成「布局要求」「交互要求」「参数要求」「视觉要求」几个模块，每个模块给明确数值范围（比如分子1-80个，不是「几个分子」），AI输出准确率至少提升80%。
秘诀2：分步构建，先核心再优化
很多人用AI写代码总出bug，就是因为一开始就要「又要A又要B又要C」，AI逻辑一乱，生成的代码全是问题。
我始终坚持：先把最核心的功能跑通、调优，再叠加附加功能。
比如最开始我没要教学卡片，等核心的扩散模拟完全没问题了，再提「加两个默认隐藏的卡片，一个显示微观态分布，一个显示概率柱状图」，AI直接在原有代码上加，根本不会乱。
中间还出过一次bug——「隔板和分子都不见了」，我直接把问题甩给AI：「隔板和分子都不见了」，AI马上定位到是变量名写错，1分钟就修好了。
诀窍： 别想着一口气要所有功能，第一轮只拿最核心的版本，跑通了再提下一个需求，AI不会混乱，你也好调试。
秘诀3：让AI帮你提炼“提示词配方”——这才是真正的迭代
很多人以为页面做完了就大功告成了，但其实还有最后一步，也是最容易被忽略的一步。
不要急着关掉对话框。在页面全部完成之后，我做的最后一件事是——让AI帮我总结：生成这样一个页面，应该用什么样的提示词？
我直接问它：
请你总结一下，要生成这个完整的扩散模拟页面，我应该用什么样的提示词？把关键参数、结构要求、交互方式都提炼出来。
然后AI给了我一段非常精炼的“提示词配方”。我把这段配方记录下来，下次想做一个类似的页面时，直接拿过来改改参数就能用。
这本身就是一次迭代提升。 你不需要自己绞尽脑汁去想“下次该怎么问”，AI已经帮你总结好了。记录下来的提示词越多，你对“什么样的提示词AI最能懂”的感觉就越精准。
下面是这次我让AI总结的最终提示词。如果你们想直接做同款气体扩散模拟，把下面这段提示词直接发给AI就行：
创建单文件HTML网页，Canvas绘制气体分子向真空扩散的微观模拟：
宽体容器（宽540×高340），中央可抽出隔板，左「气体」右「真空」，隔板有橙色把手 隔板支持拖拽慢抽、双击/按钮瞬间抽出，分子1-80个、温度80-600K可调，速度随温度变化，颜色快红慢蓝 控制面板含数量/温度滑块、瞬间抽出按钮、重置按钮，实时显示左右分子数、开口高度、平均速率 加两个可折叠教学卡片：微观态分布截图（分子2-10个可调）、宏观态概率柱状图，深色科技风，支持键盘快捷键
就这么简单。你也能10分钟搓出同款。
额外彩蛋：别忘了给AI“正向强化”——你太棒了！
我还有一个个人小技巧，可能很多人会觉得没用，但我一直坚持在用。
在每一轮核心功能完成、AI做得特别好的时候，我都会说一句：“你太棒了。”然后紧接着提出补充要求。
有人可能觉得可笑：多此一举，AI又不需要情绪价值！昨天看了篇公众号文章还说：跟AI说谢谢没什么意义，还浪费算力。
但你了解AI的工作原理就知道——“太棒了”是有价值的。
在AI的训练过程中，有一个环节叫强化学习（RLHF），简单说就像我们生物学里学的斯金纳实验——训练小白鼠做条件反射。当它做对动作时给予奖励，做错时没有奖励，它就会慢慢学会哪些行为是“好”的。
你每一次对AI说“太棒了”，就相当于给了它一个正向强化信号。它会把前面这段代码生成的逻辑、风格和质量标准，在后续的对话中赋予更高权重，更不容易产生幻觉或跑偏。
所以别小看这三个字。它不是一个礼貌用语——它是一个有效的调教工具。
二、为什么最简单的工具，反而最受欢迎？
后来我仔细想了想这个问题，得出三个答案：
原因一：最简单的，最通用
热力学的第二定律的微观模型，稍微改一下参数，可以演示波义耳定律、查理定律、盖-吕萨克定律……一个模型，串起两个章节。
原因二：大家都忙，真的忙
能“课间10分钟搞定”的东西，最容易被人接受。它降低了门槛，让一个“忙得脚不沾地的老师”也能试一试。
原因三：AI发展太快，但学习应该慢慢来
但仔细想来，从最简单的模式学起，这其实也是我曾经走过的路。 没有捷径，但也没有那么难——关键是学起来。
三、为什么我要做这件事
最近看了一部90年代的电视剧，老板问求职者：“你会用电脑吗？会打字吗？会的话我们就直接招。”
就这么一句话，当时深深地击中了我。
1. 提升自我
AI就像我们这个时代的计算机技术。 未来不会用AI，可能就像这个时代不会打字的人一样。AI就像工业革命时代的蒸汽机，电器革命时代的电力——它会再造一切行业，对教育方式更起着变革性的作用。
所以我注册了网站，开设了公众号。最初的目的很简单：促进自己学习，迫使自己不断研究AI与教育的结合，更好的提升自己的教学。
2. 帮助他人
说实话，最开始我建这个网站一是为了方便学生课外学习，上课没听懂，课后还可以到我的网站再玩一玩，学一学。二是固化我的探索的成果，以后每一届我可以很方便重复调用。第三我也想把这些有价值的东西分享给有需要的老师和朋友。
老师们每天早读、备课、上课、改作业、开会、晚自习……回到家只想躺平。
每一位愿意挤出时间学习AI的老师，都值得被赞赏。
我相信AI是一个机会——一个让我们走出内卷的机会，它帮我们提升效果，提高效率，节约出时间去自主学习，去享受生活。
觉得有用的老师，别忘了动手试一试。从最简单的入手，你也能做出来。
如果你觉得这篇分享对你有帮助，哪怕只是给了你一点灵感，那就是我最大的开心了。
相关案例文章：
AI赋能物理教育：三个免费的交互式物理仿真工具，让抽象概念"活"起来
欢迎访问我的网站「物理互动实验室」，浏览更多有趣AI动画和工具。网址：https://www.aiphysics.cloud/
欢迎留言，如果需要完整代码，请私信联系我，我会尽量及时回复。
另外如果大家觉得有必要，我就再复盘总结一下「物理对战平台」的做法。
最后别忘了点赞和关注，这也是对我进行一次正向强化😊
还有转发，让更多需要的朋友看见。
我们下一篇见 🚀
