情绪气象台
1. Demo 简介
是什么
情绪气象台是一款基于 HTML/CSS/JavaScript 开发的移动端 Web 应用，将抽象的情绪状态可视化为直观的天气动画。用户每天只需 10 秒选择心情，系统就能自动生成天气动画、鼓励文案和 AI 情绪周报，帮助用户轻松管理日常情绪。
面向谁
核心用户为 12-35 岁关注心理健康的年轻人群，包括学生、职场新人和希望建立情绪记录习惯的都市人群。他们熟悉手机操作，对自我成长有一定意识，但缺乏持续记录的动力。
主要功能: 1. 4 种心情按钮（开心/低落/烦躁/平静），点击后播放对应的 CSS 天气动画（太阳旋转、雨滴下落、闪电闪烁、星空闪烁），并随机弹出鼓励文案（每种 10 条）
2.日历回顾
月历视图用 emoji 标记每天心情，支持补录/修改/删除任意日期记录，点击日期先查看详情再进入编辑
3.标签 + 日记
记录心情时可添加标签（工作/感情/健康/其他）和一句话日记，丰富情绪记录维度
2. Demo 创作思路
灵感来源
人们日常中常说“心情像晴天”“情绪低落到下雨”“心里一片阴霰”——天气与情绪有着天然的关联。这种共性让我想到：为什么不把抽象的情绪变成直观的天气？开心是晴天、低落是雨天、烦躁是雷阵雨、平静是星空——用这种有趣的方式降低情绪记录的门槛，让关注心理健康变得简单自然。
想解决的问题
当前市面上的情绪记录工具存在三个核心痛点：
• 传统日记太繁琐：写一篇日记需要花费较长时间组织语言，难以坚持每天记录
• 专业心理 App 门槛高：功能复杂、术语多，普通用户望而却步
• 缺乏正向反馈：单纯记录容易变成“情绪垃圾桶”，没有积极的引导和安慰
为什么做这个方向
我选择了“小切口、深挖掘”的策略：不做一个大而全的心理健康平台，而是聚焦在“每天 10 秒记录心情”这一个极小的行为。通过天气动画提供即时反馈，通过 AI 周报提供周期洞察，让产品既有工具价值又有情感价值。所有数据存储在本地，用户无需注册，零门槛即可使用。
3. Demo 体验地址
情绪气象台.zip (21.1 KB)
4. TRAE 实践过程
1.需求明确：向 TRAE 描述产品需求：手机 App 页面，4 个心情按钮 + 天气动画 + 日历视图，TRAE 单次生成完整 HTML
2.核心开发：通过多轮对话迭代完成：首页动画系统→日历视图→localStorage 持久化→弹窗交互→补录修改功能
3.功能扩展：逐步添加 7 个新功能：心情标签+日记、趋势折线图、打卡成就、定时提醒、分享卡片、数据导出导入、自定义心情名称
4 .AI加持：添加 AI 情绪周报、升级分享卡片、首次引导、空状态设计等差异化功能
5.Bug 修复修复 undefined 显示问题、优化日历交互为两步流程（先查看再编辑）
Session ID
1.3587085595060476:11943c1606a5823ddf12f9f8c9291c33_6a36319e993b277a4bda237d.6a40ba48a779086f94ad114c.6a40ba48a779086f94ad114a:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/28 14:08:08)
初始产品开发（首页 + 日历 + 动画系统）
2.3587085595060476:204046bf0713afea28dbdf07a18978d5_6a36319e993b277a4bda237d.6a40bd01a779086f94ad11d8.6a40bd01a779086f94ad11d6:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/28 14:19:45)
7 个新功能扩展（标签/折线图/成就/提醒/分享/导出/自定义）
3.3587085595060476:caa202ab46f34f67ca37f6f4a3c1c29a_6a36319e993b277a4bda237d.6a40c2bca779086f94ad127a.6a40c2bca779086f94ad1278:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/28 14:44:12)
AI 周报 + 分享卡片升级 + 引导页 + 空状态 + Bug 修复