先生成设计系统再写界面：UI/UX Pro Max 怎么给 AI 装审美

源文把这个仓库写成「狂揽 8.1 万 Star 的 UI 开源项目，让 AI 生成的界面审美拉满」。核对短链和 GitHub 之后，真实产品是 nextlevelbuilder/ui-ux-pro-max-skill，主页 uupm.cc，CLI 是 npm 包 ui-ux-pro-max-cli（命令仍叫 uipro）。它不是 Magic UI，也不是 21st.dev 那种把 TSX 拷进仓库的组件 registry。本地 super-claude 文只顺带提过 Magic / 21st，那不是这篇。

它真正塞给助手的是一套可检索的设计知识库 + 行业推理规则：你说「做个银行看板」，引擎先在产品类型、风格、配色、落地页结构、字体五张表里并行搜，再用 ui-reasoning.csv 做行业过滤，吐出 Pattern / Style / Colors / Typography / Anti-patterns / 交付前检查。助手再按这份规范写代码。仓库协议是 MIT；skill.json 当前写的是 2.13.0。Star 已经到十万级，营销页和 README 的「67 种风格 / 161 条规则」已经落后于 CSV——下文数字以本机 clone 的数据文件为准。

一、别把它当成又一个组件库

Magic UI、Aceternity、shadcn registry 解决的是「把现成动效组件贴进 React」。UI/UX Pro Max 解决的是另一件事：大模型写前端时缺的不是 JSX，是行业审美约束。 你丢一句「帮我做 SaaS 落地页」，默认模型很容易长出同一套紫粉渐变、假社交证明、emoji 当图标。这个技能的目标是：在写第一行组件之前，先锁定风格、色板、字体和「这个行业绝对不要做什么」。

官方文档把产出物定义得很克制：这里的设计系统不是 500 页 Figma 库，而是一份机器可读的决策包——用哪种页面结构、哪套颜色、哪组字体、什么动效词汇、哪些反模式要避开。生成器本地跑完只要一秒量级，不请求外部设计 API。数据源是仓库里的 CSV，搜索脚本只用 Python 标准库。

本机 clone 后对 src/ui-ux-pro-max/data/ 数行，得到的是：

官网首页还停在「57 种风格 / 8 个技术栈」那套旧文案。以 CSV 和 skill.json 为准：风格大约八十档，栈已经覆盖到 SwiftUI、Jetpack Compose、Avalonia。源文里的「67 / 161 / 15 栈」是更早一版 README 的快照。

它也明确不是设计稿渲染器。没有 Figma 插件，不会替你出像素级标注；助手拿到的是约束，代码质量仍然取决于模型和你的 MASTER.md 有没有被改过。

二、安装：包名、目录、Python 三条线

源文写的 npm install -g uipro-cli 已经过期。官方 README 写得很直：当前包名是 ui-ux-pro-max-cli，装完仍提供 uipro 命令；旧的 uipro-cli 资产是过期的，不要再用。

npm install -g ui-ux-pro-max-cli

cd /path/to/your/project

uipro init --ai cursor       # Cursor
uipro init --ai claude       # Claude Code
uipro init --ai universal    # Agent Skills 标准目录 .agents/skills/
uipro init --ai all          # 一次写多套助手目录

也支持 npx ui-ux-pro-max-cli init --ai claude，避开全局 EACCES。Claude Code 还可以走 Marketplace：

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

--global 会写到家目录，例如 Cursor 是 ~/.cursor/skills/，通用技能是 ~/.agents/skills/。项目级安装则写进当前仓库的 .cursor/、.claude/skills/ui-ux-pro-max/ 等。CLI 从 2.5.x 起改成模板生成，不再靠仓库内部的符号链接；v2.5.1 之前 Marketplace 打包会踩「Zip contains a symbolic link」，官方建议改走 CLI。

搜索脚本要 Python 3，只依赖标准库，不装第三方、不联网。没有 python3 时生成器直接挂。GitHub 未登录每小时 60 次 raw 下载限额，CI 里请用 UI_PRO_MAX_GITHUB_TOKEN，不要借用 Actions 自带的高权限 GITHUB_TOKEN。内网或要钉版本，用：

uipro init --offline     # 用 CLI 包里捆绑的模板，不再打 GitHub
uipro versions
uipro update
uipro init --ai cursor --force

--offline 的语义以当前 CLI README 为准：现在更像「安装捆绑模板」的兼容开关，不是另做一套离线协议。Cursor / Claude Code / Windsurf / Codex / Gemini CLI 等走 Skill 自动激活；Kiro、GitHub Copilot、Roo Code 走斜杠命令 /ui-ux-pro-max ...。Trae 要先切 SOLO。装完请重启助手，否则技能目录还没被扫到。

三、五域并行检索，再靠行业规则做裁决

官方把流水线拆成四段：解析请求 → 五域并行搜索 → 推理引擎 → 组装设计系统。请求里会抽四类信号：产品类型、意图（新建 / 改版 / 修复）、显式风格词、目标表面（落地页 / 看板 / 移动端）。缺信号时偏向「安全、可访问」，而不是猎奇。

搜索不是大模型「凭感觉挑个好看的」。search.py 对 CSV 做 BM25 / 字符串相似度，每个域返回 Top-N。风格域默认多返回几条供优先级挑选，产品类型只留一条主类目。随后 ui-reasoning.csv 当过滤器：例如 Fintech/Crypto 推荐 Trust & Authority、极简瑞士风、海军蓝+信任蓝+金，反模式写着「Playful design / Unclear fees / AI purple/pink gradients」；Healthcare 则压 neon、压过重动效，并要求更大字号。

直接搜风格域也能当词典用：

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
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react

本机查 glassmorphism 会打回 Style ID、backdrop-blur 10–20px、半透明白 15–30%、适用「现代 SaaS / 金融看板 / 模态层」以及无障碍备注：对比度不够时风险是 conditional。人话输出会把长字段截到 300 字，完整数据加 --json。Web 栈检索还分代：不写旧大版本就返回当前建议；显式写 Next.js 15、Svelte 4 才走遗留行，没有策划过的旧栈会直接空结果，而不是把两代指南混在一起。

四、实跑：同一引擎，银行看板和美容站不该长一样

高级入口不经过聊天，直接打生成器。Continue 把技能放在 .continue/skills/，Droid 在 .factory/skills/，Claude Code 默认是 .claude/skills/：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "fintech banking dashboard" --design-system -p "LedgerLite" -f markdown

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "beauty spa wellness landing" --design-system -p "Serenity Spa" -f markdown

2026-09-15 在仓库自带脚本上跑，两边立刻分叉。

LedgerLite（金融看板）

Serenity Spa（美容落地页）

这就是源文举美容站例子时真正发生的事：不是「AI 突然有品味」，而是 产品类型命中了不同的推理行。银行要信任、金点缀、严肃无衬线；美容要柔和阴影、衬线标题、浅色。源文表格里的「柔粉 + 鼠尾草绿 + 金色 + Cormorant Garamond」是旧 README 的演示快照，当前生成器给美容站配的是 Lora/Raleway 和粉紫奢侈备注。

这里有个必须写进排坑的现象：Fintech 的反模式明确禁止 AI 紫粉渐变，但同一份输出仍把 CTA 写成 #8B5CF6。推理引擎会过滤风格和结构，色板检索仍可能捞到「科技紫」。生成器是检索 + 规则，不是设计师。把 --persist 的 MASTER.md 当源码审查：品牌色不对就改文件，不要盲信第一次打印。

还可以拧三颗旋钮：--variance（1 居中克制 / 10 大胆不对称）、--motion（附带 GSAP 片段）、--density（覆盖间距尺度）。提示词里写清行业和表面，比写「做个好看的页面」有效得多。

五、MASTER.md 是跨会话的源，页面文件才是例外

默认输出只活在当前对话。要让后天改按钮还用同一套 spacing 和色 token，必须持久化：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "fintech banking dashboard" --design-system --persist \
  -p "LedgerLite" --output-dir .

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "playful pricing page with strong CTA" --design-system --persist \
  -p "LedgerLite" --page "pricing" --output-dir .

目录是按 -p 的 slug 分项目的：

design-system/
└── ledgerlite/
    ├── MASTER.md
    └── pages/
        └── pricing.md    # 只写相对 Master 的偏差

检索顺序：先看 pages/[page].md，有则覆盖；没有就严格执行 Master。没有 --force 时，已存在的 MASTER.md 不会被覆盖，避免一次随口重跑把全站色板冲掉。品牌色要锁死，生成后再手改 Master，后续会话把它当已锁定 token。官方差错手册也写了：输出像模板，多半是提示词没写行业/表面；风格永远撞车，先检查是不是残留了上一个项目的 Master。

持久化文件里除了色板和字体，还有 spacing token、阴影档位、按钮 CSS 草稿和交付清单：禁止 emoji 当图标、可点击元素要 cursor-pointer、hover 150–300ms、正文对比度 4.5:1、可见 focus、尊重 prefers-reduced-motion、四个断点。这些清单才是技能比「再写一遍 prompt」值钱的地方——模型擅长补 JSX，不擅长每次都记得银行站不要霓虹。

六、边界、协议和不要迷信 Star

把它用对，还得接受几条硬边界。

它不生产组件源码。 没有 npx shadcn add marquee。21st.dev / Magic UI 是「预览再拷贝」；这篇技能是「先写规范再让模型实现」。两者可以叠：用 Pro Max 定 token，再用 registry 填动效，不要互相替代。

数字会漂。 源文 8.1 万 Star、官网 57 风格、README 若干处仍写 67/161、skill.json 写 79 风格 / 192 色板。本机 CSV 是 88 风格、192 色板、192 条推理。写进团队文档时引用文件和日期，不要抄营销首页。

协议要分开看。 GitHub 仓库是 MIT。npm 页历史上出现过 CC-BY-NC-4.0 字样，和仓库 LICENSE 不一致。商用前自己打开当前 LICENSE 和 npm 元数据，不要只看 Star。

已知安装坑： 把整个仓库 ZIP 丢进 Claude.ai「上传技能」会超过 200 文件上限——那是开发检出，不是上传包；Marketplace 旧版符号链接问题用 CLI 绕开；uipro: unknown command uninstall 说明全局 CLI 太旧，先 npm install -g ui-ux-pro-max-cli@latest。

输出要人工审。 金融案例里反模式和 CTA 色打架，说明规则没有覆盖到每一列。MASTER.md 进 Git，像审 ESLint 配置一样审它。反模式是建议，删掉的行不会在未 --force 重跑时复活。

配套练习在 practice/：脚本会浅克隆官方仓库并生成 design-system/ledgerlite/MASTER.md。先看金融和美容两份结果是不是同一套紫粉模板；如果还是，说明查询词太糊，补上行业和表面再跑一遍。