【教师节 VibeCoding】我用TraeCode做了个物理实验台,让课本里的实验都能亲手做一遍

物探 Lab 是一个初中物理互动仿真实验台:把课本上声学、光学、热学、力学、电学、电磁学六大门类、共 30 个经典实验,变成可以亲手调节参数、通断开关、读取仪表的动态仿真。每一个现象背后都由物理公式实时计算,打开浏览器就能用,不用安装、不用登录,老师发一个链接,课堂投影或学生自己点开就能做实验

缘起:当年那些 “只在课本上见过” 的实验

还记得中学第一次上物理课,老师在讲台上讲光的折射、讲欧姆定律,很多知识对我来说一直停留在概念和插图层面,因为器材有限,不是每个实验都能亲手做,更多时候是 “记住结论”。

今年教师节,看到这次 Vibe Coding 挑战,我就想:老师在讲台上把一个抽象概念讲过成百上千遍,如果能有一个小工具,让学生自己拖一拖滑块、拨一下开关、看着仪表数字实时变化,把 “背公式” 变成 “看见原理”,是不是也能帮老师省下反复讲解的几分钟?于是有了物探 Lab。

成果展示

首页只放六大门类,点进去才是具体实验,刻意做得很克制:不堆颜色、不抢注意力,让学生专注在实验本身。

进入任意一个实验,左边是仿真画布,右边是操作面板和实时数据 / 公式 / 原理三件套。以欧姆定律为例:拨上开关、拖动电压和电阻,电流表、电压表和功率会按 I=U/R、P=UI 实时变化;光的色散里转动入射角,能看到白光被三棱镜拆成七色光谱。

体验方式

纯前端实现,手机、平板、电脑浏览器都能直接打开。

创作分享:一句话想法,是怎么一步步变成作品的

整个过程没有写一行 “从零手写” 的代码,更像是在和 TraeCode 里的 Agent 不断对话、一起把想法磨清楚。

1)一切始于一句很朴素的话

我想做一个物理实验工作台,把课本上的实验,变成可以动手操作的动态仿真,覆盖初中物理声学、光学、热学、力学、电学、电磁学六大门类。像真实实验一样调节参数、通断开关、读取仪表,物理过程由公式实时计算并动态呈现,帮助理解实验现象背后的原理。

2)它没有急着写代码,而是先反问我

这一步挺出乎我意料。它判断 “六大门类全建工程量极大”,给了我几个方案让我选,而不是闷头生成一个我不想要的东西。最后我决定按人教版教材,把 30 个典型实验分门类全部做出来。这种 “先对齐再动手” 的过程,反而很像真实做产品。

3)像老师批改作业一样,逐个核对物理事实

这是我觉得最有意义、也最 “较真” 的部分。给学生用的东西,物理上不能错。第一版生成后我逐个实验去试,果然发现了一些违背事实的地方:天平 “左物右码” 摆反了、光的折射和全反射公式用混了、奥斯特实验里小磁针偏转方向不对、还有比热容单位、响度公式前后矛盾…… 我一个个指出来,和 Agent 反复核对修正。

改到后面甚至给电磁铁、电动机补上了电流方向切换。这件事让我意识到:AI 负责快速搭建,但教育作品的 “正确性把关”,依然需要人来做 , 这恰恰是老师每天在做的事。

4)UI 也是聊出来的

第一版是科技蓝加六个彩色门类,看久了觉得太花,我让它换成黑白简约;Emoji 图标全部换成 SVG;首页加上若隐若现的物理公式。中间还遇到一个挺隐蔽的 bug:首页大标题和漂浮公式重叠、文字像 “糊” 在一起,一层层排查才发现是布局把首屏区域压缩裁切了,修完之后整个页面才清爽。

5)最后部署上线到 GitHub

最后一步我只说了句 “帮我保存到 GitHub 并加上 Pages 预览链接”,它就自动建好了 public 仓库、推到 main、开启了强制 HTTPS 的 GitHub Pages。从想法到能发给别人体验的链接,全程都在对话里完成。

写在最后

以前总觉得 “做一个能给老师用的教学工具” 离自己很远,要会设计、会前端、会部署。这次靠和 TraeCode 一轮轮对话,真的把它做出来了。

它或许不完美,但希望这份小小的作品,能让某个正在为 “凸透镜到底成什么像” 发愁的学生自己拨一下滑块就看懂,也能让某位老师在课堂上多一个顺手的小工具,这就是我今年教师节,想送出的心意。

也欢迎大家点开链接玩玩,提提建议,我会继续把实验补全、打磨好。

5 个赞

牛逼的:grinning_face_with_smiling_eyes::grinning_face_with_smiling_eyes::grinning_face_with_smiling_eyes:

2 个赞

哎哎哎!我当初是我们物理课代表来着,不敢想象要是我把这玩意儿献给我们老班她不得认我为嫡系

4 个赞

Vibe coding,只需要一个想法,剩下的交给AI :grinning_face:

1 个赞

中学的时候,物理实验课是总是做不够的,一节课总是那么短,甚至有些实验课,老师直接跳过,只讲公式和结论,那个时候,要有这样一个物理实验工作台该多好

1 个赞

真的是太棒了,能看看我的给些建议吗?

1 个赞

你的Trae好像也自己做了皮肤!

看起来像Notion风格或是shadcn/ui风格

厉害厉害 :100:

一直喜欢简约的风格,后续打算设置多主体选择,老师这边有好的建议吗?

2 个赞

太好了,给老师提供了思路,以后做课件方便快捷很多。

1 个赞

希望物理老师可以看到这篇帖子,这样以后教学工具就更加丰富了,方便教学的同时,也增加了不少趣味性

1 个赞

这个设计一看就是舒服,后面可以考虑在投影仪上看看实际效果。

当时调整UI的时候,就不断地往简约风格调整,如果是很花的页面,会分散学生的注意力,这种简约最好,注意力会集中在实验本身

1 个赞

月底还有没用完的积分的时候,可以截图你喜欢的UI,然后用Qwen 3.8 MAX或者K3,我是去抄了Cursor的浅色主题。

牛的牛的!!

真牛

:+1:

感谢,很好的UI参考思路,谢谢

1 个赞