有时会陪女儿vibe coding，做一些她感兴趣的小游戏。1)通过typeless进行语音输入;2)通过 codex 或者 work Buddy 进行调试;3)然后在浏览器当中进行预览使用。当发现bug或优化内容则进入新一轮的optimize。调试好会把项目push到 GitHub，通过 Vercel/ CloudStudio 进行托管，涉及到一些数据存储，会使用 Supabase 。
1.AI-Native全栈无代码开发链路的搭建
刚开始教女儿coding，也考虑过首先做一些编程相关的基础知识的介绍，但发现这样其实反而提供非常多的 background knowledge，在增加认知负担的同时，无效信息反而降低创造兴趣，干扰创作思路。
让我想起很早之前遇到的一个案例：嘉定某学校校长说，他们给学生采购了学习如何骑自行车的一门拓展课程。三个课时结束之后，学生结构性地学习了自行车的构造和发展历史，但还是不知道该如何骑。
所以首要搭建一套适合儿童的完整的开发-调试环境，先直接上手。
语音输入 → AI编码 → 预览调试 → 版本控制 → 部署托管 → 数据持久
(Typeless) (Codex/WB) (浏览器) (GitHub) (Vercel) (Supabase)
第一层：Typeless语音输入
- 定位：自然语言 → 代码的入口。小朋友用口语描述"我想要一个按钮、点击后弹出小猫"，Typeless 将语音转写为文本 prompt，喂给下游 AI。当然现在语音输入法很多，随便选一个即可。
- 关键能力：流式语音识别 + 上下文保持（支持多轮对话式迭代）。
- 优势：消除了"打字"这个门槛。8岁小朋友可能拼音还不熟练，但口语表达已经足够丰富。
第二层：Codex / WorkBuddy这类computer agent
- 定位：不需要传统的IDE，通过computer agent接收语音转写的 prompt，生成可运行的前端代码（HTML/CSS/JS 或 React/Vue 组件）。这类agent工具可以根据指令React并调用skill或connector，不需要搭建复杂的env。
第三层：预览与调试
- 定位：生成的代码即时在浏览器中渲染，小朋友"即改即看"。
- 典型方式：本地 dev server（如 Vite）或在线 IDE（如CodeSandbox）的内置预览。
- 核心价值：即时正反馈循环——这是维系小朋友注意力的关键。从"我说了一句话"到"屏幕上出现了东西"。
第四层：[Optional] GitHub
- 定位：代码的"云硬盘"。但这个并非必须，只是作为builder的习惯
- 自动化的必要性：小朋友不会用 git add / commit / push，必须由 AI Agent 或 CI 自动化完成。这步一般是由家长来操作。
- 额外价值：GitHub 的 commit history 天然成为项目的"成长日记"——家长可以回溯每次改动。
第五层：部署托管 — Vercel
- 定位：将 GitHub 仓库自动构建并部署为可公网访问的 HTTPS 网站。
- 典型配置：Vercel 连接 GitHub 仓库 → 监听 push → 自动构建 → 生成预览 URL。
- 关键优势：不需要懂 DNS、服务器、Nginx。每个 commit 生成独立预览链接，方便"给别人看"。访问速度快，但是国内无法直接访问，推荐用CloudStudio
第六层：Supabase
- 定位：当项目需要"记住东西"（用户登录、游戏分数、留言板等）时，提供开箱即用的 PostgreSQL 数据库 + RESTful API + 实时订阅。
- 使用方式：AI 生成代码时直接调用 Supabase JS SDK，小朋友完全无感。
2.小朋友1天内花了1000+credits
最近看各种AI相关title的kol到处鼓吹kimi k3“一句话完成一个漂亮的前端网页开发”，抱着让女儿跟上潮流的心态给她配了API key，结果成本骤增。
顺便访谈并总结了下小朋友最近vibe coding的感受：
- AI toast缺失，不够好看，很多指令和tokens浪费在调整样式
小朋友说"好看一点"，AI 不理解"好看"的具体含义（圆角？渐变？动画？）。并且因为没有design prompt导致生成的样式随机，一致性较差，尤其是3D渲染或特定形象方面很简陋，无法满足要求。
- 我在项目中增加了一个markdown文档，用于存放design prompt，作为统一规范format
- 通过几轮对话，提供认为比较合适的UI组件，让AI直接调用component
- 在网上找一些比较合适的截图，和小朋友讨论确定后发给AI，需要支持多模态的AI module去解析并提取更新design prompt
b.游戏测试过程中存在很多bug，但是小朋友没意识到
经常出现的问题是某些特定的交互逻辑缺失，比如“打开商店”一般AI默认是鼠标操作，但缺乏鼠标使用习惯，小朋友往往没意识到“点击”这个交互行为。或者一些tips float显示遮挡影响游戏体验，甚至有时候因为AI幻觉，生成但实际上并未完成某个功能。这些都是经常出现的。
同时因为小朋友持续注意力和长期记忆能力不足，导致容易被AI带偏，有几个项目虎头蛇尾，小朋友在调整过程中放弃了。
- 项目开始前或阶段性和小朋友访谈，整理一些checklist并发给AI，并开启plan功能，每次task让AI自动过一遍注意事项。
- 阶段性让AI总结一个markdown文档，用于归档当前的功能模块，并讲述一遍和小朋友review。
- 让AI主动询问小朋友，类似copilot，complete task后主动询问几个方向不断引导小朋友思考优化。但不建议每次都有，避免小朋友丧失主动思考性。
c.也是现在最头疼的问题，token成本越来越高
项目越迭代，上下文越长，token 消耗指数增长。agent每次都读取整个项目放到context中，这种粗放的管理方式导致input token巨大。
- 重构整个项目架构。整个项目框架会很臃肿，并且小朋友输入的习惯不是问题聚焦而是很发散，就会导致每次改动都会revamp完整代码。所以调用比较贵的模型定期优化架构，并利用diff能力更精准进行代码编辑。
- 使用skill-creator，将一些高复用的场景提取为skill，比如考虑到小朋友语音输入的原始指令比较宽泛，可以增加一个需求分析skill，当每次输入内容不明确或篇幅比较长、涉及范围大的时候进行调用。
- 做session拆分和上下文压缩。和小朋友聊聊天，讨论下接下来是不是有一些比较大的调整（比如增加个宝箱体系），那就新开一个会话并提供一些关键信息。
d.为什么AI不懂人话，达不到想要的效果
小朋友的表述方式其实是和我们成人不一样的。我们会聚焦于问题，但是小朋友是看到哪些东西，她会很随机地去做大量的补充。比如《tank battle》的需求清单：
"优化界面" → "加语音分析" → "改坦克数值" → "部署上线" → "改坦克外观" → "加敌人" → "重新设计视觉"
这不是线性的，而是非常随机跳跃，可能刚开始的时候她只是做一两个点；然后到后面，可能流程跑一遍后，积累一些很 random 并且很碎片化的内容。有时候会听到小朋友气急败坏的说“我要的是judy，不是这个”。还有就是经常抱怨“爸爸，怎么还没好，要等多久啊？”
我更多的时候是作为旁观者，也不知道该提供什么更好的指导。所以，我的解决思路是：
- 不同模型能力不一样，选择合适的方法而不是最贵的。比如让k3完成从游戏地图到角色交互的全部生成，精细度和成本方面都不尽如人意。但是我们先通过可灵或gemini生成素材，再喂给支持多模态且便宜的AI做整理，然后用ds-v4-flash生成代码。这样成本几乎为0，效果巨好还不用反复调整。
- 小朋友对于生成的东西的质量并没有那么高的要求，并不需要很大的精细度。她只需要能完成单机的任务即可，对交互方面并没有很强的需求，所以一般情况下。性价比高的模型是最适合的。
- 在workspace中重开一个session，用于eval项目，帮助我了解小朋友的项目现状和代码质量，并从教育学的视角总结交互内容，分析孩子现在的表达能力，真正从vibe coding中提升能力。
3.回过头来，总结下教小朋友vibe coding的整体方案
- 先教她一些关于 AI 使用方面的最基础的知识。比如先介绍在哪里输入，长按right alt进行语音输入；表达的时候如何更精准，最好是让AI快速指导要调整的地方；每次不要输入太多。
把“我看到的东西准确讲述出来的 → 表达我想要什么 → 我看到的变化”这个因果链路形成操作习惯，其实就具备了vibe coding的核心能力。
- 在她创造的过程当中时不时引导 review 一下。可以让她给自己的朋友介绍下游戏并讲述游戏规则，或者脱离电脑，在纸上写写画画存在的问题和后续的想法。问问她觉得哪些元素是最重要的，或者最需要解决的问题是什么，下次只给她10分钟处理时间怎么做，建立处理问题要区分轻重缓急的概念。
- 孩子对交付的成果并不是非常强的结果导向。我们可以更自由发散地去做这件事情，然后也可以告诉她怎么去发布、怎么去分享给自己的同学，激发兴趣。
4.使用不同的模型，可以尝试去做不同的事情。如果使用最贵的模型，其实反而是性价比比较低的；然后等待的时间、调试的成本综合方面，其实反而并不是一件最佳的选择。可以和小朋友沟通一些checkpoint或milestone，确定好家长介入的时机和应该承担的职责。这样更好发挥出vibe coding的教育效果。
小朋友开发的其中一个domain，仅支持在电脑上操作：
https://clck.ru/3V4HFY