【More than Coding】两小时用 AI 做出原型，我又花了3天把它打磨成了面向抑郁症康复期患者能救命的工具

skygreen2001 · 2026 年5 月 3 日 12:22

① 摘要

面向抑郁症康复期患者，解决出院后复发预防支持断裂的问题——这个群体复发率高达50%-85%，却几乎没有专业工具帮他们平稳度过康复期。我用 TRAE SOLO（More than Coding）两小时做出可交互原型，再用3天打磨成完整工具，目前已有用户开始试用，计划持续迭代成这个领域领先的专业工具。

② 真实场景与需求

目标人群：抑郁症康复期患者，尤其是刚出院、进入巩固期和维持期的群体。

痛点是什么？ 我调研时发现一个让人揪心的现实：一个患者出院时，医生可能会说"记得按时吃药，有情况随时复诊"，然后就没了。但抑郁症复发率高达50%-85%，首次复发后再复发概率超70%，三次及以上发作后达90%。

最要命的是**“断崖式"支持断裂**——医院里天天有医生护士盯着，出院后突然就只剩自己了。50%患者存在服药依从性问题，不是不想吃，是忘了、怕副作用、觉得"我好了不用吃了”。

还有一个细节：复发通常不是突然的，会提前1-2周甚至更早出现信号——睡眠变化、情绪钝化、动力下降……但几乎所有患者都不懂识别这些早期信号。

现有做法为什么不够？ 市面上那些心理健康APP，我去看了，基本都是"心理咨询匹配+内容科普"的老套路。没有一个真正聚焦复发预防这个关键环节，更没有基于循证医学（比如CBT认知行为疗法、WRAP个人康复计划）的专业工具。

③ 作品介绍

「申归途」——抑郁症全程复发预防服务工具。

我把它做成了一个移动端Web应用（React + Vite），不需要下载，打开就能用。核心功能有7个模块：

模块	干什么用
预警仪表盘	基于六维自评（睡眠/情绪/躯体/动力/认知/社交）给出综合评分，四级风险分级，7天趋势图
每日签到	30秒快速自评，6个维度各5级评分，数据都存在本地
用药管理	吃药打卡、月度依从率统计、正向反馈激励
服务中心	上海本地资源导航——10家医院、6条热线、4个社区中心、5项医保政策
危机干预	一键拨打962525/400-161-9995，内置4-7-8呼吸放松法
CBT课程	认知行为疗法自助课，5步+4步两门课程，带进度追踪
WRAP计划	个人康复行动计划，5大模块手风琴编辑器，本地持久化

设计上走温暖治愈系风格，主色调用#4A90D9（治愈蓝），强调色#E8985E（温暖橙），不搞那些冷冰冰的医疗风。

④ 用 SOLO 实现的过程

这部分可能是最值得分享的——我是怎么用More than Coding在两小时内从0到1把原型跑出来的。

第一步：任务拆解（花了20分钟想清楚）

我没有一上来就写代码，而是先跟TRAE SOLO聊清楚了这件事该怎么做。我的核心思路是：

先搞定需求分析——让AI帮我梳理抑郁症患者的真实痛点，输出需求文档
再做UI原型——用HTML+CSS写出可交互的高保真原型，边做边改
最后才是技术实现——选技术栈、搭架构、写代码

第二步：用SOLO的核心能力（两小时原型实战）

能力一：需求分析 Agent

我给SOLO的Prompt大概是这样：

“我需要做一个抑郁症复发预防工具，帮我分析：1）这个群体的核心痛点是什么？2）现有解决方案的缺口在哪？3）我的工具应该包含哪些核心模块？要基于循证医学，不要拍脑袋。”

SOLO给了我一份很扎实的分析报告，包括六维预警信号框架、四阶段患者旅程地图、六大核心模块设计。这部分直接成了我后续开发的设计文档。

能力二：UI原型生成

我让SOLO帮我生成9个HTML交互原型页面，从全局设计系统到各个功能页面，一轮一轮确认。比如预警仪表盘那个页面，我要求它用CSS Modules风格，移动端优先，max-width 480px。

关键Prompt：

“生成一个每日签到的HTML页面，包含6个维度的5级评分控件，支持备注输入，底部有提交按钮，用localStorage存数据。风格要温暖治愈，不要医疗感的冷色调。”

能力三：技术架构规划

SOLO帮我选了React 18 + Vite 5的技术栈，原因很实在：React生态成熟、Vite构建快、LocalStorage足够应付无后端场景、CSS Modules隔离样式不用折腾。

踩过的坑

HashRouter vs BrowserRouter
一开始用了BrowserRouter，本地打开index.html直接404。SOLO提醒我：静态文件协议用HashRouter，改完就好了。
LocalStorage数据结构的设计
签到数据一开始存成数组，结果查某天数据要遍历。后来改成以日期为key的对象，查询效率立马提升。
风险算法的权重调优
六维评分转综合风险等级，一开始是简单平均，后来根据实际场景调整了权重——睡眠变化权重最高（因为是最早期信号），社交退缩权重相对低一些。

三天打磨做了什么

原型跑通后，我又花了3天时间：

完善交互细节：Toast提示、手风琴动画、风险仪表盘的颜色过渡
补充静态数据：上海10家医院、6条热线、4个社区中心、5项医保政策
增加CBT课程：两门结构化自助课程，带进度追踪
WRAP计划编辑器：5大模块的手风琴式编辑器，支持条目增删改

⑤ 成果展示

项目地址1：Gitee:申归途
项目地址2：Github:申归途

技术栈：React 18 + React Router v6 + Vite 5 + CSS Modules + LocalStorage

项目结构：

shen-gui-tu/
├── src/
│   ├── pages/          # 8个页面组件
│   ├── components/     # 共享组件（Layout/BottomNav/RiskGauge等）
│   ├── hooks/          # 自定义Hooks（useCheckIn/useMedication等）
│   ├── data/           # 上海本地静态数据
│   └── utils/          # 工具函数（风险计算/日期格式化）
├── dist/               # 生产构建输出
└── index.html

在线预览：本地启动方式