一、UI UX Pro Max 是什么?

1.1 一个'给 AI 用的设计系统'
从本质上看,UI UX Pro Max 是一个 设计知识数据库 + 多平台适配层:
- 设计知识库部分包含:
- 57 种 UI 风格:如 glassmorphism、claymorphism、minimalism、brutalism、neumorphism、bento grid 等。
- 95 套行业配色:面向 SaaS、电商、医疗、金融、教育等不同场景,提供成体系的主色/辅色/状态色组合。
- 56 组字体搭配:基于 Google Fonts 等资源,为不同气质(科技感、杂志风、极简风等)推荐对应字体组合。
- 24 种图表类型:面向仪表盘、数据可视化场景,提供图表选型建议。
- 约 98 条 UX 准则:涵盖表单设计、按钮状态、错误提示、可访问性等实践建议。
- 多平台适配层则负责把这些设计知识'翻译'成具体技术栈可用的实现:
- 支持 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind CSS 等。
- 根据你当前工程的栈,输出对应的代码片段(例如 Next.js + Tailwind 的页面、SwiftUI View、Flutter Widget 等)。
对开发者来说,它更像是一个 给 AI 助手调用的、多栈兼容的设计系统,而不是一个单独 UI 库。
1.2 工作方式:AI 调用'设计智库'
当你在 Cursor/Claude Code 里说'帮我做一个 SaaS 仪表盘首页',在接入 UI UX Pro Max 后,AI 的内部流程大致变成:
- 解析你的意图:产品类型(SaaS)、页面类型(仪表盘)、技术栈(例如 Next.js + Tailwind)。
- 在设计数据库中搜索:
- 适合 SaaS 的 UI 风格(如 minimal SaaS)
- 对应行业配色(冷色系 + 强调 CTA)
- 合适的字体搭配(如 Inter + Space Grotesk)
- 针对仪表盘的布局/图表类型建议。
- 生成代码:结合你的技术栈与设计约束,产出较为完整的界面和样式实现。
你给的不再只是'写个 dashboard 页面',而更像是在跟一个内置设计系统的前端搭档说话。
内置主流 UI 风格,无需描述细节:
# 一句话切换 "用 Glassmorphism 风格做个仪表盘""用 Brutalism 风格做个作品集""用 Claymorphism 风格做个儿童 APP""用 Minimalism 风格做个博客"
部分风格清单:
• Glassmorphism:毛玻璃、透明度、层次感
• Claymorphism:柔和阴影、圆润可爱
• Neumorphism:挤压感、拟物化
• Bento Grid:苹果风卡片布局
• Dark Mode:专业级暗夜模式
• Brutalism:粗野主义、视觉冲击
二、在本地安装 UI UX Pro Max
目标:30 分钟内让 Cursor/Claude Code 拥有'设计智库'技能,全程本地运行。
下面以 Claude Code + UI UX Pro Max 为例,Cursor 的接入方式在概念上类似,只是路径与配置名称略有不同。
2.1 环境前提
- 本地已安装:
- Node.js(建议 >= 18)与 npm


