写给只会 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 的结果和你自己的感受，用对应指令调整：
第八步：上线前最终打磨
所有页面完成后，做最后一次全面精修：
/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：
Impeccable：
参考阅读：
本文创作构成
| 构成 |
占比 |
说明 |
| 🖊️ 人工调研与审核 |
5% █░░░░░░░░░░░░░░░ |
选题方向、事实核查、最终校对 |
| 🤖 Claude |
90% ██████████████░░ |
内容写作、结构设计、案例整理 |
| ✨ ChatGPT |
5% █░░░░░░░░░░░░░░░ |
博客配图生成、事实信息获取 |
