前端双子星:ui-ux-pro-max 与 Impeccable

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

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

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

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

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

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

安装

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

/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+ 种):

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

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

用法:说人话就行

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

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

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

进阶:直接查它的规则库

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

# 按产品生成整套设计系统建议
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(pbakaus 出品,4.4 万+ star,基于 Anthropic 官方 frontend-design skill 扩展)走另一条路:与其给出海量规则,不如收窄词汇表——一套精选的设计语言 + 明确的反模式清单(anti-slop),直接矫正模型的默认审美底线。同样兼容 Claude Code、Cursor、Copilot、Gemini CLI、Codex。

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

安装

在项目根目录:

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

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

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

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

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

/impeccable init

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

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

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

# 建新东西: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(Claude Skills Hub)、安装数据(Skillselion)、Impeccable 仓库、UI/UX Skills 榜单。