UI UX Pro Max Skill

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

GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
网站: https://uupm.cc

这是什么？

UI UX Pro Max 是一个 AI技能（上下文注入层），旨在加载到如 Claude Code、Cursor、Windsurf、GitHub Copilot 等AI编码助手。安装后，它会自动增强AI生成专业、生产级UI/UX代码的能力——无需开发者每次手动指定设计规则。

其核心是一个结构化的知识库，结合了一个基于Python的推理引擎，该引擎分析用户请求并在编写任何代码之前生成一个完整、定制化的 设计系统（风格+颜色+排版+布局模式+反模式）。

核心功能

1. 智能设计系统生成器 (v2.0 旗舰版)

推理引擎跨以下领域进行多领域并行搜索：

161种产品/行业类别 → 匹配布局模式
67种UI风格 → 按BM25评分排名
161种配色方案 → 行业适宜的选择
57种字体搭配 → 性格匹配的排版
24种登陆页模式 → 转化优化结构

输出是一个完全结构化的设计系统，包括推荐的模式、风格、颜色、排版、关键效果、要避免的反模式以及交付前清单。

2. 67种UI风格

涵盖了现代和细分设计美学的全谱，分为三类：

49种通用风格: 玻璃拟态、新拟态、粗野主义、粘土拟态、Bento网格、暗黑模式、AI原生UI、赛博朋克、蒸汽波、像素艺术、空间UI (VisionOS) 等。
8种登陆页风格: 以Hero为中心、转化优化、功能丰富展示、故事驱动等。
10种BI/分析仪表板风格: 数据密集型、高管视图、实时监控、金融、销售智能等。

3. 161条行业特定推理规则

规则涵盖的垂直领域包括：

科技与SaaS、金融科技、医疗保健、电子商务、创意机构、生活方式应用、新兴科技（Web3、空间计算、量子计算）等。

每条规则编码：推荐的布局模式、风格优先级、颜色情绪、排版情绪、关键动画/效果以及明确的反模式（例如，“银行应用禁止使用AI紫/粉色渐变”）。

4. 99条UX指南

最佳实践、可访问性标准（WCAG AA）以及涵盖响应式设计、悬停状态、焦点指示器、减少动画支持和对比度比率的反模式。

5. 多栈支持 (15种技术栈)

React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel。

6. 设计系统持久化 (主+覆盖模式)

生成并持久化一个分层设计系统到 design-system/MASTER.md 文件以及 design-system/pages/ 下的每页覆盖文件。这确保了跨会话和同一项目跨页面的设计语言一致性。

工作原理

用户请求
    │
    ▼
多领域搜索 (5个并行搜索)
    │
    ▼
推理引擎 (BM25排名 + JSON条件规则)
    │
    ▼
完整设计系统输出
(模式 + 风格 + 颜色 + 排版 + 效果 + 反模式 + 清单)
    │
    ▼
AI生成带有完整设计上下文的代码

安装

通过 Claude Marketplace (Claude Code)

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

通过 CLI (推荐 — 支持所有AI助手)

npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai copilot     # GitHub Copilot
uipro init --ai all         # 所有支持的助手

支持的AI助手: Claude Code, Cursor, Windsurf, Antigravity, GitHub Copilot, Kiro, Codex CLI, Qoder, Roo Code, Gemini CLI, Trae, OpenCode, Continue, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment。

先决条件: Python 3.x (搜索/推理脚本需要)。

用法

安装后，当您发出UI/UX请求时，该技能会自动激活：

为我的SaaS产品构建一个登陆页
创建一个医疗保健分析仪表板
设计一个带有暗黑模式的作品集网站
为电子商务制作一个移动应用UI
构建一个带有暗黑主题的金融科技银行应用

对于使用工作流模式的平台（Kiro, Copilot, Roo Code）：

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

项目结构

src/ui-ux-pro-max/
├── data/*.csv          # 知识库 (风格, 颜色, 字体, 规则)
├── scripts/*.py        # 搜索引擎 & 设计系统推理
└── templates/          # 特定于平台的配置模板

cli/                    # CLI安装程序 (从模板生成文件)
.claude/skills/         # Claude Code的本地安装路径
docs/                   # 文档
preview/                # UI预览资源

为什么它很重要

大多数AI编码助手缺乏持久的、结构化的设计知识。没有像这样的注入技能，它们会默认使用通用、不一致或“AI风格”的UI模式。UI UX Pro Max通过以下方式解决了这个问题：

在代码生成开始前标准化设计决策。
编码行业特定的反模式，以防止常见错误。
通过单一的CLI安装程序跨所有主流AI编码平台工作。
在会话中持久化设计系统，用于多页面项目。

它有效地充当了嵌入您AI助手中的高级UI/UX设计师。