星工坊 — 心智障碍者职场任务引导助手
作品名称：星工坊 — 心智障碍者职场任务引导助手
一句话亮点：AI语音+图文步骤拆解，助力心智障碍员工独立完成咖啡店工作任务，用科技传递温暖。
项目背景：
聚焦「心智障碍群体就业支持」命题，针对当前孤独症咖啡馆等公益项目中，心智障碍员工面临的「工作流程难记、文字理解困难、易忘步骤、缺乏即时反馈」四大痛点，打造专属职场任务引导助手，让他们也能轻松胜任工作。
核心功能：
| 功能 | 说明 |
|---|---|
 任务拆解 |
将复杂工作拆解为3-5个图文步骤，降低记忆难度 |
 语音播报 |
每步自动语音朗读，支持重复播放，规避文字阅读障碍 |
 定时提醒 |
需等待的步骤（如咖啡萃取）自动倒计时，时间到语音提醒 |
 进度可视化 |
清晰的步骤计数+进度条，让用户明确当前进度 |
 正向激励 |
任务完成后解锁星星奖励+庆祝动画，建立工作成就感 |
截图展示：
1.首页 - 今日任务列表
简洁明了的任务选择界面，大字体+直观图标，心智障碍用户可轻松识别、选择任务。
2.步骤引导 - 图文+语音播报
将“制作拿铁”拆解为4个清晰步骤：准备杯子→萃取咖啡→加入牛奶→搅拌完成，逻辑清晰。每步搭配大图标+简短文字说明+语音播报，点击“播放语音”可反复收听，彻底降低阅读门槛。
3.定时提醒 - 咖啡萃取倒计时
针对需等待的步骤自动显示倒计时，时间到后会有自动语音提醒，避免遗漏关键环节。
4.完成庆祝 - 星星奖励
任务完成后弹出庆祝动画，给予5星奖励和正向鼓励，帮助用户建立工作自信。
5.多任务支持 - 整理货架、收银结账
除制作咖啡外，同步支持整理货架、收银结账等咖啡店常见岗位任务，适配更多工作场景。
技术实现 & 开发过程
技术栈：
纯HTML + CSS + JavaScript（单页应用），浏览器原生Web Speech API实现语音播报，响应式设计，手机/平板/电脑均可流畅使用。
开发流程：
- 表达意图：我首先表达了参赛意愿：“我想要参加这项比赛，希望在与你的对话交流中确定方向、思路并把这个东西做出来。”
- 确定方向：Trae帮我分析了比赛信息，我了解到有三大命题后，明确表示：“我其实对命题一挺感兴趣的。”
- 做出选择：Trae询问我几个关键问题，我做出了以下选择：赛道为科技向善公益赛道、命题为命题一（心智障碍群体就业支持）、具体方向为工作流程拆解、产品形态为网页应用、真实场景为咖啡店/便利店服务员、时间规划为今天完成Demo。
- 方案确认：Trae基于我的选择，设计了「星工坊」产品方案，明确了产品定位、核心功能、页面结构和设计原则，我确认方案后，Trae开始执行开发。
- 开发实现：Trae完成了全部开发工作，包括编写完整的HTML/CSS/JavaScript代码、实现3个任务场景（制作拿铁、整理货架、收银结账）、集成Web Speech API语音播报功能、添加定时器、进度条、庆祝动画等交互效果，以及优化无障碍设计（字体大小、颜色对比、语音语速）。
- 材料准备：Trae还帮我准备了比赛提交材料，包括作品说明文档、社区发帖内容（即本文档）、核心功能代码示例。
核心功能代码示例
语音播报功能（JavaScript）：
function speakCurrentStep() {
const utterance = new SpeechSynthesisUtterance(step.text);
utterance.lang = 'zh-CN';
utterance.rate = 0.8; // 放慢语速，更清晰
speechSynthesis.speak(utterance);
}
定时提醒功能（JavaScript）：
function startTimer(seconds) {
let remaining = seconds;
timerInterval = setInterval(() => {
remaining--;
if (remaining <= 0) {
speak("时间到了！"); // 语音提醒
}
}, 1000);
}
开发感悟
这个作品的意义，在于它能真正帮助到心智障碍群体——让他们掌握独立工作的能力，收获尊严与成就感。 或许在某个咖啡馆里，曾经因记不住步骤而焦虑的小伙伴，如今只需打开「星工坊」，跟着语音和图文指引，就能独立做出一杯拿铁。当看到完成页面的星星奖励时，那份自信的笑容，就是“科技向善”最动人的模样。
未来规划
增加更多岗位类型：覆盖便利店、图书馆、工厂流水线等场景；
个性化适配：支持自定义任务流程，适配不同能力水平的用户；
进度追踪：记录任务完成情况，助力管理者了解员工进步；
社区共建：开源任务模板库，邀请更多人参与，让温暖传递更远。
在线预览网页：
附件 https://qingjiangyiqubaocunliu.github.io/star_workshop/