---
title: "前端双子星:ui-ux-pro-max 与 Impeccable"
description: "全面对比ui-ux-pro-max与Impeccable两款Skill，讲解互补治理AI生成前端设计审美问题的方法"
---

AI 生成的前端有一种一眼可辨的"AI 味":紫色渐变、圆角卡片、居中大标题。这两个 Skill 从不同角度治这个病,**互补而非二选一**,很多团队一起装。

## ui-ux-pro-max:设计规则数据库

[ui-ux-pro-max](https://claudeskills.info/skill/ui-ux-pro-max/)(nextlevelbuilder 出品,32 万+ 安装、11 万+ star,目前安装量最大的 UI/UX Skill)把 Claude Code 变成"资深产品设计师"。它不是一段风格提示词,而是一个**可检索的设计规则库**:

| 内容 | 规模 |
| --- | --- |
| 视觉风格 | 84 种 |
| 配色方案 | 192 套 |
| 字体搭配 | 74 组 |
| 产品类型 → 设计推理规则 | 192 种 |
| UX 准则 | 98 条 |
| 图标库 / 动效预设 / 图表类型 | 104 / 16(GSAP)/ 25 |

覆盖 22 种技术栈。Agent 按当前任务(做什么产品、什么组件)检索命中的规则再动手——这正是[渐进式披露](/guide/skills#为什么-skills-是上下文友好的)的正确用法:庞大的知识库躺在文件里,按需取用,不常驻上下文。

**适合**:新页面/新组件设计、重构 UI、选定色彩/字体/间距/布局系统——一切"该长什么样"的决策。

### 安装

Claude Code 插件市场,两条命令:

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

或者用它的 CLI(跨工具通用,支持 Cursor/Windsurf/Codex/Copilot 等 20+ 种):

```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai claude            # 装进当前项目;--global 装到 ~/.claude/skills/
uipro update                      # 日后升级
```

唯一前置要求:本机有 Python 3(检索脚本用,纯标准库,无需装包)。

### 用法:说人话就行

装完**不需要任何命令**——它是自动激活的 Skill,直接用自然语言提需求:

```text
给我的 SaaS 产品做一个 landing page
把这个仪表盘改成深色主题,要专业感
```

Agent 识别到 UI/UX 任务后,会自动跑 5 路并行检索(产品类型 → 设计模式、风格、配色、landing 结构、字体搭配),用 BM25 排序命中规则、过滤反模式,先产出一份**完整的设计系统**(风格 + 色板 + 字体 + 效果 + 要避开的反模式 + 交付前检查清单),然后才开始写码。个别工具(Kiro、Copilot 等)不支持自动激活,用 `/ui-ux-pro-max <需求>` 显式调用。

### 进阶:直接查它的规则库

那个规则数据库本身就是个可检索的工具,不经过 Agent 也能直接查——想看"某种风格该怎么配"时很好用:

```bash
# 按产品生成整套设计系统建议
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# 按领域单查:style / typography / chart / ux / icons
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

# 按技术栈查实现细节
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
```

加 `--persist -p "MyApp"` 会把选定的设计系统写进 `design-system/MASTER.md`,**跨会话固定下来**——之后每次生成 UI 都遵循同一套决策,不会这页蓝下页紫。这解决了它作为"检索型" Skill 的最大短板:不持久化的话,每次检索结果可能不同,风格容易漂移。

## Impeccable:品味与反模式

[Impeccable](https://github.com/pbakaus/impeccable)(pbakaus 出品,4.4 万+ star,基于 Anthropic 官方 frontend-design skill 扩展)走另一条路:与其给出海量规则,不如**收窄词汇表**——一套精选的设计语言 + 明确的反模式清单(anti-slop),直接矫正模型的默认审美底线。同样兼容 Claude Code、Cursor、Copilot、Gemini CLI、Codex。

**适合**:受够了"AI 默认审美"、希望产出有一致设计语言的项目。

### 安装

在项目根目录:

```bash
npx impeccable install     # 通用方式,支持 13+ 种 AI 工具
# 之后在 AI 工具里运行一次 /impeccable init
# 日后升级:npx impeccable update
```

Claude Code 用户也可以走插件市场:

```bash
/plugin marketplace add pbakaus/impeccable
# 然后 /plugin 从列表安装
```

### 第一步永远是 init:先给它上下文

装完别急着让它画页面。Impeccable 的设计哲学是:**没有项目上下文的设计技能,只会产出通用的 AI 味**——代码只能告诉它"做了什么",不能告诉它"给谁用、该是什么感觉"。所以先跑:

```text
/impeccable init
```

它会扫描代码库(README、依赖、现有组件、品牌资产),再向你追问扫不出来的部分:目标用户是谁、品牌三个关键词、参考/反面参考网站、明暗主题偏好。答完它把结论写成 `PRODUCT.md` / `DESIGN.md`(旧版为 `.impeccable.md`)——**之后所有命令都会先读这份设计上下文**,这是它和"一段风格提示词"的本质区别。

### 日常工作流:一个入口,23 个命令

所有能力都挂在 `/impeccable <命令> <目标>` 下,按场景分三类:

```text
# 建新东西:shape 先出设计简报,确认后再写码,写完开浏览器视觉迭代
/impeccable craft 订单列表页,支持筛选和批量导出
/impeccable shape 通知中心          # 只出设计简报,不动手

# 审查已有界面
/impeccable critique landing        # UX 视角的设计评审,打分 + 问题清单
/impeccable audit blog              # 技术质量体检:可访问性/性能/响应式,P0-P3 分级
/impeccable polish settings         # 上线前最后一遍细节:对齐、间距、一致性

# 定向微调(嫌它改得太多时用这些小刀)
/impeccable bolder 首页 hero        # 太平庸 → 加视觉冲击
/impeccable quieter 仪表盘          # 太吵 → 收敛
/impeccable animate 侧边栏          # 补过渡动画
/impeccable harden checkout        # 补错误态、空态、溢出等边缘情况
```

常用命令可以 `pin` 成顶级快捷方式:`/impeccable pin audit` 之后直接 `/audit` 即可。另有不依赖 AI 的静态检测器:`npx impeccable detect src/`,61 条确定性规则,可挂进 CI。

### 它在背后拦了什么

看几条它写死的规则,就明白"矫正默认审美"是什么意思:

- **字体反射清单**:不只禁 Inter/Roboto,连"被告知别用 Inter 后模型的第二反射"——Space Grotesk、DM Sans、Playfair Display、Fraunces 等 20 余款训练数据常客也整体拉黑,强制按品牌关键词重新选型;
- **绝对禁令**:卡片左侧彩色竖条(`border-left: 4px solid ...`)、渐变文字(`background-clip: text` + 渐变)——两个最典型的 AI 痕迹,发现即重写;
- **AI slop 测试**:每次交付前自问"如果告诉别人这是 AI 做的,对方会不会秒信?"会,就说明还不够;
- **强制视觉迭代**:craft 流程要求真的在浏览器里打开页面、逐个检查空态/错误态/响应式,"能跑"不是标准,"愿意拿给人看"才是。

## 两者的关系

一句话:**ui-ux-pro-max 负责"查手册做对",Impeccable 负责"有品味地做"。**

| | ui-ux-pro-max | Impeccable |
| --- | --- | --- |
| 思路 | 海量规则,按需检索 | 精选词汇表 + 反模式 |
| 作用点 | 具体设计决策(选什么色/字/布局) | 整体审美底线与一致性 |
| 形态 | 规则数据库 | 设计语言宣言 |
| 组合建议 | 两者共存:先由 Impeccable 定调,再用 ui-ux-pro-max 落实细节 | |

---

*来源:[ui-ux-pro-max(Claude Skills Hub)](https://claudeskills.info/skill/ui-ux-pro-max/)、[安装数据(Skillselion)](https://skillselion.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max)、[Impeccable 仓库](https://github.com/pbakaus/impeccable)、[UI/UX Skills 榜单](https://claudeskills.info/best/ui-ux-skills/)。*