用 AI 写前端，功能一般都能实现，界面却常常不好看：配色灰蒙蒙，或者是 AI 最爱的紫粉渐变；排版像把组件随手摆上去；字体永远是默认的无衬线体。问题不在于 AI 不会写 CSS，而在于它缺少一套“什么产品该用什么风格”的设计判断。
UI UX Pro Max 是一个开源的 AI 编程 Skill，专门补这块短板。装好之后，你在 Claude Code 里说一句“帮我做个 SaaS 落地页”，它会先根据产品类型推理出页面结构、UI 风格、配色、字体和要避开的坑，形成一份设计系统，再按这份设计系统写代码。
这篇适合用 Claude Code、Codex、Cursor 写前端，又对生成界面的审美不满意的开发者。下面介绍 UI UX Pro Max 能做什么、它的推理流程、怎么安装、怎么单独生成设计系统，以及使用时要注意的地方。文中的数据规模和安装命令按 2026 年 10 月的官方 README 整理。
UI UX Pro Max 能做什么
平时做前端设计，常见的流程是去 Dribbble 找参考、去配色网站挑颜色、去 Google Fonts 选字体，再告诉 AI“照这个来”。UI UX Pro Max 把这些设计决策交给一个内置的推理引擎，背后是一套结构化的设计数据：
| 数据 | 规模（2026-10 README） | 用途 |
|---|---|---|
| 行业推理规则 | 192 条 | 每个产品类型该用什么页面模式、风格、配色、字体、动效，以及该避免什么 |
| UI 风格 | 79 种可检索，其中 50 种为常规推荐 | Glassmorphism、Brutalism、Neumorphism、Bento Grid、AI-Native UI 等 |
| 配色方案 | 192 套 | 与 192 个产品类型一一对应 |
| 字体搭配 | 74 组 | 标题 + 正文组合，附 Google Fonts 引入方式 |
| 落地页模式 | 34 种 | 页面结构，例如 Hero + Social Proof |
| UX 规范 | 119 条 | 可访问性、反模式、文字排版与交互细节 |
| 图表类型 | 25 种 | 做 Dashboard 时的图表推荐 |
| 技术栈 | 22 个 | Web、移动端、桌面端的代码规范 |
公众号原文写作时（2026 年 3 月）这些数字还是 161 条规则、67 种风格、57 组字体，项目一直在扩充，以仓库当前 README 为准。
推理流程：先出设计系统，再写代码
以官方示例为例，在 Claude Code 里输入：
帮我做一个美容 SPA 的落地页
它不会马上写代码，而是先跑 5 路并行检索：产品类型匹配、风格推荐、配色选择、落地页模式、字体搭配。然后推理引擎按行业规则排序、过滤掉这个行业的反模式，输出一份完整的设计系统：
- 页面模式： Hero-Centric + Social Proof（情感驱动 + 信任元素）
- UI 风格： Soft UI Evolution（柔和阴影、有机形状、高级感）
- 配色： 柔粉 #E8B4B8 + 鼠尾草绿 #A8D5BA + 金色 CTA #D4AF37
- 字体： Cormorant Garamond（标题）+ Montserrat（正文）
- 要避免的： 霓虹色、生硬动画、深色模式、AI 紫粉渐变
之后才开始写代码，生成的页面已经带上对应的颜色、字体、间距和交互效果。最后还会对照常见的 UI/UX 反模式做一次交付前检查。
怎么安装 UI UX Pro Max
Claude Code：用插件市场安装
在 Claude Code 里执行两条命令：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
其他工具：用 CLI 安装
官方 README 目前推荐用 CLI。注意 npm 包名已经换成 ui-ux-pro-max-cli（安装后命令仍是 uipro），原文里的旧包 uipro-cli 已经不再更新：
npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude # Claude Code
uipro init --ai codex # Codex CLI
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai copilot # GitHub Copilot
uipro init --ai gemini # Gemini CLI
uipro init --ai all # 全部安装
README 列出的支持工具有二十多个，上面只列了常用的几个。想对所有项目生效，可以加 --global，例如 uipro init --ai claude --global 会装到 ~/.claude/skills/。不想全局安装 npm 包，也可以直接 npx ui-ux-pro-max-cli init --ai claude。
搜索脚本需要 Python 3.x，只用标准库，不联网、不安装额外依赖。
在 Claude Code、Codex CLI、Cursor 等工具里，Skill 会在你提出 UI/UX 需求时自动触发，正常描述需求就行；Kiro、Roo Code 等工具则用 /ui-ux-pro-max 斜杠命令调用。
也能单独当设计系统生成器用
不通过 AI 编程工具，也可以直接在命令行调用搜索脚本，适合设计师或开发者先拿一份方案：
# 生成完整设计系统
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# 只搜风格
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
如果项目有多个页面，可以用 --persist 把设计系统存成文件，跨会话复用：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
这会生成 design-system/myapp/MASTER.md 作为全局规范；再加 --page "dashboard" 可以生成只记录差异的页面级覆盖文件。之后让 AI 写某个页面时，先读 MASTER.md，再看有没有对应的页面文件，页面文件里的规则优先。
反模式检查和交付前清单
每条行业规则里都有一项 Anti-Patterns，专门列出这个行业不该做什么。比如银行类产品不该用 AI 紫粉渐变，儿童教育类不该用深色模式，企业级 SaaS 不该用夸张动画。
这一项很实用。AI 写前端最常见的问题不是功能写不出来，而是审美踩雷：配色太花、动效浮夸、风格和产品调性不搭。有了反模式规则，这类问题能少掉一大半。
交付前清单则覆盖容易忽略但影响体验的细节：不用 emoji 当图标（改用 SVG）、所有可点击元素加 cursor-pointer、浅色模式下文字对比度不低于 4.5:1、键盘导航有可见焦点、尊重 prefers-reduced-motion、在 375/768/1024/1440px 宽度下都能正常响应。原文配图里写的“hover 动画 150-300ms”，在当前版本里改成了按平台、组件和用户偏好决定交互时长。
支持哪些技术栈
在提示词里说明技术栈即可，不提的话默认用 HTML + Tailwind：
| 类别 | 技术栈 |
|---|---|
| Web | HTML + Tailwind（默认）、React、Next.js、shadcn/ui、Vue、Nuxt.js、Nuxt UI、Angular、Laravel、Svelte、Astro、Three.js |
| 桌面端 | JavaFX、WPF、WinUI 3、Avalonia、Uno Platform、UWP |
| iOS / Android | SwiftUI / Jetpack Compose |
| 跨平台 | React Native、Flutter |
如果你的流程是从设计稿出发，也可以对比另一种做法：Codex 接入 Figma，从设计稿到代码，再把页面同步回设计文件。UI UX Pro Max 更适合没有设计稿、希望 AI 自己做出像样设计决策的场景。
使用限制与注意事项
- 规则不等于设计师。 它给的是基于行业规则的“合理默认值”，品牌已有视觉规范时，应该以品牌规范为准，把它当参考而不是最终答案。
- 会占用上下文。 Skill 会把设计规则加载进 AI 的上下文，和其他 Skill 一起装时要留意总量，可以参考 ECC 一次装进 Claude Code 292 个 skill，先算清你的上下文账。
- 安装方式有坑。 旧包
uipro-cli不要再用；v2.5.1 之前的插件市场安装可能报“Zip file contains a symbolic link”，可以改用 CLI 安装；不要把整个 GitHub 仓库 ZIP 上传到 Claude.ai，文件数会超过 200 个的上限。 - 开源版与付费版。 仓库是 MIT 许可的开源版；官方另有付费版，额外包含品牌识别、Logo、横幅、演示文稿等设计能力。本文只讲开源版。
总结
UI UX Pro Max 的思路很直接：把设计师脑子里的经验整理成规则和数据，在 AI 写代码之前放进上下文，让它先定设计系统再动手。对于没有专职设计师、又不想让页面一看就是 AI 生成的项目，它能明显改善配色、字体和排版这些基础问题。
想在 Claude Code 或 Codex 里试试这套前端工作流，可以在 AIGoCode 上直接使用这两款工具。
参考链接
- UI UX Pro Max GitHub 仓库：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- UI UX Pro Max 官网：https://uupm.cc