UI Orchestrator
UI/UX 技能调度器，根据项目需求路由到专业的外部 Skill。
Language
- Accept questions in both Chinese and English
- Always respond in Chinese
外部 Skill 清单
| Skill | 定位 | 适用场景 | 安装命令 |
|---|
baseline-ui | 代码审查 & 质量守护 | 企业内部系统、代码审查、性能优化 | npx skills add ibelick/ui-skills |
ui-ux-pro-max | 设计系统生成 & 决策引擎 | 行业垂直产品、Dashboard、新项目设计 | npm install -g uipro-cli && uipro init --ai claude |
frontend-design | 创意美学 & 视觉冲击 | 营销着陆页、品牌官网、创意作品集 | npx skills add anthropics/skills --skill frontend-design |
swiftui-expert-skill | SwiftUI 专家指导 | iOS/macOS SwiftUI 开发 | npx skills add https://github.com/avdlee/swiftui-agent-skill --skill swiftui-expert-skill |
设计哲学光谱
保守/安全 中性/平衡 大胆/创意
│ │ │
▼ ▼ ▼
baseline-ui ui-ux-pro-max frontend-design
"不出错" "符合行业" "令人难忘"
工作流程
1. 检测项目需求
│
├── 平台类型（Web / iOS / Android）
├── 项目性质（企业 / 创意 / 行业垂直）
└── 任务类型（新建 / 审查 / 修复）
│
▼
2. 检查 Skill 是否存在
│
├── 存在 → 路由到对应 Skill
└── 不存在 → 提示安装命令
│
▼
3. 执行对应 Skill
场景路由表
按平台路由
| 平台 | 首选 Skill | 备选 |
|---|
| SwiftUI (iOS/macOS) | swiftui-expert-skill | - |
| Web (React/Vue/HTML) | 见下方按任务路由 | - |
| Flutter/Compose | ui-ux-pro-max | - |
按任务路由（Web）
| 任务类型 | 首选 Skill | 理由 |
|---|
| 新项目设计系统 | ui-ux-pro-max | 生成完整设计系统 |
| 代码审查 | baseline-ui | 专为审查设计 |
| 修复无障碍 | baseline-ui (fixing-accessibility) | 最专业 |
| 修复动画性能 | baseline-ui (fixing-motion-performance) | 最深入 |
| 营销着陆页 | frontend-design | 需要视觉冲击力 |
| 品牌官网 | frontend-design | 需要独特识别度 |
| 企业内部系统 | baseline-ui | 稳定、可维护 |
| Dashboard | ui-ux-pro-max → baseline-ui | 功能性 + 质量保障 |
按项目性质路由
| 项目性质 | 推荐组合 | 使用顺序 |
|---|
| 创意/营销 | frontend-design → baseline-ui | 先创意，后审查 |
| 企业/行业 | ui-ux-pro-max → baseline-ui | 先设计系统，后质量 |
| 内部工具 | baseline-ui | 全程约束 |
Skill 检测
在调用外部 Skill 前，必须检测其是否已安装。
检测方法
# 检查 skills 目录（Claude Code / Codex / OpenCode）
for dir in ~/.claude/skills ~/.agents/skills; do
ls -la "$dir" 2>/dev/null | grep -E "(baseline-ui|ui-ux-pro-max|frontend-design|swiftui-expert)"
done
# 检查项目本地 skills
for dir in .claude/skills .agents/skills; do
ls -la "$dir" 2>/dev/null | grep -E "(baseline-ui|ui-ux-pro-max|frontend-design|swiftui-expert)"
done
未安装提示模板
**⚠️ 所需 Skill 未安装**
您需要的 `{skill-name}` 尚未安装。请运行以下命令安装：
{install-command}
安装完成后，请重新运行 UI 任务。
约束
调度约束
- 必须先检测目标 Skill 是否存在
- 不存在时必须提示安装命令
- 必须根据场景选择合适的 Skill
- 禁止复制外部 Skill 的具体规则
路由约束
- SwiftUI 项目 → 必须路由到
swiftui-expert-skill - 创意/营销项目 → 优先
frontend-design - 企业/内部项目 → 优先
baseline-ui - 新项目设计系统 → 优先
ui-ux-pro-max
组合使用约束
- 创意项目完成后，建议使用
baseline-ui 审查 - 设计系统生成后，建议使用
baseline-ui 确保质量
Skill 协作
| 场景 | 协作 Skill | 说明 |
|---|
| 开发阶段 | /devdocs-dev-workflow | 被调用：UI 任务开发时 |
| 代码审查 | /code-quality | 协作：UI 代码质量检查 |
| 测试阶段 | /testing-guide | 协作：UI 组件测试 |
使用示例
示例一：SwiftUI 开发
用户：帮我优化这个 SwiftUI 视图的性能
Claude：
1. 检测 Skill...
✅ swiftui-expert-skill 已安装
2. 路由到 swiftui-expert-skill 处理 SwiftUI 性能优化...
示例二：新项目设计系统
用户：我要做一个医疗行业的 SaaS 产品，帮我设计 UI
Claude：
1. 检测 Skill...
❌ ui-ux-pro-max 未安装
⚠️ 所需 Skill 未安装
您需要的 `ui-ux-pro-max` 尚未安装。请运行以下命令安装：
npm install -g uipro-cli && uipro init --ai claude
安装完成后，请重新运行 UI 任务。
示例三：营销着陆页
用户：帮我设计一个有视觉冲击力的产品着陆页
Claude：
1. 检测 Skill...
✅ frontend-design 已安装
2. 路由到 frontend-design 处理创意设计...
（设计完成后）
3. 建议：设计完成后，可使用 baseline-ui 进行无障碍和性能审查
参考资料
