UI/UX Pro Max | AI 全能设计技能教程

v2.0 新功能

智能设计系统生成器

旗舰更新：AI 会分析你的项目需求，自动生成包含模式、风格、颜色、字体、动效、反模式和交付检查清单的完整设计系统。

从一句需求到完整设计决策

例如“为美容水疗中心做着陆页”，系统会匹配服务行业规则，推荐 Hero-Centric + Social Proof 页面结构、Soft UI Evolution 风格、柔和粉/鼠尾草绿/金色调色板，以及优雅的 Cormorant Garamond / Montserrat 字体组合。

5 路并行检索：产品类型、UI 风格、配色、页面模式、字体
BM25 排名与条件规则结合，过滤行业反模式
输出预交付检查清单：对比度、焦点态、动效降级、响应式尺寸

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "beauty spa wellness" --design-system -p "Serenity Spa"

核心特性

什么是 UI/UX Pro Max?

一个专为 AI 编码助手打造的设计智能系统。v2.0 新增设计系统生成器，可根据产品类型并行检索风格、配色、排版、落地页模式和反模式。

67 种 UI 风格

从玻璃拟态 (Glassmorphism) 到粘土拟态 (Claymorphism)，从极简主义 (Minimalism) 到野兽派 (Brutalism)，以及新拟态 (Neumorphism)、Bento Grid、深色模式等。

161 种配色方案

与 161 种产品类型一一对齐的行业专属配色：SaaS、金融科技、医疗健康、电商、服务业、创意和新兴科技。

57 种字体配对

精心策划的 Google Fonts 排版组合，自动处理字体导入和排版层次结构。

25 种图表类型

为仪表盘和数据分析场景提供最科学的可视化建议，让数据呈现更专业。

22 种技术栈支持

React、Next.js、Astro、Vue、Nuxt、Angular、Laravel、Three.js、Jetpack Compose、桌面平台等主流框架专属指南。

161 条行业推理规则

为科技、金融、医疗、电商、服务、创意、生活方式和新兴科技提供产品类型专属设计决策。

快速开始

安装指南

选择最适合你的安装方式，为你的 AI 助手注入设计灵魂

# 全局安装 CLI 工具
npm install -g ui-ux-pro-max-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 gemini      # Gemini CLI
uipro init --ai opencode    # OpenCode
uipro init --ai continue    # Continue
uipro init --ai warp        # Warp
uipro init --ai all         # 所有 AI 助手

其他 CLI 命令

uipro versions              # 列出可用版本
uipro update                # 从已安装 CLI 包刷新技能文件
uipro init --offline       # 使用随包模板离线安装
uipro uninstall             # 卸载自动检测到的平台
uipro uninstall --global    # 移除全局安装

Claude Code 可直接通过 Marketplace 安装：

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

v2.0 起平台文件由 CLI 模板动态生成；如果你更喜欢手动安装，请优先参考上游仓库对应目录，或使用 CLI 获得最新结构。常见路径如下：

AI 助手	需要复制的文件夹
Claude Code	`.claude/skills/ui-ux-pro-max/`
Cursor	`.cursor/commands/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/`
Windsurf	`.windsurf/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/`
Antigravity	`.agent/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/`
GitHub Copilot	`.github/prompts/ui-ux-pro-max.prompt.md` + `.shared/ui-ux-pro-max/`
Kiro	`.kiro/steering/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/`

前置条件

搜索脚本需要 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

使用方法

如何使用

根据你使用的 AI 助手，选择对应的激活方式

Claude Code

技能会自动激活。像平时一样自然对话即可：

为我的 SaaS 产品构建一个着陆页

自动激活平台

Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid、KiloCode、Warp、Augment 会在 UI/UX 请求中自动激活：

为金融科技银行 App 设计深色主题界面

斜杠命令平台

Kiro、GitHub Copilot、Roo Code、KiloCode 可用斜杠命令显式调用：

/ui-ux-pro-max 为我的电商应用设计移动端 UI

Trae SOLO 模式

Trae 用户请先切换到 SOLO 模式，再用自然语言提出 UI/UX 需求。

为我的电商应用制作移动端 UI

💡 示例提示词

为我的 SaaS 产品构建一个着陆页

创建一个医疗分析仪表盘

设计一个具有深色模式的个人作品集网站

为电商应用制作一个移动端 UI

工作原理

它是如何运作的?

从提问到交付检查，v2.0 现在是五步

1

你提问

请求任何 UI/UX 任务：构建、设计、创建、实现、审查、修复、改进

2

生成设计系统

AI 通过推理引擎生成页面模式、风格、颜色、字体、动效和反模式

3

智能推荐

根据你的产品类型和需求，找到最匹配的设计系统

4

代码生成

使用正确的颜色、字体、间距和最佳实践实现 UI

5

交付检查

检查点击态、键盘焦点、对比度、动效降级和响应式断点

技术栈支持

支持的技术栈

该技能为以下所有技术栈提供专属的设计指南

HTML + Tailwind

React

Next.js

Vue

Svelte

SwiftUI

React Native

Flutter

Astro

Angular

Laravel

Three.js

JavaFX

WPF / WinUI / UWP

只需在提示词中提及你偏好的技术栈，或默认使用 HTML + Tailwind。