你好，我是平野先生。

家里小朋友马上一年级，自从接触vibe coding，一直想做个课本同步学习工具帮他学——同步课本知识、动画讲解、可以自主跟学的小程序。

之前倒是做过两个网页应用，从来没碰过小程序开发，一开始只是想试试，没想到最后真的做成了。过程中踩了不少坑，可当小程序预览出来完整能跑的时候，还是有点抑制不住的兴奋。

全程用TRAE WORK，聊想法、讨论方案，Design模式做前端，Code模式实现功能。坐下来写这篇复盘文章的时候，小程序后台正在审核。

下面就和你分享记录一下主要开发过程，以及复盘下来踩到了哪些坑、怎么避坑。

聊想法，讨论方案

最开始脑子里只有一个很模糊的想法：给家里即将上一年级的小朋友做一个可以帮他学习的工具，可以在平板上用，能辅助小朋友学习课本知识。

我没学过编程，也不懂小程序该怎么开发。先让TRAE WORK做市场调研，有哪些功能接近的成熟产品，再结合我自己想实现的功能，让它写了一份开发计划方案。方案看着挺像那么回事——先做哪个、后做哪个，每一步该干什么，写得清清楚楚。

做MVP

先用Design模式做前端，说实话一开始半信半疑。结果一做发现这东西确实行。首页、课程页、星空页、家长设置页，一路做下来，不对马上改。最惊喜的是星空页——方案里只写了一行"深蓝夜空，金色星星"，结果TRAE WORK渲染出来的效果几乎和我想要的一模一样。

那一下的感觉：哇哦，这东西真能干活。

前端差不多了，换Code模式做功能。这里TRAE WORK问了几个问题，技术性的东西不懂，直接选了推荐的选项，这给后续开发挖了个大坑，先按下不表，后面会展开说。

TRAE WORK自己从网上搜索课程数据填进去，学习进度记录功能、星空怎么亮起来也接上了。搞完之后给了我一个本地html链接跑测试——能点、能翻、能记录。

接着给学习内容增加拼音标注，这是耗费时间最长的一步。因为不懂给汉字标注拼音的标准，一开始描述的不准确，不是标注不全，就是没有和汉字对齐，要么就是拼音和汉字字间距不一致拼音被压缩、截断……各种问题，五花八门，中间也试过切换大模型看能不能修复，最后实在不想一点一点截图描述了，大模型停在了Doubao-Seed-2.1-Pro，让它自己全面检查、修复拼音标注存在的问题，上了个厕所回来，自己修复好了。

小程序迁移

小程序需要AppID才能真机预览，当时还没拿到AppID，也不知道微信开发者工具可以用测试号。TRAE WORK提了一个方案：先用网页把功能跑通，在浏览器里看效果，没问题了再迁到小程序工程。听起来很合理——不用去注册、不用额外等、马上能看到。

我就这么干了。现在回头看，这个决定才是整个开发过程最绕远的路。

从最开始模糊的想法，到体验版，折腾了两个晚上加一个白天。复盘总结了整个开发过程中踩的比较大的坑，如果你也想做小程序，可能会对你有帮助。

1：头疼医头，脚痛医脚

这个坑贯穿了整个开发过程。

做拼音标注的时候，让TRAE WORK给汉字标上拼音。它标好了，一刷新页面——拼音正常，汉字全没了，只剩拼音。它查完说字号继承了外层的零，看不见了。修好了。

切学期，打开星空页——星星还是上学期的。让它改了，下次切又没刷新。同一个问题反复出现。

改拼音布局，页面撑变形了。让它删一个不用的按钮，按钮图标没了，后台的引用还在，一运行就报错。

发现没有？所有问题的模式一模一样：我说一个事→它改一处→别的地方崩了→发现了再让它改→它再改那一处→又不知道牵连到哪。

后来我想了个笨办法：每次让它改完东西，不管大改小改，都加一句"把整个项目从头到尾检查一遍，看我说的这个改动有没有影响到其他地方"。多花几分钟，但至少能规避大部分关联问题。

2：推荐了一条看似更快其实绕远的路

做小程序要上真机测试才能预览功能，需要AppID，一开始没拿到AppID。TRAE WORK提了一个方案：先用网页把功能跑通，在浏览器里看效果，没问题了再迁到小程序工程。

听起来很合理——不用去注册、不用额外等、马上能看到。我就这么干了。

等全做完了，往小程序迁的时候才发现不是那么回事。3D星空在浏览器上跑得飞起，到了小程序白屏卡死；拼音标注在网页上对齐得好好的，搬到小程序又全部重做；前前后后加起来，超过1/3的功能等于做了两遍。

回过头想，TRAE WORK提的方案听起来确实很顺，但我自己也点了头。我不会写代码，看不穿"先跑Web再迁移"这句话背后意味着什么，结果就是一步变四步：开发完→Web验证→迁移→再适配。

后面再做vibe coding，coding之前我会让它列清楚从计划方案到出预览分哪几步走，都需要提前准备哪些东西，准备齐全了再动手。

3：你以为把需求说清楚了，不代表AI听懂了

"加个设置入口"——就这么一句话，TRAE WORK在页面右上角画了一个齿轮图标，点进去是设置页。

但我要的是底部菜单栏第三个选项，点进去才是设置页。两个完全不是一回事。

不是不听话，是我说得太模糊了。"设置入口"四个字，我可以理解成齿轮按钮、底部菜单、悬浮窗、右上角文字链接……一百个人有一百种理解。TRAE WORK从里面选了最常用的那个，恰好不是我要的。

后来我学乖了：说需求的时候不只说"要什么"，还告诉它"不要什么"。"加个设置入口，不要放在页面右上角，不要用齿轮图标，放到底部菜单。"

你说一遍，AI理解一遍，反复确认不丢人。

4：删了的东西，AI自己又加回来了

这个我是真没想到。

设置入口一开始放在页面右上角，一个齿轮图标。做着做着觉得放那不好看，改成了底部菜单第三个选项。明确说"把齿轮按钮的代码删掉"。

改了几轮别的东西，打开预览一看——齿轮按钮又回来了。

后来才明白，大模型有历史对话记忆。它翻到前面聊天记录"看到"你提过齿轮按钮，觉得你可能还需要，改附近代码的时候就顺手帮你恢复了。它不是故意的，但确实会这么干。

修法也简单：删除的时候让AI把显示、样式、功能三个文件里跟这个东西相关的代码一次清干净，再加一句"这是删除操作，后续不要恢复"。虽然听起来有点傻，但真的管用。

两天做出一个能跑的东西，确实快。但这些坑也说明了一件事——AI不是万能的，尤其是在"从一个平台搬到另一个平台"这个环节，最需要人的经验和判断。最大的收获不是那个小程序，是怎么跟AI配合才不翻车。AI能写代码，但你得知道让它写什么、写完怎么验证，这才是真本事。

而知道让AI写什么、写完怎么验证，这就是有编程背景比不懂编程最大的优势。