先说结论
AI 做界面之所以总是”长一个样”（渐变英雄区、圆角卡片、紫粉配色），根本原因不是模型审美差，而是没人给它设计立场。Anthropic 官方的 frontend-design 和社区的 UI/UX Pro Max 解决的是同一件事，但路子完全相反：
- frontend-design：给立场。让模型在写代码之前先确定视觉方向，愿意冒险。
- UI/UX Pro Max：给规则库。192 条行业推理规则、79 种 UI 风格、192 套配色，用检索把”该长什么样”算出来。
要出效果，两个都装、配合用：前者定调，后者兜底不跑偏。下面所有数据都是 2026-09-26 从 GitHub 拉的真实数据，不是抄榜单。
一、frontend-design：Anthropic 自己的”反模板”技能
在 anthropics/skills 仓库（⭐178,472，最近更新 2026-09-24）里，除了文档四件套，设计相关的还有四个。我把它们的 SKILL.md 原文读了，各自职责如下：
| 技能 | 干什么 | 什么时候用 |
|---|---|---|
| frontend-design | 建立视觉方向：配色、字体、版式的立场，避免”模板默认值” | 要新建或重构界面时 |
| theme-factory | 10 套预设主题（配色+字体），可套到文档、报告、HTML 落地页等产物上 | 要给已有产物统一换皮 |
| canvas-design | 生成 .png / .pdf 的视觉作品：海报、单幅设计 | 要一张图，不是一个页面 |
| web-artifacts-builder | 用 React + Tailwind + shadcn/ui 搭复杂的 claude.ai artifact | 要做多组件交互页面 |
frontend-design 的 SKILL.md 开头这句话很能说明它的脾气，我原样翻译一下：
把自己当成一家”以给每个客户做出不会被认错的视觉身份”出名的设计工作室的设计负责人。这个客户已经拒绝过那些俗套的、像模板的提案，他付钱要的就是鲜明观点：针对这次的需求，在配色、字体、版式上做出刻意的、有主张的选择，只要有理由，就敢冒审美风险。
它还有一条要求值得单独拎出来：“把设计扎根在题材上”——如果你的需求里没说清楚产品到底是什么，它要先自己判定一个具体的题材和受众，并且回头跟你确认。光这一条就能救回一半的跑偏。
安装
# 官方仓库整体注册为插件市场（一次即可）
/plugin marketplace add anthropics/skills
# 装示例技能合集（frontend-design、theme-factory、canvas-design 都在里面）
/plugin install example-skills@anthropic-agent-skills可复制：先定方向再写代码
我要做一个【产品一句话描述】，受众是【目标用户】。
在写任何代码之前，先给我三个不同的视觉方向，每个方向说清：
1. 一句话气质（例如"克制的技术感""复古未来主义"）；
2. 主色 + 辅助色 + 背景 + 文字色的具体色值；
3. 字体搭配（标题/正文各用什么，并说明为什么）；
4. 版式骨架（首屏放什么、信息层级怎么排）；
5. 这个方向明确"不做什么"（反模式）。
三个方向要真的不一样，不要同一个方案换配色。我选完你再开始写代码。二、UI/UX Pro Max：把”该长什么样”变成可检索的规则
仓库 nextlevelbuilder/ui-ux-pro-max-skill，⭐130,725，MIT 许可，2026-09-26 还在更新（我核实当天就是今天）。它不是一段提示词，而是一整套可检索的设计知识库加 CLI。v2.0 的主打功能是设计系统生成器。README 里标了这些数字：
- 192 条行业推理规则——覆盖 SaaS、金融科技、医疗、电商、本地服务、创意、生活方式、前沿科技等分类
- 79 种可搜索 UI 风格（当前启用 50 种）：玻璃拟态、黏土拟态、极简、粗野主义、新拟态、Bento 网格、暗色模式、AI 原生界面等
- 192 套配色，与 192 个产品类型一一对应
- 74 组字体搭配（带 Google Fonts 引用）
- 25 种图表类型、22 种技术栈（React / Next / Vue / Svelte / SwiftUI / Flutter / Tailwind / shadcn 等）
- 119 条 UX 准则，含可访问性与”文本不被截断”这类生产环境常见坑
它的工作流程也写在 README 里：收到需求 → 五个维度并行检索（产品类型 / 风格 / 配色 / 落地页模式 / 字体搭配）→ 推理引擎匹配并过滤反模式 → 吐出一份完整设计系统：模式 + 风格 + 色板 + 字体 + 动效 + 要避免的反模式 + 交付前检查清单。
举它 README 里的一个真实例子会更好懂：给”美容 SPA”做落地页时，它输出了 Soft UI 风格、柔和粉+鼠尾草绿+金的配色、Cormorant Garamond / Montserrat 字体，同时在反模式里明确写：不要亮霓虹色、不要生硬动画、不要暗色模式、不要 AI 紫粉渐变。
安装（两种）
# 方式 A：Claude Code 插件市场
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
# 方式 B：CLI（推荐，支持二十来种 Agent）
npm install -g ui-ux-pro-max-cli # 注意包名是这个，旧的 uipro-cli 已废弃
cd /path/to/your/project
uipro init --ai claude # 也可换成 cursor / codex / gemini / windsurf / universal 等
uipro init --ai claude --global # 装到 ~/.claude/skills/，所有项目可用
# 维护
uipro update # 更新技能文件
uipro init --dry-run # 只预览要做什么，不写文件
uipro uninstall # 卸载两个提醒：
- 它需要本机有 Python 3.x——搜索脚本只用标准库，不联网、不装任何东西。README 还特意写了一句：AI 不该替你在机器上安装软件，应该来问你。这条我很认同。
- 装之前想清楚装到项目级还是全局级：项目级只影响这一个仓库，全局级对所有项目生效。
可复制：用它出一份完整设计系统
我要做：【产品类型，例如"面向中小团队的发票与账单工具"】
目标用户：【用户描述】
技术栈：【例如 Next.js + Tailwind】
请用 UI/UX Pro Max 的检索能力给我一份完整设计系统，包含：
1. 推荐的落地页/页面模式（分几块、每块放什么）；
2. 匹配的 UI 风格，说明为什么是它；
3. 完整色板（主色/辅助色/强调色/背景/文字），给具体色值；
4. 字体搭配与怎么用（标题、正文、强调）；
5. 动效与交互的尺度（哪些地方动、动多久、要不要尊重 prefers-reduced-motion）；
6. 这个行业要避免的反模式，至少 4 条；
7. 交付前检查清单（对比度、焦点可见、响应式断点、文本不截断等）。
不要用 emoji 当图标，用 SVG。不要给我"紫色渐变科技感"这种万金油答案。可复制：已有设计系统时，用它做审查而不是重做
我们已经有设计系统，下面是我们的 tokens（颜色/字号/间距/圆角/阴影）：
【粘贴你的 tokens】
请基于这套已有的东西做审查，不要重新生成一套风格：
1. 当前页面里有哪些地方偏离了这套 tokens；
2. 哪些组件在窄屏、浏览器缩放或字号放大后会截断或错位；
3. 对比度不达 4.5:1 的文字是哪几处；
4. 键盘焦点是否可见，可点击元素是否都有 cursor-pointer；
5. 有没有只靠颜色传达状态的地方（色盲不可读）。
逐条给"位置 + 问题 + 怎么改"，不要重写整个页面。三、怎么配合，以及各自的坑
配合顺序
- 先用 frontend-design 定方向（三选一，人工拍板）——它给的是立场；
- 再用 UI/UX Pro Max 补规范和检查清单——它给的是边界；
- 最后才让 Agent 写代码。顺序反了就会变成”先生成一堆代码，再试图用规则救回来”。
frontend-design 的坑
- 它有观点，所以会跟你的品牌打架。如果你已经有设计规范，第一步就把 tokens 钉死丢给它，让它在这套东西里做选择，而不是让它自由发挥。
- 它要求”确认题材”这件事会产生一次来回。如果你嫌烦，就在需求里一开始就把产品和受众写清楚，能省掉这一轮。
UI/UX Pro Max 的坑
- 它是规则库不是设计师。值钱的是”反模式”和”检查清单”那两部分——那是真能省你返工时间的；至于风格推荐，把它当参考，别当圣旨。
- 79 种风格里当前启用 50 种，说明它自己也还在收敛。看到推荐结果跟品类气质明显不符时，直接换一个风格 ID 再跑，别硬用。
- CLI 会往你的技能目录写文件（
~/.claude/skills/或项目目录），虽然搜索脚本本身不联网，但安装动作依然是往你机器上放东西——先用--dry-run看一遍它要做什么。
可复制：装之前的安全自查（通用）
我要安装这个技能包：【仓库地址】。在动手之前请告诉我：
1. 它会往我机器的哪些目录写文件，是全局还是项目级；
2. 里面有没有可执行脚本，脚本是否会联网、读环境变量或密钥；
3. 卸载方式是什么，会不会留下残留文件；
4. 按"可直接装 / 先 --dry-run 看一遍 / 不装"给结论并说明理由。
不确定就说不确定，不要猜。小结
让 AI 界面不再”长一个样”，靠的不是换个模型，而是在它写代码之前把设计决策做完。frontend-design 负责让它敢做选择，UI/UX Pro Max 负责让选择有据可依、不踩生产环境的坑。两个都用 MIT / 官方源，成本为零，值得花半小时装上试一次。
下篇写搜索优化方向的 claude-seo：26 个子技能怎么给站点做技术 SEO 和 GEO（让内容被 AI 搜索引用）自查。
数据来源：GitHub REST API 与 anthropics/skills、nextlevelbuilder/ui-ux-pro-max-skill 两个仓库的 README 及 SKILL.md 原文，核实时间 2026-09-26。UI/UX Pro Max 星标 130,725，MIT，最近更新 2026-09-26；anthropics/skills 星标 178,472，最近更新 2026-09-24。安装命令与功能数量以仓库最新版本为准。