UI/UX Pro Max & Impeccable 使用指南 2026

写给只会 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 标志生成全套推荐：颜色体系、排版规范、布局模式、视觉效果、反模式清单。

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 都会先读这个文件，保持整站视觉一致性。

# 第一次：生成并保存
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 的推荐。

写法示例：

## 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 的推荐会自动在这些约束范围内执行。

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

在对话里直接说：

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

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

<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 里，之后的指令执行会尊重这些声明。

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

/typeset header

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

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

安装 UI/UX Pro Max

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

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

/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）：

npm install -g uipro-cli

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

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         # 同时安装给所有工具

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

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

前置要求：Python 3.x

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

没有的话按系统安装：

# macOS
brew install python3

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

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

更新到最新版：

uipro update

安装 Impeccable

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

npx skills add pbakaus/impeccable

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

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

/plugin marketplace add pbakaus/impeccable

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

方式三：手动安装

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

更新方式：

npx skills update

安装验证

验证 UI/UX Pro Max：

在 AI 工具里输入：

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

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

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 里运行：

/teach-impeccable

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/audit

或者针对具体区域：

/audit hero section
/audit contact form

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

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

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

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

/normalize

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

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

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

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

第八步：上线前最终打磨

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

/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

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

综合工作流（链式使用）

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

/audit /normalize /polish blog

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

/critique /harden checkout

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

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

主要参数说明

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

输出格式选项

# 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 里声明工作流顺序

## 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 的指令找不到或没有反应

检查步骤：

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

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

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

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

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

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

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

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 相关报错，先更新工具：

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% █░░░░░░░░░░░░░░░	博客配图生成、事实信息获取

Command Palette