【生活娱乐赛道】时光星球·成长记录|习惯养成积分打卡 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
一、Demo 简介
时光星球是一款面向 5-12 岁儿童的成长记录 H5 应用，通过游戏化双币激励系统，帮助孩子建立良好的学习和生活习惯。产品形态为移动端 H5 网页应用，同时拥有微信小程序版本(还未上线，可在h5预览)。
本产品面向5-12 岁儿童及其家长。孩子在家长的引导下使用，将日常学习任务和成长行为转化为可视化积分和愿望进度，让"努力"被看见、被奖励。
二、主要功能
功能方面，简单容易理解，记录成绩就是学科方面完成的比较好的，增加积分激励，积分可以兑换奖励。当然做得不好也有一些惩罚，主要还是以奖励为主。
功能一：双币激励系统
独创"行动币"与"愿望币"双币机制。行动币代表"努力"（记录成长获得），愿望币代表"成果"（记录成绩获得），两者以 2:1 比例兑换。孩子能直观理解"努力积累成果"的因果关系。
首页财富栏区域（展示双币数值 + 兑换入口）
功能二：记录成绩 & 记录成长
记录成绩：
选择科目（语文/数学/英语/其他）→ 选择结果（全对+3愿望币 / 正常完成 / 错题较多扣2愿望币），连续3次全对额外+5愿望币
记录成长：
选择类型（运动/做家务/助人为乐/特别开心的事）→ 自动+2行动币，可附加文字备注
记录成绩弹窗（科目选择→结果选择两步流程）
功能三：愿望进度可视化
许愿池可以自定义孩子的一些小愿望，让孩子能够有这么一个行使自己小小主权的地方。比如我女儿很喜欢吃冰淇淋，但是我平时不一定允许她吃，她花积分兑换，我就不能说她什么。同时也让她更加努力去获得积分，不只是从成绩，记录成长里也有运动、助人为乐、做家务等等，也可以作为行动币去兑换愿望币。
孩子可在许愿池选择或自定义愿望（如"去游乐园"需100愿望币），首页以拼图方块填充式进度条实时展示愿望完成度，攒够愿望币即可"兑换"愿望，形成"努力→积分→实现愿望"的完整闭环。
首页愿望大卡片（展示进度方块 + 百分比）
选择想要的愿望
添加自定义愿望
功能四：时光轴，记录成长点滴瞬间
时光轴是记录孩子成长的一个空间，孩子可以记录自己每天的心情，也可以在日历上看到自己最近积分的情况，还可以设置纪念日，在纪念日的前一天会发送提醒。比如爸爸妈妈，好朋友的生日，约定好一起出游的日子，等等。当天记录下的心情和日记（爸爸妈妈也可以一起记录孩子的点滴），在未来会是一笔宝贵的回忆财富。
日历上的缩略图会显示积分情况，纪念日和心情
每天可以记录心情（简单记录，也可以只按图标）
也可以写日记
点击过去的日历，可以查看之前的心情和日记
三、创作思路
灵感来源：
作为家长，我一直在寻找一种能让孩子主动记录学习、培养好习惯的方法。我自己在平时的教育过程中，先是使用在日历上手动记积分的奖励方法。后来想到如果做一个应用，结合小朋友对于电子产品的兴趣，让她自己参与到成长的过程中来，之前用灵光做的app用了一个学期，孩子果然能坚持下来，就是有些局限性，这次刚好有这个机会，能用Trae把这个应用好好打磨一下，增加了时间轴和成长日记的部分。
主题方面，我想到把"星球探索"的童趣主题与"双币经济系统"结合——让每一次努力都像在点亮一颗星星，让整个app成为积分奖励、成长记录为一体的时光星球。
想解决的问题：
痛点1：孩子缺乏持续动力。之前我也弄过日历上记录，用笔记录比较复杂，计算起来容易搞错，记了一阵子孩子就不乐意了
痛点2：努力与回报关系不直观。孩子缺少即时正反馈，总是把分攒着不用，或者是没有想到用的场景
痛点3：愿望兑现无规划。家长随口答应奖励，缺乏系统性的目标管理和进度追踪
为什么做这个方向：
教育即未来：AI 应用赛道鼓励用技术解决真实问题，儿童成长教育也是每个家庭的刚需。
闭环完整：双币系统让"努力→成果→愿望"形成可感知的闭环，比单一积分更有教育意义
可扩展性强：V1.0 实现核心记录闭环，V2.0 可扩展时光轴日记、AI 鼓励语生成、家长端数据看板等
3. Demo 体验地址
提供交互式可体验的 HTML 格式文件，已部署在线上：
需注册，不用真实邮箱，随便填一个就可以登录
四、TRAE 实践过程
4.1 Spec 驱动开发
整个项目采用 TRAE 的 Spec 驱动开发模式。首先通过对话生成完整的需求规格文档（spec.md），明确数据模型、页面结构、视觉规范和核心闭环；然后自动拆解为 5 个 Task、22 个子任务（tasks.md），每个任务都有明确的验收标准（checklist.md）。
TRAE 中 spec.md / tasks.md / checklist.md 的文件结构
4.2 从小程序到 H5 的跨平台开发
项目最初以微信小程序（WXML + WXSS + JS）开发，完成核心功能后，使用 TRAE 将其移植为 H5 网页应用。关键步骤包括：
项目结构迁移：将小程序的 WXML 模板转为 HTML，WXSS 样式转为 CSS，保留原有的数据模型和业务逻辑
本地存储适配：wx.setStorageSync 替换为 localStorage，封装统一的数据读写方法
UI 组件重构：小程序原生组件（view/text/image）替换为标准 HTML 元素，自定义弹窗组件用 Flexbox 重新实现
4.3 迭代调试与 Bug 修复
在开发过程中，TRAE 帮助快速定位和修复了多个关键问题：
弹窗布局 Bug：记录成绩弹窗按钮不可见 → 重构为 header-body-footer 三段式 Flexbox 自适应布局
柱状图渲染异常：近7天积分柱状图柱子从顶部绘制 → 修复 justify-content: flex-end 实现底部对齐
状态管理 Bug：选项选择后内容消失 → 定位到 show()/hide() 函数中 inline style 与 CSS !important 冲突，统一改为 class 操作
跨平台样式对齐：逐模块对比小程序与 H5 的布局差异，从通知栏、用户信息区、愿望卡片到操作按钮进行像素级对齐
截图位置：TRAE 中调试弹窗布局问题，对比修复前后的效果
4.4 关键任务对话 Session ID
以下为开发过程中的关键 TRAE 对话 Session（用于证明作品由 TRAE 开发完成）：
Session 1 Spec 需求拆解与项目结构搭建：<1554026448841104:61d0bf728477c857f660e91c9d864025_6a45078195bf683cec859a7d.6a45078304c955a8cade956d.6a45078195bf683cec859a7e:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/1 20:52:11)>
Session 2：小程序核心功能开发（首页/许愿池/我的/时光轴）：
<1554026448841104:03ee03ac065a3101ce948d7e7bed951b_6a45078195bf683cec859a7d.6a450e1604c955a8cade96f1.6a450e1529dd527ee947e599:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/1 20:55:02)>
Session 3：H5 版本移植与跨平台布局对齐：<1554026448841104:901f5bd1215fa9c6627cc6450ec18d25_6a45078195bf683cec859a7d.6a462e4f342a82a2859700cc.6a462e4e394c208ed6527bd5:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/2 17:32:08)>
Session 4：弹窗自适应布局重构与柱状图渲染修复
<1554026448841104:8c925a44719118ab30d2eb114797684e_6a45078195bf683cec859a7d.6a46458b342a82a2859702d9.6a46458b69c2cf99c8c78a8e:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/2 19:12:42)>
五、开发心得
TRAE 的价值在于"从想法到产品"的全程加速。从 Spec 驱动的需求拆解，到跨平台代码迁移，再到 Bug 定位修复，TRAE 让一个人也能完成原本需要产品+设计+前端多人协作的工作量。特别是 Spec 模式，让需求不再是口头描述，而是可追溯、可验证的结构化文档，大幅减少了开发中的返工。
双币系统是产品灵魂。单一积分系统容易让孩子只关注数字大小，而双币（行动币 vs 愿望币）的设计让孩子理解"努力"和"成果"是不同的——努力可以直接获得（行动币），但成果需要积累和兑换（愿望币），这本身就是一堂朴素的经济课。