UI UX Pro Max

一款提供设计智能的AI技能，助力跨多个平台和框架构建专业UI/UX。

如果您觉得本项目有用，欢迎考虑支持项目发展：

v2.0 新特性

智能设计系统生成

v2.0 的旗舰功能是 Design System Generator——一个由 AI 驱动的推理引擎，能够分析您的项目需求，并在几秒钟内生成完整且量身定制的设计系统。

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Conversion: Emotion-driven with trust elements                                     |
|     CTA: Above fold, repeated after testimonials                                       |
|     Sections:                                                                          |
|       1. Hero                                                                          |
|       2. Services                                                                      |
|       3. Testimonials                                                                  |
|       4. Booking                                                                       |
|       5. Contact                                                                       |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes        |
|     Best For: Wellness, beauty, lifestyle brands, premium services                     |
|     Performance: Excellent | Accessibility: WCAG AA                                    |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8 (Soft Pink)                                                    |
|     Secondary:  #A8D5BA (Sage Green)                                                   |
|     CTA:        #D4AF37 (Gold)                                                         |
|     Background: #FFF5F5 (Warm White)                                                   |
|     Text:       #2D3436 (Charcoal)                                                     |
|     Notes: Calming palette with gold accents for luxury feel                           |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Mood: Elegant, calming, sophisticated                                              |
|     Best For: Luxury brands, wellness, beauty, editorial                               |
|     Google Fonts: https://fonts.google.com/share?selection.family=...                  |
|                                                                                        |
|  KEY EFFECTS:                                                                          |
|     Soft shadows + Smooth transitions (200-300ms) + Gentle hover states                |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients       |
|                                                                                        |
|  PRE-DELIVERY CHECKLIST:                                                               |
|     [ ] No emojis as icons (use SVG: Heroicons/Lucide)                                 |
|     [ ] cursor-pointer on all clickable elements                                       |
|     [ ] Hover states with smooth transitions (150-300ms)                               |
|     [ ] Light mode: text contrast 4.5:1 minimum                                        |
|     [ ] Focus states visible for keyboard nav                                          |
|     [ ] prefers-reduced-motion respected                                               |
|     [ ] Responsive: 375px, 768px, 1024px, 1440px                                       |
|                                                                                        |
+----------------------------------------------------------------------------------------+

设计系统生成的工作原理

┌─────────────────────────────────────────────────────────────────┐
│  1. USER REQUEST                                                │
│     "Build a landing page for my beauty spa"                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. MULTI-DOMAIN SEARCH (5 parallel searches)                   │
│     • Product type matching (100 categories)                    │
│     • Style recommendations (57 styles)                         │
│     • Color palette selection (95 palettes)                     │
│     • Landing page patterns (24 patterns)                       │
│     • Typography pairing (56 font combinations)                 │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  3. REASONING ENGINE                                            │
│     • Match product → UI category rules                         │
│     • Apply style priorities (BM25 ranking)                     │
│     • Filter anti-patterns for industry                         │
│     • Process decision rules (JSON conditions)                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  4. COMPLETE DESIGN SYSTEM OUTPUT                               │
│     Pattern + Style + Colors + Typography + Effects             │
│     + Anti-patterns to avoid + Pre-delivery checklist           │
└─────────────────────────────────────────────────────────────────┘

100 个行业特定推理规则

推理引擎包含以下专业规则：

类别	示例
科技与 SaaS	SaaS、微型 SaaS、B2B 企业、开发者工具、AI/聊天机器人平台
金融	金融科技、银行、加密货币、保险、交易仪表板
医疗健康	医疗诊所、药房、牙科、兽医、心理健康
电子商务	综合电商、奢侈品、市场平台、订阅盒
服务行业	美容/水疗、餐厅、酒店、法律、咨询
创意领域	作品集、 agency、摄影、游戏、音乐流媒体
新兴科技	Web3/NFT、空间计算、量子计算、自治系统

每条规则包括：

• 推荐模式 - 着陆页结构
• 风格优先级 - 最匹配的 UI 风格
• 色彩氛围 - 适合行业的调色板
• 排版氛围 - 匹配字体个性
• 关键效果 - 动画和交互
• 反模式 - 不应做的事（例如，银行应用使用“AI 紫/粉渐变”）

功能

• 57 种 UI 风格 - 玻璃拟态、黏土拟态、极简主义、粗野主义、新拟态、便当网格、暗黑模式、AI 原生 UI 等
• 95 种调色板 - 针对 SaaS、电子商务、医疗健康、金融科技、美容等行业的特定调色板
• 56 种字体搭配 - 精选排版组合，含 Google Fonts 导入
• 24 种图表类型 - 针对仪表板和分析的推荐
• 11 种技术栈 - React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui
• 98 条 UX 指南 - 最佳实践、反模式和可访问性规则
• 100 条推理规则 - 行业特定设计系统生成（v2.0 新增）

安装

使用 CLI（推荐）

# Install CLI globally
npm install -g uipro-cli

# Go to your project
cd /path/to/your/project

# Install for your AI assistant
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         # All assistants

其他 CLI 命令

uipro versions              # List available versions
uipro update                # Update to latest version
uipro init --offline        # Skip GitHub download, use bundled assets

手动安装

将相应文件夹复制到您的项目中：

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/
Codex CLI	.codex/skills/ui-ux-pro-max/
Qoder	.qoder/skills/ui-ux-pro-max.md + .shared/ui-ux-pro-max/
Roo Code	.roo/rules/ui-ux-pro-max.md + .shared/ui-ux-pro-max/
Gemini CLI	.gemini/skills/ui-ux-pro-max/ + .shared/ui-ux-pro-max/
Trae	.trae/skills/ui-ux-pro-max/ + .shared/ui-ux-pro-max/

前提条件

搜索脚本需要 Python 3.x 环境。

# Check if Python is installed
python3 --version

# macOS
brew install python3

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

# Windows
winget install Python.Python.3.12

使用方法

Claude 代码

当您请求 UI/UX 工作时，该技能会自动激活。您只需自然地进行对话即可：

Build a landing page for my SaaS product

光标 / 帆板 / 反重力

使用斜杠命令调用该技能：

/ui-ux-pro-max Build a landing page for my SaaS product

Kiro

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

/ui-ux-pro-max Build a landing page for my SaaS product

GitHub Copilot

在配备 Copilot 的 VS Code 中，在聊天框输入 / 即可查看可用提示，然后选择 ui-ux-pro-max：

/ui-ux-pro-max Build a landing page for my SaaS product

Codex CLI

该技能会针对 UI/UX 请求自动激活。你也可以显式调用它：

$ui-ux-pro-max Build a landing page for my SaaS product

Qoder

当您请求UI/UX工作时，该技能会自动激活：

Build a landing page for my SaaS product

Roo 代码

当你请求 UI/UX 工作时，该技能会自动激活：

Build a landing page for my SaaS product

Gemini 命令行界面

当您请求 UI/UX 工作时，该技能会自动激活：

Build a landing page for my SaaS product

Trae

免责声明：Trae 技能目前处于测试阶段。如有任何问题或反馈，请随时报告。

使用 Trae 技能前，需切换至 SOLO 模式。若您的请求与技能相关，系统将调用相应技能：

Build a landing page (frontend ONLY) for my SaaS product.

示例提示词

Build a landing page for my SaaS product

Create a dashboard for healthcare analytics

Design a portfolio website with dark mode

Make a mobile app UI for e-commerce

Build a fintech banking app with dark theme

工作原理

1. 提出需求 - 请求任何UI/UX任务（构建、设计、创建、实施、审查、修复、改进）
2. 生成设计系统 - AI通过推理引擎自动生成完整的设计系统
3. 智能推荐 - 根据您的产品类型和需求，找到最匹配的样式、颜色和排版
4. 代码生成 - 按照正确的颜色、字体、间距和最佳实践实现UI
5. 交付前检查 - 针对常见的UI/UX反模式进行验证

支持的技术栈

该技能提供特定于技术栈的指南，适用于：

• HTML + Tailwind（默认）
• React / Next.js / shadcn/ui
• Vue / Nuxt.js / Nuxt UI / Svelte
• SwiftUI / React Native / Flutter

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

设计系统命令（高级）

若要直接使用设计系统生成器：

# Generate design system with ASCII output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Generate with Markdown output
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Domain-specific search
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart

# Stack-specific guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

星标历史

许可证

本项目基于 MIT 许可证 授权。