为什么你让AI做了十次前端,每次都是紫蓝渐变

         

为什么你让AI做了十次前端，每次都是紫蓝渐变

你让 AI 编码工具做一个好看的页面。它给了你紫蓝渐变、居中大标题、三列圆角卡片、大面积圆角、Inter 默认字体、文案像模板。

你说换个风格。它给了你紫蓝渐变，按钮颜色深了一点。

你说再换个风格。它给了你紫蓝渐变，布局从三列变成了三列加一列。

你再试一次。它终于没有用紫蓝色了，它用了蓝紫色。

这不是段子。有公开文章专门讨论这个现象，标题就叫《Why Your AI Keeps Building the Same Purple Gradient Website》。2025到2026年间，关于 AI 生成 UI 同质化的讨论在多个技术社区集中爆发。"紫蓝渐变"已经成了一个标志性的 AI 味标签，远远不止一种颜色，它代表了一整套 AI 默认模板。

01

为什么 AI 编码工具只会这一种风格

直接原因是 prompt 太简单。

当你对 AI 编码工具说"做一个好看的页面"，它没有设计目标、没有参考图、没有品牌约束、没有验收标准。它唯一能做的事就是回到训练集中最常见的 UI 形态，也就是那些被反复抓取、反复标注、反复生成的页面。这个形态恰好就是紫蓝渐变加三列卡片。

深层原因是一个反馈回路。每一次有人用 AI 生成一个紫蓝渐变的页面，把它发布上线，紫蓝渐变在训练数据中的权重就增加一分。下一轮模型训练时，它被采样的概率更高。这个循环每转一圈，AI 就离其他风格更远一步。不是 AI 偏爱紫蓝渐变，是它被人类自己训练成了紫蓝渐变爱好者。

02

前端设计是六层问题，不是一层

很多人以为前端好不好看是视觉问题，颜色对不对、字体好不好、间距匀不匀。但他们改完 CSS 发现页面还是不好看，因为真正的问题在下层结构中。

第一层：叙事层

这个页面到底要表达什么，用户 30 秒内能不能知道这是谁、做什么、最强证明在哪、怎么联系。叙事没理清楚，后面的视觉全是白搭。

第二层：信息架构层

页面有哪些模块、先后顺序是什么，模块顺序支持用户决策还是只在堆字段。

第三层：视觉方向层

页面看起来像哪类产品、哪类品牌，有明确的视觉立场还是直接套了通用模板。

第四层：设计系统层

颜色、字体、间距、组件是可复用的 token，还是散落在每个页面硬编码。

第五层：布局工程层

页面稳定、可滚动、响应式，桌面和移动端都不崩。

第六层：发布审查层

内容可信，没有编造事实，没有泄露隐私。

只改 CSS 最多解决第三层的一小部分。你看到的"紫蓝渐变三列卡片"不只是一个颜色问题，是六层全都走了平均值的结果。

03

解决方案不是加形容词，是加约束

正确做法不是对着 AI 反复说"再高级一点""不要像模板""来点不一样的"。空泛的 prompt 改进无法突破统计平均值的引力。需要把设计决策从 prompt 里移出来，交给更结构化的手段。

Skill 定义原则

每个 Skill 把一层设计决策从自由文本变成可执行逻辑。叙事 Skill 只关心一件事：用户能不能在 30 秒内回答你是谁、做什么、最强证明是什么、怎么联系你。它不碰颜色和字体，因为那是后面的事。视觉方向 Skill 不让模型默认出图，逼它先选一个立场：编辑感、极简、工业风、玩具感、产品档案、战报、控制台，选完再动笔。审美校准 Skill 掐掉 AI 最顺手的一批坏习惯：Inter 默认字体、紫蓝渐变、三列等宽卡片、过强阴影、玻璃拟态、只做成功态。它像一道安检门，在生成之前就把最常见的 AI 味拦在外面。

参考站点提供样本

AI 编码工具不能凭空想象"好看"。它需要真实世界的设计样本来约束输出。Godly、Land-book、Awwwards 给视觉方向，Mobbin、Page Flows 给真实产品流程，Saaspo、Refero 给页面模式。这些参考库比 AI 生成器更稳定，后者自己的产出就有 AI 平均值问题，用 AI 工具纠正 AI 趋势容易同义反复。

设计系统固化 token

颜色、字体、间距、圆角、阴影、按钮、卡片、标签，都应该是单一事实源。没有 token 契约，每个生成页都会漂移。三个页面三种蓝，不是审美问题，是工程问题。

截图 QA 做验收

打开真实页面，截桌面和移动端。检查文本是否溢出、CTA 是否可见、图片是否加载、滚动是否正确、移动端是否一列且没有横向滚动、动效是否影响性能。审美验收从"我感觉不好看"变成了可重复的检查项。

04

先找参考，再重开发

这是整个工作流里最关键的一步。不要让 AI 编码工具直接从零生成。让它先做参考研究：找 5 个同类高质量站点，截首屏和关键 section，分析信息架构、视觉语言、字体、颜色、组件、动效和移动端布局。

然后抽象。不要说"像某某网站"，要把共性变成可执行的设计约束。左对齐 editorial hero、单一强调色、项目区用案例研究卡而非三列 feature card、首屏露出下一屏内容、移动端 CTA 全宽。不复制资产，只提取原则。

最后才是生成代码。有了 brief、token 和组件规则之后，AI 编码工具的输出质量会大幅提升，不是因为模型变聪明了，是因为约束变多了。

05

问题不在模型，在约束密度

表面看这是一套前端设计的方法论。往底层看，它回答了一个根本的问题：AI 编码工具的创造力边界在哪？

答案不在模型能力，在约束密度。约束越松散，输出越平庸。约束越结构化，输出越接近专业水准。

Skill 把一层设计原则变成可执行逻辑，参考站点把"好看"变成可分析的具体特征，设计系统把视觉判断变成 token 契约，截图 QA 把审美验收变成可重复的检查项。这些手段加起来，不是限制了 AI，而是给了它足够的信息来偏离训练集里的紫蓝渐变平均值。

AI 编码工具不是独立设计师，它是有浏览器和工程能力的前端实现者。设计方向由 Skill、参考站点、设计系统和截图 QA 共同约束，而不是在 prompt 里靠形容词解决。

下一次你再发出"做个好看的页面"之前，先问自己一个问题：我给了 AI 足够的方向让它不回到紫蓝渐变了吗？如果答案是没有，那结果就只能是紫蓝渐变。