你最近有没有这样的感觉：刷到一个新的 AI 产品网站，还没看清名字，就已经觉得「又是这种风格」？技术博主 Brian Douglas 在 Hacker News 上做了一个随机抽查实验，结论很直接——AI 生成的网站正在被同一种视觉模板统治，而这个模板就是 Tailwind CSS 的默认样式。
那个你一眼就能认出的「AI 风格」
Brian 的实验方法很简单：打开 Hacker News 的「Show HN」板块，随机点开几个新项目。他发现，大量由 AI 辅助生成的产品页面共享一套高度可预测的视觉特征——
- 深色背景 + 渐变紫色或蓝色 hero 区域
- 大号加粗标题，配一句模糊的价值主张
- 居中排列的功能卡片，三列等宽，图标用 Heroicons
- 按钮永远是
bg-indigo-600 hover:bg-indigo-700 rounded-lg px-4 py-2 - 间距和排版几乎完全遵循 Tailwind 的默认 spacing scale
这不是巧合。当前主流的 AI 编码工具（Cursor、Copilot、V0 等）在生成前端代码时，对 Tailwind 的依赖程度极高。原因很实际：Tailwind 的原子类名天然适合 LLM 的 token 预测模式——类名即语义，组合规则清晰，训练数据中大量开源项目都在用它。AI 模型「记住」了哪些类名组合最常见，于是反复输出同一套视觉方案。
模板不是问题，问题是「只停留在模板」
Tailwind 本身是一个优秀的工具。它的设计哲学是约束与自由的平衡：提供一套合理的默认值，同时允许你通过配置彻底重塑视觉系统。问题出在 AI 只走了前半步——它用默认值快速搭出骨架，却几乎不会主动去做定制化调整。
一个人类设计师拿到 Tailwind 默认配色后，会根据品牌调性调整 primary 色、重新定义 border-radius 的梯度、引入自定义字体。而 AI 在当前阶段更倾向于「复制最常见的答案」，于是你看到的网站就像是从同一个模具里倒出来的。
怎样让 AI 生成的页面不再千篇一律
如果你正在用 AI 工具搭建前端，以下是一个可以立即实践的改造方案。核心思路是：让 AI 先用 Tailwind 默认值搭骨架，然后你手动介入，通过配置文件重塑视觉个性。
第一步：定义你的品牌色系和圆角风格
创建或修改 tailwind.config.js，覆盖默认的主题扩展：
// tailwind.config.js
module.exports = {
theme: {
extend: {
// 用你的品牌色替换默认的 indigo/violet
colors: {
brand: {
50: '#f0f4ff',
100: '#dbe4ff',
200: '#bac8ff',
300: '#91a7ff',
400: '#748ffc',
500: '#5c7cfa', // 主色
600: '#4c6ef5',
700: '#4263eb',
800: '#3b5bdb',
900: '#364fc7',
},
accent: '#ff6b6b', // 强调色，刻意偏离蓝紫系
},
// 打破默认的 rounded-lg 习惯
borderRadius: {
soft: '0.375rem', // 比 rounded-md 略柔
pill: '9999px', // 药丸形按钮
card: '0.75rem', // 卡片圆角
},
// 引入非 Inter/Roboto 的字体
fontFamily: {
display: ['"Space Grotesk"', 'sans-serif'],
body: ['"DM Sans"', 'sans-serif'],
},
},
},
}
第二步：在 prompt 中明确要求偏离默认
当你让 AI 生成页面时，不要只说「用 Tailwind 做一个 landing page」。加上约束：
用 Tailwind CSS 生成一个产品 landing page。
配色使用 brand-500 作为主色，accent 作为强调色，
不要用 indigo 或 violet。
按钮使用 rounded-pill，卡片使用 rounded-card。
标题字体用 font-display，正文用 font-body。
hero 区域不要渐变背景，用纯色 brand-900 加细微纹理。
第三步：事后替换高频重复模式
AI 输出的代码中，以下模式几乎一定会出现，你可以批量替换：
| AI 默认输出 | 替换为 |
|---|---|
bg-indigo-600 |
bg-brand-500 |
text-gray-900 |
text-brand-900 |
rounded-lg |
rounded-card 或 rounded-soft |
font-sans |
font-body |
hover:bg-indigo-700 |
hover:bg-brand-600 |
这一步用简单的 find-and-replace 就能完成，不需要重写结构。
一个更根本的提醒
Brian Douglas 的观察揭示了一个趋势，但真正值得警惕的不是 Tailwind 本身，而是我们作为开发者是否愿意在 AI 搭好骨架后继续投入设计精力。以下是一个快速自查清单：
- ☐ 你的网站主色是否和最近看到的三个 AI 产品网站撞色？
- ☐ hero 区域是否用了蓝紫渐变？
- ☐ 所有按钮是否都是
rounded-lg？ - ☐ 字体是否只有 Inter？
- ☐ 卡片间距是否完全依赖 Tailwind 默认的
gap-6或gap-8？ - ☐ 你有没有在 AI 输出后做过任何视觉层面的手动调整？
如果一半以上答案是「是」，你的网站大概率已经被「Tailwind 化」了。AI 是加速器，不是终点。骨架搭好之后，花半小时改配色、调圆角、换字体，你的产品页面就能从那片蓝紫色的海洋里浮出来。