一句话亮点
让爸妈从"被动听反诈"变成"主动练防骗"——AI模拟真实诈骗场景，陪老人在安全环境中练习识别骗局，练完还能看到哪里容易踩坑！
在线体验
小提示：建议在手机浏览器或电脑端以手机模式（F12切换）体验，效果更佳。
1. Demo简介
产品形态
微信小程序风格的单页应用，专为老人设计，操作简单直观，打开即可使用。
核心用户
| 用户画像 | 场景描述 |
|---|---|
| 易受骗老人 | 容易被假客服、保健品、冒充亲友等骗局诱导 |
| 子女关怀父母 | 想帮父母提高防骗意识但不知如何下手 |
| 社区工作者 | 需要简单易用的防诈训练工具推广给老人 |
核心功能
| 功能模块 | 核心价值 | 一句话描述 |
|---|---|---|
| 情景模拟训练 | 实战练习 | AI扮演骗子，陪老人练习识别危险信号 |
| 双层复盘系统 | 深度学习 | 成绩单+参考答案，指出每轮决策的问题 |
| 弱点分析报告 | 个性化建议 | 自动生成"最容易踩坑的场景"和强化建议 |
| 语音播报 | 适老化体验 | 关键提示语、风险警告自动朗读 |
2. 30秒快速体验路线
-
选场景 → 点击首页"开始训练"，选择诈骗场景（推荐先试"假冒客服诈骗"）
-
选模式 → 新手模式/进阶模式任选
-
开始对话 → 阅读骗子的话，选择快捷回复回应
-
看风险 → 注意顶部风险条变化，红色=高风险
-
等复盘 → 对话结束后查看成绩单和参考答案
-
查记录 → 点击"学习记录"，查看弱点分析报告
3. Demo创作思路
灵感来源
去年过年回家，我妈拿着手机问我："这个’客服’说我的快递丢了，要赔我双倍钱，是真的吗？"那一刻我意识到，光靠口头提醒根本不够——老人需要的是实战练习。
市面上的反诈宣传大多是被动的，老人看过就忘。我想做一个让老人主动参与的训练工具，在安全环境中体验诈骗，才能真正记住危险信号。
真实痛点
| 痛点 | 情绪 | 解决方案 |
|---|---|---|
| 看过反诈宣传还是会被骗 | 无奈、自责 | 实战模拟训练，边练边学 |
| 骗子话术太逼真，分不清 | 恐慌、犹豫 | AI模拟真实场景，提前练习 |
| 不知道自己哪里容易踩坑 | 迷茫 | 弱点分析报告，针对性强化 |
| 子女反复提醒引发抵触 | 不耐烦 | 游戏化训练，主动学习 |
差异化亮点（角色反转理念）
基于"反转课堂"教育理念的创新——让老人扮演骗子，AI扮演受害者，从主动角度理解骗术逻辑。当老人从骗子视角思考时，对骗术的理解会更深刻。这是所有竞品都没有的独家创新点。
4. TRAE实践过程
开发流程
Step 1：需求分析与竞品调研
-
使用WebSearch搜索GitHub上适老化UI配色方案
-
使用product-manager技能进行产品定位和功能规划
-
输出100个老人防诈骗痛点场景需求文档
Step 2：核心功能开发
-
使用TRAE-generate-mini-app生成小程序框架
-
实现7个诈骗场景的对话树（假冒客服、保健品、冒充亲友、公检法、验证码、屏幕共享、5步止损）
-
开发双层复盘系统（成绩单+参考答案）
Step 3：适老化优化
-
使用ux-expert技能评估界面设计
-
采用暖色调高对比度配色（暖橙红#e85d04为主色）
-
开发语音播报功能，支持关键提示语朗读
Step 4：测试与交付
-
使用TRAE-code-review审查代码质量
-
使用TRAE-debugger调试运行时问题
-
压缩打包，准备提交
TRAE技术能力运用
| 能力 | 应用场景 |
|---|---|
| product-manager | 产品定位、功能规划、优先级排序 |
| ux-expert | 适老化界面设计、配色方案评估 |
| TRAE-code-review | 代码质量审查、最佳实践反馈 |
| TRAE-debugger | 运行时调试、问题诊断 |
| TodoWrite | 任务规划、进度跟踪 |
| WebSearch | 竞品调研、UI配色方案搜索 |
关键步骤截图
- 截图1：首页界面（暖色调适老化设计）
- 截图2：情景模拟对话界面（带风险进度条）
- 截图3：训练成绩单复盘界面
关键任务Session ID
| Session ID | 主要内容 |
|---|---|
6a38fa6cf47d3d66547fadc8 |
需求分析、竞品调研、早期开发 |
6a4f063b660791d1f272bf1e |
核心功能开发、UI配色优化 |
6a5639f7a25eaa16a08a3143 |
语音播报功能开发、报名帖撰写 |
5. 开发踩坑与心得
踩坑点
坑1：冷色调配色不适合老人
-
问题：最初使用蓝色系，显得冰冷
-
解决方案：改为暖橙红色系，更亲和
坑2：对话树逻辑复杂
-
问题：7个场景的对话节点互相引用，容易出错
-
解决方案：使用JSON数据结构管理场景，每个节点独立定义
坑3：语音播报兼容性
-
问题：部分浏览器不支持Web Speech API
-
解决方案：添加浏览器检测，不支持时给出友好提示
心得体会
-
适老化设计要从细节入手：大字体、高对比度、暖色调，这些小细节对老人体验影响很大
-
模拟真实场景比讲大道理更有效：老人在模拟对话中踩过的坑，比看过的宣传印象更深
-
复盘系统很重要：训练结束后不仅要给分数，还要告诉用户哪里错了、为什么错
-
迭代开发很必要：从简单场景开始，逐步完善功能，比一开始追求完美更高效