【标签】 生活娱乐
【标题】【生活娱乐赛道】 懂你 AI —— 你的口袋情感教练
0. 先和大家打个招呼吧 
-
我是一个爱幻想的前端开发；
-
在没有AI前，自己有一个小想法，想做出来时，会遇到很多问题，比如时间、代码量、兼容性、测试等等，但使用Trae后，这些问题基本上不存在了，描述清楚想法后，完全依靠Trae来实现，耗时短，质量高。
1.简介
-
是什么：
懂你 AI 是一款面向移动端的 H5 情感教练应用。不需要下载安装，手机浏览器打开即用，像一个随身携带的"恋爱军师"，在你吵架、送礼、约会、表白前都能先来问一句。
-
面向谁：
恋爱中 / 婚姻中，想改善沟通、减少内耗的情侣和夫妻
想脱单、想提升情商和相处技巧的单身男女
想经营好友、亲子、同事等亲密关系的所有人
-
核心功能（8 大 AI 模块）：
吵架分析 — 输入吵架经过和当前情绪，AI 拆解矛盾根源、双方心理、认知偏差，并给出和解话术
送礼推荐 — 结合对方喜好、关系、场合和预算，推荐贴心礼物清单
约会计划 — 一键生成从早到晚的完整约会行程，含时间线、餐厅、避坑建议
模拟聊天 — 选定人物后以对方身份模拟对话，练习沟通临场反应
表白 / 求婚策划 — 根据双方情况和预算，生成完整惊喜方案
情商训练 — 情景模拟题，系统提升沟通能力
自主模式 — 自由提问，AI 结合所选人物资料给出针对性建议
情侣共评事件 — 双方各自描述事件与感受，AI 综合分析并给出和解路径
-
界面预览
2.创作思路
-
灵感来源
生活中经常看到朋友因为沟通误会和伴侣吵架冷战，也看到很多条件不错的单身朋友因为不会表达、不懂相处而一直脱不了单。情感问题几乎人人都会遇到，但学校里没有这门课，身边也没有专业的人可以随时请教——找心理咨询师动辄几百元一小时，网上的情感内容又碎片化、鸡汤多，找不到针对自己具体情况的解决方案。
-
想解决的问题：
让每个人都能用极低的成本，获得一个24 小时在线、懂你、不评判你的情感教练。吵架当下情绪上头想不起来好好说话，事后又后悔——这时候掏出手机，把经过告诉 AI，它能帮你冷静拆解、给出可落地的话术。
-
为什么做这个方向
亲密关系的质量直接决定一个人的幸福感，但「如何爱与被爱」从来没人系统地教；
3.Demo 体验地址
本项目demo为纯前端 H5 应用（HTML + CSS + JS，无后端依赖，数据存储在 localStorage）
dongni.zip (34.8 KB)
体验提示：首次打开会自动初始化示例人物数据（阿哲、妈妈、小米），可在「我的 → 人物管理」中增删改。所有 AI 能力为前端模拟实现，演示交互与信息架构，未接入真实大模型。
4.TRAE 实践过程
整个 Demo 从需求到可体验完全使用 TRAE 完成，以下是完整的开发过程。
第 1 步：需求梳理 → PRD 与技术方案
把功能清单（re.md）交给 TRAE，让它先把零散的功能点梳理成结构化的 PRD 文档 和 技术架构文档，明确页面结构、路由表、数据模型和 AI 函数签名，再开始写代码。这一步避免了边写边改的混乱。
Session ID：
.3537543523208208:2dcf4a4817cc6d90861c9de23c545ba9_6a45bb3fcd38c4d8c8a5ea5b.6a45bc2ecd38c4d8c8a5ea5d.6a45bc2e53d12dd9ac2e5334:Trae CN.T(2026/7/2 09:17:34)
第 2 步：搭骨架 — SPA 路由与页面结构
用 TRAE 一次性生成项目骨架：
-
`index.html` — 入口与字体引入
-
`assets/style.css` — 全局设计系统（CSS 变量、卡片、按钮、Tab 栏）
-
`assets/app.js` — 主逻辑（工具函数、localStorage 封装、hash 路由、22 个页面路由处理函数）
采用 hash 路由的纯前端 SPA，无需构建，刷新不丢状态，22 个页面全部在一个 app.js 内按路由分发。
Session ID：
.3537543523208208:cfb44fabc345676232ffa4cce670cc9b_6a45bb3fcd38c4d8c8a5ea5b.6a45d207cd38c4d8c8a5ecdc.6a45d20653d12dd9ac2e5335:Trae CN.T(2026/7/2 10:50:47)
第 3 步：实现 8 大 AI 功能模块
逐个用 TRAE 实现 AI 功能页：吵架分析、送礼推荐、约会计划、模拟聊天、表白策划、情商训练、自主模式、情侣共评。每个模块包含表单输入 → AI 思考动画 → 结构化结果展示。
其中"自主模式"和"吵架分析"会结合所选人物的雷区、喜好资料给出针对性建议，让 AI 输出从通用模板变成"懂你"的私人建议。
Session ID：
.3537543523208208:825ed8b86878746cf09a68ea28a1c54c_6a45bb3fcd38c4d8c8a5ea5b.6a45ff73cd38c4d8c8a5ed9d.6a45ff7253d12dd9ac2e5336:Trae CN.T(2026/7/2 14:04:35)
第 4 步：移动端体验打磨
基于真实使用反馈，用 TRAE 做了多轮体验优化，这是评审最看重的"过程"部分：
1）. 头部返回按钮重做 — 原来的圆形返回箭头太丑，改为 SVG 箭头 + 圆角磨砂卡片样式
2）. 下拉框改移动端弹窗 — 原生的选择器在移动端体验差，自实现 iOS 风格底部弹窗选择器，自动接管所有下拉框
3.） 配色迭代 — 第一版暖珊瑚粉过于陈旧，先改为薄荷绿，又因绿色不适合情侣主题最终定为浪漫淡紫风（主色 `#A78BFA`），更贴合"懂你"的情感调性
4）. 雷区 / 喜好改多行输入 — 单行输入不够用，改为多行文本输入，每行一条
5）. 自主模式加人物选择 — 让 AI 教练能结合具体人物资料分析
Session ID：
.3537543523208208:1082f35e3413752b7cb4e0a33d59ff0e_6a45bb3fcd38c4d8c8a5ea5b.6a460826cd38c4d8c8a5eefe.6a46082553d12dd9ac2e5337:Trae CN.T(2026/7/2 14:41:42)
使用TRAE的截图：
关键 Prompt 分享
-
生成 PRD 时的 Prompt：
根据 re.md 里的功能清单，先输出一份完整的 PRD 文档和技术架构文档，明确页面结构、路由表、数据模型、AI 函数签名，再开始写代码。
-
实现 picker 组件时的 Prompt：
“现在的下拉框太丑了，换成适合移动端的弹窗选择，自实现一个 iOS 风格底部弹窗 弹窗，自动接管所有下拉选择元素。”
-
配色迭代时的 Prompt：
“我们这个是情侣 H5，主题颜色不能用绿色，可以考虑使用淡紫色。”
踩过的坑
-
并行编辑同一文件冲突：同时对 style.css 做多次 replace_all 时，部分替换会被覆盖。解决方式是改为顺序编辑，或一次性重写整个 `:root` 代码块。
-
agent-browser 自动化测试：通过 CDP 接管已有 Chrome 实例做截图验证，避免了纯静态检查无法验证 UI 的问题。
5.报名帖链接
6. 写在最后
“懂你 AI” 不追求技术复杂度，而是瞄准一个真实存在的痛点：很多人不是不爱，而是不会爱、不会沟通。用 TRAE 从一份功能清单出发，几轮对话就把它变成了一个能在手机上打开、能真实体验的情感教练。
如果你也曾因为一句没说好的话和在乎的人冷战，希望这个小工具能帮到你。
推荐考虑把《非暴力沟通》的思路本土化之后喂给AI