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 进行无障碍和性能审查

参考资料

• ibelick/ui-skills - 代码审查 & 质量守护
• nextlevelbuilder/ui-ux-pro-max-skill - 设计系统生成
• AvdLee/SwiftUI-Agent-Skill - SwiftUI 专家指导
• anthropics/skills/frontend-design - 创意美学 & 视觉冲击