【社会公益】AI成长岛 Growth Island —— 你的成长世界

u2341283725579241 · 2026 年7 月 8 日 10:12

0. 先和大家打个招呼吧

你是谁： 一个刚离职、准备全身心投入AI产品开发领域的AI新人。
你是怎么用 TRAE 把 Demo 做出来的： 去年在TRAE推出了国际版的时候，就已经关注TRAE了。后来有了中文版，也做了一些尝试。这次借着这个比赛，更是深度和TRAE配合。在“报名阶段”，就已经配合非常好，能理解我的意图，整理报名贴需要的相关内容。初赛Demo阶段更是和TRAE一起“并肩作战”，希望产品能进入到复赛。

1. Demo 简介

是什么：AI成长岛是一款面向青少年的 AI 陪伴式成长可视化 Web 应用（PWA）。用户每次打开看到的不是任务列表，而是属于自己的岛屿——现实世界的每一点成长，都会映射到岛屿世界的一点变化。
面向谁：12-18 岁的中学生群体，尤其是有自我提升意愿但缺乏坚持动力、需要情感支持但不愿向他人倾诉的青少年。
主要功能：

2. Demo 创作思路

灵感来源：观察到身边的青少年在使用传统打卡 App 时，一旦断签便产生强烈的失败感和自我否定。灵感来源于三个地方：动物森友会的治愈感（建设属于自己的世界）、Notion 的自定义成就感（可视化进度）、以及心理咨询师常用的"具象化"技术——把抽象的心理状态变成可见的风景。
想解决的问题：
- 青少年成长过程中缺乏持续的正向反馈和情感陪伴
- 传统习惯管理工具像冰冷的"任务清单"，无法激发内在动力
- 断签后的挫败感反而加剧焦虑和自我否定
- 家长关心但缺乏合适的沟通桥梁，过度干预造成逆反
为什么做这个方向：青少年心理健康是一个被严重低估的领域。现有的解决方案要么是专业心理咨询（门槛高），要么是冰冷的打卡工具（造成压力）。我们想做的是介于两者之间的"预防性陪伴"——在游戏化的温暖体验中，帮助青少年建立情绪觉察能力和成长型思维，把"成长"从被监督的过程变成建设自己世界的过程。

3. Demo 体验地址（三选一）

交互式可体验的HTML格式文件，请使用Zip格式打包上传到社区；（见附件）
建议体验顺序：
- 用浏览器打开附件包中的 growth-island-demo.html
- 点击"开启我的岛屿"，输入昵称。选择AI伙伴，为伙伴起名。进入岛屿主页，开始体验。
- 点击底部"习惯"按钮完成打卡，观察森林的树木生长。
- 点击"情绪"按钮记录情绪，观察湖水变色。
- 点击右下角伙伴头像，与 AI 对话。
- 点击"挑战"完成勇气任务，点击"梦想"设定目标。

4. TRAE 实践过程

清晰展示用 TRAE 完成 Demo 开发的完整流程；
- 阶段1：产品理念讨论与原型设计
和TRAE反复讨论产品定位——从"任务清单"转向"陪伴小岛"，确定"反打卡焦虑"的核心设计理念。TRAE帮助梳理了四大功能区（习惯森林、心情湖泊、勇气山峰、梦想灯塔）的交互逻辑，输出了第一版可运行的HTML原型框架。
- 阶段2：核心功能模块开发
在TRAE的辅助下逐模块实现功能：欢迎引导流程、本地存储存档系统、四个功能面板的UI与交互、AI对话引擎（基于心理学原则设计关键词识别和共情回复逻辑，覆盖15个心理主题，包含危机干预机制）。TRAE不仅写代码，还主动提醒设计细节（如"不要说加油""先接住情绪再引导"等专业咨询原则）。
- 阶段3：视觉风格探索与迭代
这是迭代次数最多的阶段。最早用CSS平面绘制树木和营地元素，但发现风格不统一→尝试3D粘土风格素材→发现和背景融合度不够→最终确定水彩治愈风，用AI生成统一风格的PNG素材（松树、圆树、灌木、帐篷、篝火、野花），TRAE编写Python脚本批量处理图片抠图去背，再整合到CSS动画中实现树木摇曳、篝火闪烁、弹跳入场等效果。
- 阶段4：成长反馈机制打磨
重点解决"完成习惯/挑战后小岛如何变化"的问题。TRAE帮助实现了：树木随机分布在前后草地（避开湖面和悬崖）、随风摇曳动画、山峰营地元素渐进显示（简单挑战→帐篷、中等→篝火、困难→野花）、情绪天空颜色变化、阳光光束动画等可视化反馈。同时反复调整每日重置逻辑——确保习惯每天重置不累计连续天数，但树木和营地永久保留。
- 阶段5：Bug修复与体验优化
通过TRAE的浏览器预览工具边测边改：修复了树木飘在云上/悬崖上的定位问题、重复变量声明的JS错误、面板关闭逻辑、完成挑战后UI状态更新不及时等问题。发现emoji图标在部分环境显示为方框后，TRAE帮助把所有emoji替换为内联SVG绘制的彩色圆形表情图标，确保跨环境兼容。
附开发关键步骤截图（不少于 3 张）；

附关键任务对话的 Session ID（不少于 3 个）
- 2341283725579241:0a771ac2cd1f4e11affa55718bd5a3d6_6a44c96f1a368fb5c578ec35.6a4db43a3b3cfeb165f2812b.6a4db43af8616108f8396324:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 11:03:14)
- 2341283725579241:33a83d8735e91dd1a4110f4b8f236275_6a44c96f1a368fb5c578ec35.6a4b160766005bfbb019903c.6a4b1606c98fd08d583179e6:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/6 11:22:00)
- 2341283725579241:2851f0e217957d0883d2e304da8c07c3_6a44c96f1a368fb5c578ec35.6a4db2cc3b3cfeb165f28109.6a4db2ccc555b81882192f21:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 10:18:00)
开发过程遇到的困难
- 困难1：进入到游戏的画面和首页的画面，差异非常大，我都震惊了。和TRAE多次沟通调整，才算是勉强基本达到demo的水平，后续进入复赛还要再优化。可能UI、画面设计对于TRAE来说不是强项，但它还是有在认真尝试各种方法来实现，我觉得后面可以通过skill来补。