【社会服务赛道】声声忆——用声音留住记忆，用AI守护认知健康
本作品由 TRAE IDE 全流程独立完成。从社区调研、需求定义、架构设计到代码实现、视觉迭代共经历 8 个独立 Session，所有 Session ID 与关键步骤截图已在「四、TRAE 实践过程」中按步骤标清。
【标签】
社会服务 社会公益（智慧助老 - AI 回忆录工具方向）
0. 先和大家打个招呼 
大家好，我是**【声声忆】项目的开发者**，一个关注银发群体产品体验的在校大一学生。
最初想做"AI 回忆录"这个方向时，最担心的就是"想得到，做不出"。但这次和 TRAE 的"配合"，让一个完全不懂代码的产品人，也能 8 步走完从"社区调研 → 选题 → 需求 → 设计 → 开发 → 打磨"的完整流程。
几个让我觉得"原来这么简单"的瞬间：
- “把调研交给它”：Step 1 我把同赛道 top 作品丢给 TRAE，让它从"技术 / 创新 / 情感 / 商业"四维度分析。它整理出 5 份作品分析报告 + 1 份调研知识库，比我一个人看 3 天还透彻。
- “不会写代码也能拆任务”：Step 6 我把详细设计文档丢给 TRAE，让它生成"子 Agent 可直接执行的总提示词文档"。11 个基础模块 + 6 项 v2.0 改进的任务清单，每个都附带"输入契约 / 产出物 / 验收标准 / 依赖关系"——子 Agent 拿到就能干活。
- “看着子 Agent 并行写代码”：Step 7 主 Agent 调度 3 个子 Agent 并行实现 P1-P5 公共层和 M1-M6 功能层，160 个单元测试通过、TypeScript 零错误编译，我只需要看进度条。
- “视觉细节靠它打磨”：Step 8 v2.0 改进时，TRAE 主动提出"角色选择背景从 #ffb300 调整为温暖米色 #f5f1eb"、“老人端卡片 2px 青绿色边框 + 柔和悬浮投影”。
最大的感受：TRAE 不是"替我写代码的工具"，而是"和我一起做产品的搭档"——它把"我脑子里的产品感"翻译成"可运行的应用"，而我能专注在"这个功能对老人有没有用"上。
1. Demo 简介
产品形态
声声忆 是一款 Web 单页应用（纯 HTML/CSS/JS 单文件，双击即可在浏览器中打开运行，无需任何环境配置或后端服务），同时也是一款 AI 代际记忆传承与认知健康守护平台。
面向谁
- 60-80岁想留下人生故事但不会写、打字困难的老人 —— 故事是老人最珍贵的财富，但很多正在随时间消失
- 30-50岁想为父母留存记忆但没时间深度陪伴的子女 —— 情感连接需要载体
- 社区卫生工作者 —— 缺乏便捷的认知障碍早期筛查工具
主要功能
功能 1：AI 引导式自由讲述（老人端）
老人按住按钮讲述一段回忆，AI 自动生成结构化摘要（时间/地点/人物/事件/情感），智能追问补充缺失维度（最多3轮），定稿后自动入"回忆库"。三层正向反馈：即时情感回应、成就卡、跨故事串联。
功能 2：AI 分析四维画像（子女端）
从老人讲述中自动提取健康/精神/性格/习惯四维标签，每个标签可点击溯源到原始对话片段（关键词高亮），可设置 AI 提醒（如"记得吃药"）在老人讲述时自然注入。
功能 3：辖区群像 + 认知告警（社区端）
老人状态点列表（绿/黄/红健康度）、共同兴趣自动匹配建议（如组建棋友会）、认知下降趋势告警。
配图：以下 4 张产品截图帮助评审一眼看懂核心功能
| 图 1 | 首页：三张角色选择卡（老人端 / 子女端 / 社区端） |
|
| 图 2 | 老人端：AI 摘要卡片 + 智能追问界面 |
|
| 图 3 | 子女端：四维分析卡（健康/精神/性格/习惯） + 标签溯源到原始对话 |
|
| 图 4 | 社区端：辖区老人状态点列表 + 兴趣匹配 + 认知告警 |
2. Demo 创作思路
灵感来源
我关注到中国 1400 万阿尔茨海默症患者这一庞大群体，他们平均确诊延迟 2-3 年。原因有三：早期症状隐蔽、传统筛查需要专业设备、子女不在身边无法深度陪伴。
但语言能力的退化（词汇丰富度下降、重复叙述增加、语句不完整）正是认知障碍的早期信号。与此同时，每个老人都有想讲却没人听的人生故事。
一边是故事在流失，一边是健康在沉默 —— 两者都缺乏一个低门槛的日常入口。
想解决的问题
| 用户 | 痛点 | 声声忆的回应 |
|---|---|---|
| 老人 | 想记录人生但不会写、打字困难 | 老人端"按住讲话"，语音自动转写，AI 引导式追问 |
| 子女 | 想关心父母但没时间深度陪伴 | 子女端 AI 自动从故事中提取四维画像，可溯源、可设提醒 |
| 社区医生 | 认知障碍早期症状隐蔽 | 社区端汇总所有老人认知趋势，自动告警 |
| 共同 | 故事在流失 + 健康在沉默 | 让老人在讲故事的过程中，无感完成认知健康早期筛查 |
为什么做这个方向
- 情感 × 健康的"双刚需"叠加：单纯做"AI 陪伴机器人"商业价值有限，单纯做"认知筛查工具"情感粘性不足。把两者合二为一，老人有动力讲述，医生有数据可用。
- "无感筛查"是医学价值的关键创新：传统筛查需要"有病才查"，而语言退化在日常对话中就能被发现。声声忆把筛查从"被动就医"变成"主动日常"，让干预走在衰退前面。
- "三端联动"是产品壁垒：单做老人端只是录音 App，单做子女端只是空壳时间线。必须三端打通，让"老人讲 → 子女看 → 社区管"形成数据闭环。
- "适老化"是体验底线：5档字号、高对比度、44px 触控区、降动效替代 —— 这些不是装饰，是老人能用得起来的入场券。
3. Demo 体验地址
单文件 HTML，双击即可在浏览器中打开使用：
声声忆.html (242.9 KB)
- 文件路径：
声声忆/声声忆.html（约 254KB 单文件应用，纯前端，无需任何依赖） - 打开方式：用 Chrome 浏览器双击
声声忆.html即可
Demo 使用方法
- 首页：展示产品简介和三张角色选择卡（老人端 / 子女端 / 社区端），点击进入对应端
- 老人端：身份确认（“您是张爷爷吗？”）→ 按住按钮讲述一段回忆（Mock ASR 自动播放"我1978年进厂，那时候才18岁……我师傅老王教我开机床……“）→ AI 摘要卡片自动提取时间/地点/人物/事件/情感 → 智能追问补充缺失维度（“您还记得第一天上班是什么心情吗？”，最多3轮）→ 定稿入库存入"我的回忆库”，弹出成就卡"第一段回忆已珍藏！"
- 子女端：选择老人（张爷爷/李奶奶）→ 四维分析卡（健康/精神/性格/习惯，2x2 网格）→ 点击标签溯源到原始对话片段（关键词高亮）→ AI 提醒区（添加提醒"记得吃药"）
- 社区端：老人状态列表（张爷爷黄色关注65分，李奶奶绿色正常78分）→ 社区群像（共同爱好：象棋）→ 兴趣匹配（建议组建棋友会）→ 认知告警列表
4. TRAE 实践过程
本项目完全通过 TRAE Work 的 AI 对话完成开发，整个流程分为 8 个独立 Session。官方要求"开发关键步骤截图不少于 3 张"，我从 8 步中精选 5 个关键步骤 详细展示（Step 1 / Step 3 / Step 6 / Step 7 / Step 8），其余 3 步概述带过。所有 8 个 Session ID 都在下方标出，方便评审完整追溯。
4.0 8 步全流程总览
关键步骤 1 — 调研社区已提交作品，由 AI 分析讨论选出选题方案
Session ID：3827876489593835:d91746cffd848289e4dd022f7727f61f_6a423ffb6db2621e89c4f262.6a423ffb6db2621e89c4f265.6a423ffb6db2621e89c4f263:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/29 17:50:51)
做了什么：浏览 TRAE 社区初赛专区已提交作品，按赛道分类整理"生活娱乐 / 学习工作 / 社会服务 / 硬件交互"的代表作品，对每个候选方向发起 AI 多角度分析（技术可行性、情感价值、商业潜力、评审契合度），最后从 5-8 个候选方案中收敛出 3-5 个进入下一轮深度评估。
关键产出：research/初始方案清单.md、research/深化方案清单.md、research/全赛道扫描摘要.md
概述：步骤 2 — 多维度评估，最终确立方案并初步制定需求文档
Session ID：3827876489593835:21066900d8bff132b9da0556beda4cd7_6a423ffb6db2621e89c4f262.6a4271cd6db2621e89c4f618.6a4271cd6db2621e89c4f616:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/29 21:23:25)
做了什么：对上一步产生的候选方案进行"技术 / 创新 / 情感 / 商业"四维度评估。组织 5-6 个 AI 子 Agent（AgentA 技术评估 / AgentB 创新情感评估 / AgentC 商业评估 / AgentD 评审模拟 / AgentE 综合权衡 / AgentF 终审报告）三轮讨论，最终从候选中确定"声声忆——AI 代际记忆传承与认知健康守护平台"为决赛方案。
关键产出：research/讨论记录/*.md（三轮讨论完整记录）、声声忆/报名帖.md（初步需求文档）
关键步骤 2 — 上社区初赛作品的 top 同赛道调研学习，提炼出优秀作品的优点，生成对应的调研文档
Session ID：3827876489593835:b8c8c8dcbfa5c1b2b9a28db06b618d9e_6a436be2b7a9e6b413ff634c.6a436be2b7a9e6b413ff634f.6a436be2b7a9e6b413ff634d:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/30 15:10:26)
做了什么：聚焦"社会服务赛道 + 智慧助老方向"，深度调研同赛道 top 作品（智读古籍 / 看见即疗愈 / 银发就医通 / 时间银行社区互助 / 老人沟通转化器等）。下载 HTML 源文件用 clone-website skill 分析，逐篇提炼：它们做对了什么（如老人沟通转化器的"具象化语言"洞察）、可借鉴点、差异化机会。
关键产出：research/优秀HTML分析/*/analysis.md（5 份作品分析）、research/社会服务_调研库.md、research/社会服务_作品详情库.md、声声忆/声声忆项目_社区调研知识库.md
概述：步骤 4 — 根据调研文档和需求文档生成设计文档
Session ID：3827876489593835:b25d78542cd2e255800f263127189714_6a4484e1dad6b887fe6efd0d.6a4484e1dad6b887fe6efd10.6a4484e1dad6b887fe6efd0e:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/1 11:09:21)
做了什么：综合 Step 2 的需求文档和 Step 3 的调研文档，在 TRAE 中与 AI 共创出"声声忆"的设计文档 —— 定义产品愿景、三端架构、核心流程、数据模型、AI 服务边界、适老化原则。
关键产出：声声忆/声声忆_prompt.md（早期 prompt 文档）、声声忆/detailed-design.md（设计文档初版）
概述：步骤 5 — 根据设计文档补充细节和需求描述，生成详细设计文档
Session ID：3827876489593835:a8ea6c87ef2d1a0e86e6a478e28e825a_6a43bdaeef21e9928a0abbc1.6a43c811ef21e9928a0abd1f.6a43c811ef21e9928a0abd1d:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/6/30 21:43:45)
做了什么：把 Step 4 的设计文档"颗粒化"——将 11 个基础模块（P1-P5 公共层 + M1-M6 功能层）的接口契约、字段、状态机、错误处理、降级策略全部定义清楚。
关键产出：声声忆/detailed-design.md、声声忆/改进详细设计.md、声声忆/tasks/P1-P5.md、声声忆/tasks/M1-M6.md
关键步骤 3 — 根据详细设计文档所划分的任务，生成最终项目的总提示词文档
Session ID：3827876489593835:1d32edda0df9831487cd2b4f2a081c3e_6a448fc4dad6b887fe6efe87.6a448fc4dad6b887fe6efe8a.6a448fc4dad6b887fe6efe88:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/1 11:55:48)
做了什么：把详细设计文档翻译成子 Agent 可直接执行的"总提示词文档"。每个子任务附带：输入契约、产出物清单、验收标准、依赖关系、测试要求。最终汇总为 声声忆_prompt.md（v1.0 基础版）
关键产出：声声忆/声声忆_prompt.md、声声忆/声声忆_改进_prompt.md、workflow-prompt.md
关键步骤 4 — 主 Agent 监督项目进度，子 Agent 开发方式，按总提示词文档要求初步完成项目 Demo
Session ID：3827876489593835:3e1468942a1387f802d996ce7b40946a_6a44963ddad6b887fe6eff0f.6a44963ddad6b887fe6eff12.6a44963ddad6b887fe6eff10:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/1 12:23:25)
做了什么：主 Agent 创建任务清单、按"同时不超过 3 个子 Agent"规则调度子 Agent 并行实现。P1-P5 公共层与 M1-M6 功能层由不同子 Agent 独立开发，主 Agent 负责接口对齐、验收门、进度跟踪。共实现 11 个模块 + 160 个单元测试通过 + TypeScript 零错误编译。Vite + Vue 3 + TypeScript 单文件构建（vite-plugin-singlefile）。
关键产出：声声忆/app/ 完整源码、声声忆/app/tests/*.spec.ts（160 个测试）、声声忆/dist/声声忆.html（单文件 249KB）、声声忆/tasks/progress.md
关键步骤 5 — 进一步打磨 Demo 细节，优化用户体验
Session ID：3827876489593835:268ca9abcbf851fc16c905e3f19045f8_6a4f5dea9a5d571d11783178.6a4f5dea9a5d571d1178317b.6a4f5dea9a5d571d11783179:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 16:38:02)
做了什么：在 v1.0 基础上进行 6 项 v2.0 改进（I0 首页融合 / I1 数据预置 / I2 老人端 4 步循环重构 / I3 子女端四维画像 + 溯源 + AI 提醒 / I4 社区端只读监控 + 群像 + 兴趣匹配 / I5 报名帖更新），并迭代视觉细节（角色选择背景从 #ffb300 调整为温暖米色 #f5f1eb、老人端卡片 2px 青绿色边框 + 柔和悬浮投影、48px 青绿色下划线标题）。新增 5 个 v2.0 改进测试，160 个测试零回归。
关键产出：声声忆/声声忆.html（v2.0 改进版，~254KB）、声声忆/tasks/I0-I5.md、声声忆/tasks/progress-改进.md
4.1 开发过程中使用的 TRAE 核心能力
- AI 对话式需求分析：从社区调研、需求评估、方案对比到细节设计，全程与 AI 协作讨论
- 多 Agent 编排：主 Agent 监督 + 子 Agent 并行实现，最多同时调度 3 个子 Agent
- 全栈代码自动生成：Vue 3 + TypeScript + Vite 单文件构建
- 模块化架构设计：11 基础模块 + 6 项改进的清晰分层
- 代码审查与视觉设计细节打磨：impeccable 设计原则驱动（对比度 ≥4.5:1、44px 触控区、prefers-reduced-motion 降级替代、焦点轮廓 ≥3px、衬线字体 + 温暖米色调）
- 实时预览与浏览器调试：单文件 HTML 双击即跑
5. 踩坑经验与开发心得
1. 适老化不是"放大字号"那么简单
最初以为字号调大就完事，真正做下来才发现：对比度必须 ≥4.5:1（WCAG AA）、最小触控区 44px、所有动画必须有 prefers-reduced-motion 降级替代、焦点轮廓必须 ≥3px 可见、衬线字体比无衬线更易读、怀旧纸张纹理比纯白背景更舒服。这些都是"做好被看见、做错被嫌弃"的细节。
2. 三端割裂 = 演示翻车
v1.0 三端是三个独立 tab，演示时切来切去像 PPT。v2.0 改造成"首页三张角色卡 + 数据来自同一故事库"，三端故事必须打通——子女端看到的 AI 标签必须有"这是从老人 X 段对话中提取的"溯源证据，否则就是空壳时间线。所有端都必须有预置 demo 数据，否则评审打开就是空状态。
3. 老人端不要"填表"，要"对话"
v1.0 老人端是 8 阶段线性流程（选时间/选地点/选人物/……），像在做问卷。v2.0 重构为"4 步循环"（讲述 → 摘要 → 追问 → 定稿），让老人像聊天一样自然。每个阶段都有正向反馈（即时情感回应、成就卡、跨故事串联）—— 老人需要被看见、被肯定。
4. AI 降级策略决定 demo 跑不跑得起来
真实 LLM API 评审环境无法保证可用，所以设计了三层降级：真实 API → 浏览器内置 API（Web Speech）→ Mock 演示数据。这样评审现场即使断网，应用也能展示核心流程。
5. 单文件 HTML 是初赛最优交付形态
Vite + vite-plugin-singlefile 把整个 Vue 3 应用打包成 254KB 的单文件 HTML，双击即跑、零依赖、零配置，特别适合"上传到社区 + 评审直接体验"的初赛场景。
作品名称：声声忆
赛道：社会服务（附加：社会公益 - 智慧助老）
创建者：TRAE AI 创造力大赛参赛者
创建时间：2026 年 6 月
项目类型：Web 单页应用（HTML/CSS/JS 单文件）
核心技术栈：Vue 3 + TypeScript + Vite + vite-plugin-singlefile + IndexedDB + Web Speech API
致评审：声声忆不是"再做一遍 AI 陪伴机器人"，也不是"再做一遍认知筛查工具"。它的真正创新在于把"情感需求"与"健康刚需"用"AI 引导式自由讲述"绑在一起 —— 老人在讲故事的过程中，无感完成认知健康早期筛查；子女在听故事的过程中，自然读到父母没说出口的牵挂；社区在汇总数据的过程中，提前 2-3 年发现风险信号。请打开 Demo 体验一下，让张爷爷讲讲他的 1978 年。