【生活娱乐赛道】「情绪觉察与疏导」—— 你的随身情绪自助工具

TRAE AI 创造力大赛 【大赛初赛专区】
1

【标签】生活娱乐

【标题】 【情绪觉察与疏导】—— 你的随身情绪自助工具

【正文】 至少包含以下 4 个部分，可以增加额外的部分

0. 先和大家打个招呼吧 :waving_hand:

  • 你是谁： 一名淹没在人群中完全不懂技术的从事无聊工作的普通人类

  • 你是怎么用 TRAE 把 Demo 做出来的： 由于缺少情绪方面的教育，对于自己产生的情绪不能够准确感知，不知道自己当下的感觉是什么感觉，身边也没有专业的人能帮助感知。通过跟AI进行交流，洞察自己当下的情绪是什么情绪，从而找到更幸福的生活方式。

1. Demo 简介

  • 是什么： 一个基于浏览器的交互式情绪自我觉察与疏导工具，采用纯前端 + 本地存储实现，无需登录、无需后端，打开即用。

  • 面向谁： 任何在日常生活中经历情绪困扰、希望更好地了解自己情绪状态的人——尤其是因工作压力、生活焦虑、目标迷茫而产生情绪困扰的年轻人。

  • 核心功能：

    1. 四步情绪觉察引导

    • 第一步「觉察情绪」：通过身体感受描述、情绪标签选择（15种预设+自定义）、情绪模式识别、强度打分、持续时间评估，帮助用户从模糊的"不舒服"精确化为可描述的情绪状态
    • 第二步「探索原因」：引导用户觉察内心声音、核心渴望和阻碍因素，并展示「情绪循环示意图」帮助用户看到自己被困的闭环
    • 第三步「个性化行动引导」（核心创新点）：基于用户在第一步和第二步中的全部回答，动态生成量身定制的行动方案，包括：
      • 根据身体感受和情绪模式推荐最适合的即时缓解方法
      • 根据阻碍因素（4种）生成4套不同的长期行动方案（共16个具体行动卡片）
      • 根据内心声音智能识别4种认知思维陷阱并给出破解方法
      • 根据核心渴望（财务、工作、关系、认可等）生成"今天就能做"的具体建议
      • 根据情绪强度和持续时间生成个性化鼓励语
    • 第四步「理解原理」：用通俗语言解释5个心理学原理（副交感神经激活、蔡格尼克效应、自我效能感、过程型满足、社会比较理论）

    2. 情绪日记（本地持久化存储）

    • 每次完成觉察后自动保存到 localStorage
    • 首页展示最近3次记录摘要，并根据距上次觉察的时间给出不同的欢迎语
    • 完整日记页面展示所有历史记录的详细信息

    3. 情绪洞察与趋势分析

    • 情绪频率分布图：自动统计各种情绪出现的频次
    • 情绪强度变化趋势：可视化展示近10次觉察的强度变化
    • AI 智能洞察：基于历史数据自动生成个性化洞察，包括反复出现的情绪主题、情绪模式趋势、反复出现的渴望与阻碍、强度变化趋势提示

    4. 个人情绪报告导出

    • 一键导出为 TXT 文件，包含完整的情绪画像、深层原因和行动计划

2. Demo 创作思路

  • 灵感来源

    在一次真实的情绪疏导对话中，我产生了一个想法：能不能把心理咨询师引导来访者觉察情绪的流程，变成一个人人都能随时使用的自助工具？

    大多数人面临情绪困扰时，第一反应是"忍一忍"或者"找朋友聊聊"。但朋友不一定懂心理学，而专业心理咨询的门槛又太高。如果能有一个工具，用经过验证的心理学框架，一步步引导用户从"感觉不好"走到"我知道该怎么办"，那就能填补这个空白。

  • 想解决的问题

  1. 情绪盲区：很多人知道自己"心情不好"，但说不出具体是什么情绪、为什么、该怎么办
  2. 无法行动：面对焦虑和迷茫，很多人困在"想"但没有"做"的循环里，越想越焦虑
  3. 认知陷阱：社会比较、灾难化思维、过度自责等思维模式让人深陷负面情绪而不自知
  4. 专业门槛：心理咨询价格高、预约难，很多人得不到及时的情绪支持
  5. 持续追踪缺失：偶尔的自我觉察不够，持续的情绪追踪和趋势分析才能发现深层模式

  • 为什么做这个方向

我选择「小切口、深挖掘」的策略——不做一个大而全的心理健康平台，而是专注做好一件事：把情绪觉察这一个环节做到极致。

核心创新在于个性化动态引导引擎：不是所有用户看到相同的内容，而是根据用户在每一步的回答实时生成不同的建议。同样的"情绪不好"，一个因为"不知道从哪下手"的人和一个因为"害怕失败"的人，会得到完全不同的行动方案。

3. Demo 体验地址

4. TRAE 实践过程

第一阶段：需求梳理与交互设计

  • 用 TRAE 进行真实情绪疏导对话，记录完整的四步引导流程
  • 将对话逻辑提炼为交互式 HTML Demo 的页面结构和问题设计

第二阶段：基础 Demo 开发

  • 使用 TRAE Work 的 html-report skill 搭建项目结构
  • 实现四步引导流程的完整交互（表单、选择题、滑动条、文本输入）
  • 设计温暖柔和的视觉风格（自然绿+暖橙色），避免医疗化的冷冰冰感觉
  • 使用 InstrumentSans + Lora 字体组合，营造专业但有温度的阅读体验

第三阶段：个性化引擎开发（核心创新）

  • 实现 collectAllData() 数据收集器，汇总用户在所有步骤中的回答
  • 开发 generateReliefCards()：根据情绪模式（起伏大/烦躁/低落/其他）推荐不同的即时缓解方法
  • 开发 generateLongtermCards()：根据4种阻碍因素生成4套不同的长期行动方案（共16个行动卡片）
  • 开发 generateTrapWarning()：根据内心声音中的关键词识别4种认知陷阱（社会比较、结果预判、过度自责、全有或全无思维）
  • 开发 generateTodayAction()：根据核心渴望中的关键词匹配5种不同领域的具体建议
  • 开发 generateEncouragement()：根据情绪强度和持续时间生成个性化鼓励语

第四阶段：情绪日记与趋势分析

815162186281264:11f3e90cfc6d85a5f2fad6726738030f_6a44609431ed59190799a8c7.6a47c008e6da82e1b120a1d1.6a47c008877a50acf1b13e00:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/7/3 21:58:35)

815162186281264:0809f0d55ce1ccdc1173f172ba8265eb_6a44609431ed59190799a8c7.6a4529f2d44c6436a9105e6e.6a4529f1d0539365d986522a:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/7/1 22:58:36)

815162186281264:486368c926fe78b3698bb721257185ac_6a44609431ed59190799a8c7.6a44630b51f837de13870d1e.6a44630ab8f491d0eceba23b:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/7/1 08:51:31)

  • 创作工具

    全程使用 TRAE Work 完成，从产品构思、交互设计、前端开发到功能迭代。

    开发流程

    第一阶段：需求梳理与交互设计

    • 用 TRAE 进行真实情绪疏导对话，记录完整的四步引导流程
    • 将对话逻辑提炼为交互式 HTML Demo 的页面结构和问题设计

    第二阶段：基础 Demo 开发

    • 使用 TRAE Work 的 html-report skill 搭建项目结构
    • 实现四步引导流程的完整交互（表单、选择题、滑动条、文本输入）
    • 设计温暖柔和的视觉风格（自然绿+暖橙色），避免医疗化的冷冰冰感觉
    • 使用 InstrumentSans + Lora 字体组合，营造专业但有温度的阅读体验

    第三阶段：个性化引擎开发（核心创新）

    • 实现 collectAllData() 数据收集器，汇总用户在所有步骤中的回答
    • 开发 generateReliefCards()：根据情绪模式（起伏大/烦躁/低落/其他）推荐不同的即时缓解方法
    • 开发 generateLongtermCards()：根据4种阻碍因素生成4套不同的长期行动方案（共16个行动卡片）
    • 开发 generateTrapWarning()：根据内心声音中的关键词识别4种认知陷阱（社会比较、结果预判、过度自责、全有或全无思维）
    • 开发 generateTodayAction()：根据核心渴望中的关键词匹配5种不同领域的具体建议
    • 开发 generateEncouragement()：根据情绪强度和持续时间生成个性化鼓励语

    第四阶段：情绪日记与趋势分析

    • 实现 localStorage 本地持久化存储，每次完成觉察自动保存
    • 开发首页、情绪日记、情绪洞察三个 Tab 页面
    • 实现情绪频率分布图、强度变化趋势图、AI 智能洞察生成

5. 对应的报名审核通过的帖子链接

6.技术说明

  • 纯前端实现，单个 HTML 文件（约 2000 行），无外部依赖
  • CSS 变量驱动的主题系统，6 种配色变量控制全局风格
  • 零外部 API 调用，所有数据存储在浏览器 localStorage 中
  • 支持 PC 和移动端自适应布局
  • 所有交互均通过原生 JavaScript 实现，无框架依赖
  • 内嵌 InstrumentSans + Lora 字体文件，保证中英文排版效果一致

7.后续规划（复赛方向）

如果进入复赛，计划迭代以下功能：

  1. 增加情绪正念练习模块（呼吸引导动画、冥想计时器）
  2. 支持多用户数据（通过简单的本地密码区分）
  3. 增加情绪自评量表（PHQ-9/GAD-7 简化版），提供更专业的评估
  4. 增加紧急求助入口（心理援助热线一键拨打）
  5. 支持数据导出为 PDF 格式的完整情绪报告
2

这个 Demo 打动我的地方，是它先让人把“我不舒服”拆成身体感受、情绪词、持续时间和内心声音，而不是马上给鸡汤建议；第三步再按阻碍因素和核心渴望给行动卡片，顺序是对的。建议把“不能替代心理咨询”的边界放到首页也露出一小句，再给评委一条示例路线：选焦虑+烦躁不安→填内心声音→看认知陷阱和今天能做的事。我们做的《衍境》在生活娱乐赛道，方向是互动影游创作系统，入口放这方便按 Demo 体验交流：【生活娱乐赛道】衍境 Demo：EvoMap 驱动的互动影游智能体创作系统