1 项目概述

UI UX Pro Max 是一个 AI 驱动的设计智能技能，可跨多个平台和框架生成专业的 UI/UX 系统。它通过先进的推理引擎提供全面的设计建议。

26k+ Stars MIT 开源协议 v2.0
67
UI 风格
96
配色方案
57
字体搭配
100
行业规则

2 核心功能

旗舰功能，分析项目需求并生成完整的设计系统，包括：

  • 基于产品类型的模式推荐
  • 带推理说明的风格优先级
  • 色彩情绪和调色板选择
  • 排版指导
  • 关键视觉效果
  • 需要避免的反模式
毛玻璃风格 黏土风格 新拟物风格 粗野主义 极简主义 深色模式 AI 原生 UI 便当格子布局 英雄区居中 数据密集型 高管仪表盘 +56 更多

每个配色方案包含 6 种颜色：主色、辅助色、行动按钮色、背景色、文字色、边框色

SaaS：#2563EB + #F97316
金融科技：#F59E0B + #8B5CF6
医疗健康：#0891B2 + #059669
电子商务：#059669 + #F97316
游戏：#7C3AED + #F43F5E
奢侈品：#1C1917 + #CA8A04
  • 奢华风：Playfair Display + Inter
  • 现代风：Poppins + Open Sans
  • 法律行业：EB Garamond + Lato
  • 医疗行业：Figtree + Noto Sans
  • 游戏行业：Russo One + Chakra Petch
  • 无障碍优先：Atkinson Hyperlegible
  • + 支持中日韩、阿拉伯语、泰语、希伯来语等国际化字体

3 安装方式

推荐方式

使用 CLI 进行跨平台安装

通过 CLI 安装（推荐）

npm install -g uipro-cli
uipro init --ai claude  # 或 cursor, windsurf 等

通过 Claude Code 安装

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

CLI 选项

选项 说明
--ai <type> 指定 AI 助手平台
--offline 仅使用内置资源
--force 覆盖现有文件
--ai all 为所有支持的助手安装

4 支持平台

AI 助手

Claude Code Cursor Windsurf Codex CLI Gemini CLI GitHub Copilot Kiro Roo Code Continue OpenCode

技术栈

React Next.js Vue Nuxt.js Svelte Astro shadcn/ui Tailwind CSS SwiftUI Flutter React Native Jetpack Compose

5 UI 风格 (67)

极简主义
简洁、干净、留白充足、功能优先
新拟物风格
柔和的浮雕/内凹效果
毛玻璃风格
磨砂玻璃效果，背景模糊 (10-20px)
3D 与超写实
WebGL/Three.js 集成
粗野主义
原始、未经修饰、鲜明对比
黏土风格
3D 黏土质感柔和元素
  • 英雄区居中：全宽英雄区配合引人注目的标题
  • 转化优化型：表单聚焦、单一 CTA、信任标识
  • 功能展示型：网格布局 (3-4 列) 配合功能卡片
  • 社会证明型：用户评价、客户 Logo、案例研究
  • 数据密集型：多图表、KPI 卡片、最小间距 (8-12px)
  • 实时监控型：实时数据更新、流式图表、告警提醒
  • 高管仪表盘：大型 KPI 卡片 (最多 4-6 个)、趋势迷你图
  • 财务仪表盘：收入指标、盈亏可视化

6 配色方案 (96)

每个配色方案包含 6 种颜色：主色、辅助色、行动按钮色、背景色、文字色、边框色

科技与 SaaS

SaaS 通用：信任蓝 + 橙色 CTA
金融科技/加密：金色信任感 + 紫色科技感
AI/聊天机器人：紫色 + 青色交互

医疗与健康

医疗应用：平静青色 + 健康绿色
心理健康：薰衣草紫 + 健康绿

创意与专业领域

游戏：霓虹紫 + 玫瑰动作色
气候科技：自然绿 + 太阳金
网络安全：矩阵绿 + 警报红

7 字体搭配 (57 组)

基于风格的搭配

奢华 / 优雅
Playfair Display + Inter
现代专业
Poppins + Open Sans
开发者 / 技术
JetBrains Mono + Inter
粗野 / 原始
Space Grotesk + IBM Plex Mono

行业专用

行业 字体搭配
法律 EB Garamond + Lato
医疗 Figtree + Noto Sans
金融 IBM Plex Sans
电商 Rubik + Nunito Sans
游戏 Russo One + Chakra Petch
无障碍优先 Atkinson Hyperlegible

国际化支持

包含越南语、日语、韩语、中文（繁体/简体）、阿拉伯语、泰语和希伯来语的专用搭配，支持 RTL 布局

8 UX 指南 (99 条)

基于优先级的指南

优先级 类别 影响程度
1 无障碍 关键
2 触摸与交互 关键
3 性能 高
4 布局与响应式 高
5 排版与色彩 中
6 动画 中
7-8 风格、图表与数据 低
  • 最低 4.5:1 颜色对比度
  • 可见的焦点环用于键盘导航
  • 所有图片需要描述性的 alt 文本
  • 仅图标按钮需要 ARIA 标签
  • 逻辑清晰的 Tab 顺序
  • 正确的表单标签（不能仅用占位符）
  • 不要仅通过颜色传达信息
  • 最小 44×44px 触摸目标
  • 目标之间 8px 间距
  • 使用点击作为主要操作
  • 异步操作期间禁用按钮
  • 问题附近显示清晰的错误信息
  • 所有可点击元素添加 cursor-pointer
  • 包含 viewport meta 标签
  • 移动端最小 16px 正文字号
  • 防止水平滚动
  • 定义 z-index 层级 (10, 20, 30, 50)
  • 正文 1.5-1.75 行高
  • 每行限制 65-75 字符

9 行业专属规则 (100 条)

金融、法律、医疗、政府

  • 强制执行无障碍标准（政府需达到 WCAG AAA）
  • 使用深蓝/信任蓝色调优先考虑安全感
  • 使用"信任与权威"作为主要风格
  • 减少装饰元素；清晰度优先于美观
  • 采用"鲜明色块"设计，强调视觉层次
  • 配置"销售智能仪表盘"追踪转化
  • 突出展示社会证明（评论、评分）
  • 转化按钮使用成功绿色

社交、游戏、约会、娱乐

  • 采用"动效驱动"交互和动画
  • 平衡成瘾性设计模式与伦理考量
  • 使用沉浸式配色（鲜艳、霓虹）
  • 突出滑动、匹配和发现式交互

仪表盘、分析、BI 工具

  • 应用"数据密集型 + 热力图"风格确保清晰
  • 默认使用"深色模式 (OLED)"便于长时间查看
  • 使用颜色编码：红/绿用于警报，冷→热渐变用于数据优先级
  • 最小化非功能性视觉元素

10 使用示例

自动激活（技能模式）

适用于 Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI - 直接用自然语言请求 UI/UX 工作：

"为我的 SaaS 产品构建一个落地页"
"设计一个数据分析仪表盘"
"创建一个健身追踪移动应用的 UI"

斜杠命令（工作流模式）

适用于 Kiro、GitHub Copilot、Roo Code：

/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页

设计系统生成

# 为美容水疗生成设计系统
python3 scripts/search.py "beauty spa" \
  --design-system -p "Serenity Spa"

# 生成并持久化金融科技设计系统
python3 scripts/search.py "fintech banking" \
  --design-system --persist

领域特定搜索

# 按领域搜索
python3 scripts/search.py "modern" --domain style
python3 scripts/search.py "trust" --domain color
python3 scripts/search.py "accessible" --domain ux

# 按技术栈搜索
python3 scripts/search.py "dashboard" --stack react
python3 scripts/search.py "mobile" --stack swiftui

11 设计系统持久化

主文件 + 覆盖模式

页面特定规则存在时会覆盖主文件规则

目录结构

design-system/
├── MASTER.md           # 全局设计规则源
└── pages/
    ├── landing.md      # 落地页覆盖配置
    ├── dashboard.md    # 仪表盘覆盖配置
    └── settings.md     # 设置页覆盖配置

持久化命令

python3 scripts/search.py "fintech banking" \
  --design-system --persist

12 交付前检查清单

通用反模式

避免：过度动画、AI 紫粉渐变、低对比度、隐藏关键信息