Agent之Skill：ui-ux-pro-max-skill的简介、安装和使用方法、案例应用之详细攻略
目录
[方法一：通过 Claude Marketplace 安装](#方法一：通过 Claude Marketplace 安装)
[方法二：通过 CLI 安装（推荐）](#方法二：通过 CLI 安装（推荐）)
[（1）Skill Mode（自动激活）](#（1）Skill Mode（自动激活）)
[（2）Workflow Mode（命令调用）](#（2）Workflow Mode（命令调用）)
[案例一：自动生成项目设计系统---为 SaaS Dashboard 自动生成 Design System](#案例一：自动生成项目设计系统—为 SaaS Dashboard 自动生成 Design System)
[案例二：生成页面级设计规范---为 Dashboard 页面创建专属设计规则](#案例二：生成页面级设计规范—为 Dashboard 页面创建专属设计规则)
[案例三：通过自然语言生成专业 UI---使用自然语言构建 Landing Page](#案例三：通过自然语言生成专业 UI—使用自然语言构建 Landing Page)
ui-ux-pro-max-skill的简介
UI UX Pro Max Skill 是一个开源的 AI Design Skill，旨在为 AI Coding Assistant 提供专业的 UI/UX 设计智能（Design Intelligence），帮助开发者在多个平台和技术栈上快速构建专业级用户界面。项目通过内置设计知识库、推理规则、设计系统生成能力以及多平台集成，使 AI Assistant 在生成 UI 时能够基于结构化设计知识进行推理，而不仅依赖模型本身。
项目的核心能力是 Design System Generator（设计系统生成器）。该功能能够根据项目需求自动分析业务类型，并生成完整的设计系统，包括颜色体系、字体组合、组件规范、间距规则、图表类型及 UX 指南等内容。同时支持将设计系统保存到项目目录，作为整个项目的统一设计规范（Source of Truth），后续页面开发均可基于该规范持续生成一致的界面。
除设计系统外，项目还内置了大量设计资源，包括 67 种 UI 风格、161 套颜色方案、57 组字体搭配、25 种图表类型、99 条 UX 指南、161 条行业设计推理规则，并支持 React、Next.js、Vue、Flutter、React Native、SwiftUI、Angular 等多种开发技术栈。同时，Skill 可集成到 Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot、Windsurf 等多个 AI 编程助手中，实现统一的 UI/UX 智能设计体验。
1 、特点
|---------------------------------|------------------------------------------------------------------------------------------------------------------|
| 特点 | 详细说明 |
| Design System Generator | 自动分析项目需求，生成完整设计系统，包括颜色、字体、组件、间距等设计规范。 |
| 丰富 UI 风格 | 内置 67 种 UI 风格，如 Glassmorphism、Claymorphism、Minimalism、Brutalism、Neumorphism、Bento Grid、Dark Mode、AI-Native UI 等。 |
| 行业颜色体系 | 提供 161 套行业颜色方案，与产品类型一一对应。 |
| 字体搭配 | 提供 57 组精选字体组合，并包含 Google Fonts 导入配置。 |
| 图表推荐 | 内置 25 种图表类型，用于 Dashboard 与数据可视化设计。 |
| 多技术栈支持 | 支持 React、Next.js、Astro、Vue、Nuxt、Flutter、React Native、SwiftUI、Angular、Laravel 等 15 种技术栈。 |
| UX 最佳实践 | 内置 99 条 UX 指南，覆盖最佳实践、反模式及可访问性规则。 |
| 行业推理规则 | 提供 161 条行业设计推理规则，根据不同业务自动生成适配设计系统。 |
| 多 AI 平台集成 | 支持 Claude Code、Cursor、Windsurf、GitHub Copilot、Codex CLI、Gemini CLI、Continue、OpenCode 等多个 AI Assistant。 |
| 层级设计系统 | 支持 MASTER.md 与页面级 Design System，实现全局设计规范和页面局部覆盖。 |
ui-ux-pro-max-skill的安装和使用方法
1、安装
方法一：通过 Claude Marketplace 安装
执行以下命令：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill安装完成后，即可在 Claude Code 中使用该 Skill。
方法二：通过 CLI 安装（推荐）
项目要求本地安装 Python 3.x，用于执行设计搜索脚本。
首先安装 CLI：
npm install -g uipro-cli
进入项目目录：
cd /path/to/your/project
根据所使用的 AI Assistant 初始化 Skill，例如：
uipro init --ai claude
或安装到其他平台：
uipro init --ai cursor
uipro init --ai windsurf
uipro init --ai codex
uipro init --ai gemini
uipro init --ai copilot
如需全局安装，可执行：
uipro init --ai claude --global
CLI 还支持更新、离线安装及卸载等操作：
uipro versions
uipro update
uipro init --offline
uipro uninstall2、使用方法
项目支持两种使用方式。
（1）Skill Mode（自动激活）
对于 Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI、Continue、OpenCode 等平台，当用户提出 UI/UX 相关请求时，Skill 会自动激活，例如：
Build a landing page for my SaaS productSkill 会自动识别设计需求，并结合内置设计数据库生成设计建议及代码。
（2）Workflow Mode（命令调用）
对于 Kiro、GitHub Copilot、Roo Code 等平台，可通过 Slash Command 调用：
/ui-ux-pro-max Build a landing page for my SaaS product随后 Skill 会执行设计推理，并输出设计系统及对应实现建议。此外，还可以手动生成并保存设计系统，例如：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
"SaaS dashboard" \
--design-system \
--persist \
-p "MyApp"执行后将在项目中生成：
design-system/
├── MASTER.md
└── pages/
└── dashboard.md其中 MASTER.md 保存全局设计规范，页面文件用于记录特定页面的覆盖规则。
ui-ux-pro-max-skill的案例应用
案例一：自动生成项目设计系统 --- 为 SaaS Dashboard 自动生成 Design System
项目提供 Design System Generator，可根据需求自动分析业务类型，并生成完整设计系统。执行：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
"SaaS dashboard" \
--design-system \
--persist \
-p "MyApp"生成后将在 design-system/MASTER.md 中保存全局颜色体系、字体规范、组件规则及布局标准，为整个项目提供统一设计基准。
案例二：生成页面级设计规范 --- 为 Dashboard 页面创建专属设计规则
在已有全局设计系统基础上，可执行：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
"SaaS dashboard" \
--design-system \
--persist \
-p "MyApp" \
--page "dashboard"生成 design-system/pages/dashboard.md，用于保存该页面相对于 MASTER.md 的局部覆盖规则。当构建 Dashboard 页面时，Skill 会优先读取页面级规则，再回退至全局设计系统，实现层级化设计管理。
案例三：通过自然语言生成专业 UI --- 使用自然语言构建 Landing Page
在支持 Skill Mode 的 AI Assistant 中输入：
Build a landing page for my SaaS productSkill 会自动识别 UI/UX 请求，结合内置的 UI 风格、颜色方案、字体搭配、UX 指南及行业推理规则，生成符合项目需求的设计建议，并输出相应代码，实现从自然语言到专业 UI 的自动化设计流程。