## 【标签】
**社会服务+社会公益**（与报名赛道保持一致；如参加附加赛题可加选 **社会公益**）
## 【标题】
社会服务赛道 + 指尖非遗工坊：九项非遗技艺的 AI 互动学习 Demo
## 【正文】
### 1. Demo 简介
**是什么：** 「指尖非遗工坊 V12」是一个基于 Web 的 AI 互动学习网站，用户可以在浏览器里直接体验剪纸、扎染、皮影、木版年画、云锦织造、木结构营造、活字印刷、宣纸制作、针灸认知共 9 项非遗技艺。
**面向谁：** 核心用户是中小学生、大学生、传统文化爱好者、学校教师、博物馆/文旅场馆导览人员以及家庭教育用户。
**主要功能：**
- **沉浸式工坊体验**：每个工坊包含 3 种主题、3 种难度，用户通过点击、拖拽、绘制等交互完成作品；
- **AI 实时评分**：统一的四维评分体系（完成度 / 匹配度 / 顺序工序 / 错误惩罚）+ key-step gate 关键步骤检查，让评分更可信；
- **作品沉淀与证书**：完成作品后自动保存到本地作品墙，可生成学习报告与可打印的体验证书，形成完整学习闭环。
-–
### 2. Demo 创作思路
**灵感来源：** 非遗是中华文化的根脉，但传统教学依赖面对面传授和真实耗材，很多年轻人「看得见、摸不着、学不会」。我希望用 AI 互动技术把非遗搬到屏幕上，让每个人都能零成本、低风险、反复练习。
**想解决的问题：**
1. 非遗学习门槛高：需要专业老师和真实材料，普通人难以入门；
2. 反馈不及时：看视频/图文教程只能单向观看，不知道自己操作对不对；
3. 教学效率低：一位老师难以同时指导多名学生，批改和点评成本高。
**为什么做这个方向：** 文化传承不是「阳春白雪」，需要普惠化的数字工具。「社会服务」赛道强调真实价值，而「降低非遗学习门槛、助力青少年文化认同」正是能落地、能体验、能衡量的社会价值。
-–
### 3. Demo 体验地址
**交互式 HTML 文件 ZIP 包（推荐）**
本帖附件已上传 `heritage_workshop_v12_demo.zip`，下载解压后双击 `index.html` 即可在浏览器中离线体验核心功能（推荐 Chrome / Edge）。该 ZIP 包包含完整的 React 构建产物，无需服务器、无需注册账号即可本地运行。
--
### 4. TRAE 实践过程
整个 Demo 均使用 **TRAE IDE + AI 智能体** 完成开发，核心流程如下：
**Step 1：创意拆解与架构设计**
把「9 项非遗技艺」拆成独立的 craft 模块，定义统一的 `CraftModule` 接口（draw / handleClick / metrics / keyStepGate），让每种技艺可以独立实现、统一调度。TRAE 帮我生成了项目骨架、状态管理（Zustand）和路由结构。
**Step 2：逐个工坊迁移与重构**
将 V11 单文件 HTML 中的 9 个工坊，按新接口迁移到 TypeScript 模块。TRAE 在迁移过程中自动补齐类型、消除直接 state mutation，并引入 `CraftActionContext` 桥接模式避免闭包陈旧值。
**Step 3：评分体系统一与可访问性增强**
用 TRAE 完成四维评分 + key-step gate 的设计，修复了皮影步数重复统计、针灸扣分异常、年画缺少颜色提示等 bug；同时添加 DOMPurify、模态框焦点管理、Canvas aria-label 等安全与可访问性改进。
**关键开发步骤截图（请替换为真实截图）：**
1. [截图 1：TRAE 生成项目骨架/文件结构]![alt text]
2. [截图 2：TRAE 待办事项和问答]![alt text]
3. [截图 3：AI 智能体修复皮影步数预算 bug 的对话与代码改动]![alt text]
4. [截图 4：9 项工坊同时运行 / 展示截图]![alt text]
**关键任务 Session ID（请从 TRAE 对话中双击复制后替换）：**
- Session ID 1：`.1124151339518772:768ba00b57ecef2a68bdd45603864e4e_6a445ec0b8b93cf57d659481.6a44a890b8b93cf57d65aed2.6a44a890e2f14c7046182ebf:Trae CN.T(2026/7/1 13:41:36)`（皮影步数有误修复）
- Session ID 2：`.1124151339518772:aee5b383a08936dee088b363cf45e700_6a445ec0b8b93cf57d659481.6a44f3803464b0b3e502c1db.6a44f3805321e1ee5fd46ade:Trae CN.T(2026/7/1 19:01:20)`（做一轮代码审查/安全扫描/性能优化，先跑浏览器回归验证当前所有改动）
- Session ID 3：`.1124151339518772:90b7023b60d4314ae491122d704013f2_6a445ec0b8b93cf57d659481.6a449505b8b93cf57d65ab80.6a449504e2f14c7046182ebd:Trae CN.T(2026/7/1 12:18:13)`（针灸bug修复）
-–
### 5. 经验总结（加分项）
- **不要追求一步到位**：先把核心交互跑通，再补评分、再优化 UI，AI 智能体擅长按阶段执行；
- **Prompt 要具体**：给 AI 描述「输入/输出/边界条件/参考旧代码位置」，比空泛说「帮我改一下」效率高很多；
- **多轮验证**：每完成一个工坊就做浏览器回归测试，避免最后集中爆发 bug。
-–
## 报名帖链接
[我的报名帖： 【社会服务+社会公益】指尖非遗工坊 ]（请替换为真实报名帖链接）
heritage_workshop_v12_demo.zip (121.1 KB)