12 个免费 Skills，告别 AI 生成的廉价设计

Inter 字体、紫色渐变、带阴影的圆角卡片。当我刚开始用 AI 写代码时，真正的瓶颈从来不是代码本身，而是设计。每个 AI 生成的界面看起来都像从同一个模板工厂出来的。

一个 SKILL.md 文件就能改变 agent 对设计的思考方式。过去几个月里，我安装并测试了几十个设计 skill。大多数在一周内就被卸掉了，要么是互相冲突，要么是提升微乎其微。下面这 12 个才是真正留下来的。

从哪里开始

Anthropic 官方 frontend-design 插件是基础配置。它随 Claude Code 一起发布，为布局、排版和配色设定了基础规则。没有它的话，agent 每次都会默认生成同样的 Inter + 紫色渐变组合。把它当作底线，而不是天花板。

Impeccable 在官方插件的基础上扩展了 20 个斜杠命令：/polish、/audit、/distill、/bolder、/quieter 等等。每个命令针对一个特定的设计问题。/audit 会对无障碍性、主题和响应式断点进行全面质量检查。/distill 将组件精简到最核心的部分。我在每次部署前都会用 /polish 做最后一轮检查。

控制设计强度

Taste Skill 采用了不同的方式。它不用斜杠命令，而是通过三个数值变量（比如 DESIGN_VARIANCE）来控制 agent 偏离默认值的程度。低值适合保守的企业级界面，高值适合实验性的落地页。这种粒度很实用，不过找到最佳值需要反复尝试。我第一次把 variance 调到最高时，做出来的东西看起来像 2006 年的 MySpace 页面。

图标和视觉素材

Better Icons 接入了 150 多个图标集，包含超过 20 万个图标。按关键词搜索后，SVG 会直接同步到你的项目中。在用这个之前，我需要从五六个不同的网站手动下载图标。搜索质量因图标集而异，但对于常见的 UI 图标，它能很快找到合适的匹配。

组件级设计智能

UI Design Brain 包含 60 多个组件在五种设计风格下的设计原则。它能告诉 agent 一个 modal 在极简风格系统中应该如何表现，和在 glassmorphic 风格中有什么不同。这种细粒度很重要，因为笼统的”让它好看点”的指令只会产出笼统的结果。

UI UX Pro Max 覆盖范围更广：50 多种设计风格、97 种配色方案、57 种字体搭配，以及针对 160 多种产品类型的行业化设计推理。野心很大。说实话，如果不限制上下文范围，选项太多反而会拖慢生成速度。我通常会明确指定风格和配色，而不是让 agent 自己选。

审查与质量关卡

Vercel 的 agent-skills 包含一个有 100 多个检查点的 UI 审查规则集。它会评估间距一致性、颜色对比度、交互状态和响应式表现。在设计阶段结束后运行这个工具，能捕捉到那些在笔记本上看着没问题但在手机上就崩掉的问题。

UI Skills 增加了 Tailwind 专属的质量检查。像 /baseline-ui 这样的命令确保 utility class 使用的一致性，/fixing-accessibility 则执行专门的无障碍审查。如果你的技术栈基于 Tailwind，这能补上通用设计 skill 覆盖不到的空白。

全流程覆盖

Designer Skills Collection 是这里面最全面的工具包：63 个 skill 和 27 个命令，覆盖从线框图到生产环境的整个设计流程。它有很强的主观性，这意味着偶尔会与其他 skill 冲突。我不得不禁用几条重叠的规则，以避免 agent 收到相互矛盾的指令。

Design Plugin 在代码层面执行设计原则。它不是建议改进，而是直接阻止违反你配置的设计系统的模式。这在多人共用同一个 agent 的团队中特别有用。

高级感

Super Design 专注于高级排版和充裕的留白。它会引导 agent 做出更高端的选择：更大的字号、更宽的边距、克制的配色方案。出来的效果明显更精致，不过在内容密集的页面上留白可能会过多。

Make Interfaces Feel Better 专门针对微交互。悬停状态、加载过渡、滚动行为、按钮反馈。这些小细节就是”看着还行”和”用着舒服”之间的区别。和这个列表中的其他 skill 相比，这个给我带来了感知上最大的质量提升。

哪些方式行不通

并非所有组合都能和平共处。同时安装全部 12 个会产生相互冲突的指令，让 agent 无所适从。实际的做法是叠加三到四个覆盖不同领域的 skill：一个负责基础规则，一个负责组件级指导，一个负责审查，再加一个针对你项目中具体视觉短板的。

我还发现，针对同一层面的 skill（比如两个互相竞争的配色系统）会互相抵消。每个关注点只选一个，然后坚持用下去。

这 12 个全都是免费的。先从官方 frontend-design 插件和 Impeccable 开始，然后根据你觉得输出仍然千篇一律的地方逐步添加。另外，把 Inter 从你的字体列表里删掉。