1、Demo 简介
| 一个专为老年人设计的移动端Web App（H5应用），可直接在手机浏览器打开使用，后续可打包为微信小程序或原生App。 |
|---|
-
面向谁：
60岁以上需要长期服药的老年人（核心用户）
不在父母身边、希望远程关注老人用药情况的子女（关怀用户） -
核心功能：
| 功能 | 说明 | ||
|---|---|---|---|
 AI拍照识药 |
拍药盒照片，AI识别药品名称，语音播报用法用量、禁忌、注意事项，大字展示 | ||
| undefined | ---- | ---- | ---- |
 智能用药提醒 |
按早中晚/饭前饭后设置提醒，弹窗+语音双重提示，"我吃了"一键确认 | ||
| undefined | ---- | ---- | ---- |
 紧急求助 |
一键拨打120/家人电话，红色悬浮按钮始终可见，SOS脉冲动画醒目 | ||
| undefined | ---- | ---- | ---- |
 药物冲突检测 |
自动检查药箱内药品是否存在配伍禁忌，用大白话告诉老人"能不能一起吃" | ||
| undefined | ---- | ---- | ---- |
 家庭共享 |
子女端实时查看父母服药情况、药品余量，收到漏服/低库存提醒 | ||
| undefined | ---- | ---- | ---- |
 服药记录 |
7天柱状图展示依从性，连续打卡激励，生成用药清单可给医生看 | ||
| undefined | ---- | ---- | ---- |
2、Demo 创作思路
灵感来源
我奶奶今年78岁，每天要吃降压药、阿司匹林、维生素C三种药。虽然我把每种药的用法写在小纸条上贴在药盒上，但她还是经常忘记吃、或者记不清吃没吃过。有一次甚至因为同时吃了两种有冲突的感冒药胃出血住院。
我在想：市面上的用药App都是给年轻人设计的，字小、功能复杂、术语多——老人根本用不了。能不能做一个字大、声大、操作简单，老人真的会用的吃药助手？
-
想解决的问题
老人看不清：市面上App字号普遍14px，老人老花眼看不清。本App基础字号18px，按钮最小48px，高对比度配色。
老人不会操作：功能入口藏得深、交互复杂。本App首页只有4个大卡片按钮，点进去一步到位，所有按钮都有文字+图标双重标识。
看不懂专业术语：“依从率”“血药浓度”“禁忌症"这些词老人听不懂。全部改成大白话：“按时吃药”“一起吃可能头晕”“对这个药过敏的人不能吃”。
子女不放心：父母有没有按时吃药？药快吃完了吗？有没有漏服？子女在外地无从知晓。家庭共享功能让子女实时看到服药状态。
紧急情况求助难：老人突发不适时找不到电话本。红色SOS按钮始终悬浮在右下角，一键拨打120或家人。
药吃重复/吃错：到点弹窗+语音播报"该吃降压药了”，吃完按"我吃了"打勾，避免重复服药。 -
为什么做这个方向
中国60岁以上人口超过2.8亿，其中超过75%的老人至少有一种慢性病需要长期服药。忘服、错服、重复服药是老年人用药安全的头号问题。市面上的医疗App大多面向年轻人或医生，真正站在老人视角、适老化设计的产品几乎空白。在功能取舍上，我坚持"老人能用比功能多更重要"：砍掉了社交、积分商城、健康资讯等非核心功能保留最刚需的：提醒、识药、紧急求助、家人共享增加了同类产品没有的：饭前/饭后/空腹选择、药品余量低库存警告、语音全程播报、120紧急按钮置顶
-
Demo 体验地址
智慧助老药品管理_Demo.zip (150.8 KB)
-
TRAE 实践过程
整个Demo从零到完成，全程使用TRAE开发，没有手写一行代码，所有代码、UI设计、交互逻辑、bug修复都通过与TRAE对话完成。
第一轮：需求搭建v1.0
任务：创建基础版智慧助老药品管理App，包含识药、提醒、冲突检测、家庭共享四个核心功能
结果：生成了可运行的单文件HTML Demo，包含5个页面、底部导航、基础交互
第二轮：适老化增强v2.0
任务：作为老人视角，字不够大、按钮不够明显、缺少紧急求助
新增：SOS紧急呼叫按钮、药品余量管理、低库存提醒、7天依从性图表、用药清单生成（给医生看）、真实时钟
第三轮：老人视角问题修复v3.0
任务：完全代入65岁眼神不好的老人，逐点挑问题
修复：“依从率"改为"按时吃药”、药名加括号标俗称（降压药）、SOS弹窗120置顶、删除药品二次确认、底部导航5改4防误触、识别过程分步进度提示、增加饭前/饭后/空腹选择、首次引导提示、冲突检测改大白话、关键操作都加语音反馈
第四轮：视觉美化v4.0
任务：现在的太丑了，补充图标，优化视觉
改进：所有emoji替换为统一风格SVG线性图标、渐变背景、多层柔和阴影、按钮按压动效、扫描框四角标记+扫描线动画、SOS脉冲呼吸动画、导航栏顶部指示条、弹窗圆形图标背景、时间线连接线、手机真机外框效果
关键任务对话 Session ID
初始搭建对话Session ID：【1101038055855115:ff6fd4e6c167504c7895c2644a2aa214_6a4c681b9dedf7ff847154ac.6a4f25bfaf90b7338c4b7294.6a4f25bfc98fd08d5831fe75:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:38:23)】
功能增强迭代Session ID：【1101038055855115:5a67119297b50472c8b40b557d28ee56_6a4c681b9dedf7ff847154ac.6a4f2768af90b7338c4b72e0.6a4f2768f8616108f83988e4:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:45:29)】
问题修复迭代Session ID：【1101038055855115:d0b97800ae88d7e11da67b6ad76531b8_6a4c681b9dedf7ff847154ac.6a4f2903af90b7338c4b7313.6a4f2902ad69f84b4495a2ff:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:52:19)】
视觉美化迭代Session ID：【1101038055855115:7bff0ae1d953b7adf09b9cdccab8da26_6a4c681b9dedf7ff847154ac.6a4f2af9af90b7338c4b7349.6a4f2af9c2d1533c1863e34a:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 13:00:41)】
开发心得
TRAE非常适合快速原型验证：从想法到可交互Demo只用了几轮对话，比自己写代码快10倍以上。
迭代式开发效果最好：不要一次提所有需求，先出基础版，看到实际效果后再逐轮提修改意见，TRAE改得又快又准。
角色扮演反馈很有效：让AI"作为老人用户挑问题"比自己想bug高效得多，能发现很多设计盲区。
单文件HTML是Demo神器：所有代码+样式+脚本在一个HTML文件里，双击就能跑，不用部署不用装环境，比赛Demo首选格式。
大胆提审美要求：初版UI比较朴素，直接说"太丑了，美化一下，换精致图标，加渐变阴影动画"，TRAE能给出非常专业的视觉升级。
报名帖链接