Chromatic（幻彩工坊） 是一个专注于前端 UI/UX 设计的专家团队，融合了顶级视觉审美、人机交互体验与工程落地能力。
核心理念：如果用户没有指定风格，我们将根据软件的功能属性，自动推导出最契合的顶级审美方案。
通过斜杠命令调用协调器，团队会自动分析需求并分配合适的专家：
/chromatic-coordinator 帮我设计一个电商后台管理系统的界面
/chromatic-coordinator 审查 localhost:3000 的 UI 有没有问题
/chromatic-coordinator 为我的金融科技 App 设计一套配色方案
chromatic-coordinator（入口层）
├── chromatic-prism（视觉主理人）
├── chromatic-flow（体验架构师）
├── chromatic-spark（交互魔术师）
├── chromatic-pixel（工程落地官）
├── chromatic-grid（设计系统管理员）
└── chromatic-lens（质量检测员）
| 专家 | 代号 | 核心职责 | 座右铭 |
|---|---|---|---|
| 视觉主理人 | Prism | 定义产品"灵魂"：色彩心理学、排版、视觉层级、风格选择 | "颜值即正义，每一像素都需呼吸" |
| 体验架构师 | Flow | 定义产品"骨架"：信息架构、F型动线、拇指热区、无障碍设计 | "不要让用户思考" |
| 交互魔术师 | Spark | 定义产品"触感"：Hover状态、加载动画、页面转场 | "静止是死亡，运动是生命" |
| 工程落地官 | Pixel | 定义产品"肉身"：HTML/CSS代码、Tailwind、React/Vue组件 | "设计图还原度100%，不仅要美，还要快" |
| 设计系统管理员 | Grid | 定义产品"法律"：Design Tokens、颜色变量、圆角、间距系统 | "秩序产生美" |
| 质量检测员 | Lens | 定义产品"品质"：浏览器自动化审查、截图分析、无障碍合规 | "透过透镜，看清每一个像素的真相" |
1. Prism & Flow → 分析软件功能，定调"情绪板"和"布局结构"
2. Grid → 设定基础参数（配色盘、字体栈）
3. Spark → 描述交互亮点
4. Pixel → 生成可直接使用的代码（默认 Tailwind CSS）
5. Lens → 质量审查（浏览器自动化/截图分析/代码审查）
| 模式 | 流程 | 适用场景 |
|---|---|---|
| 单专家 | 协调器 → 专家A → 返回 | 视觉定调、布局设计、交互动效、质量审查 |
| 链式协作 | 协调器 → Prism → Flow → Grid → Spark → Pixel → Lens | 完整 UI 方案 |
| 顾问支持 | 主专家 ←→ Grid 顾问 | 需要设计系统支持的任务 |
| 终审模式 | 设计完成 → Lens 审查 → 反馈修复 | 交付前质量把关 |
| 任务类型 | 关键词 | 主导专家 | 协作模式 |
|---|---|---|---|
| 视觉定调 | 风格、配色、审美、色彩、情绪板 | Prism | 单专家 |
| 布局设计 | 布局、UX、信息架构、动线、无障碍 | Flow | 单专家 |
| 交互动效 | 动画、交互、hover、转场、微交互 | Spark | 单专家 |
| 代码实现 | 前端、组件、Tailwind、HTML/CSS、React | Pixel | 链式 |
| 设计系统 | Design Token、一致性、规范、配色盘 | Grid | 顾问支持 |
| 质量审查 | 审查、检查、评审、合规、截图分析 | Lens | 终审模式 |
| 完整设计 | UI设计、页面设计、视觉方案 | 全员 | 链式+审查 |
团队默认采用智能匹配策略：
| 软件类型 | 设计风格 |
|---|---|
| 企业后台 | 清晰、高对比度、Bento Grid 布局 |
| 创意落地页 | 大字体、视差滚动、高饱和度 |
| 移动工具 | 极简、圆角大按钮、底部导航 |
| 数据仪表盘 | 深色主题、数据可视化、卡片布局 |
每个设计项目交付包含：
- 设计概念阐述 - 风格定调、配色方案、布局策略、交互亮点
- 最终落地代码 - React/Vue + Tailwind CSS，可直接复用
- Design Tokens - 颜色变量、间距系统、字体栈
- 质量审查报告 - 问题清单、评分、修复建议（可选）
详见 INSTALL.md
chromatic-team/
├── README.md
├── INSTALL.md
├── agents/
│ ├── chromatic-prism.md # 视觉主理人
│ ├── chromatic-flow.md # 体验架构师
│ ├── chromatic-spark.md # 交互魔术师
│ ├── chromatic-pixel.md # 工程落地官
│ ├── chromatic-grid.md # 设计系统管理员
│ └── chromatic-lens.md # 质量检测员
└── skills/
└── chromatic-coordinator/
└── skill.md # 团队协调器
- 🎉 升级到4.0团队规范
- ✅ 使用新模版重构协调器和专家配置
- 📚 优化信息传递机制和MCP授权规范
- 🔧 完善质量标准和响应检查清单
- 🎉 团队配置更新到最新版本
- ✅ 优化了协调器和专家代理配置
- 📚 完善了安装指南和使用文档