先和大家打个招呼
大家好，我是Vantastic，一名独立开发者，也是一个普通的爸爸。做星芽这件事，说起来和我自己当爸爸之后心境的变化有很大关系。陪着孩子从牙牙学语到开口说话、从听不懂到能执行指令，那种"付出的一切都有了回报"的成就感，让我特别能理解——如果孤独症孩子的家长，也能看着自己的孩子一步步学会打招呼、学会点餐、学会交朋友，该有多欣慰。
初赛时，星芽更多是一个"想法验证"——证明了 AI 社交训练这条路走得通。到了复赛，我们把它从一个能跑的 Demo，打磨成了一个真正能用的完整产品：有后端、有数据库、有多端数据同步、有分析看板，部署上线，评审打开就能体验。
1. 产品简介
是什么： 星芽是一套多端协同的 AI 社交训练系统，包含四个互相配合的产品端——产品概念展示页、Web 端社交训练助手（点击互动式复杂场景）、移动端社交训练助手（消息对话式简易场景）、Web 端数据分析看板。四端共享同一套设计语言和数据体系，形成"双端训练 → 数据追踪 → 宏观分析"的完整闭环。
面向谁：
-
核心用户：3-12 岁自闭症谱系障碍（ASD）儿童及其家长
-
次要用户：特教老师、康复治疗师（使用看板追踪训练数据）
-
延伸用户：研究人员、公益组织管理者（通过分析看板了解群体趋势）
核心流程：
2. 完整功能展示
2.1 Web 端社交训练助手（xingya-ui）
Web 端是整个系统的核心训练端，承载最丰富的交互体验。共 14 个页面，包含：
-
9 大社交训练场景： 打招呼问好、超市购物、餐厅点餐、公园分享玩具、课堂举手发言、公交乘车、图书馆借书、医院看病、朋友生日聚会。每个场景通过 AI 驱动的对话互动，引导孩子练习轮流对话、情绪识别、得体表达。
-
场景库浏览： 训练场景的集中展示和入口，支持按类别筛选（日常生活、学校生活、公共场所、家庭互动）。
-
自定义场景创建： 家长可根据孩子需求创建个性化训练场景。
-
进度追踪： 训练完成后自动生成能力雷达图和里程碑进度，多维度评估孩子的社交能力成长。
-
孩子档案管理： 支持多孩子账号切换，每个孩子独立记录训练数据。
-
偏好设置： 训练时长、默认难度、AI 语速语调、鼓励频率等可个性化配置。
后端采用 Node.js + Express + SQLite 架构，JWT 认证，所有训练数据实时入库。
2.2 移动端社交训练助手（xingya-mobile）
移动端是星芽的轻量训练端。不要求家里有平板或电脑，一部手机就能让孩子随时练习。共 8 个页面，底部 Tab 导航（首页/训练/进度/场景库/更多）：
-
消息对话式训练： 核心交互采用聊天对话流布局，孩子像发消息一样和 AI 进行社交练习，比 Web 端的点击互动更轻量、更直觉。
-
设计系统继承： 从 Web 端继承单色极简设计语言（brand-900 主色、Geist 字体、border-first 组件），保持品牌一致性。
-
移动端适配： 控件高度 36px-44px 适配触控，圆角按钮改为 full 胶囊形，底部 Tab Bar 替代侧边导航。
-
后端数据同步： 训练数据与 Web 端共享同一后端，孩子在手机上练完，家长在电脑上就能看到进度更新。
2.3 数据分析看板（xingya-dashboard）
面向研究人员和管理者，提供从个体到群体的多维度分析。5 大看板模块：
-
数据概览： 核心指标卡片（注册孩子数、训练总次数、平均完成率、平均准确率）、趋势图、场景完成率环形图、近期活动流。
-
孩子个体分析： 可搜索筛选的孩子列表、能力雷达图、训练历史记录、个体指标卡片。
-
训练数据统计： 按场景/时间范围筛选，难度分布饼图、难度别准确率与完成率对比柱状图。
-
地域分布： 中国地图热力图 + 省份排名表，直观展示 ASD 干预覆盖情况。
-
趋势报告： 月度/年度趋势对比、关键指标对比表、智能洞察。
看板采用独立管理员账号体系，与 Web/H5 用户系统分离，保证数据安全。
2.4 多端数据闭环
三端数据链路已打通：孩子在 Web 端或移动端完成训练 → 训练记录实时存入后端数据库 → 进度页面同步更新 → 看板端从个体聚合到群体进行宏观分析。评审可以从任意一端开始体验，看到数据在另一端的变化。
3. 相比初赛demo的升级
复赛阶段的重点突破： 初赛时星芽是一套纯静态前端页面，能跑通核心训练流程，但离"真实可用"还有距离。复赛阶段我们重点做了四件事：
-
搭建完整后端： 从零搭建了 Node.js + Express + SQLite 后端，实现了用户认证（JWT）、训练数据存储、AI 对话代理、分析数据查询等 20+ 个 API 接口。
-
打通多端数据： 移动端接入后端 API，Web 端和移动端的训练数据汇聚到同一数据库，进度、档案、偏好在两端实时同步。
-
修复训练闭环： 排查并修复了训练流程中的关键缺陷——场景库跳转参数丢失、训练计时器缺失、评分计算错误、返回按钮逻辑混乱，确保核心流程顺畅无阻。
-
部署上线： 通过 Docker 容器化部署到云端，评审打开链接即可体验，无需本地搭建环境。
4. 产品创作历程
灵感来源： 当了爸爸之后，心境变了很多。陪着孩子从牙牙学语到开口说话、从听不懂指令到能回应你，那种看着孩子一点点长大的成就感，让我开始共情孤独症孩子的家长——他们一定也盼着自己的孩子能一步步学会这些我们以为"自然而然"的事。陪伴自己孩子的过程里我也常常手忙脚乱，不知道怎么教才对，这让我意识到：很多家长不是不想教，是不知道怎么教。中国自闭症谱系障碍儿童超过 300 万，持证康复师仅约 5.8 万人，供需比 1:27，专业康复每月数千至数万元，偏远地区家庭几乎没有资源。我想做一个工具，既教孩子社交，也教家长怎么引导。
想解决的问题：
-
专业资源极度稀缺，绝大多数孩子无法获得足够的专业干预
-
家长缺乏科学的方法和结构化的引导工具，只能凭感觉摸索
-
居家训练缺乏结构化场景和评估体系，训练效果难以持续跟踪
-
训练效果难以量化，孩子的进步全靠主观判断
-
群体数据缺失，没有系统性的数据采集手段来反映 ASD 干预的整体覆盖和效果
5. 产品演示视频
[待填写链接]
图片留白：多端协同架构图（准备中）
6. TRAE 实践过程
以下是使用 TRAE 完成星芽三端系统开发的完整旅程。从概念到落地，全部在 TRAE 中完成。只展示复赛阶段开发过程。
初赛demo阶段实践过程，请参考：
阶段一：Web 端训练助手后端服务研发（xingya-ui）
做了什么： 这是整个系统的核心端，承载最丰富的训练场景。使用 TRAE 的设计生成能力，按以下流程推进：
-
生成项目外壳（project-shell），定义了 Web 端的整体布局结构——左侧固定导航栏 + 主内容区，设定了单色极简设计系统（brand-900 主色、Geist 字体、border-first 组件、12px 圆角卡片）。
-
采用生成树结构，根节点为 project-shell，每个训练场景作为 page-leaf 节点独立生成。共完成 9 个社交训练场景页面 + 首页、场景库、自定义场景、进度追踪、孩子档案、偏好设置等共 14 个页面。
-
通过 TRAE 的交互编排能力，定义了页面间的导航关系和跳转逻辑，场景库可直达任意训练场景，每个场景完成后可返回首页或查看进度。
-
复赛阶段新增后端服务：搭建了 Node.js + Express 后端，SQLite 数据库，JWT 认证体系，AI 对话 API，以及 20+ 个业务接口，让前端页面从静态展示变成真实可用的产品。
关键对话 Session ID：2789925770498656:928b9778567abd3a6c2e692a08824c8d_6a608c70d24feb879c86ee9b.6a608e2ad24feb879c86ef14.6a608e2ad24feb879c86ef12:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/22 17:32:26)
阶段二：移动端训练助手后端服务研发（xingya-mobile）
做了什么： 在 Web 端设计系统基础上，派生移动端版本。移动端和 Web 端一样是训练入口，但交互方式不同——Web 端是点击互动式的丰富场景，移动端采用消息对话式的简易交互，像聊天一样就能完成训练，核心优势是便捷和设备成本低。
开发重点：
-
从 xingya-ui 继承单色极简设计系统（同样的 brand-900 主色、Geist 字体、border-first 组件语言），保持品牌一致性。
-
将左侧导航栏改为底部 Tab Bar（首页/训练/进度/场景库 + 更多入口），控件高度调整为 36px-44px 适配触控，圆角按钮改为 full 胶囊形。
-
训练核心页面采用聊天对话流布局，孩子像发消息一样和 AI 进行社交练习。
-
复赛阶段接入后端 API，实现了用户认证、训练数据同步、进度追踪、偏好配置等完整功能，不再是纯静态页面。
关键对话 Session ID：2789925770498656:c2abe286f445a04f0a78b3ac47dd88b3_6a608c70d24feb879c86ee9b.6a631af6b4c4d82f6823402a.6a631af5b4c4d82f68234028:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/24 15:57:42)
阶段三：数据分析看板后端服务研发（xingya-dashboard）
做了什么： 这是系统中最"广"的一端，面向研究人员和管理者。开发重点是在继承设计语言的同时，扩展数据可视化能力：
-
复用 xingya-ui 的单色灰色 UI 框架（brand-900 侧边栏、Geist 字体、border-only 卡片），保持系统视觉统一。
-
UI 框架保持单色，但图表区域引入多色调色板（green=正向、red=负向、多色用于数据分类），在信息密度高的看板中保证可读性。
-
生成 5 大看板页面：数据概览、孩子分析、训练数据、地域分布、趋势报告。
-
搭建独立管理员认证体系（admin_users 表 + JWT 认证），与 Web/H5 用户系统分离。
-
开发 9 个分析 API 接口（概览指标、训练趋势、孩子详情、训练数据、地域分布、月度趋势、月度对比、孩子列表、场景统计），所有看板数据来自真实数据库而非 Mock。
关键对话 Session ID：2789925770498656:ba00304a16d8448ad16eefe2be29d9fb_6a608c70d24feb879c86ee9b.6a6456a9531087d18d206c7a.6a6456a9531087d18d206c78:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/25 14:24:41)
6. 技术方案分享
6.1 整体技术架构
┌──────────────────────────────────────────────────────────────┐
│ 前端 (HTML/CSS/JS) │
│ 14 个 Web 页面 + 8 个 H5 页面 + 5 个看板页面 │
│ 极简设计系统 · Lucide Icons · Tailwind CSS · ECharts │
├──────────────────────────────────────────────────────────────┤
│ RESTful API (Node.js + Express) │
│ 8 个路由模块 · 20+ 个 API 接口 · JWT 双认证体系 │
│ /api/auth · /api/children · /api/training · /api/progress │
│ /api/preferences · /api/scenes · /api/analytics · /api/admin │
├──────────────────────────────────────────────────────────────┤
│ SQLite 数据库 (better-sqlite3) │
│ users · children · scenes · training_records · preferences │
│ custom_scenes · admin_users · WAL 模式 · 外键约束 │
├──────────────────────────────────────────────────────────────┤
│ AI 服务 (OpenAI) │
│ deepseek-v4-flash · 训练对话生成 · 降级到预置 Prompt 数据 │
└──────────────────────────────────────────────────────────────┘
6.2 技术选型与理由
| 层级 | 技术选型 | 选型理由 |
|---|---|---|
| 前端基础 | 原生 HTML/CSS/JS（无框架） | 无构建工具依赖，零门槛部署，适合 TRAE 对话式生成页面 |
| CSS 工具 | Tailwind CSS Browser Runtime (CDN) | 浏览器端运行时，无需构建步骤，通过工具类快速实现布局 |
| 图标库 | Lucide Icons (CDN) | 开源、轻量、与极简设计风格匹配 |
| 图表库 | ECharts (CDN) | 看板端数据可视化，支持雷达图、热力图、趋势图等多种图表类型 |
| 后端框架 | Express.js | 轻量、灵活、生态成熟，适合快速搭建 RESTful API |
| 数据库 | SQLite + better-sqlite3 | 零配置、嵌入式、无需单独数据库服务，部署简单；better-sqlite3 提供同步 API，代码简洁 |
| 认证 | JWT (jsonwebtoken + bcryptjs) | 无状态认证，适合前后端分离的多端架构 |
| AI 对接 | OpenAI + deepseek-v4-flash | 性价比高，响应快，适合训练场景的实时对话生成 |
| 部署 | Docker + Docker Compose | 一键部署，环境一致，支持开发/生产双模式 |
6.3 关键实现思路
设计系统：三层 CSS 变量体系
整个项目采用自研的三层 CSS 变量架构，而非直接使用 Tailwind 主题：
- Layer 1 — Primitives（基础色板）： 10 阶品牌色
--brand-50~--brand-900，覆盖背景色、文字色、图标色 - Layer 2 — Semantic Roles（语义角色）：
--background、--card、--foreground、--primary、--border等，分 Light/Dark 两套值 - Layer 3 — Alias Layer（组件别名）：
--color-surface、--color-text、--color-primary等，延迟解析，自动继承主题覆盖
这种三层架构让每个页面只需复制一份 <style id="theme-vars"> 即可独立运行，同时保持设计一致性。三端（Web、H5、看板）共享同一套 Token 体系，视觉统一。
多页面导航：data-dom-id 映射机制
项目采用纯 MPA（多页面应用）架构，不使用前端路由。通过 navigation.js 中的 navMap 对象，将 DOM 元素的 data-dom-id 属性映射到目标页面路径，所有页面跳转通过 window.location.href 完成。这个设计的优点是：每个页面独立加载，不依赖 SPA 框架，页面间耦合度极低，TRAE 可以逐页生成和修改，不影响其他页面。
训练交互引擎：步骤驱动的状态机
训练场景的核心交互采用步骤驱动的状态机模型。每个场景包含 8 个步骤，每步包含 AI 对话文本、选项数组（含正确/错误标记）、反馈文本、家长提示。点击选项后，引擎通过 handleOptionClick() 处理状态转换：高亮选中 → 记录反馈 → 800ms 延迟 → 自动进入下一步。isTransitioning 防抖锁防止快速连点，feedbackHistory 数组完整记录答题轨迹，训练结束时用于生成评分报告。
后端模块化：Routes + Services 分层
后端采用 Routes（路由层）+ Services（服务层）的分层架构。路由层负责 HTTP 请求参数校验、JWT 认证、响应格式化；服务层封装所有 SQL 查询逻辑，接收 db 实例和参数，返回纯数据。这种分离让数据分析看板的 9 个 API 接口可以复用底层数据库查询，同时也让 progress 路由和分析路由共享同一套统计逻辑，避免代码重复。
多端认证：双 JWT 体系
系统采用两套独立的 JWT 认证体系：Web 端和 H5 端共用 authMiddleware（验证 users 表），数据分析看板使用 adminAuthMiddleware（验证 admin_users 表）。两套体系互不干扰，确保敏感数据只能由授权管理员访问，而普通家长用户无法越权查看群体数据。
AI 对话降级策略
训练对话生成对接 OpenAI deepseek-v4-flash，但在 API 不可用时自动降级到预置的 Prompt 数据。每个训练场景在 training-*.html 中预置了完整的 8 步对话数据，即使 AI 服务中断，核心训练流程仍可正常运行。降级策略保证了产品在弱网或无 AI 服务环境下的可用性。
7. 社会价值与商业化分析
7.1 社会价值：每一份资源都值得被放大
中国自闭症谱系障碍儿童超过 300 万，而持证康复师仅约 5.8 万人，供需比 1:27。这意味着绝大多数孩子终其一生都无法获得足够的专业干预。专业康复机构每月费用数千至数万元，偏远地区家庭几乎没有获取资源的渠道。星芽的社会价值不在于"替代"康复师，而在于把有限的专业资源放大——
- 降低干预门槛： 一部手机就能完成基础社交训练，不需要预约、不需要排队、不需要高昂费用。对于偏远地区家庭，这是从"零"到"一"的改变。
- 为家长赋能： 每个训练场景都附带家长引导提示，告诉家长在真实场景中如何辅助孩子。这不只是教孩子，更是在教家长怎么教。
- 数据驱动决策： 看板端从个体到群体的数据分析，可以帮助研究者了解 ASD 干预的整体覆盖情况，帮助公益组织精准投放资源，帮助政策制定者量化评估干预效果。
- 政策红利对齐： 31 个省份已将 ASD 行为干预纳入医保，国家持续推进 AI+特殊教育融合。星芽的方向与政策方向高度一致。
7.2 商业化路径：社会价值优先，可持续运营并重
星芽的使命是社会价值驱动的，但可持续运营需要清晰的商业模式。我们规划了三条路径：
| 路径 | 模式 | 目标用户 | 说明 |
|---|---|---|---|
| B2C 基础免费 | Freemium | 个人家长 | 每天 2 次免费训练，付费解锁不限次数 + 高级场景 + AI 个性化报告 |
| B2B 机构合作 | SaaS 订阅 | 康复机构、特教学校 | 多孩子管理、批量训练报告、机构专属看板、按孩子数量阶梯定价 |
| B2G 公益采购 | 政府采购 / 公益捐赠 | 残联、公益基金会 | 面向偏远地区免费投放，政府或公益组织按覆盖人数采购，实现普惠 |
市场规模参考： 中国 3-12 岁 ASD 儿童约 300 万，按 10% 付费渗透率、年均 600 元计算，B2C 市场规模约 1.8 亿元。全国特教学校约 2300 所，康复机构超过 5000 家，B2B 市场空间同样可观。但我们的核心原则是：基础训练功能永不收费，确保最需要帮助的家庭不会被价格挡在门外。
8. 产品迭代规划
星芽当前处于从 Demo 到可用产品的过渡阶段。未来迭代分为三个阶段：
短期（1-3 个月）：打磨核心体验
- 语音交互： 将文本对话升级为语音对话，孩子不需要识字也能参与训练。ASD 儿童中有相当比例存在阅读困难，语音交互能显著降低使用门槛。
- 训练场景扩展： 从 9 个场景扩展到 20+ 个，覆盖更多真实生活情境（如拨打急救电话、乘坐地铁、参加集体活动）。
- 家长社区： 搭建家长交流社区，分享训练经验、互相鼓励。研究表明，家长的心理支持对 ASD 干预效果有显著正向影响。
- 移动端体验优化： 优化消息对话流的动画和反馈，让移动端训练体验更接近真正的聊天应用。
中期（3-6 个月）：深化专业能力
- 治疗师协作面板： 为康复师和特教老师提供专属工作台，支持远程查看孩子训练数据、布置训练任务、调整训练计划。让有限的专业资源通过"远程督导 + AI 辅助"的模式覆盖更多家庭。
- IEP 对接： 支持导入和追踪个别化教育计划（IEP），将训练目标与 IEP 里程碑对齐，自动生成 IEP 进展报告。
- 小程序版本： 开发微信小程序，降低分发和获取成本。微信生态是家长群体的主要聚集地，小程序能大幅降低获客和留存门槛。
- 多语言支持： 先覆盖英语，为海外华人家庭和东南亚市场做准备。
长期（6-12 个月）：构建平台生态
- AI 个性化训练计划： 基于每个孩子的能力水平、训练历史和学习偏好，由 AI 生成个性化的训练方案和进度节奏。从"所有人练同一套题"升级为"每个孩子有自己的学习路径"。
- 全国 ASD 干预数据平台： 在看板端基础上，联合康复机构和公益组织，构建匿名的全国 ASD 干预效果数据库，为政策制定和学术研究提供数据支撑。
- 开放场景平台： 允许康复师和家长创建和分享训练场景，形成社区驱动的场景内容生态。
- 硬件联动： 探索与可穿戴设备（如心率监测手环）的联动，采集训练过程中的生理数据，辅助评估孩子的情绪状态和焦虑水平。