社会服务赛道 | 健康守护 — 适老化智能健康管理助手

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

1. Demo 简介

是什么： 一个纯前端的适老化健康管理网站，单文件 HTML 架构，浏览器打开即用，无需安装。

面向谁： 60 岁以上的慢性病老人，以及远程照顾他们的子女。我自己亲人每次看病回来都要我帮忙看医嘱，各种用药全靠子女在微信里反复提醒——这件事本身就是一个痛点。

主要功能：

  • AI 护士「小安」：接入豆包/DeepSeek/通义千问 API（多平台自动降级），老人用大白话问健康问题，小安用语音+文字回复。没配 API Key 时自动切换到本地知识库兜底。

AI护士聊天界面

  • SVG 人体图：点击身体不同部位，直接看到该器官的健康状态（红/黄/绿三色预警），老人不用看体检报告就能知道"哪里有问题"。

人体图界面

  • 今日药盒 + 子女监护：老人端是放大版药盒，点一下就算"吃过了"；切换到子女模式，变成监控看板，能看服药进度、行为日志、一键导出 CSV 给医生。

子女模式监控看板

2. Demo 创作思路

灵感来源：

工作在外，爸妈看病吃药很多时候都要电话来询问我的意思，很多时候自己也很担心他们的身体健康。

我就想：能不能做一个工具，让老人像看天气一样简单地管理健康，让子女像看运动手环数据一样远程了解父母的状态？

想解决的问题：

  1. 老人看不懂体检报告，不知道自己"到底哪里有问题"

  2. 每天吃药靠脑子记，漏服了没人知道

  3. 子女远程关心但缺乏数据，只会问"药吃了没"（问了也未必准）

  4. 去医院时说不清病史，医生开药靠猜

为什么做这个方向：

中国 60 岁以上人口超过 2.8 亿，其中超过 1.9 亿患慢性病。这不是一个小众需求。市面上有吃药提醒 App，但要么太复杂老人不会用，要么是纯工具没有 AI 对话能力。我判断的关键点是：适老化不是"字体放大"，而是"交互方式从简"——老人要的是语音优先、一屏一件事、少操作多反馈。所以我把整个产品做成了"对话优先"的形态，AI 护士是核心入口，而不是附属功能。

3. Demo 体验地址

本项目为单文件 HTML 应用，已打包为 Zip 文件上传到社区，下载解压后双击 index.html 即可在浏览器中体验全部功能，无需安装任何环境。

index.html (422.1 KB)

健康守护-HTML.zip (81.4 KB)

:light_bulb: 体验 AI 对话功能：打开后在设置面板中可填入豆包/DeepSeek/通义千问的免费 API Key；不填也能体验本地知识库兜底对话。

4. TRAE 实践过程

整个 Demo 完全使用 TRAE Work 开发，从最初的想法到最终参赛版本，经历了多次 AI 对话迭代。以下是关键开发步骤：

步骤一：从零搭建核心架构

从报名时候的想法到初赛做demo，我决定将作品定位为“长辈健康管理”+“子女监护”。我在 TRAE 中描述需求，TRAE 帮我生成了单文件 HTML 架构：内联 CSS + 内联 JS，localStorage 持久化数据，内置王大爷的演示数据（5 种药、8 个器官健康状态、完整病史时间线）。

这一步的关键对话让 TRAE 理解了"适老化"的核心约束——字体最小 16px、按钮最小 56px 高、语音播报优先于文字提示、颜色对比度要够强。

关键任务对话 Session ID： 6a54e153765b7f67a93137e9

image
image735×1182 76.2 KB

2627163345156716:5c5c4b69d0e75be72461a3071f0cea4c_6a54e153765b7f67a93137e9.6a573439765b7f67a9313c59.6a573439765b7f67a9313c57:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 15:18:17)

步骤二：接入免费 AI 大模型，实现真·对话

护士小安一开始只会关键词匹配回复，体验很差。我让 TRAE 帮我接入了三个免费 AI 平台的 API（豆包 → DeepSeek → 通义千问），实现自动降级策略：先调豆包，失败了切 DeepSeek，再失败切通义千问，全失败就用本地知识库兜底。还加了 5 秒超时控制和 AbortController。

TRAE 在这个过程中帮我处理了跨域 CORS 问题、API Key 本地存储、以及"首次打开聊天时弹出 API 配置引导"这个细节。

关键任务对话 Session ID： 6a54e153765b7f67a93137e9

image
image708×659 60.2 KB

2627163345156716:14677713842dcc386c9d58c64b8dad65_6a54e153765b7f67a93137e9.6a5781b5f4ba54e0be3adb8e.6a5781b5f4ba54e0be3adb8c:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 20:48:53)

步骤三：SVG 人体可视化 + 修复一系列 Bug

基础功能搭建完毕后，我觉得人体可视化对老人来讲还是个不错的功能，决定再把这个功能加上。我先让 TRAE 用 SVG 画了一个人体轮廓，8 个器官用圆形标注，红黄绿三色显示健康状态，点击查看详情。

但上线后遇到一堆问题：

  • 页面加载卡在 45% 不动 → TRAE 定位到 medCheckStatus 变量名拼写错误，应为 medChecked

  • 三个页面点击后空白 → TRAE 发现 navigateTo 函数缺少对应页面的渲染调用

  • 人体图点击自动跳到病例管理 → pageMap 索引映射错位，多了个 'meds':1 条目

  • CSS !important 覆盖了 .active 类 → 页面切换失效

每发现一个 Bug，我就截一段报错贴给 TRAE，它帮我分析原因、定位代码、给出修复方案。这种"描述问题 → AI 定位 → 修复"的循环效率极高。

关键任务对话 Session ID： 6a54e153765b7f67a93137e9

image
image696×981 94.9 KB

2627163345156716:82fe7658c2aec1f1eba6409917ee8360_6a54e153765b7f67a93137e9.6a5786b3f4ba54e0be3adc26.6a5786b3f4ba54e0be3adc24:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 21:10:11)

步骤四：参赛优化 — 启动页、首页重构、体验打磨

距离初赛截止还有几小时，我让 TRAE 从参赛评审角度做了打分和优化建议。然后一口气完成了：

  • 启动页故事线：用"王大爷的一天"开场，评委打开就知道这个产品是给谁用的

  • 首页"一屏三亮点"：健康概览 + 今日药盒 + AI 护士入口，信息密度高但不乱

  • AI 护士打字动画：三点跳动的 typing indicator，回复完带快捷建议链接（"查看血压趋势"→ 直接跳健康档案）

  • 全面防御性编程：renderAll 每个渲染函数包 try-catch，DOM 操作全加 null 检查

  • 数据导出：CSV 真实下载（服药记录/周报/月报）+ PDF 打印

关键任务对话 Session ID： 6a54e153765b7f67a93137e9

image
image690×585 59.6 KB

2627163345156716:1fbe62bcd00fdbb175159817cfe2e7d9_6a54e153765b7f67a93137e9.6a579034f4ba54e0be3add85.6a579034f4ba54e0be3add83:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 21:50:44)

5. 开发心得

TRAE 改变了我做产品的方式。

以前做 Demo，我要花大量时间在"写代码"这件事上——查 API 文档、调样式、写正则。用 TRAE 之后，我把 80% 的精力放在"想清楚要什么"和"描述清楚给 AI"，20% 的时间审查代码和调 Bug。

几个真实感受：

  1. Bug 定位是 TRAE 最强的能力之一。 我不需要看堆栈报错，直接把"页面卡在 45%"这种描述贴给它，它能在几千行代码里精确定位到 medCheckStatus 这个拼写错误。

  2. "约束先行"很重要。 我在对话中反复强调"老人看不懂医学术语"、“按钮要大”、“语音优先”，TRAE 就会在后续每次修改中遵守这些约束，不会跑偏。

  3. 单文件架构是 Demo 的最优解。 没有构建步骤、没有依赖安装、没有跨域问题，评委打开 HTML 就能体验。TRAE 很好地管理了这个 9000+ 行的单文件，虽然看起来不可维护，但对于比赛 Demo 来说体验是第一位的。

最后想说：这个 Demo 不完美，AI 对话需要配 API Key 才能体验完整效果，移动端适配也还有优化空间。但它解决的是一个真实存在的痛点——老人不用看复杂的报告/医嘱，也能知道自己什么时候吃什么药，子女也能安心放心。