UI UX Pro Max 使用教程：在 Codex 和 Claude Code 里怎么用。
UI UX Pro Max 是 GitHub 上 star 最多的设计 skill 之一。它不预设某一种风格，而是从一个风格、配色和字体搭配数据库里，为你的产品推荐一整套设计系统。这篇教程讲怎么在 Codex 和 Claude Code 里安装它、生成并保存设计系统，以及怎样让结果不落俗套。
更新于 2026年11月6日 · 阅读约 7 分钟
UI UX Pro Max 是什么
UI UX Pro Max 是 nextlevelbuilder 开发的开源 skill（MIT 协议）。2.15 版自带一个可检索的数据库：80 种风格、192 种产品类型、192 套配色、74 组字体搭配，以及 22 种技术栈的规范，包括 React、Next.js、Tailwind、SwiftUI、Jetpack Compose、React Native 和 Flutter。
当你让 agent 做界面时，这个 skill 会把你的产品描述交给它的检索脚本，脚本返回一套推荐的设计系统：页面结构、风格、配色、字体、效果、你这个行业要避开的反模式，以及上线前的检查清单。agent 再按这套系统去做。脚本只用 Python 标准库，不联网。
安装
需要 Python 3，可以用 python3 --version 检查。
在 Codex（以及大多数其他 agent）里，先装一次 CLI，再把 skill 加到项目里：
npm install -g ui-ux-pro-max-cli
cd my-project
uipro init --ai codex
在 Claude Code 里，用插件市场安装：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
也可以用 CLI：uipro init --ai claude。加上 --global 就对所有项目生效。之后用 uipro update 更新 skill 文件，用 uipro uninstall 卸载。
直接提需求就能用
在 Codex 和 Claude Code 里，你提出界面需求时这个 skill 会自动启用，不需要特殊命令。把产品、用户和平台说具体：
为[一家接受预订的社区面包店]做手机 App 的首页。用户是[周末给家里订面包的忙碌父母]。先用 ui-ux-pro-max skill 选定设计系统，给我看一下，确认后再做这个界面。
用这个 skill 最有用的习惯，就是先看设计系统、再做界面：不喜欢的风格可以在它被铺到每个页面之前就否掉。
直接生成设计系统
你也可以自己运行检索脚本。skill 所在的文件夹取决于 agent：Claude Code 里是 .claude/skills/ui-ux-pro-max/，Codex 装在 .agents/skills/ui-ux-pro-max/ 下。
# 为一个叫 "Crumb" 的产品推荐设计系统
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -p "Crumb"
# 同上，输出成 Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "bakery pre-order mobile app" --design-system -f markdown
# 只搜一个领域：风格、字体、图表、UX 规范、图标
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# 某个技术栈的规范
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
README 自己的例子还调了三个参数：--density、--motion 和 --variance，分别控制结果的密度、动效多少和独特程度。
保存设计系统，让每次对话都能用
加上 --persist，结果会写进 design-system/<name>/MASTER.md；再加 --page，可以为某个页面单独写一份覆盖规则：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
之后，让 agent 每次设计界面前先读 MASTER.md。如果你还用其他工具，可以让它把颜色、字体和间距复制到项目根目录的 DESIGN.md 里，并在 AGENTS.md 里指向它，这样每个 agent 都遵守同一套系统。
给已有的 App 换风格
这个 skill 也适合在不重写的前提下给已有 App 换一套风格。说明目标风格，让 agent 基于你现有的 token 来改：
用 ui-ux-pro-max skill 把这个 App 改成[瑞士极简]风格。先列出它用的框架、样式库和已有的主题 token。保持每个组件的结构和行为不变。修改现有的颜色、字体、间距、圆角和阴影 token，不要另外再建一套主题；一次改一个组件，把写死的样式换掉，每改完一批就检查对比度、焦点状态和深色模式。
怎样让结果不落俗套
- 说清楚不要什么。 它的数据库把毛玻璃、Aurora UI 这类被其他 skill 判为 AI 味的风格当作普通选项。加一句「不要毛玻璃、不要渐变、不要 emoji 图标」。
- 亲眼看结果。 这个 skill 没有视觉检查。多做几个界面之前，先在手机和桌面宽度下看一看，或者把几个方向并排比较。
- 描述产品，而不是风格。 结果取决于你用什么词去搜。「给父母用的面包预订 App」比「现代简洁的 App」能匹配到更好的结果。
- 也可以从现成的系统开始。 我们的设计系统库里有完整的网页和 App 设计系统，可以直接作为 DESIGN.md 交给 agent。
它和 Taste Skill、Impeccable、Anthropic frontend-design 的对比，见去 AI 味的设计 skill 横评。
常见问题
UI UX Pro Max 收费吗？
不收费。GitHub 仓库里的 skill 是免费开源的，MIT 协议。它的 README 还提到一个 Premium 版本，多了品牌、logo 和幻灯片相关的工具，但没有标价。
UI UX Pro Max 能在 Codex 里用吗？
能。先用 npm install -g ui-ux-pro-max-cli 安装 CLI，再在项目里运行 uipro init --ai codex。
为什么需要 Python？
设计系统的检索是一个小 Python 脚本，在 skill 自带的数据文件上运行。它只用标准库，不需要安装任何依赖包。