【社会服务】灯塔行动v2.0 · 银发AI带娃体验（7月2日优化更新版）
标签： 社会服务 社会公益
一、Demo 简介
是什么： 灯塔行动v2.0是一个面向社区退休老人的单页AI带娃体验网站。老人无需下载APP，打开网页即可体验9大AI工具，从"怕AI"到"会用AI"，逐步成为孙辈的AI带娃助手。
面向谁： 55-75岁社区退休老人——会用微信、有带娃意愿、面对AI有学习渴望但缺乏途径。
主要功能：
-
AI创意工具（基础篇）：AI对话写诗、故事大王、神笔马良——老人输入文字，AI生成诗歌/童话/插画，降低AI使用门槛。
-
视频创作工具（进阶篇）：分镜导演、配音演员、视频合成——老人像导演一样规划画面、给故事配音、合成家庭微电影。
-
生活实用工具（实战篇）：作业帮手、旅行策划、毕业典礼——AI辅导孙子功课、策划家庭旅行、颁发AI带娃达人证书。
建议配截图： Demo首页截图、分镜导演功能截图、毕业典礼证书截图
二、Demo 创作思路
灵感来源： 沛哥在社区活动中发现，很多退休老人面对AI时代的焦虑和无助——"我不会用这些新东西，怎么帮孙子？"与此同时，隔代教育需求强烈，老人渴望参与孙辈成长，却苦于没有合适的工具和学习途径。
想解决的问题：
- 老人对AI的恐惧心理（“我不会打字/我不会英文/我怕点错”）
- 老人缺乏AI学习途径（网上教程太复杂、不适合老年人）
- 隔代教育中老人的参与度低（只能接送、做饭，无法辅导功课/陪伴成长）
为什么做这个方向：
- 中国60岁以上人口已超2.8亿，银发经济是真实刚需
- 现有AI产品都面向年轻人，适老化设计严重缺失
- "社会服务+社会公益"赛道，正是解决这类公共问题的最佳切入点
- 沛哥本人就是社区志愿者，深知老人真实痛点
设计取舍：
- 大字号（20px+）、暖色调（橙黄渐变）、大按钮——适老化设计
- 单HTML文件、无需安装——降低技术门槛
- 9天9课循序渐进——不是一次性灌输，而是渐进式学习
- 引导式辅导（作业帮手不给答案给思路）——真正帮助老人学会方法
三、Demo 体验地址
附件： 灯塔行动v2_0_Demo_优化版.zip
下载后解压，双击 index.html 即可在浏览器中体验全部功能。
使用提示：
- AI对话、故事生成、作业辅导、分镜导演4个模块已接入DeepSeek真实API，需要联网使用
- 配音演员模块使用浏览器内置语音合成（TTS），无需额外安装
- 其他功能可离线使用
- 建议用Chrome/Edge浏览器打开，体验最佳
四、TRAE 实践过程
开发时间线
整个Demo由小锤（TRAE AI助手）在沛哥的指导下独立完成，历时3天（6月19日-6月21日），分3个Phase推进：
| 阶段 | 日期 | 开发内容 | Session ID |
|---|---|---|---|
| Phase 1 | 6/19 15:00 | 创建基础框架（首页+课程+AI对话+故事+画画） | 1945509133030572:fd3a08fbc58e1db901c5434589adaa13... |
| Phase 1.5 | 6/19 17:23 | 生成AI插画（第五课"配音演员"3张插画） | 1945509133030572:d5339a20b72bf119c1e175441b13b46d... |
| Phase 2 | 6/20 22:25 | 添加进阶模块（分镜导演+配音演员+视频合成） | 1945509133030572:5555b92622381c4859ebd5675fd6016d... |
| Phase 3 | 6/21 00:33 | 添加实战模块（作业帮手+旅行策划+毕业典礼） | 1945509133030572:8657dcbc8247838d7bfff8b95b967ba3... |
关键技术实现
1. 单HTML架构
- 使用原生HTML/CSS/JavaScript，不依赖任何框架
- 11个功能模块通过
display切换实现单页应用体验 - 文件仅1个
index.html，双击即用，老人零门槛
2. 适老化UI设计
- 字体大小20px+（标题36px+），远超常规网页标准
- 按钮圆角16px、padding 20px+，适合老人点击
- 暖色调橙黄渐变（#FF8C42 → #FFB347），温馨不刺眼
- 卡片式布局+阴影，层次清晰
3. 真实AI能力接入（7月2日优化更新）
- AI对话写诗：接入DeepSeek API，输入名字和主题，AI实时生成个性化诗歌
- 故事大王：接入DeepSeek API，根据角色/场景/冲突生成400字童话
- 作业辅导：接入DeepSeek API，引导式解题思路，不直接给答案
- 分镜导演：接入DeepSeek API，根据故事梗概生成专业分镜表（AI失败时自动降级为智能模板）
- 配音演员：使用浏览器内置SpeechSynthesis API，支持4种声音角色（慈祥奶奶/和蔼爷爷/可爱童声/趣味机器人），语速/音调可调
- 所有AI调用均有加载动画和错误降级处理，确保老人体验流畅
4. 学习进度管理
- 使用localStorage保存用户学习进度（已完成课程、用户名）
- 首页显示"学习进度条"，实时反馈成就感
- 毕业典礼页面自动同步打卡清单
5. 响应式布局
- 桌面端：网格布局，多列展示
- 移动端：单列堆叠，触控友好
- 导航栏自动折叠，适配小屏幕
开发关键步骤截图
（TRAE中调用GenerateImage生成"配音演员"插画的对话截图）
（TRAE中编写分镜导演/配音演员/视频合成模块的代码编辑截图）
（浏览器中打开index.html的首页完整截图，含进度条）
（输入"奶奶的广场舞奇遇记"后生成分镜表的截图）
五、7月2日优化更新日志
基于团队小伙伴小赫的优化方案，对Demo进行了全面升级：
| # | 优化项 | 说明 |
|---|---|---|
| 1 | 接入DeepSeek真实API | AI对话、故事、作业、分镜4个模块从"前端模拟"升级为"真实AI调用" |
| 2 | 嵌入3张AI插画 | 配音演员页面展示3张TRAE生成的AI插画（封面/讲故事/麦克风） |
| 3 | 动态分镜表 | 分镜内容根据用户输入的故事梗概实时生成，不再使用固定模板 |
| 4 | localStorage进度保存 | 学习进度自动保存，刷新页面不丢失 |
| 5 | 课程进度条 | 首页显示"X/9课完成"进度条，增强成就感 |
| 6 | 浏览器语音合成TTS | 配音试听使用真实语音朗读，支持4种声音角色 |
| 7 | 移动端汉堡菜单 | 小屏幕下导航栏折叠为☰汉堡菜单，适配手机体验 |
| 8 | API错误降级 | 网络异常时自动使用本地模板，确保功能不挂 |
六、完整 Session ID 列表
Phase 1（基础框架）：
1945509133030572:fd3a08fbc58e1db901c5434589adaa13_6a313ba2a4d133ba61fb70fc.6a34e9102cc4ed51080f97e2.6a34e9102cc4ed51080f97e0:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/19 15:00:32)
AI插画生成（第五课）：
1945509133030572:d5339a20b72bf119c1e175441b13b46d_6a313ba2a4d133ba61fb70fc.6a350a7b2cc4ed51080f982a.6a350a7b2cc4ed51080f9828:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/19 17:23:07)
Phase 2（分镜/配音/视频）：
1945509133030572:5555b92622381c4859ebd5675fd6016d_6a313ba2a4d133ba61fb70fc.6a36a2bd9d986c1022aff8bf.6a36a2bd9d986c1022aff8bd:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/20 22:25:01)
Phase 3（作业/旅行/毕业）：
1945509133030572:8657dcbc8247838d7bfff8b95b967ba3_6a313ba2a4d133ba61fb70fc.6a36c0c99d986c1022affa2c.6a36c0c99d986c1022affa2a:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/21 00:33:13)
七、报名帖链接
沛哥的报名帖： 退休后用AI带娃
八、开发心得
-
真实痛点驱动： 不是自己想象需求，而是从社区老人真实反馈出发——“我不会用AI”“我想帮孙子但不知道怎么做”。
-
适老化不是口号： 真正的大字号（不是16px叫大字号）、真正的高对比度、真正的大点击区域。测试时让老人亲自点击，发现很多自以为够大的按钮其实不够大。
-
渐进式学习设计： 9天9课不是随机排列，而是有递进关系——从"AI是个啥"到"毕业典礼"，老人每完成一课都有成就感。
-
TRAE的价值： 小锤作为AI助手，能在短时间内完成大量代码编写和迭代，沛哥只需关注产品逻辑和用户体验，大大提高了开发效率。
-
从模拟到真实： 初赛阶段先把框架搭起来（前端模拟），复赛前接入真实API（DeepSeek），让作品从"演示"变成"可用"。这种渐进式开发策略非常适合AI产品创新。
灯塔行动，让爷爷奶奶成为AI带娃高手！ 
灯塔行动v2_0_Demo_优化版.zip (719.8 KB)