建站日志

上线啦!我给孩子Vibe coding了一个自学导航网站,还加了AI学习教练(附链接+教程)

木妈 · 2026-01-13

上线啦!我给孩子Vibe coding了一个自学导航网站,还加了AI学习教练(附链接+教程)

花了半天+一个晚上,终于把我的第6个AI编程应用部署上线了。🎉

这是一个给孩子做的「小学生学习资源导航」,打开网站后可以根据不同学习目标来进行筛选。目前上线了 数学、编程、英语、科学、人工智能、纪录片等栏目。

除了资源推荐外,我还添加了一个功能,叫做「AI学习助手」。

这个AI学习助手的功能有两个,资源推荐和学习教练模式。

我点击「AI学习助手」,就能跳到助手的页面,我切换到学习教练,我把孩子周末提出的问题发给AI教练。

为什么除法的结果叫商呢?

它就会通过鼓励-引导-提出更贴近孩子生活的问题-让孩子去思考“商”这个字在数学中的含义。

这也是我经常强调的孩子使用AI时,面对需要思考的问题,不要把答案直接给孩子,需要帮助孩子先思考,我把这个逻辑也用在了这个学习网站上。

感兴趣的可以去体验一下我这个小产品,手机电脑均可打开使用,电脑打开效果更好;

http://kids.mumaaidea.com/

下面我分享一下我做这个应用的制作过程以及我对小白在AI编程这件事上的思考,也欢迎大牛们指正和给我建议~

1

 需求背景介绍

这个应用解决的痛点是「孩子自主学习时怎么找到有价值资源的问题」。

比如我们家孩子,拿到电脑后喜欢去B站搜索他感兴趣的话题,比如2年前他研究泰坦尼克号沉没的原因,花了一个暑假把B站上的资源都看完了。

在上一个暑假,他要自学Scratch,也是在B站上找视频教程学。他反馈说,看到标题和时长点进去看看,但很多人讲的不好,然后就退出来再找。

所以,在孩子本来使用电子屏幕时间就短的情况下,孩子还要花时间去选,浪费了时间,注意力也被稀释了。

于是,我想干脆给他做一个导航站,他只需要打开这个导航站,按照自己想学的科目,点进去就能找到学习的资源和工具。

我把这个需求发给了Claude,但一样的先不要着急开发,先帮我分析需求:

AI也是先和我一步一步把需求聊清楚,在AI的提问下,我把需求的边界打磨的更清楚了,最后把产品的方向定位如下:

  • 聚焦到小学阶段,因为我不熟悉初中高中

  • 我告诉AI我有飞书API,有域名,有阿里云的轻量应用服务器

  • 再把我要的学习教练说的更明白

  • 最后让AI去调研分析,市面上是否有类似的产品了,如果有,我的差异点是啥?其实也是我再次评估,我有没有重复造轮子的必要。

结果AI调研的结论是:国内没有专门的、系统化的K12学习资源导航平台!还总结了这个应用的优势:

有了以上的信息后,我们就可以进入开发阶段了。

2

 开发+部署

1-开发前准备

创建飞书多维表格,准备好飞书的APP ID和Secret,具体流程我在上一篇讲解过,也可以找我要详细文档。我用「Trae+Claude+飞书多维表格」做了一个极简记账应用!(附教程)

准备好千问API,这一步到阿里云平台,找到模型服务

点击左边菜单栏,找到密钥管理,然后点击创建API-Key,最后生成一个密钥,点击复制即可。

把这些飞书多维表格链接+APP ID+Secret,以及千问API Key提供给Claude,接下来就等带开发就好了。

2-开发

其实在开发阶段,人基本是不用干啥,就等着AI生成代码,一般几分钟就完成了。

不过就在这几分钟的时间,我就想,那些每天AI coding的程序员们在等待结果的时候会干点啥呢?

当时脑洞了一下,可不可以生成一个插件,自动推送一些和这个项目有关的案例,可以再研究下同一个事情,别人是怎么干的。

之前快刀青衣广播站分享,有国外拿到YC投资的项目,就是在AI coding的时推荐脑腐视频。看来这个是大家都发现的可能的需求,但到底做啥更好我没有答案。哈哈。

3-调试

这一步要极大的耐心,因为你不可能一个版本就成功了,需要很多遍的调试。

同样的,经历了第N次报错,截图,修复后,基本功能实现了。在本地测试没问题后,就准备部署了。

4-部署

这一步对非程序员来说,确实难,不过,还是那句话,都是在AI的引导下一步一步做的。

昨天有个朋友问我,我是在哪里学习部署的教程的,我说都是和AI学的,就是在部署的时候,让AI指挥我一步一步怎么做,目前部署了3个应用,我基本已经知道手动部署的流程了。

这是学习最快的方式,在干的过程中学,而不是先学再干。

所以在这里,我也没办法给出具体的教程,因为我就是在AI的指挥下,完成的这一系列的动作。

比如配置域名、在本地打包文件,上传服务器等。

当然,大牛们用的都是做的自动部署,用git进行版本管理等,这是接下来我优化的部分,在这个项目里,我先保证能走通。

但有个很关键的点是,一定要学会使用终端,也就是命令行,或者叫terminal。

其实命令行没那么恐怖,一样的就是一些指令,发过去看看显示的结果是啥,看不懂复制给AI解释即可。

5-后续应用优化

关于资源更新,我因为是放在了飞书多维表格,因此后续在不添加新功能的情况下,我只需要在飞书的资源库修改资源的链接和名字即可。

这真的是从自身能力和方便出发的,我需要极大程度的降低我的维护成本。

下图就是我手动修改资源的表格,能做到实时同步,而且我也能让Ai帮我去网上找资源,我来手动挑选。

PS:如果你也有好的资源,欢迎推荐给我

最后,我担心未来我要改需求但不知怎么部署。于是我就让AI给我输出了后续部署的运维文档,我试过新增了一个访问统计,参考文档三步就搞定部署了。

写下来好像挺简单,确实也不复杂,不用写一行代码,整个过程除了定义需求和调试,都是AI完成的。

重点就是想清楚你要的产品是什么,解决什么问题,以及在过程中的问题定位和耐心。

3

 做了6个编程应用后,我的思考

这是我做的第6个Vibe coding的产品,也是第一个可以面向大众的产品。其他几个产品都重点在解决我自己的问题,感兴趣的欢迎去查看其他的几个应用。

  1. 本地电脑提词器

  2. 健身记录应用

  3. 极简记账APP

  4. 家庭年度总结展示网页

  5. 5分钟搓出来的NFC测评网站

做了这几个应用后,我的第一感觉是程序员不会被取代的,好像AI编程门槛降到地板上,但是要真正做出来商业的产品,可不是像我这样一顿狂搓搞出来的。

就好像是大家都会做菜,你去好的餐厅,后厨是每样食材都有固定位置,每个流程都有标准规范,厨师闭着眼睛都知道盐罐在哪里。

他们的代码是井井有条的后厨,我的代码是只确保菜上桌了,但后厨已经乱掉了。他们知道每一行代码的作用,我只知道"AI说这样写,然后就好了"。

更可怕的是,如果从头再来做一个一样的产品,我未必能做出来,因为这是AI的能力不是我的能力。

但这种状态,我能接受吗?也能,因为确实是在借助AI编程解决我自己的问题。我做的这些小工具,我使用频率高,对自己来说完全OK了。

所以,我觉得AI编程只是让更多人能参与创造。就像相机的发明,不是为了取代画家,而是让更多人能记录生活。

编程不再是程序员的专属,也不是说人人都要成为程序员,普通人只是多了一个解决问题的工具而已。

如果你看完这篇文章,想试试做应用,我给你几个建议:

  • 从解决自己的问题开始。不要一上来就想做"下一个抖音"。

  • 做好心理准备。你会遇到很多bug,但没事,都能和AI协作完成。

  • 在做的过程中学习。不要等学会了再做,而是做的过程中学。

  • 接受不完美。你做的东西不会完美,但要先做出一个东西出来慢慢迭代。

最近AI编程确实玩得多一些,但我还是解决的AI教育的问题,再做2个就能把这部分经验赋能给我的社群的家长们了~

👀如果你也在探索 AI +个人成长 +家庭教育 ,关注后加入木妈2026年AI家庭教育学习社群~


我是木妈,一名AI+家庭教育实践者,得到AI学习圈讲师,已经上线2门给家长的AI实战课。私信我可获得讲师亲友价。

木妈未来社区是一个浸泡式学习「AI家庭教育」的社区。如果你也想找个组织浸泡学习,欢迎后台留言。

点击👇查看往期实践案例

AI+家庭教育案例合集

问木妈