# UI UX Pro Max 和 Impeccable 完全指南

> 写给只会 Vibe Coding 的你，零设计基础也能读懂
> 
> 2026 年 3 月 · 基于 UI/UX Pro Max v2.2.x · Impeccable v1.6.0

* * *

## 一、你遇到的问题，有一个名字叫「AI Slop」

你用 Claude Code、Cursor 或者 Lovable 让 AI 帮你做了一个网站。功能是对的，但看起来……像一个模板。

具体来说是这样的：紫色或蓝色渐变背景。Inter 字体（几乎所有 AI 生成界面都默认用这个）。一排三个卡片，每张卡片里有个图标、一个标题、一段文字。按钮圆角很大，颜色是正蓝色。

你说「帮我改得好看一点」。AI 改了。但改完还是那个味道。

你尝试更具体描述：「我想要高端感」、「我想要更有设计感」、「我想要苹果官网那种风格」。结果要么没变，要么变得更奇怪。

这种现象，社区有个专门的词——**AI Slop**（AI 糟粕）。它指的是所有 AI 生成内容都趋同于同一个统计均值、缺乏个性和专业质量的现象。在界面设计上表现得尤为明显：无数开发者用不同工具、做不同项目，最后做出来的东西都有一种「AI 感」。

这不是你的问题，也不是 AI 能力不足的问题。这是一个结构性问题：**AI 生成界面时缺少设计参考系**。

UI/UX Pro Max 和 Impeccable 就是为了填补这个结构性空缺。

* * *

## 二、为什么 AI 总是生成同一套界面

理解根本原因，才能真正用好解决方案，所以先花一点时间解释这背后的机制。

AI 学会写界面的方式，是通过大量分析已有的代码和网页。它见过的网站里，数量最多的是什么？Bootstrap 的模板、Tailwind CSS 的示例页、各种 UI 组件库的官方文档、以及互联网上大量普通的商业网站。

这些东西长得很像，风格趋同。所以 AI 学会的「默认界面长相」，其实是互联网上最常见网站的**统计平均值**——不是最好看的，而是最常见的。

当你说「给我做一个网站」，AI 产出的正是这个统计均值，而不是最适合你的设计。这就是为什么那么多人用不同工具做出的东西都有同一种「AI 感」。

解决这个问题有两种思路，分别对应两个工具：

**思路一：在 AI 动手之前，给它明确的设计参考系**，告诉它用什么颜色、什么字体、什么视觉风格，让它有据可依，不依赖默认直觉。这是 **UI/UX Pro Max** 的做法。

**思路二：AI 动手之后，用精准的设计语言来精修结果**，不是说「改得好看一点」，而是用设计师的专业词汇来操控具体的调整方向。这是 **Impeccable** 的做法。

* * *

## 三、两个工具分别是什么

在介绍细节之前，先解释几个可能陌生的词：

**Skill（技能包）是什么？** Skill 是一种可以安装到 AI coding 工具里的「扩展知识包」。安装之后，AI 在处理特定类型任务时会自动读取这个知识包，做出更好的判断。就像给助理提供一本专业参考手册——助理本人还在，但参考了手册之后给出的答案质量完全不同。

**Claude Code 是什么？** Anthropic 出品的终端 AI 编程工具，直接在命令行里运行，可以读取你的本地文件、修改代码、执行命令。Cursor 和 Windsurf 是类似的 AI 编程 IDE。这两个 Skill 都支持这些工具。

**两个工具的核心定位对比：**

| 对比维度 | UI/UX Pro Max | Impeccable |
| --- | --- | --- |
| 解决的核心问题 | AI 不知道你要什么风格和设计方向 | AI 不知道如何精修界面细节质量 |
| 工作阶段 | 项目开始时，生成设计系统 | 页面做出来后，精调和优化 |
| 工作方式 | 检索内置设计数据库，输出设计参数 | 提供 20 个设计操作指令 |
| 数据库规模 | 161 种产品类型 + 161 套调色板 + 57 种字体 + 99 条 UX 规则 | 7 个专业参考文档 + 20 个设计指令 + 反模式库 |
| 开源协议 | MIT 免费开源 | Apache 2.0 免费开源 |
| 作者背景 | 社区开发者 nextlevelbuilder 维护，27 位贡献者 | Paul Bakaus，前 Google Chrome DevTools 负责人、jQuery UI 作者 |
| 继承关系 | 独立构建，横向扩展设计数据 | 基于 Anthropic 官方 frontend-design skill 深度增强 |
| GitHub Stars | 约 29,000 | 约 13,300（2026 年 3 月） |

两个工具是**互补关系，不是竞争关系**。理想的用法是：项目开始时用 UI/UX Pro Max 确立设计方向，代码做出来后用 Impeccable 精修质量。后文的工作流部分会详细说明。

* * *

## 四、UI/UX Pro Max 详解：开始之前，给 AI 一个设计参考系

### 它究竟做了什么

最简单的理解方式：**它给 Claude 装了一个可以搜索的设计师知识库**。

没有这个 Skill 时，你跟 AI 说「帮我做一个科技公司的官网首页」，AI 会直接开始写代码，凭自己的「统计直觉」决定颜色、字体、布局。结果就是那个 AI 感很重的通用科技页面。

装了这个 Skill 之后，同样的请求发出去，AI 在写任何代码之前会先做一件事：**用 Python 脚本去检索内置的设计数据库**，找到最适合「科技公司官网」的颜色体系、字体组合、视觉风格、页面结构，然后生成一套完整的「设计系统」参数，再基于这套参数写代码。

这个过程你在对话界面里基本感知不到，但输出质量会有显著差异。

### 数据库里有什么

| 类别 | 内容规模 | 用途说明 |
| --- | --- | --- |
| 产品类型推理规则 | 161 条 | 区分「B2B 企业软件」「消费级电商」「医疗平台」等不同场景的设计逻辑 |
| 色彩调色板 | 161 套 | 每套注明最适合哪类品牌、传达什么情绪 |
| 字体组合 | 57 种 | 经过验证的标题+正文字体搭配，含 Google Fonts 直链 |
| UI 视觉风格 | 50+ 种 | 含 glassmorphism、brutalism、claymorphism 等当下流行和经典风格 |
| UX 规则指南 | 99 条 | 按优先级排列的体验设计规范，含无障碍访问标准 |
| 图表类型推荐 | 25 种 | 仪表盘和数据可视化项目专用 |
| 支持技术栈 | 10+ 种 | HTML/Tailwind（默认）、React、Next.js、Vue、Svelte、shadcn/ui 及移动端 SwiftUI、Flutter、Jetpack Compose |

> **术语解释——「技术栈」**：指你的项目用的是哪些技术组合。比如「Next.js + Tailwind」就是一种技术栈，意思是用 Next.js 这个框架搭配 Tailwind CSS 这个样式工具。如果你不确定自己用的是什么，问问 AI「我的项目用的是什么技术栈」，它会告诉你。

### 核心工作流程

Skill 激活后，Claude 处理每个 UI/UX 请求都遵循固定的四步流程：

**第一步：提取需求关键词**

从你的描述里提取产品类型、风格关键词、行业背景、技术栈。

**第二步：生成设计系统（核心步骤，必须执行）**

用 `--design-system` 标志生成全套推荐：颜色体系、排版规范、布局模式、视觉效果、反模式清单。

```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "B2B enterprise data analytics corporate" \
  --design-system -p "MyProject"
```

**第三步：领域深挖（按需执行）**

针对某个具体维度做补充查询，比如专门查字体、专门查颜色、专门查某个技术栈的规范。

**第四步：生成代码 + 交付前检查**

综合前三步的结果生成代码，并在交付前自动检查 UI/UX 反模式。

### 最关键功能：持久化设计系统

**这个功能对做多页面网站的人极其重要。**

做网站往往是分多次 session 完成的：今天做首页，明天做关于我们，后天做联系页。问题是 AI 没有跨 session 的记忆——每次重新开 session，它不知道上次用了什么颜色和字体，新生成的页面可能和之前的差距很大，整站看起来像「拼凑」的。

`--persist` 功能解决这个问题。它把生成的设计系统保存到项目里的 `design-system/MASTER.md` 文件，之后每次 session，Claude 都会先读这个文件，保持整站视觉一致性。

```bash
# 第一次：生成并保存
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "tech B2B corporate" --design-system --persist -p "CompanyName"

# 为特定页面添加差异化配置（可选）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "contact form conversion" --design-system --persist \
  -p "CompanyName" --page "contact"
```

* * *

## 五、Impeccable 详解：做完之后，用设计师的语言精修

### 它解决了一个关于「语言」的问题

Impeccable 官网有一句话说得很准：**好的设计描述需要设计词汇，但大多数人没有这些词汇。你没办法说「给我增加 vertical rhythm（垂直节奏）」，因为你从来没用过这个词。**

> **术语解释——「垂直节奏」（Vertical Rhythm）**：指页面上各元素之间的行高和间距遵循统一的节奏感，就像音乐有节拍一样。缺少垂直节奏的页面感觉「松散不统一」；有良好垂直节奏的页面感觉「齐整、专业」。你未必能说出这个词，但你肯定能感受到这种差别。

设计师有一套专业语言：排版节奏、视觉层次、空间设计、动效时机、交互反馈……这些词不是装饰，它们代表了真实、可操作的具体调整动作。

但你不是设计师，你不知道这套语言。所以你只能说「好看一点」，AI 不知道「好看」的具体方向是什么，就原地不动或者瞎猜。

**Impeccable 的解法是：把设计师会做的操作，封装成 20 个可以直接调用的指令**，让没有设计背景的你，也能用精准的语言操控 AI 的设计行为。

### 两个核心组成部分

**组成一：增强版 frontend-design Skill（后台自动运行）**

Impeccable 在 Anthropic 官方的 `frontend-design` skill 基础上深度扩展，增加了 7 个专业领域的参考文档：

| 参考文档 | 覆盖内容 |
| --- | --- |
| typography（排版学） | 字型比例、字体配对、OpenType 功能、垂直节奏、FOUT 问题 |
| color-and-contrast（色彩与对比度） | OKLCH 色彩空间、色调中性色、深色模式、无障碍对比度 |
| spatial-design（空间设计） | 间距系统、网格、视觉层次 |
| motion-design（动效设计） | 缓动曲线、交错动画、减少动效偏好 |
| interaction-design（交互设计） | 表单、焦点状态、加载模式 |
| responsive-design（响应式设计） | 移动优先、流式设计、容器查询 |
| ux-writing（UX 文案） | 按钮标签、错误提示、空状态文字 |

这部分在你处理前端代码时自动生效，不需要你主动调用。

**组成二：20 个设计指令（你主动调用）**

这是 Impeccable 最直观的部分，下一章节会逐一详解。

### 反模式库：明确告诉 AI 什么不能做

> **术语解释——「反模式」（Anti-Pattern）**：指那些看起来合理、实际上会带来问题的做法。在设计里，反模式就是那些「AI 喜欢用但会让界面看起来廉价或业余」的设计习惯。

Impeccable 内置了一份详细的反模式清单，这些都是 AI 生成界面时最容易犯的错误，会明确告诉 AI「这些事情禁止做」：

*   不要用过度滥用的默认字体（单独使用 Arial、系统字体作为唯一字体）
    
*   不要在彩色背景上放灰色文字（应该用该颜色的深色变体）
    
*   不要用纯黑（#000）或纯白（#fff）——颜色要带色调
    
*   不要把所有东西都塞进卡片，不要卡片套卡片
    
*   不要用 bounce 或 elastic 缓动效果（已经过时，显得廉价）
    
*   不要用「AI 调色板」：深底色配青色、蓝紫渐变、深色背景配霓虹强调色
    
*   不要用 emoji 做导航图标（跨平台渲染不一致，应该用 SVG 图标库）
    

**反模式库为什么有效？** 因为 AI 对这些模式有很强的「统计惯性」——它学习的大量数据里这些模式很常见。明确的「禁止」指令能打破这种惯性，效果有时比「要做什么」的正向指令更明显。

* * *

## 六、它们会限制你的设计风格吗？直接回答

这是很多人在用之前最担心的问题，这里分成两个工具分别直接回答。

### UI/UX Pro Max：不会限制，但有个条件

**短答案：不会，但你需要明确告诉 Claude 你的设计意图。**

Skill 的本质是推荐系统，不是强制规范。它的所有输出都是「建议」：当你的描述模糊，它给 Claude 一个有依据的默认选择；当你有明确方向，你的描述优先级更高。

**三种情况分别说明：**

**情况一：你有明确风格，直接说出来**

你说「帮我用 Brutalism 风格设计公司官网」，Skill 不会反对，它会去数据库里找 Brutalism 的具体实现规范，然后按照 Brutalism 的逻辑来生成。

你说「我们的品牌色是 #1A2B3C，字体是 GT Walsheim，风格偏北欧极简」，Skill 会用你给的约束条件，从数据库里找最匹配的辅助决策，不会推翻你的方向。

**情况二：你没有明确风格，Skill 推断**

你完全不提风格，Skill 会根据产品类型推断设计系统。如果推断结果不符合期望，告诉 Claude「不对，我想要 XXX 感觉」，它会调整。这个过程可以来回沟通，直到满意再开始写代码。

**情况三：你的风格极端非主流（需要额外处理）**

如果你的品牌定位非常非主流——比如刻意反设计的「Anti-Polish」风格、高度实验性的视觉语言、或者某个小众行业的特殊规范——Skill 的数据库基于主流专业实践构建，对这类场景的匹配精度有限。

这种情况的处理方法是：**先在 CLAUDE.md 里写明品牌规范，再使用 Skill**。CLAUDE.md 是每次 Claude Code session 启动时自动读取的项目说明文件（如果你不知道这是什么，可以理解为「给 AI 的永久备注本」），写在里面的规范优先级高于 Skill 的推荐。

写法示例：

```markdown
## Brand Identity

Our visual language is deliberately anti-conventional:
- Color: High contrast black/white with ONE accent: #FF3D00
- Typography: Druk Wide (headers), Space Mono (body)
- Style: Raw Digital — visible grid lines, zero rounded corners
- DO NOT recommend "professional" or "trustworthy" color palettes
- Brand guidelines override all design system recommendations
```

加了这段文字后，Skill 的推荐会自动在这些约束范围内执行。

**还有一个随时可用的「关闭推荐」方法：**

在对话里直接说：

```plaintext
不要参考设计系统推荐，完全按我的要求来：[你的具体要求]
```

或者在 CLAUDE.md 里加强版声明：

```markdown
<important>
For this project, all visual design decisions are pre-defined
in brand-guidelines.md. Do NOT generate new design system
recommendations. Always read brand-guidelines.md first.
</important>
```

### Impeccable：会编码进作者的审美偏好，要知道这一点

这一点比 UI/UX Pro Max 更需要说清楚。

Impeccable 是 Paul Bakaus 个人审美和经验的系统化产物。「不要用 bounce 缓动」「不要用霓虹色」「不要用 Inter 作为唯一字体」——这些规则代表了一位资深工程师/设计师认为「什么是好的设计」。

**如果你的项目恰好要求「bounce 动效」「霓虹色游戏风格界面」这类风格，Impeccable 的反模式规则可能会与你的需求冲突。**

处理方式有两种：

一是在 `/teach-impeccable` 初始化时，明确告诉 AI 你的风格方向和例外情况，它会把这些记录到 `.impeccable.md` 里，之后的指令执行会尊重这些声明。

二是对具体指令加限定参数。比如你只想修字体，不想动其他的：

```plaintext
/typeset header
```

而不是只运行 `/typeset`（这会处理整个页面的字体系统）。

* * *

## 七、安装方法（不需要懂代码）

### 安装 UI/UX Pro Max

**方式一：Claude Code Plugin Marketplace（最简单）**

在 Claude Code session 里直接输入这两行：

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

**方式二：CLI 工具安装（适合 Cursor、Windsurf 等工具）**

先在电脑的终端里安装 CLI 工具（Mac 用 Terminal，Windows 用 PowerShell）：

```bash
npm install -g uipro-cli
```

然后进入你的项目目录，根据你用的工具选择对应命令：

```bash
uipro init --ai claude      # Claude Code
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         # 同时安装给所有工具
```

**方式三：手动安装（离线或需要精确控制版本时）**

1.  从 GitHub Releases 页面（https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases）下载最新版 zip
    
2.  解压到你的项目根目录（就是 `package.json` 所在的那个文件夹）
    
3.  Skill 文件会自动出现在 `.claude/skills/ui-ux-pro-max/`
    

**前置要求：Python 3.x**

检查方式：在终端输入 `python3 --version`，如果显示版本号就说明已经安装了。

没有的话按系统安装：

```bash
# macOS
brew install python3

# Ubuntu/Debian
sudo apt update && sudo apt install python3

# Windows（在 PowerShell 里）
winget install Python.Python.3.12
```

**更新到最新版：**

```bash
uipro update
```

* * *

### 安装 Impeccable

**方式一：一行命令（自动检测你的工具）**

```bash
npx skills add pbakaus/impeccable
```

这个命令会自动检测你的项目用的是 Claude Code、Cursor 还是其他工具，文件会被放到正确位置。

**方式二：Claude Code Plugin（在 session 里操作）**

```plaintext
/plugin marketplace add pbakaus/impeccable
```

然后打开 `/plugin`，在 Discover 标签里找到 impeccable 点击安装。

**方式三：手动安装**

从 https://impeccable.style 下载「Download universal ZIP」，解压到项目根目录。ZIP 里包含所有工具的目录（`.claude/`、`.cursor/`、`.gemini/` 等），根据你用的工具取对应目录的内容。

**更新方式：**

```bash
npx skills update
```

* * *

### 安装验证

**验证 UI/UX Pro Max：**

在 AI 工具里输入：

```plaintext
帮我做一个科技公司的落地页，用 HTML + Tailwind
```

如果看到 AI 在回答前先运行了类似这样的命令，说明安装成功：

```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "tech company landing page" --design-system
```

**验证 Impeccable：**

在 Claude Code session 里输入 `/`，下拉列表里出现 `/audit`、`/polish`、`/typeset` 等选项，说明安装成功。

* * *

## 八、实战工作流：从零到一个好看的网站

这是综合使用两个工具的完整流程，每一步都解释了为什么要这样做。

### 第一步：用 `/teach-impeccable` 告诉 Impeccable 你的项目背景（只做一次）

在项目开始时，在 Claude Code 里运行：

```plaintext
/teach-impeccable
```

AI 会问你几个关于项目的问题：目标用户是谁、品牌的情绪目标是什么、参考什么风格、反对什么风格。你回答之后，这些信息会保存到项目根目录的 `.impeccable.md` 文件里。

**这一步的意义：** 之后你用的每个 Impeccable 指令（`/polish`、`/audit`、`/typeset` 等）都会自动读取这个文件，所有调整都在你的项目上下文里进行，而不是对着一个陌生项目凭空发挥。这个文件在 Impeccable 更新时不会被覆盖，永久保存。

* * *

### 第二步：用 UI/UX Pro Max 生成设计系统（每个新项目做一次）

在开始写任何页面代码之前，先用自然语言描述你的项目，让 AI 生成设计参数：

```plaintext
我要做一个 [你的产品类型] 的 [官网/落地页/管理后台]，
主要用户是 [目标用户描述]，
品牌调性是 [专业/活泼/高端/极简 等]，
技术栈用 [React/Next.js/HTML+Tailwind 等]。

先帮我生成一套完整的设计系统，不要写代码，
我想先看看设计方向再决定要不要调整。
```

AI 会查询 UI/UX Pro Max 数据库，输出一套设计参数，大致包含：

*   页面布局结构建议（比如首页该用「Hero-Centric」还是「Problem-Solution」结构）
    
*   完整颜色体系（主色、辅助色、背景色、文字色、边框色，带具体 hex 色值）
    
*   字体组合（标题字体 + 正文字体，附带 Google Fonts 引入链接）
    
*   核心视觉效果（阴影、圆角程度、渐变处理方式）
    
*   该类型产品应该避免的反模式清单
    

**在这个阶段，你可以跟 AI 来回沟通，调整设计方向。** 这比在代码层面反复修改要高效得多，因为参数改动不涉及代码，成本极低。

* * *

### 第三步：保存设计系统到文件（多页面项目必做）

如果你的网站有多个页面，在确认设计系统之后，保存到文件：

```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "你的产品描述关键词" \
  --design-system --persist -p "你的项目名"
```

这会在项目里生成 `design-system/MASTER.md`。之后做每个新页面时，Claude 都会先读这个文件，整站风格保持一致。

* * *

### 第四步：分区域生成页面代码

确认设计系统之后，开始写代码。**关键习惯：一次只做一个区域，看完效果再继续：**

```plaintext
基于刚才的设计系统，先帮我实现首页的 Hero 区域。
做完停下来，不要继续往下做，我要先看效果。
```

不要一次性让 AI 生成整个页面。这样出了问题可以及时定位，不用全部推翻重来。

* * *

### 第五步：用 `/audit` 找问题

每做完一个主要区域，运行：

```plaintext
/audit
```

或者针对具体区域：

```plaintext
/audit hero section
/audit contact form
```

> **术语解释——**`/audit`**（审计/审查）**：这里的「审计」是指对 UI 代码做系统性检查，找出不符合设计规范的问题。就像财务审计是检查账目，UI 审计是检查界面质量。

输出是带严重程度标注（P0/P1/P2/P3，P0 最严重必须修，P3 可选）的问题清单，附有具体修复建议。v1.6.0 版本开始，`/audit` 会对 5 个维度打分并给出结构化行动计划。

* * *

### 第六步：用 `/normalize` 统一风格

做了多个区域之后，可能出现细微的不一致——某个按钮圆角跟其他不一样，某处间距感觉偏小。运行：

```plaintext
/normalize
```

AI 会把所有组件对齐到同一套设计标准，消除「感觉哪里不对但说不清楚」的情况。

* * *

### 第七步：针对性优化具体问题

根据 `/audit` 的结果和你自己的感受，用对应指令调整：

*   字体排版感觉有问题 → `/typeset`
    
*   布局间距感觉不对 → `/arrange`
    
*   颜色太单调 → `/colorize`
    
*   整体太「平」太无聊 → `/bolder`
    
*   太复杂太花哨 → `/distill`
    
*   想加动效 → `/animate`
    
*   想要视觉上让人眼前一亮 → `/overdrive`（实验性）
    

* * *

### 第八步：上线前最终打磨

所有页面完成后，做最后一次全面精修：

```plaintext
/polish
```

这是「发布前的最终打磨」指令，专门处理那些功能完整但细节不够精致的情况：检查所有交互状态是否完整（悬停状态、禁用状态、加载状态）、所有过渡是否流畅自然、所有细节是否达到上线标准。

Impeccable 官方的描述很准确：`/polish` **是已发布和精磨之间的那道工序**。

* * *

## 九、Impeccable 20 个指令全解析

所有指令都支持加参数，把范围限定在特定区域，比如 `/audit hero`、`/polish checkout-form`。

### 初始化指令（最先运行）

`/teach-impeccable`

一次性项目初始化。AI 分析你的代码库，询问关于目标用户、品牌个性、设计偏好的问题，把结果保存到 `.impeccable.md`。之后所有指令都会读取这个上下文，确保调整符合项目整体风格。更新 Impeccable 时不会覆盖这个文件。

* * *

### 检查和评审指令（发现问题用）

`/audit`

技术质量全面检查。对 5 个维度进行评分，输出带 P0–P3 严重程度的问题清单和结构化行动计划。检查范围：WCAG 无障碍访问标准（颜色对比度、ARIA 标签、键盘导航）、响应式布局、性能、主题一致性。

> **术语解释——WCAG 和无障碍访问**：WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是一套关于网站对残障人士友好程度的国际标准。其中最基础的一条是「色彩对比度」——文字颜色和背景颜色之间的对比度要足够高，视力不好的人才能看清楚。AI 生成的界面经常忽视这个问题。

适合做任何改动之前先运行，了解当前状态。

`/critique`

设计层面的 UX 审查，与 `/audit` 互补。`/audit` 看技术规范，`/critique` 看用户体验质量——视觉层次是否清晰、信息架构是否合理、情绪感染力如何。v1.6.0 更新后，基于 Nielsen 的 10 条可用性启发原则评分，并用不同用户角色进行认知负荷测试。

* * *

### 修复和统一指令（解决问题用）

`/normalize`

统一设计标准。消除多个组件之间的细微不一致，把所有元素对齐到同一套设计语言。适合做了大量代码之后整体「理齐」。

`/typeset`

修字体排版系统。修字体选择、排版层次（H1/H2/H3 的大小比例）、字号和字重的一致性、行高、字间距。v1.5.1 更新后，对 App UI 推荐固定字型比例（更一致），对营销/内容页保留流式排版（更灵活）。

> **术语解释——「行高」（Line Height）**：指两行文字之间的垂直间距。行高太小，文字挤在一起难以阅读；行高太大，阅读时眼睛跨度太长，容易失去位置。合适的行高是正文字号的 1.5–1.8 倍，这是排版的基础原则。

`/arrange`

修布局和间距。解决单调网格、不一致间距、视觉层次薄弱的问题，让页面的空间设计更有意图感。

`/harden`

增强健壮性。添加错误处理、多语言文本支持、文字溢出处理、边界情况管理。让界面在极端情况下（很长的名字、报错状态、空数据状态）也能优雅处理。

* * *

### 风格调整指令（改变整体感觉用）

`/bolder`

加强视觉冲击力。当设计感觉太安全、太平庸、缺乏存在感时使用。放大颜色使用、强化排版对比、增加视觉重量。

`/distill`（前身是 `/simplify`，v1.1.0 后改名）

删减到本质。当设计太复杂、信息过载、视觉噪音太多时使用。剥去所有不必要的元素，强化最核心的内容。

`/quieter`

降低视觉强度。当设计太抢眼、太有攻击性时使用，是 `/bolder` 的反向操作。

`/colorize`

策略性引入色彩。当设计感觉太单调、太灰、缺乏生气时，有策略地加入色彩，增加视觉趣味而不破坏整体协调性。

* * *

### 添加细节指令（提升体验感用）

`/animate`

添加有目的的动效和微交互。这里的动效是「改善可用性的动效」，不是纯装饰——页面元素进入的过渡、按钮的交互反馈、状态切换时的动画。会自动考虑用户的「减少动效」系统偏好（prefers-reduced-motion）。

`/delight`

添加令人愉快的小细节。那些让用户说「这个好有意思」的微小时刻——有意思的空状态、意想不到的悬停效果、恰到好处的小动画。

`/overdrive`（实验性功能，v1.5.0 引入）

突破常规限制，追求技术上和视觉上都令人印象深刻的效果。用于想让人问「这是怎么做到的」的场景——WebGL shader 效果、60fps 虚拟化列表、弹簧物理动画、滚动驱动的揭示效果。这是所有指令里最激进的一个，适合想做出差异化印象的项目。

* * *

### 工程质量指令

`/optimize`

性能优化。改善加载速度、渲染效率、动画性能、图片处理、打包体积。

`/extract`

提取成可复用组件。把重复出现的 UI 模式整理成组件，有助于维护设计一致性和代码可维护性。

* * *

### 特定场景指令

`/clarify`

改善 UX 文案。修按钮标签、错误提示、空状态文字、占位符文字，让界面上的文字更清晰、更有帮助。

`/adapt`

跨设备适配。确保设计在不同屏幕尺寸（手机、平板、桌面）和不同情境下的一致体验。

`/onboard`

设计引导流程。改善用户第一次使用时的体验——新用户引导、空状态设计、功能发现提示。

* * *

### 综合工作流（链式使用）

指令可以链式执行，形成完整的处理流水线：

```plaintext
/audit /normalize /polish blog
```

依次执行：检查 → 统一 → 精修，针对 blog 区域。

```plaintext
/critique /harden checkout
```

UX 审查 + 健壮性增强，针对结账流程。

* * *

## 十、UI/UX Pro Max 搜索命令完整参考

### 主要参数说明

```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "<关键词>" \
  [--design-system] \
  [--domain <domain名称>] \
  [--stack <技术栈名称>] \
  [-p "项目名称"] \
  [-f markdown] \
  [-n <最大结果数>] \
  [--persist] \
  [--page "页面名称"]
```

> 方括号 `[]` 里的参数是可选的，尖括号 `<>` 里的是你需要替换的内容。

### `--domain` 可选值详解

| domain 值 | 用途 | 示例关键词 |
| --- | --- | --- |
| `product` | 获取产品类型的设计风格推荐 | "B2B SaaS analytics dashboard" |
| `style` | 获取详细的视觉风格指南（配色方案、效果、实现框架） | "glassmorphism dark minimal" |
| `typography` | 获取字体搭配方案（含 Google Fonts 直链） | "elegant professional serif" |
| `color` | 获取完整色彩调色板（主色/辅色/CTA/背景/文字/边框） | "fintech trust navy blue" |
| `landing` | 获取落地页结构布局建议 | "hero-centric social-proof conversion" |
| `chart` | 获取图表类型推荐（仪表盘/数据分析项目专用） | "analytics time-series comparison" |
| `ux` | 获取 UX 最佳实践和反模式清单 | "animation accessibility z-index loading" |

### `--stack` 可选值

`html-tailwind`（不指定时的默认值）、`react`、`nextjs`、`astro`、`vue`、`nuxtjs`、`svelte`、`shadcn`、`swiftui`、`react-native`、`flutter`、`jetpack-compose`

### 输出格式选项

```bash
# ASCII 格式（默认，适合在终端直接看）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "tech startup" --design-system

# Markdown 格式（适合保存成文档）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "tech startup" --design-system -f markdown
```

### 让关键词更有效的技巧

关键词越具体，推荐结果越精准。参考以下对比：

| 效果差的描述 | 效果好的描述 |
| --- | --- |
| "tech company" | "B2B enterprise SaaS analytics manufacturing industry" |
| "food website" | "premium restaurant fine dining Japanese cuisine" |
| "app" | "healthcare patient-facing mobile app iOS accessibility" |
| "dark mode" | "fintech crypto trading dark mode neon accents" |

把行业、客户群体、产品类型、使用场景都带进关键词，推荐质量会有明显提升。

* * *

## 十一、与其他 Skill 搭配使用

这两个工具不是孤立的，搭配其他 Skill 使用效果更完整。

### 搭配 Anthropic 官方 frontend-design Skill

三个工具的定位完全不同，可以同时使用：

*   **frontend-design**（Anthropic 官方）：解决设计「审美方向」，注重突破 AI 的通用风格，强调「这个界面的独特个性是什么」
    
*   **UI/UX Pro Max**（社区）：解决「设计参数支撑」，提供可检索的具体数据，强调「数据库推荐什么」
    
*   **Impeccable**（社区）：解决「精修质量」，提供操作指令，强调「怎么把界面从可用调整到精良」
    

对公司官网项目，三个同时安装是合理的：frontend-design 负责整体设计方向，UI/UX Pro Max 负责具体参数和 UX 规则，Impeccable 负责最终质量打磨。

### 搭配 Vercel web-design-guidelines Skill

Vercel 的这个 Skill 专注于「技术合规性」——ARIA 属性、键盘导航、语义 HTML、触控目标尺寸等具体技术规范，100+ 条规则，涵盖无障碍访问、性能、UX 最佳实践。

分工方式：UI/UX Pro Max 负责设计系统生成，Impeccable 负责质量调整，web-design-guidelines 负责最终的技术规范核查。

### 在 CLAUDE.md 里声明工作流顺序

```markdown
## Design Workflow

For any UI/UX task, follow this order:
1. ui-ux-pro-max: generate design system with --design-system flag
2. Implement based on the generated design system
3. Run /audit with Impeccable to find issues
4. Use targeted Impeccable commands to fix issues
5. web-design-guidelines: final compliance check before shipping
```

* * *

## 十二、常见问题与排查

### Skill 安装完但没有自动激活

**可能原因：请求里没有触发词。**

根据两个 Skill 的 `description` 字段，触发词包括：操作类（`build`、`create`、`design`、`implement`、`review`、`fix`、`improve`、`optimize`、`enhance`、`refactor`）、项目类型词（`website`、`landing page`、`dashboard`、`admin panel`、`SaaS`、`portfolio`）、元素词（`button`、`modal`、`navbar`、`form`、`chart`）。

纯聊天或讨论技术选型的对话不会触发，这是正常的。

* * *

### Impeccable 的指令找不到或没有反应

检查步骤：

1.  在 Claude Code session 里输入 `/`，查看下拉列表是否出现 `/audit`、`/polish` 等选项
    
2.  如果没有，尝试 `/reload-plugins` 热重载
    
3.  还不行的话退出 session，重新进入
    

如果是 Cursor 用户，需要确认已经在设置里开启 Agent Skills。

* * *

### 设计系统推荐结果不符合我的行业

这几乎总是因为关键词不够具体。

把你的行业、目标客户群体、产品的核心功能都带进关键词。例如，「医疗」可以细化成「patient-facing mobile app chronic disease management elderly users」，这样的推荐精度远高于「medical app」。

* * *

### 多页面项目如何保持一致性

这是 UI/UX Pro Max 的 `--persist` 功能解决的问题。第一个页面确认设计系统后，运行：

```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "你的项目关键词" --design-system --persist -p "项目名"
```

之后每次 session，Claude 会先读 `design-system/MASTER.md`，自动保持风格一致。如果某个特定页面需要有所不同（比如 landing page 比内页更活泼），可以用 `--page "页面名"` 参数生成页面级的覆盖配置。

* * *

### 已经有设计稿了，还需要这两个工具吗

需要，但使用姿势不同。

**UI/UX Pro Max**：不用 `--design-system`，转而用 `--domain ux` 检查无障碍访问和 UX 规范，用 `--stack` 获取对应技术栈的实现规范。Skill 此时扮演「技术规范顾问」角色，而不是设计决策者。

**Impeccable**：仍然非常有用。即使有设计稿，AI 在实现时也可能丢失细节——`/audit` 能帮你找出实现和设计稿的差距，`/typeset` 和 `/arrange` 能修正排版和间距问题，`/polish` 能做最终质量检查。

* * *

### 用了 `/polish` 但感觉没变化

`/polish` 只处理细节打磨，它假设界面在结构上已经完整。如果你的界面有根本性的问题（布局混乱、颜色随机、字体不统一），应该先用 `/normalize`、`/typeset`、`/arrange` 处理根本问题，再用 `/polish` 做最终收尾。

把它理解成「出门前照镜子整理仪容」，而不是「从头换一套穿搭」。

* * *

### Python 报错（通常出现在旧版本）

v2.2.x 修复了 Python 3.11 及以下的兼容性问题。遇到 Python 相关报错，先更新工具：

```bash
uipro update
```

* * *

## 十三、参考资源

**UI/UX Pro Max：**

*   GitHub 主仓库：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
    
*   在线数据库（可以提前预览风格、颜色等）：https://ui-ux-pro-max-skill.nextlevelbuilder.io
    
*   发布日志：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases
    
*   FastMCP 页面（含完整搜索参考）：https://fastmcp.me/skills/details/191/ui-ux-pro-max
    

**Impeccable：**

*   官网：https://impeccable.style
    
*   指令速查表（交互式）：https://impeccable.style/cheatsheet
    
*   GitHub：https://github.com/pbakaus/impeccable
    
*   `/teach-impeccable` 详细文档：https://www.mintlify.com/pbakaus/impeccable/skills/teach-impeccable
    

**参考阅读：**

*   Snyk 发布的 Top 8 Claude UI/UX Skills 横向对比：https://snyk.io/articles/top-claude-skills-ui-ux-engineers/
    
*   Impeccable 深度分析（含限制说明）：https://emelia.io/hub/impeccable-ai-design-skill
    
*   UI/UX Pro Max 与 Vibe Coding 的结合：https://synapsewire.com/en/posts/ui-ux-pro-max/
    

* * *

## 本文创作构成

| 构成 | 占比 | 说明 |
| --- | --- | --- |
| 🖊️ 人工调研与审核 | 5% █░░░░░░░░░░░░░░░ | 选题方向、事实核查、最终校对 |
| 🤖 Claude | 90% ██████████████░░ | 内容写作、结构设计、案例整理 |
| ✨ ChatGPT | 5% █░░░░░░░░░░░░░░░ | 博客配图生成、事实信息获取 |