SuperAPI AI 工具集

ui-orchestrator

设计与创作

查看项目

更新于 10-15 08:13

技能介绍

用途

UI Orchestrator 是一个 UI/UX 技能调度器,用于在进行 UI/UX 设计、界面开发或设计系统工作时,选择并路由到适用的专门外部 Skill。它本身不复制外部 Skill 的具体规则,而是负责检测项目需求、检查目标 Skill 是否已安装,并将任务分派给合适的 Skill。

该工具接受中文和英文提问,并始终使用中文回复。

主要能力

外部 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

设计哲学光谱

从保守/安全到大胆/创意,对应不同 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 任务。

使用示例

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

适用场景

  • SwiftUI (iOS/macOS) 开发
  • Web (React/Vue/HTML) 界面开发
  • Flutter/Compose 开发
  • 新项目设计系统搭建
  • 代码审查、无障碍修复、动画性能修复
  • 营销着陆页、品牌官网、创意作品集设计
  • 企业内部系统、Dashboard 设计

约束

调度约束:

  • 必须先检测目标 Skill 是否存在
  • 禁止复制外部 Skill 的具体规则

路由约束:

  • SwiftUI 项目 → 必须路由到 swiftui-expert-skill
  • 创意/营销项目 → 优先 frontend-design
  • 企业/内部项目 → 优先 baseline-ui
  • 新项目设计系统 → 优先 ui-ux-pro-max

组合使用约束:

  • 创意项目完成后,建议使用 baseline-ui 审查

Skill 协作

场景 协作 Skill 说明
开发阶段 /dev-workflow 被调用:UI 任务开发时
代码审查 /code-quality 协作:UI 代码质量检查
测试阶段 /testing-guide 协作:UI 组件测试

限制

资料未提供该工具自身的收费、价格、平台支持范围、性能效果等具体信息,暂未提供。