为什么现在用 AI 写的 UI 界面全都长得一模一样

只要看三秒钟，我就能断定一个产品是不是用 AI 快速生成的：Inter 字体、紫蓝色渐变背景、三个圆角卡片配上小图标，再加上一句毫无意义的“构建未来的工作方式”。这种界面并不丑，甚至很“专业”，但它没有灵魂，完全是统计学上的平均值。

很多开发者习惯直接让 Claude 或 GPT 生成前端代码，结果出来的东西全是同一个模子。这其实是因为模型在预测下一个 token 时，会自动选择训练集里出现频率最高、最“安全”的方案。这种现象在技术上叫分布收敛，简单说就是 AI 倾向于给你一个最不犯错的中间值。而且现在有个恶性循环：AI 生成的界面越多，被喂回训练集的数据就越多，导致 AI 越来越自信地认为“现代感 = 紫色渐变 + 圆角卡片”。

如果你不想让你的产品看起来像个廉价的 AI 模版，得先识别出这些“AI 工业废料”的特征：

• 配色方案： 标志性的紫色到蓝色的渐变（所谓的 Vibecode purple）。
• 字体选择： 永远是 Inter 或 Roboto。
• 布局模式： 居中的 Hero Section 加上一个巨大的 CTA 按钮，下面跟着一排三列的圆角卡片。
• 视觉细节： 滥用玻璃拟态（Glassmorphism）、霓虹光晕，或者在大数字上套个渐变色。
• 交互习惯： 所有的悬停效果都带弹性动画，圆角半径全站统一。
• 组件依赖： 原封不动地使用 shadcn-gray 或 Tailwind-blue 的默认色值。

想要打破这种平庸感，不能只靠提示词里加一句“不要用紫色”，因为 AI 对“现代感”的认知已经固化了。我试过几种能有效去 AI 化的实操方法：

第一，强行干预色值。不要在 Prompt 里写“modern color palette”，这会触发它的平均值记忆。直接给它具体的十六进制色值，或者要求它使用对比度极高的互补色。比如尝试用 #F5F5F7（苹果灰）配一个非常小众的深绿色，强制它跳出那个紫蓝色的舒适区。

第二，打破对称布局。AI 最擅长画三列卡片，你可以要求它使用不对称的网格布局（Bento Grid），或者明确要求“禁止使用卡片式布局，尝试用极简的列表或大面积留白”。

第三，自定义字体栈。把 Inter 换成具有特定性格的字体。比如在 Tailwind 配置里把默认字体改成一个衬线体（Serif）作为标题，正文用一个非主流的无衬线体。

一个具体的避坑经验：如果你在使用 v0.dev 或 Cursor 生成 UI，尽量不要在一次对话中完成所有视觉决定。最好的做法是先让它出结构，然后你手动修改 tailwind.config.js 里的 theme.colors 和 theme.borderRadius，把圆角从 rounded-xl 改成一个奇怪的数字（比如 14px 而不是 16px），这种微小的非标化能有效降低“AI 廉价感”。

说到底，设计是关于“决定”的艺术，而 AI 给出的是“概率”。当一个界面失去了对特定用户场景的思考，只剩下统计学上的正确时，它就变成了 slop（工业废料）。