从 Addy Osmani 的 Agent Skills 中提炼出的八大典型陷阱，以及真正可落地的破局思路
打开最近半年生成的 AI 界面，你会发现一种诡异的熟悉感：蓝紫主色、大圆角、满屏渐变、三列卡片网格、慷慨到奢侈的 padding、层层叠叠的阴影……这些元素组合在一起，就像贴了“AI生成”的标签。用户第一眼就能识别，信任感瞬间下降。
@addyosmani 在他 89.4K 星的 Agent Skills 项目「Frontend UI Engineering」部分，系统梳理了这八个最典型的模式。它们不是偶然，而是模型在海量语料中统计出的“安全默认值”。真正优秀的设计，恰恰是对这些默认值的主动拒绝。
下面我们逐一拆解现象、成因、本质危害，以及更重要的——可执行的替代方案。
1. 满屏蓝紫色（Purple/Indigo Everything）
几乎所有 AI 生成的界面，主色都会默认落在 purple-500 或 indigo-600 一带。这是“AI味”最著名的特征。
模型为什么偏爱？Tailwind 官方示例、shadcn/ui 演示主题、Bootstrap 5 的品牌紫、无数教程与落地页……紫色在训练语料中已经与“现代科技感”强绑定。
问题的本质不在于紫色本身，而在于品牌色是产品最有价值的差异化资产之一。当所有 AI 应用都是紫色时，用户第一眼就判定“这是模板/AI生成的”。更严重的是，它直接无视了项目已有的品牌 token。
替代实质：颜色决策权必须交还给项目。没有品牌色时，也应该先做一次有意的选择（基于行业调性、目标用户情绪、竞品差异），而不是接受模型的统计默认值。颜色系统应来自设计 token，而非模型的“安全区”。
2. 滥用渐变（Excessive Gradients）
Hero 背景渐变、按钮渐变、甚至 bg-clip-text 渐变文字……这些在 AI 生成结果中几乎成为标配。
成因很清晰：2018–2022 年间 Stripe 式渐变落地页在语料中大量存在，模型把“令人印象深刻”与“渐变”强关联。
但成熟的设计系统绝大多数是扁平的。无设计依据的渐变会与系统冲突、制造视觉噪音；渐变文字还会损害对比度和可读性；大面积渐变在低端屏幕上容易出现色带。
注意：这一条反对的不是渐变本身，而是“无设计依据的渐变”。设计系统明确规定的微妙渐变是允许的。
替代实质：把渐变当作有限的、有目的的工具，而不是默认装饰。先问“这个渐变解决了什么问题？”如果答案是“让界面看起来更高级”，那就先删掉。
3. 万物大圆角（Rounded Everything）
卡片、按钮、输入框、图片一律 rounded-2xl。圆角被当成“不会出错”的选项。
模型偏爱它，是因为圆角传递“友好”，且 Tailwind 让一行类名就能实现。
真实设计中，圆角半径是有严格层级的：小元素（标签、按钮）用小圆角，大容器（卡片、对话框）用大圆角。全部拉满等于放弃了这层视觉语言。更重要的是，圆角是品牌声音的一部分——金融产品的利落直角与消费产品的圆润亲和，传达的是完全不同的气质。
替代实质：用设计系统的 radius 刻度，按元素尺寸和类型分级使用。让圆角成为表达，而不是默认。
4. 模板化首屏（Generic Hero Sections）
居中大标题 + 副标题 + 两个 CTA 按钮 + 渐变背景——千篇一律的 SaaS 落地页模板。
这是语料中“网页”这一概念的众数样本，模型自然最容易生成。
问题本质是模板驱动而非内容驱动。布局不回应产品是什么、用户来做什么。每个产品得到相同的第一印象，等于没有第一印象。
替代实质：Content-first。从真实内容和用户任务出发，让布局为内容服务。先写清楚用户进入页面后的核心行动，再决定视觉结构，而不是先套模板再填充内容。
5. 占位文本（Lorem Ipsum-style Copy）
“Lorem ipsum”“Welcome to our platform”“Feature 1/2/3”这类填充文案。
这是八条中最技术性、也最容易被低估的一条。占位文本的危害不只是“不专业”，它会掩盖布局缺陷：Lorem ipsum 长度均匀、行为良好，而真实内容有超长单词、不规则换行、溢出。用假文本调试出来的布局，遇到真实数据才会崩。换句话说，占位文本让测试失去了效力。
替代实质：写“形状接近真实数据”的占位内容——真实长度的任务名、真实格式的日期和金额，让布局在开发阶段就承受真实内容的压力。文案本身就是设计的一部分。
6. 到处超大内边距（Oversized Padding Everywhere）
每个容器都是 p-8、p-12，均匀而慷慨。
留白在截图中等于“干净高级”，且统一数值生成起来最容易，所以模型偏爱。
但视觉层级依赖间距的对比——相关的元素靠近，无关的疏远。处处等距意味着没有分组、没有层级；同时浪费屏幕空间，在移动端和信息密集的仪表盘上代价尤其大。
替代实质：间距应该是设计决策（密度本身就是一种设计语言），而不是默认值。用刻度，且敢于变化。相关元素更紧，无关元素更疏。
7. 千篇一律的卡片网格（Stock Card Grids）
三列等宽卡片网格——特性区、定价区、仪表盘全是它。
这是最容易生成的响应式布局（grid-cols-1 md:grid-cols-3 一行搞定），且在语料中出现频率极高。
均匀网格是在声明“所有条目同等重要”——它无视信息优先级和浏览动线。真实产品总有主次之分：主内容应该占据更大的视觉权重，次要内容退后。
替代实质：Purpose-driven layout。布局是信息层级的视觉表达，而不是内容的均分容器。先决定信息优先级，再决定空间分配。
8. 阴影堆砌（Shadow-heavy Design）
卡片、按钮、导航栏层层叠 shadow-lg、shadow-xl。
阴影在截图中制造“精致感”，Material Design 风格的示例在语料中占比高，模型因此偏爱。
问题有两层：视觉层面，阴影与内容争夺注意力，且海拔本身是层级信号，万物皆高等于没有高；工程层面，大面积模糊阴影的重绘会拖慢低端设备的滚动性能。这是八条中唯一同时指出性能代价的。
替代实质：默认无阴影或极淡阴影，用边框和背景色区分层次；只在设计系统明确规定时使用。
总结：真正摆脱“AI味”的核心原则
这八个模式的共同根源，是模型在追求“看起来安全、看起来现代、看起来不会出错”。而优秀设计的本质，恰恰是有意的选择——对颜色、圆角、间距、布局、文案、阴影做出基于产品和用户的决策，而不是接受统计默认值。
避免“AI味”的真正方法，不是让 AI 生成更“高级”的界面，而是：
- 把决策权交还给人和设计系统
- 从真实内容和真实数据出发
- 用层级、对比、目的驱动一切视觉选择
- 把品牌声音和产品气质放在第一位
下次当你看到 AI 生成的界面时，不妨用这八条对照一下。如果命中超过三条，恭喜你——它已经在大声宣告自己的出身了。
真正有品味的设计，从来不是“看起来像 AI 生成的更好版本”，而是“看起来像这个产品自己”。
No comments yet