让 AI 写业务逻辑已经不难，难的是：如何让它顺手写出 好看、统一、专业 的界面？
过去两年里，LLM 编程助手飞速进化：写接口、写测试、改 Bug 越来越成熟，但在 UI/UX 上的表现依然'程序员审美'味儿十足——配色诡异、排版拥挤、响应状态缺失，更别谈什么品牌调性与可访问性。
UI UX Pro Max 尝试补上这一块短板。它把一整套 UI 风格、配色、字体搭配和 UX 准则整理成可搜索、可组合的'设计智库'，作为一个'技能（Skill）'接入 Claude Code、Cursor、Windsurf 等编码助手，让 AI 在写界面时能'带着设计知识'工作。
接下来我会从工程师视角，带你完成三件事：
- 在本地安装并接好 UI UX Pro Max，与 Cursor / Claude Code 集成
- 通过几个实战示例，让 AI 真正做出看得过去甚至接近设计师水平的 UI
- 总结一套可复用的 Prompt 模板与最佳实践，帮助你在长期项目中保持一致的 UI/UX 质量
一、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 风格做个博客"
