UI/UX Pro Max 设计 AI 技能本地部署与使用指南

一、项目介绍

UI UX Pro Max 是一个面向 AI 编程助手的设计智能 Skill。它把资深设计师多年积累的决策能力——配色、字体、布局模式、交互规范、无障碍要求——沉淀成一个可被 AI 助手即时检索的知识库，让 Claude Code、Cursor、Windsurf、Codex、GitHub Copilot 等工具在生成 UI 时自动给出专业级设计系统建议。

项目当前（v2.0）的旗舰功能是设计系统生成器：你只需告诉它"我要做一个美容 SPA 的落地页"，它会并行检索产品类型、风格、配色、字体配对与落地页模式，再通过推理引擎输出一套完整的设计系统——包含推荐布局模式、主色/辅助色/CTA 色、字体组合、关键动效、应避免的反模式，以及一份交付前检查清单。

它代表了一种新趋势：与其反复在提示词里教 AI"怎么设计好看"，不如把设计经验结构化成本地知识库，让助手在需要时查表。这种做法可复用、可版本管理、不依赖联网，比每次手写长提示词更稳定。

它内置 79 种可检索 UI 风格（50 种活跃）、192 套配色、74 组字体配对、119 条 UX 规范、25 种图表类型、22 种技术栈，并为 192 个行业场景提供专属推理规则。脚本仅使用 Python 标准库，不联网、不安装额外依赖，适合在本地离线运行。

为什么 AI 写 UI 总差点意思

大模型在生成前端页面时，常见的毛病是：配色随意（一上来就用紫色渐变）、字体配对没有章法、按钮与链接缺少可访问性标签、响应式断点处理粗糙、对行业惯例缺乏理解——金融应用套了个活泼的游戏风，医疗产品用了刺眼的高饱和色。问题不在于模型不会写 HTML/CSS，而在于它缺少一份"这个行业、这个产品类型应该长什么样"的设计决策知识库。

UI UX Pro Max 的思路就是把这份知识库结构化、本地化、可被检索。当你说"做一个美容 SPA 的落地页"，它不是让模型凭空想象，而是先查行业规则表：SPA 类推荐柔和配色、优雅衬线字体、低动效、避免霓虹色；再把这些约束连同具体的色值、字体 Google Fonts 链接、交付前检查清单一起喂给模型。模型于是在一个明确的设计系统下生成代码，而不是自由发挥。对独立开发者与小团队来说，这相当于廉价地获得了一位设计评审。

这种"技能（Skill）"形态值得多说一句。它不是一个独立运行的网站或框架，而是一段可以被 AI 编程助手加载的上下文包：里面放着检索脚本与结构化数据，助手在需要时按关键词查表、把命中的设计规则注入提示词。它的好处是轻量——不需要联网调用外部服务，所有决策依据都在本地；也不绑定某个特定模型，只要你的助手支持加载技能，就能复用这套设计知识。对希望提升 AI 产出 UI 质量的团队，这是一种低成本的"提示词工程即服务"思路。

二、官方信息

说明：该项目早期仓库路径为 secondmeet/ui-ux-pro-max-skill，现已迁移至 nextlevelbuilder/ui-ux-pro-max-skill，本文以当前活跃仓库为准。

三、项目结构与核心特性

安装后，Skill 文件会落到对应 AI 助手的 skills 目录（如 .claude/skills/ui-ux-pro-max/）。核心结构如下：

ui-ux-pro-max-skill/
├── scripts/
│   └── search.py            # 本地检索脚本（仅用标准库）
├── data/
│   ├── styles.csv           # 79 种 UI 风格
│   ├── palettes.csv         # 192 套配色
│   ├── fonts.csv            # 74 组字体配对
│   └── ...                  # UX 规范、图表类型、技术栈等
└── SKILL.md                 # Skill 描述与触发规则

核心特性：

• 设计系统生成：一条命令输出完整设计系统（模式+风格+配色+字体+动效+反模式+检查清单）。
• 多助手支持：通过 uipro init --ai <name> 一键安装到 Claude Code、Cursor、Windsurf、Codex、Copilot 等二十余种助手。
• BM25 本地检索：脚本用 BM25 排序在本地 CSV 里查找，不调用网络。
• 行业推理规则：为科技/SaaS、金融、医疗、电商、服务、创意、生活方式等行业预置专属规则与反模式。
• 主题迁移：可对已有 React/Vue 应用做整体换肤，保留组件结构与业务逻辑，只替换硬编码样式为设计令牌。
• 分层持久化：用 --persist 把设计系统保存为 MASTER.md + 页面级 override，跨会话复用。

这种分层持久化是它区别于"每次重新生成"的关键。设计系统一旦写进 MASTER.md，后续每个页面都引用同一份令牌，视觉自然一致；个别特殊页面再用 override 单独调整。对多页面项目，这种做法能从源头避免风格漂移。

四、环境与版本要求

官方明确：AI 助手在使用本 Skill 时不应擅自帮用户安装软件，需要用户自己准备 Python 环境。检查方式：

python3 --version

因为检索脚本只用 Python 标准库，不依赖任何第三方包，所以环境要求非常宽松——任何能跑 Python 3 的机器都行。真正的门槛在 Node.js 那一侧：安装 uipro CLI 需要 npm，而它最终要把文件落到某个 AI 助手的 skills 目录，所以你还得先选定并装好一个受支持的助手。三者（Python、Node、助手）齐备，这个 Skill 才能完整运转。

五、本地部署步骤

1. 安装 CLI

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

安装完成后会提供 uipro 命令（注意：旧的 uipro-cli 包已过时，不要使用）。

2. 在项目中初始化 Skill

进入你的项目目录，选择你使用的 AI 助手：

cd /path/to/your/project
uipro init --ai claude       # Claude Code
uipro init --ai cursor       # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai codex        # Codex CLI

常用 --ai 取值还包括 copilot、gemini、kiro、roocode、opencode、universal、all 等。

3. 全局安装（可选）

如果希望所有项目都能用，安装到全局 skills 目录：

uipro init --ai claude --global    # 安装到 ~/.claude/skills/
uipro init --ai universal --global # 安装到 ~/.agents/skills/

4. 验证安装

uipro versions          # 查看可用版本
uipro update            # 刷新 Skill 文件

这一步的目的是确认 Skill 文件已经落到助手能识别的目录。如果 uipro versions 能列出版本，说明 CLI 工作正常；如果在助手里输入 /start 类命令没有反应，多半是安装作用域不对——项目级安装只对当前目录生效，全局安装才对所有项目可见。建议先在一个测试项目里完成安装与触发，确认流程通顺，再推广到其他项目，避免一上来就全局安装却不知道装到了哪里。

5. 在助手中触发

启动你的 AI 助手，用自然语言描述需求即可：

Build a landing page for my SaaS product

支持 Skill 模式的助手会自动激活；Workflow 模式的助手（如 Kiro、Roo Code）用斜杠命令：

/ui-ux-pro-max Build a landing page for my SaaS product

装好后第一次使用，建议先用一个简单页面试跑设计系统生成器，确认检索脚本与助手联动正常，再用在正式项目里。这样能及早暴露路径或配置问题。

六、API 用法与示例

1. 直接调用检索脚本

安装后，search.py 位于 .claude/skills/ui-ux-pro-max/scripts/（路径因助手而异）。生成设计系统：

# ASCII 表格输出
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" \
  --design-system -p "Serenity Spa"

# Markdown 输出
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" \
  --design-system -f markdown

这条命令本质上是在本地 CSV 数据里做关键词匹配，再按行业规则拼出一份设计系统。输出里会同时给出推荐色值、字体组合与"应避免"的反模式，你可以把它直接当作提示词的一部分粘贴给模型，也可以人工挑选后再使用。即便不通过 AI 助手，单独跑这个脚本也能快速得到一套设计参考。

2. 分领域检索

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 "error summary validation" --domain ux

3. 技术栈专属检索

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

4. 持久化设计系统

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" \
  --design-system --persist -p "MyApp"

会生成如下结构：

design-system/
└── myapp/
    ├── MASTER.md          # 全局设计令牌
    └── pages/
        └── dashboard.md   # 页面级覆盖

构建具体页面时先查 pages/ 下的覆盖文件，没有则回退到 MASTER.md。

让设计建议真正落地的用法

装上 Skill 后，最容易犯的错是直接说"帮我做个网页"，然后模型自由发挥。更好的做法是把需求说具体：目标用户是谁、什么行业、想要什么风格（可从 79 种风格里挑一个，如 Minimalism、Glassmorphism、Bento Grid）、技术栈是 React 还是 Vue。Skill 拿到这些约束后，会先输出一份设计系统（配色色值、字体组合、布局模式、反模式），再按这个系统写代码，而不是边写边想配色。

对于已有项目的换肤，不要让模型"重新设计"，而是明确要求它保留组件结构与业务逻辑，只把硬编码的颜色、圆角、阴影替换成语义化设计令牌。做完后对照交付前检查清单逐条核对：对比度是否达到 4.5:1、键盘焦点是否可见、是否响应式、是否尊重 prefers-reduced-motion。这份清单本身就是 Skill 输出的一部分，等于把设计评审环节自动化了。

它和直接让大模型写前端的区别

你可能会问：我直接跟 Claude 说"做个好看的落地页"不就行了？区别在于约束。没有这份知识库时，模型会套用训练数据里最常见的"AI 风格"——紫色渐变、圆角卡片、无意义图标，看起来像模板。有了 Skill，模型在生成前先拿到一份行业规则：金融产品该用稳重配色、避免花哨动效；医疗产品要强调可信与清晰；电商落地页要突出转化按钮位置。这些规则不是模型自己"想"出来的，而是设计师沉淀的决策。

另一个价值是一致性。一个项目往往有多个页面，没有设计系统时，每个页面的按钮颜色、圆角、间距可能都不一样。Skill 生成的 MASTER.md 把这些令牌集中管理，后续页面都引用同一份，视觉自然统一。对独立开发者来说，这相当于用一份本地文件替代了一个小型设计团队的规范文档。

多试几个不同类型的页面，你会发现它对设计系统的建议相当稳定，值得长期留在助手里。

七、常见问题 FAQ

下面整理了初次安装与调用这个 Skill 时最常遇到的几个疑问，供快速排查参考。它的问题多集中在宿主助手识别不到、检索脚本报错，以及旧包名混淆，下面逐一说明。

Q1：安装后 AI 助手没有自动激活 Skill 怎么办？
确认你用的是受支持的助手（见 uipro init --ai 列表），并在安装后重启助手会话。Trae 用户需先切到 SOLO 模式。也可以直接用斜杠命令 /ui-ux-pro-max 显式触发。

Q2：脚本运行报 "python3: command not found" 怎么办？
本 Skill 的检索脚本依赖 Python 3 标准库。请到 python.org 或用系统包管理器安装 Python 3.x，再重跑。

Q3：检索结果会联网吗？会发送我的项目内容吗？
不会。search.py 只读本地 CSV 数据并用 BM25 排序，不发任何网络请求。项目内容只在你和 AI 助手之间流转。

Q4：Basic 版和 Premium 版有什么区别？
本仓库是 Basic 开源版，包含 79 种风格、192 套配色与 BM25 检索。Premium 版额外提供品牌标识生成、Logo、企业级 Design Token 架构等，详情见 uupm.cc。

Q5：如何卸载或更新？

uipro update                 # 更新本地 Skill 文件
uipro uninstall --ai claude   # 卸载指定助手的 Skill
uipro uninstall --global     # 卸载全局安装

整体而言，UI UX Pro Max 代表了一种很实用的思路：不重新发明一个设计工具，而是把设计师的经验结构化后，喂给已经很会写代码的 AI 助手。它让"AI 写前端"从"能用"提升到"像样"，对没有专职设计师的小团队尤其有价值。用熟之后，你会发现真正提升产出的不是提示词技巧，而是这套本地设计系统提供的一致约束。

以上就是这个设计智能 Skill 的安装与调用流程。把设计经验沉淀成本地知识库后，AI 助手生成界面时的专业度会明显提升。

八、相关链接

• 仓库主页：nextlevelbuilder/ui-ux-pro-max-skill
• 官方网站：uupm.cc
• npm CLI 包：ui-ux-pro-max-cli
• 风格数据：styles.csv

本文命令与参数对照仓库 README 整理，支持的助手列表与数据规模可能随版本更新，请以官方仓库为准。