AI 生成的网页总爱用蓝紫渐变？真相藏在5年前！

这是一件很有趣的事情，在 Vibe Coding 如火如荼的当下，AI生成的产品数量与日俱增，然后在庞大的样本数量下，设计师和开发者们就发现一个非常诡异的事情，为什么 AI 很青睐蓝紫色渐变。

更多AI设计干货：

用大模型生成的网页，大概率会生成蓝紫渐变的色彩方案，按钮是 indigo（靛蓝）色，卡片背景带浅紫过渡，甚至导航栏和背景颜都逃不开这两种颜色的搭配。明明没指定色彩偏好，AI 却有很强的 “蓝紫执念”，这背后的缘由以及“连锁反应”非常有趣。

经典的 AI 网页风格

AI 常见的配色

这种没有经过准确引导的 AI 配色和风格，已经让人觉得有些厌倦和疲劳了。避免这样的配色。

事情要从五年前的 Tailwind CSS 说起。作为当下最热门的实用优先型 CSS 框架，Tailwind CSS 允许开发者通过预定义的类名快速构建用户界面，其灵活且高效的特性深受前端开发者与设计师青睐。在 Tailwind CSS 早期版本里，所有按钮的默认色值都设定为 indigo-500。这个选择在当时很合理：indigo 介于蓝与紫之间，既没有纯蓝色的 “冷淡感”，也没有高饱和紫色的 “浮夸感”，适配大多数产品风格，且对文字对比度友好，开发时不用反复调试色值。

但没人想到这个 “方便的选择” 会产生蝴蝶效应：

1. 大量教程、技术文章用 Tailwind CSS 的 indigo-500 做案例，比如 “按钮设计教程”；
2. 开源代码库、社区分享的项目里，按钮、卡片渐变也默认沿用这个色值；
3. 这些带 indigo-500 的文章、代码、设计稿，最终都成了大模型的训练语料。

就像设计师会受过往作品影响，AI 也会 “复制” 训练数据里的高频元素 —— 当 indigo-500 在语料中出现次数远超其他颜色，它自然会把 “网页设计中蓝紫渐变是最优选择，当成默认逻辑。

直到最近，Adam Wathan 在推特上发了博文：“正式为五年前让 Tailwind CSS 所有按钮用 bg-indigo-500 道歉，没想到导致现在全球 AI 生成的 UI 全是靛蓝色。” 这条自嘲式的推文，我们才了解了这个 “设计巧合” 。

不止蓝紫渐变：AI 语料 “污染” 的隐形问题

Adam 的道歉看似调侃，实则透露出大模型设计的一个问题，语料来源的 “单一性” 会导致生成表现的 “污染性”。

除了蓝紫渐变，其他设计相关的惯性你还遇到过吗？比如：

1. 做移动端界面，卡片圆角永远是 8px 或 16px，源于某主流设计规范里的默认值被大量引用；
2. 甚至图标风格，AI 会优先输出线性图标，只因线性图标在开源素材库中的占比更高。

这些问题本质上不是 AI “没创意”，而是它没办法像人类一样判断 “这个设计是巧合还是最优解”—— 它只会根据语料中元素的出现概率做选择，当某类设计在语料中占比过高，就会形成 “路径依赖”，最终导致所有生成结果趋同，失去设计该有的多样性。

更麻烦的是，这种 “污染” 会反向影响新人设计师：如果刚入门就依赖 AI 生成方案，很容易误以为 “设计只有一种标准答案”，忽略了色彩、布局的个性化表达。

想要避免 AI 的 “蓝紫执念”，甚至让它生成更贴合需求的渐变，其实不用完全放弃工具，掌握两个核心方法就够了。

1. 用 “约束性提示词” 精准引导创作方向

相较于宽泛的指令，通过约束性提示词明确创作边界，能更高效地获取理想结果。

以规避蓝紫渐变为例，在提示词中加入：

“除非用户特别要求，禁止使用靛蓝、蓝色等冷色调色系”（translated: "Prohibit the use of cool color palettes such as indigo and blue, unless specifically requested by the user"）。

这种表述既划定色彩禁区，又保留灵活空间。面对其他常见设计惯性，可采用相似逻辑：

1. 卡片样式定制：明确指定 “卡片圆角半径不得为 8px”（"Card border-radius must not be 8px"）；
2. 图标风格控制：改用 “优先使用填充图标，避免线性图标”（"Use filled icons instead of outline icons"）。

约束性提示词通过 “否定 + 限定” 的双重要素，既排除干扰选项，又为 AI 提供清晰的创作框架，比单纯提出创新要求更具实操性。

2. 结合 “图片sucai + 工具” 做渐变，提供真实质感

如果想让渐变设计既有质感又不趋同，不妨回到我们之前渐变文章中聊过的 “自然观察法”，再搭配 GradientsHub 工具提升效率：

第一步：从图片素材中找参考：比如用日出时的 “橙粉→浅黄” 渐变做活动页背景，用阴天的 “灰蓝→白” 做办公软件界面，这些自然色彩过渡本身就比 AI 的 “默认蓝紫” 更有呼吸感；

第二步：用 GradientsHub 工具箱制作渐变色彩，如果看到喜欢的自然渐变，用手机拍下来，导入 Colorffy（之前推荐的 mesh-gradient 工具），通过 “取色 + 调整模糊度” 还原效果；如果需要动态渐变，用 Color4bg 生成后，再手动调整色值；

第三步：用 AI 做 “二次优化”：把自己调整好的渐变方案发给 AI，加提示词 “基于这个渐变色调，生成多种不同明暗和饱和度的变体，适配按钮、卡片、背景”，既保留设计控制权，又利用 AI 提升效率。

设计的核心，永远是 “人” 的判断

AI 生成的蓝紫渐变，本质上是 “工具选择影响设计习惯，习惯又变成数据，数据再反过来影响工具” 的循环。但我们不用被这个循环困住 —— 无论是 Tailwind UI 的 indigo-500，还是 AI 的默认输出，都只是 “参考选项”，而非 “标准答案”。

就像渐变本身不是设计目的，而是提升视觉层次的手段；AI 也不是设计的主导，而是帮我们节省重复工作的工具。真正让设计出彩的，永远是设计师对 “为什么用这个颜色”“这个渐变要传递什么感觉” 的思考，毕竟，自然里的天空不会只呈现蓝紫，好的设计也不该只有一种视觉样板。