🧁 步步安心 | 烘焙岗位零门槛操作助手
① 摘要
面向心智障碍青年烘焙就业场景，将复杂岗位任务梳理为8个模块化技能单元，每个单元支持图文+语音分步指引，核心功能离线可用。学员像查字典一样按需查阅、即查即做，降低多步骤任务的记忆负担与执行焦虑。
② 真实场景与需求
痛点场景
小李（化名）在烘焙店实习时，面对"称量面粉→过筛→搅拌→装盘→烘烤"这样的连续指令，容易遗漏步骤或顺序错乱。传统培训需要烘焙师3个月一对一陪护才能独立上岗，人力成本高、难以复制。
现有做法的不足
| 方式 | 问题 |
|---|---|
| 口头指导 | 信息一次性传递，容易遗忘 |
| 纸质流程图 | 不够生动，难以应对突发情况 |
| 视频教程 | 需要反复拖拽进度条，操作中断 |
| 一对一陪护 | 成本高、效率低、难以规模化 |
目标人群
16岁+心智障碍青年（孤独症谱系、智力发育迟缓等），具备基础劳动能力，希望在烘焙店、中央厨房等场景实现辅助性就业。
③ 作品介绍
解决方案
步步安心 = 结构化技能卡片 + 多感官辅助 + 离线优先设计
核心功能
可以做到完全离线TTS等，总体还是联网使用更好一些| 功能 | 说明 | 离线 |
|---|---|---|
| 📚 8大技能模块 | 工具认知、卫生准备、食材识别、称量操作、搅拌手法、清洁整理、职场沟通、安全须知 | ✅ |
| 🖼️ 图文分步指引 | 每步配实拍图片（暂使用AI生成的配图）+文字说明，当前步骤高亮，进度可视化 | ✅ |
| 🔊 语音播报 | 点击朗读当前步骤，支持语速调节，适应不同认知节奏 | ✅ |
| 🤖 AI 智能助手 | 豆包大模型接入，解答"为什么要过筛""搅拌多久"等延伸问题 | 联网 |
| 🏆 成就系统 | 完成技能解锁徽章，正向激励持续学习 | ✅ |
| 📶 PWA 离线架构 | Service Worker 缓存，无网络环境核心功能照常使用 | ✅ |
产品形态
PWA 可渐进式 Web 应用——无需安装，扫码即用，手机/平板/电脑全端适配，支持添加到桌面。
④ 用 SOLO 实现的过程
任务拆解
Phase 1：全网调研（对标产品、心智障碍数据、安全法规）
Phase 2：产品设计（功能架构、安全体系、UI 规范）
Phase 3：技术选型
Phase 4：PWA 开发
Phase 5：测试迭代
具体任务拆解思路
将"做一个烘焙训练应用"拆解为5个层次：
| 层次 | 内容 |
|---|---|
| 内容层 | 48个步骤的图文内容整理与结构化 |
| 结构层 | 8大模块的逻辑分类与导航设计 |
| 交互层 | 步骤切换、进度记录、语音控制、AI对话 |
| 视觉层 | 高对比度、大按钮、清晰层级、响应式布局 |
| 工程层 | PWA 离线化、Android APK 打包 |
关键 Prompt 示例
【角色】你是一位特教老师，正在指导心智障碍学员学习烘焙。 【任务】将"称量面粉"这个操作拆解为3-5个简单步骤。 【要求】 - 每步只包含一个动作 - 使用"先...再..."的句式 - 避免专业术语，用生活化语言 - 每步不超过15个字
SOLO 创作过程
SOLO 全网搜索相关内容 调查需求、使用等
安全第一，多次确认，尽可能的完善再开始制作，比如：刀具需要使用食品级硅胶刀
SOLO开发过程中，进行自检审计，进度会更快
遇到异常打断，打继续比刷新任务好用
语音讨论，解放双手，这个截图的17S，如果打字，需要35S+
AI插图，视觉上，比真实操作场景照片更优秀，更容易理解
个别tab的修改，SOLO用浏览器截图或者MCP更高效
踩过的坑
- WebView 跨域问题：天气 API 在 Android WebView 中被 CORS 阻止 → 通过设置
setAllowUniversalAccessFromFileURLs(true)解决 - TTS 语音失效：误判
getVoices()返回空数组为不支持 TTS → 恢复原始逻辑，依赖系统语音引擎（Chrome 首次调用 getVoices() 必然返回空，需延迟获取） - APK 签名问题：Android 14 要求 v2 签名 → 从 jarsigner 切换到 apksigner
- 图片加载性能：48张步骤图首次加载慢 → 懒加载 + 预加载当前模块 + WebP 压缩
- 120+ 次提交 | v1.00 → v6.5：Service Worker 缓存策略导致线上更新不生效 → 通过版本号机制+缓存名更新解决，踩坑无数 😭
⑤ 成果展示
应用截图
首页截图
训练页面0
训练页面1
管理员
设置页面
APK截图
在线体验与源码
- 🌐 Web 版：https://jiangpan1265.github.io/bubuanxin.github.io
- 📦 APK 下载：GitHub Releases
- 💻 源码仓库：https://github.com/jiangpan1265/bubuanxin.github.io
技术栈
纯前端实现：HTML5 + CSS3 + Vanilla JavaScript
核心文件：index.html (72KB) / style.css (94KB) / app.js (166KB)
零后端依赖，可部署到 GitHub Pages、Vercel、Netlify 等任何静态托管服务。
⑥ 验证方式与下一步
模拟测试
邀请几名无烘焙经验志愿者完成「称量+搅拌」任务：
| 指标 | 使用前 | 使用后[估测] |
|---|---|---|
| 口头提醒次数 | 5-8 次 | 1-2 次 |
| 任务完成时间 | 15 分钟 | 10 分钟 |
| 步骤遗漏率 | 40% | 10% |
下一步计划
- 增加更多岗位场景（咖啡制作、简餐备料、超市理货）
- 接入更多语音音色选择
- 家长/督导端数据同步
- 与就业支持机构合作落地试点
- 5月2日开始制作，5天的时间（2~3小时左右/天），应用基本成型。但仍需要仔细打磨，比如[打个鸡蛋] "打鸡蛋"对普通人理所当然，对心智障碍者是一个需要拆解成7步来教的技能。很多，是我想不到的。
- 由于排队过久，先提交V6.50 ≈ V1.01 [/汗] ，欢迎大家来 Issue
写在后面
科技致善 —— 不是口号，应是准则：
包容 ——让更多人（包括有障碍的人）能用、好用
赋能 ——不是替代人，而是帮助人成长、获得能力
尊重 ——保护隐私与尊严，而非掌控或标签化
意图 ——产品设计的起点是“解决问题”，而不是“制造依赖”
.
不是让机器教人，而是让人在技术辅助下成长
始终保留“烘焙师”这一支持者角色，而非试图用 AI 替代真人的陪伴与判断
失败也是学习：多次求助不会遭到批评，而是获得更耐心、更简明的指引
拒绝冷冰冰的标准评价：星星不是分数，而是“你在这项技能上练习了很多次”的陪伴标记
让技术隐去自己的形状，去适应人的脆弱，并默默照亮成长的路
希望：科技，让所有人，看见自己本来就有的光
用 AI 降低认知门槛，让每一步都有陪伴。
步步安心，步步向前。