【Hello AI 科技致善】用 SOLO 打造心智障碍群体职场全场景支持工具「心职通」

SOLO挑战赛专区
1

【Hello AI 科技致善】用 SOLO 打造心智障碍群体职场全场景支持工具「心职通」

① 摘要

面向心智障碍群体（孤独症谱系障碍、智力发育迟缓、唐氏综合征等），在职场工作现场提供可视化任务分解、沟通辅助、AI 智能问答、日程管理、辅导员后台五大核心能力。基于 React + Vite 构建，采用大按钮、高对比度、语音播报等无障碍设计，确保工具真正能在工作现场"用起来"。全面适配手机 APP 原生界面风格（底部 Tab 导航、iOS 风格导航栏、安全区域适配），支持单 HTML 文件离线访问，无需服务器即可使用。目前通过 1660 模块零错误构建验证、4 项严重 Bug 修复验证、代码质量审查验证。

② 真实场景与需求

目标人群

心智障碍群体，主要包括：

  • 孤独症谱系障碍（ASD）：社交沟通困难、重复性行为、感官敏感
  • 智力发育迟缓（ID）：认知能力受限、学习速度较慢、需要重复训练
  • 唐氏综合征：语言表达困难、记忆力较弱、但通常性格温和友善
  • 脑瘫伴随智力障碍：运动障碍与认知障碍并存

痛点描述

场景一：便利店理货——多步骤任务执行困难

小明是一名 22 岁的孤独症青年，在便利店做理货员。他的工作需要完成"检查商品日期→分类摆放→补充货架→清洁整理→记录库存"五个步骤。但他经常在第二步之后就忘记接下来该做什么，面对满货架的商品感到焦虑，需要辅导员反复口头提醒，效率低下且容易出错。

场景二：咖啡店——沟通表达困难

小红是一名 25 岁的智力发育迟缓青年，在咖啡店做助手。当顾客询问"这个还有吗？"或者同事说"帮我把那个拿过来"时，她常常无法快速理解并回应。遇到身体不舒服或需要休息时，也不知道该怎么表达，只能默默忍受，有时会导致情绪崩溃。

场景三：快递驿站——环境适应困难

小李刚到快递驿站工作，面对陌生的环境和嘈杂的声音感到极度不安。他不清楚每天的工作流程是什么，不知道什么时候可以休息，也不知道遇到问题该找谁求助。前三天每天都想辞职。

现有做法与不足

现有做法 不足之处
纸质任务卡片 不够直观、无互动反馈、难以持续更新
依赖人工辅导员全程陪同 成本高（人均月成本 3000-5000 元）、难持续、覆盖面有限
通用效率工具（如待办清单 App） 未针对心智障碍用户进行无障碍设计，界面复杂、字体小、交互不友好
家长口头叮嘱 信息传递不准确、无法标准化、家长本身也有工作压力

核心矛盾：专业就业辅导员严重不足（全国持证就业辅导员不足 5000 人），而心智障碍就业适龄人群超过 500 万，供需比超过 1:1000。

③ 作品介绍

「心职通」是一款基于 React 18 + Vite 5 构建的 Web 前端应用，专为心智障碍群体设计的全场景职场支持工具。
技术栈：React 18 + Vite 5 + Framer Motion + Web Speech API + Lucide React + vite-plugin-singlefile
开发工具：TRAE SOLO
构建状态：:white_check_mark: 1660 模块 / 0 错误 / 100KB (gzip) / 单 HTML 文件输出
界面适配：:white_check_mark: 手机 APP 原生风格 / 底部 Tab 导航 / iOS 导航栏 / 安全区域适配

我用SOLO开发对话界面如下：

image
image1977×1617 250 KB

image
image1986×1617 242 KB

产品包含 4 大功能模块 + 5 大通用组件：

四大功能模块

:clipboard: 任务小帮手——工作流程拆解

将复杂工作拆解为清晰的步骤卡片，每一步都有：

  • 大图标 + 大文字的可视化步骤展示
  • 语音播报（Web Speech API），点击即可听到步骤说明
  • 进度追踪，带动态鼓励语（"很好的开始！继续加油！"→"太棒了！已经过半了！“→"恭喜你，全部完成！”）
  • 完成庆祝动画，全部步骤完成后触发撒花效果
  • 预设岗位模板：便利店理货（5步）、咖啡店助手（4步），支持扩展更多岗位

:speech_balloon: 心声卡——沟通辅助与情绪表达

帮助不善于表达的青年"说出"自己的想法：

  • 4 大分类表达板：我的需求（休息/求助/时间/洗手间）、我的感受（开心/难过/累了/紧张）、我的回答（是/不是/明白/不懂）、与人交流（你好/谢谢/对不起/交朋友）
  • 语音合成播放，点击表达卡片自动朗读
  • 自定义输入，支持自由输入想说的话
  • 紧急求助按钮，一键通知辅导员
  • 表达历史记录，帮助辅导员了解沟通模式

:robot: AI 小助手——智能问答支持

温暖的 AI 对话伙伴，工作中遇到任何问题都可以问：

  • 快捷提问按钮：“我不知道怎么做这一步”、“我有点紧张”、“我能休息一下吗”、“今天还有什么任务”
  • 关键词智能匹配回复，针对不同情绪和场景给出温暖鼓励
  • 自动语音播报 AI 回复
  • 打字动画效果，模拟真实对话体验

:date: 今日日程——时间轴可视化

帮助用户清晰了解一天的工作安排：

  • 时间轴样式展示，已完成/进行中/待完成三种状态
  • 点击标记完成，已完成项显示绿色勾选
  • localStorage 持久化，刷新不丢失

:gear: 辅导员管理后台

为辅导员提供高效的管理工具：

  • 数据仪表盘：在训学员数、完成培训数、任务模板数、平均完成率
  • 学员管理：搜索、筛选、进度查看
  • 任务模板配置：创建、编辑、删除岗位模板

无障碍设计特色

设计原则 具体实现
大按钮、大字体 最小字体 18px，按钮最小 48px 高度
高对比度配色 橙色主色调（#F97316），文字与背景对比度 > 4.5:1
语音辅助 Web Speech API 语音合成，自动播报步骤和回复
正向反馈 动态鼓励语、完成庆祝动画、成就徽章
触感反馈 Framer Motion 流畅动画，按钮点击缩放效果
无障碍属性 ARIA 标签、键盘导航支持、type="button" 声明

技术栈

技术 用途
React 18 前端 UI 框架，组件化架构
Vite 5 极速构建工具（2 秒完成构建）
Framer Motion 流畅动画，提升交互体验
Web Speech API 语音合成，帮助表达困难用户
Lucide React 统一图标体系，清晰可识别
localStorage 数据持久化，日程状态本地保存
vite-plugin-singlefile 单 HTML 文件打包，支持离线访问

:mobile_phone: 手机 APP 界面适配

为了确保工具在手机上拥有原生 APP 的使用体验，我们对全部 6 个页面进行了完整的移动端适配：

APP 架构重构：

  • 底部 Tab 导航：4 个主 Tab（首页/任务/心声/AI），毛玻璃效果背景，安全区域适配（env(safe-area-inset-bottom)）
  • 页面栈系统：Tab 页面直接切换无感过渡；日程、管理后台为 Push 页面，带 iOS 风格左右滑动动画和返回按钮
  • iOS 风格导航栏：Push 页面顶部居中标题 + 左侧橙色返回按钮，支持安全区域顶部适配

各页面适配详情：

页面 适配内容
首页 2×2 功能卡片网格 + 橙色欢迎横幅 + 右上角管理入口，去除旧装饰元素
任务小帮手 去除返回按钮，居中标题，底部操作按钮改为内联跟随内容滚动
心声卡 去除返回按钮和底部独立导航栏，语音开关移至标题右侧
AI 小助手 去除返回按钮，输入区和快捷问题适配 Tab 栏高度
今日日程 Push 页面，iOS 导航栏 + 返回按钮，时间轴日程列表
管理后台 Push 页面，侧边栏改为水平 Tab 栏，表格改为卡片列表，网格改为 2 列

新增 21 个移动端专用 CSS 类：

CSS 类 用途
.app-shell 全视口应用容器，100dvh + 安全区域
.app-tabbar / .app-tabbar-item 底部标签栏，毛玻璃效果
.app-navbar / .app-navbar-title / .app-navbar-btn iOS 风格导航栏
.app-content 可滚动内容区，底部留出 Tab 栏空间
.app-page / .app-page-body Push 子页面包装
.app-card-grid / .app-feature-card 首页 2×2 功能卡片网格
.app-home-header / .app-section-title 首页布局辅助
.app-fixed-bottom 固定底部操作区域

移动端特性支持：

  • viewport-fit=cover 全屏适配
  • env(safe-area-inset-*) 刘海屏/底部安全区适配
  • -webkit-tap-highlight-color: transparent 去除点击高亮
  • -webkit-overflow-scrolling: touch 惯性滚动
  • 100dvh 动态视口高度，解决移动浏览器地址栏问题
  • apple-mobile-web-app-capable 支持 iOS 添加到主屏幕

④ 用 SOLO 实现的过程

第一步：调研与方案设计

Prompt 示例：

“心智障碍群体包含孤独症谱系障碍、智力发育迟缓、唐氏综合征及脑瘫伴随智力障碍等。他们常因表达困难而更容易被忽视和误解；在理解工作流程、执行多步任务、适应职场环境上也面临更高门槛。请帮我设计一套能在工作现场’用起来’的支持工具方案”

SOLO 帮我完成了：

  • 目标群体特征分析（4 类障碍的差异化需求）
  • 国内外成功案例调研（镇江胶囊咖啡驿站、Raise3D 工装设计、Work Autonomy 等）
  • HEAL 四维干预框架设计（Help-Express-Adapt-Link）
  • 全场景产品矩阵规划（临床/家庭/学校三大场景）
  • 完整产品方案建议书输出

第二步：项目架构搭建

Prompt 示例：

“基于上面的方案，用 React + Vite 开发心智障碍就业支持工具的 Web 前端应用，包含可执行程序代码和通用组件/Skill”

SOLO 完成了：

  • 项目初始化（Vite + React 配置）
  • 5 个通用 UI 组件库开发（Button、TaskCard、CommunicationBoard、ProgressBar、VisualSchedule）
  • 4 个业务模块开发（TaskHelper、VoiceCard、AdminDashboard、AIAssistant）
  • CSS 设计系统（颜色变量、字体、间距、圆角、阴影）

第三步：全面审查与 Bug 修复

Prompt 示例：

“继续完善”

SOLO 进行了全面的代码审查，发现并修复了：

  • 4 个严重 Bug：日程路由缺失、管理后台无法返回、进度条除零错误、语音状态卡死
  • 5 项功能缺失：任务选择界面、日程页面、管理后台返回、数据持久化、管理入口优化
  • 10+ 处代码质量问题：未使用的导入/变量/函数、Clock 组件位置、CSS Variables 未统一等
  • 无障碍增强：ARIA 属性、键盘导航、type="button" 声明
  • 布局修复：底部导航遮挡、管理后台响应式适配

第四步：AI 功能增强

Prompt 示例：

“新增 AI 对话辅助功能，为心智障碍用户提供智能问答支持”

SOLO 新增了 AI 小助手模块：

  • 预设快捷问题 + 关键词匹配回复系统
  • Web Speech API 语音自动播报
  • 温暖友好的对话风格设计
  • 打字动画 + 输入状态指示

第五步：手机 APP 界面全面适配

Prompt 示例：

“请完全按手机APP界面样式适配，修改该应用全部页面”

SOLO 完成了全部 6 个页面的移动端 APP 风格重构：

  • 架构重构：从单页面切换改为 Tab + 页面栈双模式导航
  • 新增 21 个 CSS 类：涵盖 APP 外壳、Tab 栏、导航栏、安全区域、卡片网格等
  • 6 个文件同步修改：App.jsx、index.css、TaskHelper.jsx、VoiceCard.jsx、AIAssistant.jsx、AdminDashboard.jsx
  • 管理后台移动化：侧边栏改为水平 Tab，表格改为卡片列表
  • 多页面截图验证：首页、任务、心声、AI、日程、管理后台全部通过

第六步：独立 HTML 打包输出

Prompt 示例：

“你就做个html我来访问就行，请完全按手机APP界面样式适配”

SOLO 完成了单文件打包：

  • 集成 vite-plugin-singlefile 插件
  • CSS + JS 全部内联到一个 HTML 文件（316KB）
  • 配置移动端 viewport meta（禁止缩放、安全区域、PWA 模式）
  • 无需服务器，双击即可在手机浏览器中打开使用

踩过的坑

问题 原因 解决方案
无障碍设计难度大 心智障碍用户认知特点差异大 在"简化"和"功能完整"之间找平衡，采用渐进式信息展示
语音合成兼容性 Web Speech API 在不同浏览器行为不一致 添加 cancel() + onerror/oncancel 回调，做降级处理
组件复用性 需要支持不同岗位和场景的快速扩展 抽取 5 个通用 UI 组件，通过 props 配置适配不同场景
状态管理 页面切换后数据丢失 引入 localStorage 持久化关键数据
代码质量 多轮迭代后积累未使用代码 SOLO 全面审查并清理
Tab 页面与 Push 页面共存 需要同时支持 Tab 切换和页面栈导航 设计双状态管理：activeTab + pageStack 数组，Tab 切换清空栈
固定底部元素冲突 多个页面的固定底部栏与 Tab 栏互相遮挡 统一用 env(safe-area-inset-bottom) 计算偏移，非 Tab 页面隐藏 Tab 栏
单 HTML 内联脚本不执行 type="module" 内联脚本在某些浏览器中行为不一致 使用 vite-plugin-singlefile 插件自动处理内联和资源引用
管理后台移动端适配 240px 固定侧边栏在手机上无法使用 改为水平 Tab 栏 + 卡片列表，表格改为移动端友好的卡片布局

⑤ 成果展示

完成界面效果展示如下：

首页 — 2×2 功能卡片 + 底部 Tab 导航

APP 风格首页，顶部品牌标识 + 橙色欢迎
横幅 + 四宫格功能入口（任务小帮手/心声卡/今日日程/AI助手），底部固定 4 个 Tab 栏。

eded8a863834e99dc4e54b8ebef41565
eded8a863834e99dc4e54b8ebef41565710×1455 86.1 KB

任务 Tab — 任务选择 + 步骤执行

居中标题展示，任务卡片列表选择后进入步骤执行界面，进度条 + 步骤指示器 + 内联操作按钮，所有内容适配 Tab 栏安全区域。

7d4b1c6be7ec73f9bb4b6708d07ed63b
7d4b1c6be7ec73f9bb4b6708d07ed63b701×1452 65.8 KB

adeb219f6222f5ebadb17ac3694e6d69
adeb219f6222f5ebadb17ac3694e6d69723×1461 118 KB

心声 Tab — 沟通板 + 自定义表达 + 紧急求助

分类沟通板（需求/感受/回答/交流）+ 快捷短语 + 自由输入 + 表达历史 + 紧急求助按钮，语音开关位于标题右侧。

030615e58c3fa2942262e7184285dac4
030615e58c3fa2942262e7184285dac4714×1466 86.6 KB

AI Tab — 智能对话界面

居中 AI 头像 + 在线状态，聊天消息区 + 快捷问题横滑按钮 + 底部输入框，输入区和快捷问题悬浮于 Tab 栏之上。

9692f3928dec00320d2f83d07fdeb01a
9692f3928dec00320d2f83d07fdeb01a705×1194 123 KB

今日日程 — Push 页面（iOS 导航栏）

从首页点击"今日日程"进入，顶部 iOS 风格导航栏（返回按钮 + 居中标题），时间轴日程列表（已完成/进行中/待完成），无底部 Tab 栏。

e0224b25b89cae31faa177a471f858c2
e0224b25b89cae31faa177a471f858c2714×1473 86.1 KB

管理后台 — Push 页面（移动端适配）

顶部水平 Tab 栏（概览/学员/模板/设置），学员管理改为卡片列表，任务模板 2 列网格。

52e0eda11f8bdddcaeca96e606eb48a7
52e0eda11f8bdddcaeca96e606eb48a7765×1344 50.2 KB

项目结构

xinzhijob-support/
├── src/
│   ├── components/
│   │   ├── ui/                      # 5 个通用 UI 组件（可复用 Skill）
│   │   │   ├── Button.jsx           # 大按钮（5变体/4尺寸/动画反馈）
│   │   │   ├── TaskCard.jsx         # 任务卡片（步骤展示/状态动画）
│   │   │   ├── CommunicationBoard.jsx  # 沟通板（分类表达/语音播放）
│   │   │   ├── ProgressBar.jsx      # 进度条（鼓励语/动画光效）
│   │   │   └── VisualSchedule.jsx   # 视觉日程（时间轴/状态指示）
│   │   └── modules/                 # 4 个业务模块
│   │       ├── TaskHelper.jsx       # 任务小帮手
│   │       ├── VoiceCard.jsx        # 心声卡
│   │       ├── AIAssistant.jsx      # AI 小助手
│   │       └── AdminDashboard.jsx   # 辅导员管理后台
│   ├── App.jsx                      # 主应用（路由+页面切换）
│   ├── main.jsx                     # 入口
│   └── index.css                    # 全局样式+设计系统
├── package.json
├── vite.config.js
├── index.html
└── README.md                        # 完整技术文档

构建结果

✓ 1660 modules transformed
✓ built in 1.83s
dist/index.html    320.54 kB │ gzip: 100.10 kB   ← 单文件 HTML（CSS+JS 全内联）

功能完成清单

模块 功能点 状态
任务小帮手 步骤拆解 / 进度追踪 / 语音播报 / 庆祝动画 / 任务选择 :white_check_mark: 已完成
心声卡 沟通板 / 语音合成 / 快捷短语 / 紧急求助 / 表达历史 :white_check_mark: 已完成
AI 小助手 快捷提问 / 智能回复 / 语音播报 / 打字动画 :white_check_mark: 已完成
今日日程 时间轴可视化 / 点击完成 / 本地持久化 :white_check_mark: 已完成
管理后台 数据仪表盘 / 学员管理 / 模板配置 :white_check_mark: 已完成
无障碍增强 ARIA 属性 / 键盘导航 / 大字体设计 :white_check_mark: 已完成
APP 界面适配 底部 Tab 导航 / 页面栈 / iOS 导航栏 / 安全区域 :white_check_mark: 已完成
独立 HTML 打包 单文件输出 / 离线访问 / 移动端 viewport :white_check_mark: 已完成

通用组件库（Skill）

为保障可复用性，我们抽取了 5 个通用 UI 组件，可用于快速构建更多岗位的支持工具：

组件 用途 特点
Button 大按钮 5 种变体、4 种尺寸、动画反馈、ARIA 支持
TaskCard 任务卡片 步骤展示、3 种状态动画、完成按钮
CommunicationBoard 沟通板 4 大分类、语音播放、自定义输入
ProgressBar 进度条 可视化进度、动态鼓励语、动画光效
VisualSchedule 视觉日程 时间轴、3 种状态指示、点击交互

⑥ 验证方式与下一步

模拟测试验证

验证项 结果
构建测试 1660 模块成功编译，0 错误
Bug 修复 修复 4 个严重 Bug（除零错误/语音卡死/路由缺失/后台返回）
代码质量 清理 10+ 处质量问题（未使用导入/变量/函数）
无障碍 添加 ARIA 属性、键盘导航、type="button" 声明
性能 生产包 gzip 后仅 100KB，加载迅速
APP 适配 6 个页面全部适配手机 APP 界面，底部 Tab + 页面栈验证通过
截图验证 首页/任务/心声/AI/日程/管理后台 6 个页面截图确认正常
独立 HTML 单文件 316KB，双击即可在浏览器中打开使用

下一步计划

  1. 接入真实 AI 大模型：实现智能任务分解（拍照/录像自动生成步骤）和情绪识别
  2. 添加 VR/AR 环境适应训练：模拟真实工作场景，帮助提前熟悉环境
  3. 对接后端 API：实现数据持久化和多设备同步
  4. 扩展更多岗位模板：快递驿站、图书整理、超市收银等
  5. 与跳跳糖公益合作：推动作品进入真实需求方的试点落地

结语

每一个生命都值得被看见，每一份努力都应该被支持。让技术成为治愈的力量，让每一位心青年都能在工作中找到自己的位置。

2

太强了 :saluting_face:

3

楼主是有想法的喔，也是想到了可能遇到的痛点，不错的项目。

1 个赞
4

谢谢！ :smiling_face_with_three_hearts:

1 个赞
5

谢谢哦！ :smiling_face_with_three_hearts:

1 个赞