我给3岁的儿子制作了个APP-夜雨聆风

我给3岁的儿子制作了个APP

起因来源于一次跟儿子聊天的对话过程。

因为他从小比较喜欢消防员的故事，每次睡前都要讲。所以有一次在聊天过程中，我看他正好在用洪恩识字APP来学习识字，还有其他学习英文的APP，我就在想何不给我儿子写个APP来跟他互动呢，这样可以在睡前讲这个APP里的故事。

正好前段时间也接触到了关于 AI Coding 一个编程范式。我目前主力接触到的是 Claude Code这样的编程 AI Coding 智能体，我想着是不是可以通过 AI Coding 方式，给他写一个他感兴趣主题的 App。

进而就是开发一个APP的缘起。

构思

我就开始问我儿子想要什么类型的 App。他说想要以「消防车为主题」，再结合他是“虎宝宝”身份，所以构思了一个以消防车为核心、图标背景和卡通人物都是老虎形象的 App。

有了主题之后，关于如何设计内容，我的想法是：

1，整体构思

(a) 讲一个消防车动画的故事，采用游戏第一人称视角。(b) 核心思路是闯关解锁地图。(c) App 图标显示为一个老虎消防车的形象。

2，开发与核心流程

在构思用户场景时，我遵循了 SDD 开发规范，设计了几个核心流程：

(a) 欢迎页：用户进入后的首个页面。(b) 主页面场景：显示三个图标，分别代表学校场景、消防站场景和森林场景。(c) 交互逻辑：用户需要点击并完成关卡内容。例如，进入主页面后点击“消防站场景”，学完其中的四个学习视频即代表解锁该场景；解锁完成后，可以进入下一关（如学校场景）。

大概就是这样一个交互流程。

实践

基于我的 User Case，我用 Cloud Code 生成了三份文档：

Spec.md
Plan.md
Task.md

在实践过程中，主要就是写 Prompt（提示词），就是通过写了大量的 Prompt，然后产生出了这么一个 App。

比如：

在写 Spec.md 的时候，假设对方是一个资深的产品教育专家，同时也是资深的 App 开发工程师，让他去设计主流的教育类 App。
在写 UI/UE 的时候，我会假设对方去生成一个从 0 到 1 的 Figma 高保真交互图。但在实际进行过程中，发现大模型生成的 UI 图还是不太理想。关于哪个模型比较适合做 UI 相关的工作，后面可以再去实践一下。

之后就是具体的业务场景编写和最终的功能实现，等到大部分功能开发好之后，要做一个业务功能的梳理和重构。比如性能方面的优化，要解决卡顿问题。之前碰到过一个白屏的问题，一开始我是用智谱 4.7 模型去设计和实现的，结果卡了好几天；后来换了一个 Anthropic 的 Claude 模型，马上就解决了。所以有时候我们得换个模型去调整，两个模型结合使用效果会好一点。

最后，一般做完一版 UI 之后觉得可能会比较难看，还是需要逐步去做优化。