避免前端UI设计'AI味'技巧

前端 UI 设计怎么避免"AI 味" ？ @addyosmani 在他 89.4K 🌟 Agent Skills 项目的「Frontend UI Engineering」部分，展开论述了其中很典型...

前端 UI 设计怎么避免"AI 味" ？ @addyosmani 在他 89.4K 🌟 Agent Skills 项目的「Frontend UI Engineering」部分，展开论述了其中很典型的八个模式，看看是不是深有同感，AI 味扑鼻而来。 1. Purple/indigo everything（满屏蓝紫色） 现象：主色默认落在 purple-500/indigo-600 一带，这是 AI 生成界面最著名的一个特征。 模型为何偏爱：Tailwind 官方示例、shadcn/ui 演示主题、Bootstrap 5 的品牌紫、无数教程——紫色在语料中与"现代科技感"强绑定。 问题本质：品牌色是产品最有价值的差异化资产之一。当所有 AI 应用都是紫色时，用户第一眼就能识别出"这是模板/AI 生成的"，信任感瞬间折损。更关键的是，它无视了项目已有的品牌 token。 替代方案的实质：颜色决策权交还给项目。没有品牌色时，也应该先做一次有意的选择，而不是接受模型的统计默认值。 2. Excessive gradients（滥用渐变） 现象：hero 背景渐变、按钮渐变、甚至 bg-clip-text 渐变文字。 模型为何偏爱：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 风格的示例在语料中占比高。 问题本质：有两层——视觉层面，阴影与内容争夺注意力，且海拔本身是层级信号，万物皆高等于没有高；工程层面，大面积模糊阴影的重绘会拖慢低端设备的滚动性能。这一条是八条中唯一同时指出性能代价的。 替代方案的实质：默认无阴影或极淡阴影，用边框和背景色区分层次；只在设计系统明确规定时使用。 github.com/addyosmani/age… Z 💬 2 🔄 3 ❤️ 2 👀 372 📊 4 ⚡