【Hello AI 科技致善】用 SOLO 打造心智障碍群体 AI 职场引导系统：心工坊
命题一：心智障碍群体就业支持
在线体验：https://jlx617.github.io/
① 摘要
面向心智障碍就业群体（孤独症谱系障碍、智力发育迟缓等），在咖啡师、超市理货员、餐厅服务员等真实就业场景下，提供 AI 分步骤视觉引导 + 语音提醒 + 多端协同的职场辅助能力。
目前已完成：
- 3 个岗位模板
- 18 个工作步骤
- 72 张 AI 生成指导图
- 员工端、督导端、管理端三端协作
一个人 + SOLO，从想法到上线部署，3 天时间完成 MVP。
② 真实场景与需求
【目标人群】
-
心智障碍就业者
- 已具备基本劳动能力
- 但在多步骤任务执行、环境适应、突发情况处理上需要辅助
-
就业辅导员/督导
- 负责现场指导，但无法 1 对 1 全程跟随
- 需要远程监控和干预工具
-
企业管理者
- 愿意提供就业机会，但担心培训成本和效率问题
【痛点场景】
场景一：做咖啡——6 个步骤，忘了第 4 步该放什么
小宇（化名）在咖啡店实习，做一杯拿铁需要：取杯→加冰→倒牛奶→萃取咖啡→盖盖→出餐。
但他经常在第 4 步卡住，忘记萃取咖啡，直接盖盖出餐。督导不在身边时，只能停下来等，影响出餐效率。
场景二：超市理货——找不到对应货架，焦虑情绪升级
阿明（化名）在超市负责饮料区理货。促销期间货架调整，他找不到某款饮料该放哪里，越找越急，开始出现情绪行为问题。现场没有即时求助渠道，只能等督导巡店发现。
场景三：沟通困难——"我不舒服"都说不清楚
当身体不适或遇到困扰时，心智障碍员工往往难以准确表达。同事问"怎么了"，只能摇头或重复简单词汇，导致问题被忽视或误解。
【现有做法为什么不够？】
- 纸质流程卡：容易丢失、无法更新、没有提醒功能
- 1 对 1 督导：人力成本高，无法规模化推广
- 通用培训视频：不能针对具体岗位步骤拆解，看完就忘
- 手机备忘录：操作复杂，心智障碍群体使用门槛高
核心矛盾：有就业意愿和能力，但缺少"在场"的、个性化的、可规模化的支持工具。
③ 作品介绍
【这是什么？】
心工坊是一款专为心智障碍群体设计的 AI 职场引导系统，采用 Web 端应用形式，支持电脑、平板、手机直接访问，无需安装。
【核心功能】
-
分步骤视觉引导
- 每个工作步骤配备 4 张 AI 生成的实景指导图，自动轮播
- 解决痛点：降低理解门槛，一看就懂
-
语音提醒
- 点击播放当前步骤的语音讲解（TTS）
- 解决痛点：不识字也能使用
-
多级预警系统
- 黄灯（轻微异常）→ 红灯（严重异常）→ 求助按钮
- 解决痛点：督导远程掌握状态，及时干预
-
三端协同
- 员工端（执行任务）+ 督导端（监控预警）+ 管理端（配置模板）
- 解决痛点：完整工作闭环
-
岗位模板库
- 预置咖啡师、超市理货员、餐厅服务员 3 个岗位，每个岗位 6 个步骤
- 解决痛点：开箱即用，快速适配
-
一键求助
- 员工端紧急求助按钮，督导端实时弹窗提醒
- 解决痛点：解决沟通困难问题
【系统界面展示】
首页 - 角色选择
员工端 - 任务选择
员工端 - 工作台（核心功能）
督导端 - 监控台
督导端 - 模板管理
④ 用 SOLO 实现的过程
【任务拆解思路】
整个开发按照"需求分析 → 原型设计 → 视觉素材 → 功能开发 → 部署上线"五个阶段推进。
Phase 1：需求分析与产品定义
与 SOLO 多轮对话，明确产品定位。
Prompt：“我要为心智障碍群体做一个职场辅助工具，核心解决他们在执行多步骤任务时的困难。请帮我分析：1）这类人群的核心痛点是什么？2）现有解决方案的不足？3）AI 可以如何帮助他们？”
SOLO 帮我梳理出"分步骤引导 + 视觉辅助 + 语音提醒"的核心产品逻辑。
Phase 2：原型设计与交互流程
Prompt：“设计一个三端协同的系统：员工端做任务、督导端看状态、管理端配模板。每个岗位有多个步骤，每个步骤需要图片引导。请帮我设计页面结构和交互流程。”
SOLO 给出了完整的路由结构和组件划分方案。
Phase 3：AI 生成视觉指导素材
这是项目的关键差异化点。我要求每个步骤配备 4 张不同角度的指导图。
Prompt：“生成一张真实场景照片：一位年轻的咖啡师正在操作意式咖啡机萃取咖啡，正面角度，明亮温馨的咖啡店环境，专业但友好的氛围。用于心智障碍员工的职场培训指导。”
72 张图片，3 个岗位 × 6 个步骤 × 4 张图，全部通过 AI 生成。
Phase 4：功能开发
核心功能模块及 SOLO 协助内容：
- 图片轮播组件：实现自动轮播（5 秒间隔）+ 手动切换 + 指示器
- 语音播放：集成 Web Speech API，实现 TTS 朗读
- 预警系统：设计黄/红/求助三级状态流转
- 三端数据同步：使用 Zustand 状态管理，实现跨端状态共享
- 响应式布局：适配手机、平板、电脑多端显示
Phase 5：部署上线
使用 GitHub Pages 免费部署，SOLO 协助解决跨域图片加载问题，最终改为相对路径方案。
【踩过的坑】
坑 1：图片不显示（Chrome 无痕模式）
解决：从 raw.githubusercontent.com 改为相对路径 /steps/…
坑 2：Vite 编译失败
解决：发现根目录 index.html 是旧构建产物，删除后让 Vite 重新编译源码
坑 3：AI 生成图片风格不一致
解决：在 Prompt 中增加统一的风格描述词，确保视觉一致性
坑 4：语音播放自动策略限制
解决：增加用户交互触发（点击按钮后播放），避免浏览器自动播放限制
⑤ 成果展示
【在线体验】
- 系统首页（角色选择）：https://jlx617.github.io/
- 员工端（做任务）：https://jlx617.github.io/employee
- 督导端（监控预警）：https://jlx617.github.io/supervisor
- 管理端（配置模板）：https://jlx617.github.io/admin
【项目数据】
- 岗位模板：3 个（咖啡师、超市理货员、餐厅服务员）
- 工作步骤：18 个（每岗位 6 步）
- AI 生成指导图：72 张（每步骤 4 张）
- 代码行数：约 3000 行
- 开发周期：3 天
【技术栈】
- 框架：React 18 + Vite
- 状态管理：Zustand
- 样式：Tailwind CSS
- 路由：React Router
- 部署：GitHub Pages
⑥ 验证方式与下一步
【已完成的验证】
功能自测：完成全流程测试，员工端→督导端→管理端数据流转正常，预警系统响应及时。
场景模拟验证：邀请 2 位朋友模拟"员工-督导"角色，完成咖啡师岗位全流程操作，反馈"步骤清晰、图片直观"。
【下一步计划】
- 真实场景试点：联系本地心智障碍就业支持机构，邀请 3-5 名就业者进行真实岗位试用
- 模板扩展：增加更多岗位模板（保洁员、仓库管理员、烘焙助手等）
- 数据沉淀：收集使用数据，优化步骤设计和预警阈值
- 家属端开发：增加家属查看端，让家人了解工作进展
写在最后
心工坊的核心理念是：技术不应该成为门槛，而应该成为桥梁。
每一个心智障碍就业者，都值得拥有平等的工作机会。AI 的价值，不在于替代人类，而在于放大人类的善意——让辅导员能同时支持更多人，让企业更愿意提供岗位，让每一个"小宇"和"阿明"都能在工作中找到尊严和价值。
感谢 TRAE SOLO，让一个人也能完成这样有意义的产品。
如果你认同这个理念，欢迎 Star 
或分享给可能需要的人。