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

核心特性

什么是 UI/UX Pro Max?

一个专为 AI 编码助手打造的可搜索设计数据库，为 Claude Code、Cursor、Windsurf 等提供设计智能。

57 种 UI 风格

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

95 种配色方案

行业专属配色：SaaS、电子商务、医疗健康、金融科技、美容护肤等各领域的专业级调色板。

56 种字体配对

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

24 种图表类型

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

8 种技术栈支持

React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind 等主流框架专属指南。

98 条 UX 准则

最佳实践、反模式纠正以及无障碍访问 (Accessibility) 规则，确保用户体验卓越。

快速开始

安装指南

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

# 全局安装 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 all         # 所有 AI 助手

其他 CLI 命令

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

如果你更喜欢手动安装，只需将对应的文件夹复制到你的项目中：

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 产品构建一个着陆页

Cursor / Windsurf / Antigravity

使用斜杠命令调用技能：

/ui-ux-pro-max 为我设计一个深色模式的仪表盘

Kiro

在聊天中输入 / 查看可用命令，然后选择 ui-ux-pro-max：

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

GitHub Copilot

在 VS Code 中，输入 / 查看可用提示词，选择 ui-ux-pro-max：

/ui-ux-pro-max 创建一个医疗数据分析仪表盘

💡 示例提示词

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

创建一个医疗分析仪表盘

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

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

工作原理

它是如何运作的?

从提问到生成代码，只需四步

1

你提问

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

2

技能激活

AI 自动在设计数据库中搜索相关的风格、配色、排版和准则

3

智能推荐

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

4

代码生成

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

技术栈支持

支持的技术栈

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

HTML + Tailwind

React

Next.js

Vue

Svelte

SwiftUI

React Native

Flutter

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