UI UX Pro Max

序言
UI UX Pro Max 是一个面向 AI 编程助手（如 Claude Code、Cursor、Windsurf 等）的设计智能数据库与技能，它将这些助手转变为具备专业 UI/UX 设计能力的”设计搭档”，帮助开发者快速生成美观、统一且符合行业最佳实践的用户界面。

🎯 核心定位：AI 的”设计系统”

它本质上是一个可搜索的”设计智库”，将系统化的设计知识（如风格、配色、字体、UX 准则）封装起来，供 AI 助手在生成代码时调用。这意味着你无需手动查阅设计规范，只需用自然语言描述需求，AI 就能基于这套知识库输出专业的设计方案和对应代码。

📦 核心功能与数据

UI UX Pro Max 内置了丰富的设计资源，确保输出的界面具有专业水准：

• 57 种 UI 风格：包括 Glassmorphism（毛玻璃）、Claymorphism（粘土风）、Minimalism（极简主义）、Brutalism（粗野主义）、Neumorphism（新拟态）、Bento Grid（便当网格）等，一句话即可切换。
• 95 套行业配色方案：针对 SaaS、电商、金融、医疗、美妆等不同行业，提供成体系的主色、辅色、强调色组合。
• 56 组字体搭配：基于 Google Fonts 等资源，为不同气质的项目推荐标题与正文字体组合。
• 24 种图表类型建议：为仪表盘和数据可视化场景提供图表选型指导。
• 98 条 UX 指南：涵盖表单设计、按钮状态、错误提示、可访问性等最佳实践与反模式，确保界面不仅好看而且好用。

⚙️ 支持的技术栈

它支持将同一套设计策略转化为多种主流前端与移动端框架的代码，包括：

• Web 端：HTML + Tailwind、React、Next.js、Vue、Nuxt UI、Svelte
• 移动端：SwiftUI、React Native、Flutter

🚀 安装与集成

安装过程非常简单，主要通过官方 CLI 工具完成：

1. 安装 CLI：确保已安装 Node.js，在终端运行：

   npm install -g uipro-cli

2. 在项目中初始化：进入你的项目根目录，执行对应命令：

   # 为 Cursor 初始化
   uipro init --ai cursor
   
   # 为 Claude Code 初始化
   uipro init --ai claude

3. 确认安装：命令执行后，会在你的项目中生成对应的配置文件（如 .cursor/commands/ui-ux-pro-max.md），之后即可在 AI 助手中调用该技能。

💡 如何使用：从需求到代码

使用方式符合直觉，与你平时使用 AI 编程助手无异：

1. 在 AI 助手中触发技能：在 Cursor 或 Windsurf 的命令面板中输入 /ui-ux-pro-max，或在 Claude Code 中直接描述需求。

2. 提供清晰的需求描述：最好的实践是给 AI 一份简明的”设计需求文档”。例如：

   “帮我设计一个 B2B SaaS 产品的官网首页，要求风格现代简洁，强调转化率，技术栈用 React + Tailwind。请先推荐配色和字体，再输出包含 Hero、Features、Testimonials 模块的完整代码。”

3. 获得并应用设计方案：AI 会基于 UI UX Pro Max 的规则，输出包括风格说明、配色方案（含 Tailwind 颜色类名）、字体层级、布局草图以及最终可运行的组件代码在内的完整方案。你可以直接将代码复制到项目中，并在此基础上进行迭代优化。

✨ 核心价值与适用人群

• 对开发者而言：它极大地降低了 UI 设计的门槛，让不擅长设计的工程师也能产出专业、统一的界面，将精力更专注于业务逻辑。
• 对团队而言：通过锁定 UI UX Pro Max 的版本（uipro init --ai all --version v1.2.0），可以确保团队成员生成的 UI 风格一致，维护设计统一性。
• 特别适合：独立开发者、缺少专职设计师的小团队、前端初学者以及希望提升界面审美和效率的所有程序员。

---

🔗 项目地址：ui-ux-pro-max-skill