7.7 UI/UX Skills 实例

在上一章节 Agent Skills（智能体技能）中我们已经了解了 Skills 的基本概念，本章节我们将结合一个具体的 Skills 来开发一个项目。

现在市面上已经有很多现成的 skills，我么可以直接拿来使用，我们可以在 https://skills.sh/ 查找更多的 skill。

安装方式：
npx skills add <owner/repo>
npx 安装 ui-ux-pro-max 可参考：OpenCode skills 使用。
注：如果对 npx 不了解，可以参阅：npx 入门教程

本章节我们将介绍一个支持多平台、多框架的专业级 UI/UX SKILL 插件 - UI UX Pro Max。

UI UX Pro Max 旨在为跨平台和多框架开发提供专业的 UI/UX 设计智能支持。

UI UX Pro Max 本质上是一个可检索的设计数据库，包含样式、色板、字体、组件建议及 UX 准则，专门喂给 Cursor、Claude Code、Windsurf等这些 AI 编码助手。

核心亮点：

67 种 UI 风格（从 Minimalism 到 Brutalism、Glassmorphism、Bento Grid、AI-Native 等）
96 个行业调色盘（SaaS、Fintech、Healthcare、Beauty、EdTech…）
57 组字体搭配（Google Fonts 精选组合）
25 种常用图表类型（适合 dashboard）
99 条 UX 指导原则（包含可访问性、性能、交互规范）
100 条行业专项推理规则（包含反面模式 Anti-patterns）
支持 13 个技术栈：React / Next.js / Vue / Tailwind / Flutter / SwiftUI / HTML+CSS / Electron 等

工作原理：

提出需求：构建、设计、实现、优化或评审 UI / UX
技能自动触发：AI 会在内部搜索 UI 风格、配色、字体和 UX 规范数据库
智能设计推荐：根据产品类型与使用场景匹配合适的设计体系
直接生成代码：按最佳实践输出包含正确配色、字体、间距和结构的 UI 实现

开源地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

官方文档：https://ui-ux-pro-max-skill.nextlevelbuilder.io/

安装方式

1、通过 Claude Marketplace（Claude Code）安装

在 Claude Code 中执行以下两条命令即可直接安装。

注册插件市场源：

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

安装插件：

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

安装成功后重启 Claude Code 就可以使用了:

2、使用 CLI（推荐）

全局安装 CLI：

npm install -g uipro-cli

# 进入你的项目目录
cd /path/to/your/project

# 为对应 AI 助手安装
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity (.agent + .shared)
uipro init --ai copilot     # GitHub Copilot
uipro init --ai kiro        # Kiro
uipro init --ai codex       # Codex CLI
uipro init --ai qoder       # Qoder
uipro init --ai roocode     # Roo Code
uipro init --ai gemini      # Gemini CLI
uipro init --ai trae        # Trae
uipro init --ai all         # 所有助手

3、其他 CLI 命令：

uipro versions              # 查看可用版本
uipro update                # 更新到最新版本
uipro init --version v1.0.0 # 安装指定版本

2、使用 npx

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

5、安装指定版本

安装完后，假设在 Claude 中使用，执行以下命令：

uipro init --ai claude

搜索脚本需要使用 Python 3.x：

# 查看 Python  是否已经安装
python3 --version

# macOS
brew install python3

# Ubuntu/Debian
sudo apt update && sudo apt install python3

# Windows
winget install Python.Python.3.12

安装完成后输出如下：

然后启用输入命令进入 Claude：

claude

我们可以使用 /plugin 命令查看已经安装的创建：

按 Esc 按键退出。

注意：通过插件安装的 Skill，目录放在～/.claude/plugins/marketplaces。

如何使用

接下来我们就可以直接输入需求：

为宠物美容服务搭建一个着陆页，风格活泼亲和，并设置预约类行动召唤按钮。

会提示是否使用我们安装的 skill 来设计，一路回车就好了：

一路回车就好了，会提示完成的功能：

然后查看最终效果，好看很多：