---

问题从一个怪现象说起

我最近发现一件很奇怪的事。

让 Claude 帮你写一个网页，让 GPT-4 帮你写一个，让 Gemini 再来一个。三个，放在一起一看——几乎是同一张脸。

白色背景，紫色渐变的标题栏，Inter 字体，圆角按钮，grid-cols-3 的三栏特性介绍……

你甚至不知道该怪谁。每一个 AI 单独看都不错，合在一起就是一种集体"趋同"——大家都往最安全的方向跑，最后生成了同一张脸。

这个现象，我把它叫做 AI 审美趋同。

今天这篇文章，就是要把这个问题说清楚，并给出一个我实际在用的解法。

---

一、为什么 AI 总生成同一张脸？

要理解这个问题，先要知道大模型是怎么学会"设计"的。

模型训练的时候，吃了大量互联网上的网页、设计稿、代码。这些数据里，有几种东西天然地出现频率极高：

• Tailwind CSS 的默认组件（因为开发者最常用）

• shadcn/ui、MUI、Ant Design 的截图和代码（因为教程太多）

• Inter、Roboto 等 Google Fonts 前几名（因为几乎所有前端示例都在用）

• 紫色渐变 + 白底（因为 SaaS 首页模板泛滥成灾）

于是，当你让模型"帮我设计一个现代感的网页"，它不是在"设计"，而是在检索训练数据的最大公约数。

它会给你 Inter，因为 Inter 在它见过的漂亮页面里出现了一万次。 它会给你紫色渐变，因为这是 SaaS 页面里频率最高的配色。 它会给你 shadcn 风格的卡片，因为这是 GitHub 上 star 最多的组件库的默认样式。

每个选择单独看都"合理"，合在一起却形成了一种统计均值——不是最好的设计，是最平均的设计。

这就像一个厨师，每次都做"大众最爱吃的菜"。单道菜没问题，但你请他设计一份高级餐厅的套餐，他给你的可能是：小炒黄牛肉 + 辣椒炒肉 + 西红柿炒蛋。

不难吃，但没有灵魂。

---

二、收敛发生在四个维度

理解了根因，再来看收敛具体发生在哪些地方。先上改进后的效果：

我总结了四个维度：

1. 字体（Typography）

几乎所有 AI 生成的网页，默认字体都是 Inter 或 system-ui。原因很简单：这两个字体在 Tailwind 的默认配置里，被作为"最佳实践"无数次出现。

但 Inter 是一个为 UI 设计的字体，不是为"有个性的品牌"或"技术感极强的页面"设计的。它安全、适用、也正因为此——平庸。

2. 配色（Color Scheme）

紫色（purple/violet/indigo）+ 白色背景，这个组合几乎统治了 AI 生成的网页配色。为什么？因为它在 Tailwind UI、Vercel 官网、Stripe 文档里太常见了。

但这个组合有个问题：它适合 SaaS 产品，不适合所有场景。一个技术博客用这个配色，就像穿西装去爬山。

3. 动效（Motion）

AI 生成的动效通常只有两种：要么没有（静态页面），要么满屏都是。模型不知道动效的"克制"原则，不知道什么场合用 stagger reveal，什么场合用 hover 微交互。

4. 背景（Background）

要么白底，要么纯深色。极少会有三层背景叠加，更别说网格纹理 + 光晕 + 噪点纹理这种有层次感的处理。

三、解法：Skills

说了这么多问题，重点来了——怎么解？

我用的方法叫 Skills，是 Claude 平台上的一种机制：把一套专业知识、最佳实践、设计偏好，封装成一个"技能文件"，在需要的时候注入到上下文里。

可以把它理解为一个随时可以召唤的专家顾问。

你平时和 Claude 对话，他是一个通才，知道的多，但不深入每一个领域。当你需要做前端设计，召唤 Frontend Design Skills，他就变成了一个专门研究过高端界面设计的专家——他知道该避开什么（Inter、紫色渐变），该用什么（特色字体、强烈对比、有层次的背景），以及怎么用（何时加动效、如何排版）。

这不是"给他看几个例子"，而是系统性地注入了专业上下文。

---

四、Skills 里面写了什么？

核心分为五块，我逐一拆解。

4.1 设计思维的引导

Skills 里首先要求模型在动手之前，先思考：

• 这个界面的目的是什么？给谁用？

• 基调是什么？极简？繁复？编辑风？工业风？

• 一件让人记住的事是什么？

这一步很关键。没有这一步，模型会跳过"想"直接"做"。做出来的是惯性，不是设计。

4.2 字体的要求

Skills 明确禁止 Inter、Roboto、Arial、system fonts。

取而代之的，是要求模型选"有辨识度、有个性"的字体，并且要搭配使用——一个用于大标题的展示型字体，一个用于正文的精致字体。

比如这篇博客对应的网站选的是：

• Bebas Neue（标题）：压缩、有力，极具辨识度

• Playfair Display（副标题）：有编辑感，与工业风形成戏剧对比

• IBM Plex Mono（正文）：技术感，呼应代码主题

三种字体，三种个性，组合在一起有张力，而不是一片糊在一起的"现代感"。

4.3 配色的约束

Skills 明确要求：不用紫色系，不用白底，使用 CSS 变量统一管理颜色。

强调色用得"极度克制"——不是每个地方都用，只在关键节点用。这是专业设计师和 AI 生成设计的核心区别之一。

4.4 动效的原则

一句话总结：少而精，有意图。

不是每个元素都要动，而是在最重要的几个时刻精心编排：

• 页面首次加载：标题文字逐字符出现（stagger reveal）

• 滚动到某一章节：从下方淡入（而不是突然弹出）

• 卡片 hover：只有边框颜色变化 + 微小位移，不过分

模型在没有 Skills 的时候，要么不加动效，要么加很多。Skills 帮它找到中间那个"刚好"的位置。

4.5 背景的层次

很少人注意到，专业设计的背景是有层次的，不是一块颜色。

Skills 要求使用三层叠加：

1. 深色基底

2. 极淡的几何网格（CSS 绘制，不用图片）

3. 角落的光晕（radial-gradient，一个冷色，一个暖色）

再加上噪点纹理，营造出纸张印刷般的质感。

这些背景处理方式不复杂，但模型在没有提示的时候，几乎不会主动这样做。Skills 就是把这个"提示"系统化、可复用。

---

五、Skills 怎么工作的？零开销，按需加载

很多人会问：这不就是一段超长的系统提示词吗？每次都带着它，不会把上下文窗口撑满吗？

这里有个设计很妙：Skills 是按需加载的，不是每次都全量注入。

流程大概是这样：

用户发起请求 → Claude 判断任务类型 → 如果是前端设计任务，加载 frontend skill → 生成高质量输出

如果请求和前端设计无关（比如你在问一道数学题），Skills 文件根本不会被加载，没有任何额外开销。

这个机制让 Skills 既强大，又不浪费。

---

六、实际效果对比

我做了一个简单对比：

无 Skills，同样的提示词："帮我做一个技术博客首页"

结果：白底，Inter 字体，紫色渐变导航栏，grid-cols-3 的三栏介绍区，rounded-full 的按钮。没错，就是你脑子里能默写出来的那个样子。

有 Skills，同样的提示词

结果就是这篇文章对应的网站——近黑色背景，Bebas Neue 大标题，琥珀色 × 电光蓝的克制用色，三层背景叠加，逐字符入场动效，整体是"编辑风 × 暗黑技术美学"。

不是因为模型变聪明了，而是因为它被"锁定"在了一个更专业的上下文里，逃不出去，也不需要逃。

本文 skill：https://t.zsxq.com/VjEvr

---

七、更深一层：Skills 解决的不只是美观问题

说到这里，我想多说一句。

Skills 的价值，表面上看是"让页面更好看"，但底层解决的是一个更基础的问题：如何让 AI 在特定领域持续输出专业水准的结果，而不是统计均值。

前端设计是一个典型案例，但这个框架同样适用于：

• 文案写作（避免 AI 腔，保持特定品牌语气）

• 代码架构（按特定团队规范生成，而不是教科书式的通用写法）

• 数据分析（按特定行业的分析逻辑走，而不是万能模板）

Skills 本质上是一种"领域知识注入"机制。

它把你们团队的标准、你的个人偏好、某个行业的最佳实践，变成可复用、可传递的"上下文包"。每次需要，召唤出来，用完放回去。

---

八、死磕总结

整理一下今天的核心要点：

01 AI 审美趋同是训练数据分布的必然结果，不是模型的"错"，但可以被干预。

02 收敛主要发生在字体、配色、动效、背景四个维度。

03 Skills 是一种按需注入专业上下文的机制，不是一段长提示词。

04 字体：禁用 Inter，选择有个性的展示字体 + 精致的正文字体组合。

05 配色：明确禁用紫色系，强调色极度克制，只在关键节点出现。

06 动效：少而精，有意图——页面入场 + 滚动触发 + hover，够了。

07 Skills 的真正价值不只是让页面好看，而是让 AI 在任何专业领域都能持续输出超过统计均值的结果。

---

和你一起，死磕 Claude Skills！

坚持专业写作，是铭毅对每一位读者的承诺。

— 铭毅天下

吴恩达 Agent Skills 学习笔记：从入门到必知必会

干货图解 | Claude Skills 从0到1完全指南

照着做、少返工的 Elasticsearch 使用规范