frontend-design 管“态度”，ui-ux-pro-max 管“素材库”，Impeccable 管“打磨与审查”；三者分工不同，可以组合，但要控制触发和规则冲突。
一、三个 skill 的定位
一句话区分：frontend-design 约束“怎么想”，ui-ux-pro-max 提供“有什么可选”，Impeccable 负责“怎么改、怎么查”。
| frontend-design | ui-ux-pro-max | Impeccable | |
| 来源 | Anthropic 官方 | nextlevelbuilder 社区项目 | Paul Bakaus 社区项目 |
| 性质 | 设计方法论与反套路约束 | 可检索的设计知识库 + 设计系统生成 | 设计语言 + 一组审查/打磨命令 |
| 核心动作 | 先定位、出设计方案、自查再写代码 | 按行业推荐风格、配色、字体、UX 规则 | critique、polish、audit 等针对已有界面的命令 |
| 解决的问题 | 不要平庸 | 有哪些选择、怎么落地 | 已有页面哪里不对、怎么修 |
| 最适合 | 任何新建 UI 的底线约束 | 从空白页起步、需要一套完整基础 | 救已有页面、上线前把关 |
| 需要额外环境 | 无 | Python 3（检索脚本） | Node（npx 安装与检测脚本） |
一个有用的类比：ui-ux-pro-max 提出“什么可行”，Impeccable 过滤“什么难看”，frontend-design 则是共同的底线。
二、安装
三者装在不同目录，互不覆盖，可以同时存在。
frontend-design：是 Anthropic 官方 skill，来自 anthropics/skills 仓库；具体安装命令以官方仓库说明为准。
ui-ux-pro-max（任选一种）：
1. CLI：npm install -g uipro-cli，然后在项目根目录运行 uipro init --ai claude。不想全局安装可用 npx uipro-cli init --ai claude。
2. 插件市场：/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill，再 /plugin install ui-ux-pro-max@ui-ux-pro-max-skill。
CLI 方式会生成 .claude/skills/ui-ux-pro-max/（skill 本体）和 .shared/ui-ux-pro-max/（数据与脚本，各工具共用）。它的检索引擎依赖 Python 3，先确认 python3 --version 可用。后续用 uipro update 升级，uipro versions 查看可用版本。
Impeccable（任选一种）：
1. 官方推荐：在项目根目录运行 npx impeccable install，然后在 Claude Code 里运行 /impeccable init。
2. 通用方式：npx skills add pbakaus/impeccable，会自动识别你的 AI 工具。
3. 插件市场：/plugin marketplace add pbakaus/impeccable，再打开 /plugin 从列表安装。
在 Claude Code 上，npx impeccable install 和 npx impeccable update 还会同时装一个设计 hook。刷新已有安装用 npx impeccable update。
三、frontend-design：设计态度与底线
它不提供素材，而是改变 Claude 动手前的思考方式。核心要求有四条：
1. 先定位，再设计：先说清产品是什么、给谁用、页面的主要任务，视觉选择从行业和场景里长出来。
2. 先出设计方案，再写代码：用少量带名字的色值、字体及其角色、布局概念和设计原则，组成一个小型 token 系统；然后自查“这是不是我给任何同类页面都会出的东西”，是就改。
3. 避开 AI 味清单：标题里只给一个词加斜体或换色、全大写小标签、无意义的 01/02/03 编号、每个区块都淡入上滑、渐变色块装饰、链接文字后加箭头。
4. 克制：只让一处成为记忆点，其余保持安静；文案也是设计（按钮写“保存修改”而不是“提交”，空状态要告诉用户下一步）。
怎么用：多数情况下它会在你提出新建 UI 的请求时自动触发。想确保触发，就在提示词里点名：
请按 frontend-design 的流程做：先写设计方案（色板、字体、布局概念），对照“是不是通用默认”自查一遍，再写代码。 产品：…… 用户：…… 页面主要任务：……
它最大的价值是当底线：和其他 skill 同时存在时，它负责压住通用默认值。
四、ui-ux-pro-max：设计知识库与设计系统生成
它是一个带数据的 skill：内置风格、配色、字体搭配、UX 规则和图表类型的数据库，加一个 Python 检索脚本，覆盖 React、Next.js、Vue、Flutter、SwiftUI 等多种技术栈。各站点给的数量不一致（风格 50 到 67 种、配色 97 到 161 套、字体搭配 57 组、UX 规则 99 条），版本不同，以你装到的为准。
触发方式：
• 自动：提出构建、设计、实现、评审、修复、改进 UI/UX 的请求时激活。
• 手动：/ui-ux-pro-max Build a landing page。
设计系统生成：这是它最有价值的功能。先按产品类型和行业生成一套完整的基础（风格、色板、字体、规则），并可保存下来给后续生成复用：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --design-system --persist -p "MyApp"
结果会写进项目的 design-system/ 目录。也可以单独检索某个维度，比如
search.py "glassmorphism" --domain style
适合：从空白页起步、想一次问就得到一套连贯的视觉基础。
不适合：项目已经有自己的设计 token。这时它的目录会变得多余，甚至互相矛盾。
用法要点：把它当候选池，不要全自动采纳。让它给 2 到 3 个方向，你选一个，再去调整。
五、Impeccable：设计语言与审查打磨
Impeccable 在 frontend-design 的基础上扩展：加入排版、色彩与对比、空间、动效、交互、响应式、文案七个方面的参考资料，并提供一组命令，让你用设计师的词汇指挥模型。当前版本把所有命令收进一个入口 /impeccable，官方 README 称有 23 条命令、实时浏览器迭代，以及一批确定性的反模式检测规则（规则数量在不同页面中写作 44、59、60，说明版本在变）。
第一步：初始化
/impeccable init
用来收集项目的设计上下文并保存，后续所有命令都会读取它。旧版本里对应的是 /teach-impeccable，上下文存在 .impeccable.md。新版会生成 PRODUCT.md、DESIGN.md 等文件。
常用命令（形式都是 /impeccable <命令> [目标]）：
| 命令 | 用途 |
| critique | UX 设计评审：层级、清晰度、情感共鸣。例：/impeccable critique landing |
| polish | 最后一遍打磨：对齐设计系统、达到可上线状态 |
| document | 从现有代码反向生成根目录 DESIGN.md |
| extract | 把可复用的组件和 token 提取进设计系统 |
| doctor | 检查并修复项目里的 Impeccable 文件与当前版本是否漂移 |
早期版本还有 /audit、/normalize、/animate、/simplify、/typeset、/arrange、/overdrive 等独立命令；新版是否保留、叫什么，请以安装后的 README 和 /impeccable 列表为准。
典型流程（改已有页面）：init → critique 看问题清单 → 按问题逐个修（排版、间距、动效等）→ polish 收尾。
两个特点：
• 它自带一批确定性的检测规则，评审不完全依赖模型的主观判断。
• 在 Claude Code 上安装时会同时装一个设计 hook，具体行为以其说明为准。
六、组合使用
分工原则：ui-ux-pro-max 提供方向，frontend-design 做反套路自查，Impeccable 评审与打磨。 按场景有两条工作流。
流程 A：从零做新页面
1. 用 ui-ux-pro-max 生成 2 到 3 个候选方向（风格、配色、字体）。
2. 你选定一个，让 frontend-design 的流程把它改得贴合你的产品，并自查是否落入通用默认。
3. 写代码，截图看效果。
4. 用 Impeccable 的 critique 评审，再 polish 收尾。
任务：为【产品】做【页面】，用户是【人群】，主要任务是【动作】。 第一步：用 ui-ux-pro-max 给出 3 个差异明显的设计方向（风格、色板、字体），先不要写代码。（我选定后） 第二步：按 frontend-design 的流程写设计方案并自查“是否是同类页面的通用默认”，通过后再实现。 硬性要求：不用渐变装饰，不用统一圆角卡片堆叠，不用全大写小标签。
流程 B：改已有页面
1. /impeccable init 一次，让它读懂项目。
2. /impeccable critique <页面> 拿到问题清单。
3. 逐项修，一次只改一个维度（先版式，再配色，再字体，最后动效）。
4. /impeccable polish 收尾；改动大的话再跑一次 critique 对比。
固化结果：不管走哪条流程，把最终确定的色板、字体、间距写进项目文档（如 DESIGN.md 或 CLAUDE.md）。后续生成都围绕它，不会漂移。