一、Demo 简介
是什么： 「她的光」是一款面向全职妈妈的移动端心理健康与自我成长 App 原型，采用纯前端 HTML/CSS/JS 实现，无需后端即可完整体验所有功能。
面向谁： 核心用户是全职妈妈——这个群体承担着巨大的育儿压力和社会隐形劳动，却往往缺少一个属于自己的、安全的情感表达空间。
主要功能：
情绪怪兽树洞 — 7 只情绪怪兽代表 7 种日常情绪（开心、幸福、平静、焦虑、疲惫、愧疚、烦躁），选择一只怪兽，写下心事，它会用温暖的话语回应你。对话中自动识别情绪关键词并展示对应怪兽头像，让情绪被"看见"。
今天的日子 — 不叫"成长"也不叫"日记"，就叫"今天的日子"。因为安安静静躺平的一天也值得被记录。支持分类记录（运动、读书、学习、冥想、生活）+ 感受随笔，每周自动汇总记录数、生活维度和连续天数。
她书架 + 阅读笔记 — 精选妈妈群体适合的书籍推荐，支持阅读打卡和阅读笔记功能，每条笔记可关联具体书籍，留住读到好句子时的那份心动。
她客厅（社区） — 今日话题讨论 + 妈妈茶话会聊天室，可以和姐妹们交流、吐槽、分享，茶话会有 AI 自动回复暖心消息，让倾诉不被辜负。
她理财 — 完整的家庭记账系统（支出/收入/理财三类型），预算可自定义设置，概览卡片同时展示支出、收入、结余，动态理财建议根据实际消费数据生成。理财小管家管理基金/股票/其他持仓。
二、Demo 创作思路
灵感来源：
我身边有很多全职妈妈朋友。她们在朋友圈里晒孩子、晒美食，看起来生活美满。但深夜的私信里，她们说"我好累"“我有时候觉得自己什么都不是”“我甚至不敢说累，因为别人会说’你不用上班多幸福啊’”。
全职妈妈是隐形劳动最重、却最缺少话语权的群体之一。她们需要的不只是"加油"，更需要一个被允许不完美的空间。
想解决的问题：
情绪没有出口 — 全职妈妈每天面对孩子、家务、琐事，负面情绪无处安放，积压久了会影响心理健康
自我价值感缺失 — 日复一日的家务和育儿让人忘记"我是谁"，缺少一个帮助她们看见自己成长轨迹的工具
社交孤立 — 全职妈妈往往脱离职场社交圈，在社区里也缺少同频交流的空间
家庭财务焦虑 — 很多全职妈妈没有独立收入，对家庭财务缺乏掌控感，产生经济焦虑
精神生活匮乏 — 阅读是最好的自我投资，但缺少引导和记录的工具
为什么做这个方向：
市面上有大量母婴 App，但它们要么是电商（卖货），要么是育儿知识（教你怎么带娃），几乎没有人关注妈妈本人。「她的光」的核心理念是：妈妈首先是她自己，然后才是妈妈。 我们不做育儿百科，不做母婴商城，只做一件事——让妈妈看见自己的光。
设计上的关键取舍：
不用"成长"“进步"这类带压力的词，用"今天的日子”，允许用户"不成长"
情绪不用冰冷的量表测量，用可爱的怪兽表达，降低心理防御
产品调性温暖但不刻意甜腻，高级但不冷漠
三、Demo 体验地址
ZIP 体验包： 下载下方附件 她的光-Demo.zip，解压后双击 她的光.html 即可在浏览器中打开体验（推荐 Chrome/Safari）。
所有功能均可交互体验：
点击情绪怪兽 → 输入心事 → 查看回复
切换到成长计划 → 添加今日记录
切换到书架 → 查看推荐书籍 → 写阅读笔记
切换到客厅 → 参与话题讨论 → 茶话会聊天
切换到理财 → 记账 → 理财小管家买入/卖出
数据使用 localStorage 本地存储，刷新不丢失。
四、TRAE 实践过程
开发流程
整个「她的光」App 从产品构思到设计实现，全部在 TRAE Work 中完成，经历了以下关键阶段：
阶段 1：产品定义
使用 TRAE 进行产品需求分析，明确了目标用户（全职妈妈）、核心痛点（情绪表达、自我价值、社交孤立、财务焦虑）和产品定位
输出了完整的产品设计方案文档，包含设计规范（配色、字体、圆角、阴影、动效原则）
阶段 2：UI 设计与实现
在 TRAE 中完成了全部 5 个 Tab 页面的 HTML/CSS/JS 开发
设计了完整的 CSS 变量系统（品牌珊瑚色、辅助青色、温暖金色、奶油白背景）
创建了情绪怪兽交互系统，包含 7 只怪兽的选择动画和树洞对话功能
实现了呼吸冥想引导功能（渐变圆圈动画 + 倒计时）
阶段 3：交互打磨
在 TRAE 中反复调试和优化：
修复了 JS 语法错误导致的交互失效问题
实现了对话气泡中情绪关键词自动识别和怪兽头像展示
优化了她客厅话题输入框的可见性问题
调整了话题输入框容器样式（添加白色卡片背景 + 圆角 + 阴影）
阶段 4：审美升级
使用 TRAE 对整个页面进行了专业级审美诊断（综合评分 6.1/10）
根据 12 项诊断结果进行了系统性优化：
统一了按钮系统（主按钮 .btn-primary + 次按钮 .btn-secondary）
统一了输入框样式、阴影、圆角规范
情绪卡片从 4 列网格改为横向滚动布局，增大触摸目标
5 个 Tab 各配独特颜色（珊瑚/金色/青色/紫色/绿色）
阶段 5：色彩系统升级
从"功能性配色"升级为"高级感配色"：
品牌色从刺眼珊瑚红 #E85D4A 调整为柔和玫瑰色 #E07B6C
辅助色从沉重深青 #2C6E6A 调整为清新鼠尾草绿 #4A9B95
背景从泛黄奶油 #FAF6F1 调整为洁净白 #FAFAF8
新增薰衣草紫和粉色扩展色
阶段 6：功能迭代
在 TRAE 中持续对话迭代，新增了多个功能模块：
妈妈茶话会聊天室（她客厅）
阅读笔记系统（她书架）
完整记账功能：支出/收入/理财三类型 + 分类标签智能过滤
理财小管家：基金/股票/其他持仓管理
预算自定义 + 月度概览三栏布局（支出/收入/结余）
动态理财建议系统（根据实际消费数据生成）
今日记录仪产品化改造：从"流水账"到"今日的日子"，去除"必须成长"的压力
产品理念迭代
开发过程中最关键的一次产品思考是关于"今日成长"的命名。最初这个模块叫"今日记录仪"，后来改名为"今日成长"。但用户反馈说：
“也可以不成长，就安安静静躺平平静的一天也挺好。”
这让我意识到，对于一个心理健康产品，连"成长"这个词都可能成为一种隐性压力。最终改为"今天的日子"——不预设今天必须发生什么，不评判有没有意义。placeholder 从"记录一件让自己变得更好的事"改为"今天想记点什么？“，空状态提示从引导行动变为"想记点什么就写下来，不记也很好”。
这个细节改动，是整个产品从"工具思维"到"人文思维"转变的缩影。
关键任务 Session ID
以下是开发过程中关键任务的 Session ID（双击 TRAE 对话头像即可复制）：
Session 1： 551283006123132:44dad5f438661c4ccb785eafd0aa96d2_6a3cd7872a5bf5e10a3abd5a.6a41ef092903306b5f781ee5.6a41ef082903306b5f781ee3（2026/6/29 — 产品定义与初始设计）
Session 2： 551283006123132:7ac5ea0454bf48b3e3688ceba948719a_6a3cd7872a5bf5e10a3abd5a.6a438423fc6be555d0052acf.6a438423fc6be555d0052acd（2026/6/30 — UI 实现与交互打磨）
Session 3： 551283006123132:c9cfb0836009b902109f9a8dd24deda5_6a3cd7872a5bf5e10a3abd5a.6a491ab57e34d7fc8bafa839.6a491ab57e34d7fc8bafa837（2026/7/4 — 审美升级与功能迭代）
Session 4： 551283006123132:c45165dee4a14ac09e48328499ab1821_6a3cd7872a5bf5e10a3abd5a.6a4a54a67e34d7fc8bafb09a.6a4a54a67e34d7fc8bafb098（2026/7/5 — 色彩系统升级与最终打磨）
五、技术实现亮点
纯前端实现：单个 HTML 文件 + CSS + JavaScript，无需后端，解压即用
数据持久化：所有数据（聊天记录、日记、笔记、记账、理财）均使用 localStorage 本地存储
AI 情绪识别：对话气泡中自动识别 7 种情绪关键词（含近义词），匹配对应怪兽头像展示
动态理财建议：根据用户实际消费数据，实时生成预算提醒、消费洞察、储蓄建议
呼吸冥想：CSS 动画驱动的渐变呼吸引导圆，含三种冥想模式
能量追踪：SVG 折线图展示一周心情变化趋势
响应式设计：模拟 iPhone 15 Pro Max 尺寸（430x932），适配手机端浏览
附件
体验文件：
她的光-Demo.zip (6.1 MB)
（解压后双击 HTML 即可体验）
报名帖链接： 【生活娱乐赛道】她的光 — 全职妈妈心理健康与自我成长 App Demo
「她的光」—— 每个妈妈都值得被看见，包括那个安安静静、什么都不想做的自己。
，做的比较粗糙，我会继续加油哒