1. Demo 简介
是什么：Dawn·破晓是一款聚焦于青少年心理健康App。Demo在浏览器中完整模拟真实 App 的底部 5 Tab 切换、6 款可玩解压小游戏、AI 树洞对话、天堂邮递局 AI 回信、情绪花园打卡、暖心社区浏览、个人中心等全套功能——打开就能像用真实 App 一样操作。
面向谁：
- 核心用户：10-18 岁青少年——尤其是经历丧亲丧友之痛、日常焦虑压力大、找不到情绪出口的青少年。
- 付费客户：90 后/95 后年轻家长——他们受教育程度更高，更重视孩子心理健康。
主要功能（2-3 个核心亮点）：
| 功能 | 说明 |
|---|---|
 AI 树洞 · 实时对话疗愈 |
像和朋友聊天一样输入情绪倾诉内容，AI 会以打字机效果逐字回复，基于 CBT 认知行为疗法逻辑给予共情和引导。内置 5 组不同情绪场景的完整对话链（家庭矛盾、学业压力、孤独感、丧亲之痛、自我否定），回复完成后还会出现快捷回复按钮让对话继续推进。 |
 天堂邮递局 · AI 跨越时空回信 |
专为经历丧亲丧友之痛的青少年设计——给已逝之人写信（50 字以上），AI 以逝者口吻生成回信。内置 3 封不同主题的完整回信模板（考试/成绩、看海/旅行、对不起/后悔），按用户输入的关键词智能匹配。 |
 情绪花园 · 游戏化心情打卡 |
5 档心情滑块（ → ），滑动选择今日心情后点击“记录今天”——情绪小树折线图新增数据点、虚拟花园花朵状态同步变化。连续 3 天心情低落会自动弹出“急救任务”提示，引导用户去心灵驿站放松。 |
 六款可玩解压小游戏 |
捏气泡纸（6×6 网格点击爆裂+连击特效）、情绪漂流瓶（写烦恼→抛向大海）、吹散乌云（拖拽吹散+天空放晴）、快乐源泉小瓶子（9 个瓶子逐级填充+生成纪念卡片）、植物疗愈室（浇水/晒太阳/轻触三种照顾方式+情绪条+开花）、涂色减压室（点击色块填充线稿区域+三种线稿切换）。 |
产品截图/界面展示见下方附件 HTML 文件
2. Demo 创作思路
-
灵感来源：一个我自己的真实故事
2022年秋天，我最好的朋友抗癌失败，17岁的花季就永远离开了这个世界。那天晚上，我是和朋友打着电话睡着的——如果没有那个电话，我不可能完整地走出来。
但大人却似乎无法理解。他们明白我失去朋友的痛，但绝不让我沉痛太久，因为还要高考，没有时间。
很长一段时间里，我找不到一个可以“被允许悲伤”的地方。说出来怕父母担心，不说又憋得难受。学校的心理课高三直接取消，心理咨询师的价格也不是我能负担的。
后来我上了大学，遇到了几位同样经历过丧亲丧友之痛的同学。我们聊起那段日子时发现：大家最缺的不是“心理知识”，而是一个可以无所顾忌地表达悲伤、并且被接住的空间。
Dawn·破晓，就是从这些真实的深夜对话里长出来的。
我做这个产品，不是因为看到了什么风口，而是我自己走过那段路，知道那里有多黑，也知道什么样的光能真的照进来。
想解决的问题——三重断裂：
- 价格断裂：线下心理咨询单次 400-1000 元，月支出 1600-5000 元，远超多数中国家庭承受能力。
- 资源断裂：我国至少需要 140 万名心理咨询师，实际仅 2 万余人。学校心理课高一二仅 3 周/次、高三直接取消。
- 信任断裂：市面泛心理平台正在失去年轻人的信任。一位用户写道：“它曾经接纳我的困境和焦虑，现在却只是一碗碗毒鸡汤。”
为什么做这个方向：
2025 年中国青少年心理健康服务市场规模达 827.6 亿元，年复合增长率 26.4%。教育部 2025 年出台“十条措施”，要求建立“一生一策”心理健康档案。
但我们选择这个方向，首先不是因为市场大——是因为那个高三女生的故事，不该是孤例。
关键取舍：做 App 交互原型 vs 做网页展示？
最初我想做一个完整的可运行 App，但涉及双端适配、商店审核、隐私合规……光基础架构就要占掉比赛大半时间。我决定先用高保真 HTML 交互原型验证核心体验——让评审点开链接就能像用真实 App 一样操作所有功能，而不是看一个“只能滚动浏览”的展示页。原型跑通了，价值验证了，再考虑真正的 App 开发。
3. Demo 体验地址
附件：index.html (99.8 KB)（已上传至本帖子附件）
体验方式：
- 手机端：直接在手机浏览器中打开 HTML 文件，即可获得完整的 App 使用体验
- PC 端：在 Chrome/Edge 浏览器中按
F12打开开发者工具，点击“切换设备模拟”图标（
），选择 iPhone 12/13/14 尺寸，刷新后即可模拟手机 App 体验
可体验的核心交互清单：
底部 5 Tab 自由切换（情绪花园 / 心灵驿站 / AI 知心 / 暖心社区 / 我的）
-
情绪花园：心情滑块打卡 + 情绪折线图实时更新 + 虚拟花园状态联动
-
心灵驿站：6 款解压小游戏全部可玩（捏气泡纸、情绪漂流瓶、吹散乌云、快乐源泉小瓶子、植物疗愈室、涂色减压室）
-
AI 知心：AI 树洞实时对话（打字机效果 + 快捷回复）+ 天堂邮递局写信与 AI 回信
-
暖心社区：故事广场浏览 + 星光守护者展示 + 访谈录卡片
-
我的：个人中心 + 情绪档案 + VIP 会员 + 家长星语绑定入口
4. TRAE 实践过程
整个开发不是线性推进的，是被三个关键决断塑造的。
决断一：从“品牌官网展示页”到“高保真 App 交互原型”
踩坑经历：第一版 Prompt 写的是“产品介绍落地页”——结果 TRAE 生成的是一个长页面滚动展示页，所有功能都只是“文字描述”，点不了、玩不了，纯纯一个“PDF 式页面”。
怎么解决的：我重新梳理了需求——评审要看的是“能体验的 Demo”，不是“能看的 PPT”。于是把 Prompt 定位彻底改为“高保真移动端 App 交互原型”——底部 5 Tab 切换、每个 Tab 下的功能都可以真实操作、输入→反馈→结果形成完整闭环。
关键 Prompt：
“本次开发为高保真移动端交互原型——模拟真实 App 的完整使用体验，包含底部 5 Tab 导航切换、6 款可玩解压小游戏、3 大核心功能完整交互流程。用户在手机上打开看到的是一个完整的 App 界面，可以像使用真实 App 一样点击、切换、输入、操作。”
Session ID：.4175261208154266:c0d37dd2ba9d829a68cec82c52ae51ab_6a3e1ef2d583270a3c252db3.6a510841cc24591d70765bf8.6a510841a36aa91525322707:Trae CN.T(2026/7/10 22:57:05)
决断二：六款解压小游戏从“展示”到“可玩”
踩坑经历：最初“心灵驿站”板块里的小游戏只有卡片展示和文字介绍——用户点进去看到的还是文字，玩不了。
怎么解决的：单独为六款游戏写了详细的交互逻辑 Prompt——每款游戏都明确了：用什么技术实现（Canvas/CSS/SVG）、用户每一步操作是什么、系统每一步响应是什么、有什么彩蛋和反馈。
比如捏气泡纸：“展示 6×6 气泡纸网格（Canvas 绘制，圆形气泡带高光立体效果）→ 点击气泡播放爆裂动画 + 波纹扩散特效 + 进度更新 → 全部捏碎后庆祝动画”；再比如情绪漂流瓶：“写烦恼（输入框）→ 装瓶 → 瓶子抛向大海（抛物线动画）→ 随波浪漂远消失 → 显示‘你的烦恼已随海浪远去’”。
Session ID：.4175261208154266:00a1557785381496ca12747a81c202af_6a3e1ef2d583270a3c252db3.6a545457cc24591d70766589.6a545457a36aa9152532270b:Trae CN.T(2026/7/13 10:58:31)
决断三：AI 树洞“打字机效果”和“预置对话库”的设计
踩坑经历：一开始 AI 树洞的回复是瞬间全部显示出来的——没有“AI 正在思考”的沉浸感，用户体验像在看静态文本。
怎么解决的：在 Prompt 中明确要求“延迟 800ms（模拟 AI 思考），AI 回复依次逐字显示（打字机效果）”，并预置了 5 组不同情绪场景的完整对话链（家庭矛盾、学业压力、孤独感、丧亲之痛、自我否定），每组都包含“用户首条消息”和“AI 回复全文”。回复完成后自动出现 2 个快捷回复按钮，让对话可以继续推进。
天堂邮递局也采用了同样的思路——预置 3 封完整回信模板，按关键词（考试/成绩、看海/旅行、对不起/后悔）智能匹配，确保用户写完信后能立刻看到有温度的回信。
Session ID：.4175261208154266:082930008abcd6bbf6745401f25c163b_6a3e1ef2d583270a3c252db3.6a50f569cc24591d707653cf.6a50f569a36aa91525322704:Trae CN.T(2026/7/10 21:36:41)
开发关键步骤截图
| 序号 | 截图内容 | 说明 |
|---|---|---|
| ① | 产品架构生成对话截图 | TRAE 根据 Prompt 输出完整 5 Tab 架构（情绪花园/心灵驿站/AI 知心/暖心社区/我的） |
| ② | 情绪花园心情打卡交互截图 | 心情滑块联动情绪折线图更新 + 虚拟花园状态切换 |
| ③ | AI 树洞对话界面截图 | 打字机效果逐字回复 + 快捷回复按钮 |
| ④ | 天堂邮递局写信→回信流程截图 | 写信→加载动画→AI 回信完整闭环 |
| ⑤ | 六款解压游戏大厅截图 | 游戏网格卡片展示 + “开始玩”进入全屏游玩界面 |
5. 开发心得
1. 给 TRAE 的 Prompt 越“可执行”，生成的结果越“可用”
第一版 Prompt 写的是“做一个青少年心理 App 的展示页”——太模糊了。TRAE 只能猜你要什么。后来我把 Prompt 改成了“高保真移动端交互原型，底部 5 Tab 切换，每个 Tab 下的功能要有完整的输入→反馈→结果闭环”——TRAE 输出的东西立刻就变成了可以真实操作的 Demo。Prompt 不是描述“我想要什么”，而是描述“用户进来之后每一步能做什么、系统怎么响应”。
2. “打字机效果”和“预置数据”是小成本、大体验的关键
AI 树洞如果没有打字机效果，看起来就像静态文本；天堂邮递局如果没有预置回信模板，用户写完信就只能看到“AI 正在思考”然后没下文。这两个小设计——逐字显示 + 预置完整对话/回信数据——让 Demo 的沉浸感提升了不止一个档次，而实现成本几乎为零（纯前端 JS 控制 + 预置 JSON 数据）。
3. 功能越温暖，边界越要清晰
AI 树洞要不要识部固定显示灰色提示：‘这封信由 AI 生成，希望带给你一丝温暖’”。功能越温暖，边界越要清晰。别危机？天堂邮递局要不要提醒“这封信是 AI 生成的”？社区要不要审核？——每一个问题背后都是保护用户 vs 尊重隐私的权衡。我在 Prompt 中为 AI 树洞加了一条硬约束：“当识别到用户有强烈自伤/自杀倾向关键词时，自动弹出心理援助热线卡片”；为天堂邮递局加了一条：“回信顶