AI 写的前端，为什么总有一股"AI 味"？
每个组件单看都对，拼在一起却像"零件拼装"——差的不是审美，是 Incoherence。
你让 AI 生成一个落地页。它给了你蓝紫渐变背景、居中大标题、三张圆角功能卡片、一行 logo 墙、底部一个 CTA 按钮。
功能齐全，代码能跑。但你盯着屏幕，总觉得哪里不对。不是"丑"，而是一种说不上来的雷同感——好像在哪见过，见过好多次。
这就是中文社区说的"AI 味儿"。英文圈管它叫 AI slop——批量生成的廉价感。有一个开源项目叫 performative-ui（vorpus.github.io/performativeUI），把 AI 前端最常见的套路做成了讽刺组件目录：aurora 背景、gradient-text、sparkle 图标、logo-marquee、stat-counter。每个名字你都能在某个 AI 生成的页面里对上号。
具体到像素层面，"粗糙感"不只是审美问题：布局对不齐、字号层级混乱、颜色突兀、阴影光源不一致、圆角风格混搭、间距随意、缺空状态和加载态。能跑，但一眼就能认出"这不是人做的"。
问题不在"模型不够聪明"，而是机制——它看不见自己写的界面，也没有"整体记忆"。
图源：world.hey.com @kosta "Spot the Slop"
现象：AI 前端为什么千篇一律？
今年 5 月，Hacker News 上一个帖子火了：《Slightly reducing the sloppiness of AI generated front end》，219 分、136 条评论。帖子和评论区几乎把 AI 前端的槽点扒了个遍。
Retr0id 的评论被顶得很高："它生成的界面未必'差'，只是千篇一律"（It's not that the designs it produces are bad necessarily, they're just very same-y）。
kstenerud 补了一刀，更狠也更精辟："一旦某种设计老到 LLM 能批量复现，它就成了 slop"（Once a design gets old enough that LLMs can reproduce them, they are now "slop"）。
这解释了现象的本质。AI 写的不是"差设计"，而是"所有设计的平均值"。蓝紫渐变不是某个模型心血来潮的审美选择——是训练数据里太多 landing page 都用了它，模型把它们"平均"了。圆角卡片同理，三张功能卡片同理，logo 墙也同理。
图源：world.hey.com @kosta
一句话：AI 不是在"设计"，是在做统计平均。你看到的粗糙感，是训练数据里每一种 UI 套路的"均值叠加"。
为什么模型写不出"设计感"？四个机制问题
2.1 逐 token 生成，没有"运行记忆"
核心原因，dev.to 作者 kiwibreaksme 给它起了个名字叫 Incoherence（不连贯）。
LLM 生成前端代码时，是逐 token、逐组件来的。它先生成卡片 A，再生成按钮 B，再生成弹窗 C。每一步都独立回归训练数据的概率分布——"按钮的均值"和"卡片的均值"从未互相协调过。
结果就是：锐角卡片 + 胶囊按钮 + 两个强调色 + 混合阴影。单看每个组件都合理，拼在同一个屏幕上就像"零件拼装"。你感觉"粗糙"，其实是组件之间的设计语言不连续。
"Beautiful parts don't make a beautiful UI. Agreeing parts do."（好看的零件拼不出好看的界面，互相协调的零件才行——dev.to @kiwibreaksme）
图源：dev.to @kiwibreaksme（StyleSeed 设计规则映射）
2.2 看不见自己写的界面
nerdy.dev 一句话说透了："It's an LLM, not a rendering engine!"（它是个大语言模型，不是渲染引擎！）
人类设计师写完界面，眼睛扫一遍：字号不对、间距歪了、那个阴影光源逻辑不对——秒发现。LLM 没有像素级反馈。它输出代码后就"失明"了，不知道渲染出来是什么样。截图对多数 LLM 意义有限，Reddit 上有人直言："用文字描述视觉问题几乎不可能，多数工作流里 agent 根本不看渲染结果。"
它是"在黑暗中瞎猜"（stabbing in the dark，nerdy.dev 原话）。
2.3 训练数据被模板污染
HN 用户 dustarion 说得很直白："不给明确需求，它就用'所有代码的平均值'来设计"（The thing that makes it slop, is when you're not specific about what you want. Then it's going to use the 'average of all code' designs.）。
预训练吃进了海量教材级代码和模板项目，太多 Tailwind 组件库、太多相似的 landing page、太多同一套设计模式。中文社区有人在知乎上分析得很到位：LLM 学了太多 Tailwind 项目后，设计品味"被严重污染"。
不约束它时，它回归到训练数据的重心——而"所有代码的重心"恰恰就是最平庸的那一套。
2.4 布局是数学，而 LLM 数学差
间距、对齐、栅格系统——本质是数学计算。再加上浏览器/视口/输入方式的组合近乎无限，nerdy.dev 形容这是"移动靶"，而"LLM 最不擅长的就是移动靶"（It's a moving target, and LLMs are terrible at moving targets.）。
对比一下人类设计师的"视觉心智"：大脑里只持有一小组"粘性决策"——一个圆角语言、单一光源方向、一个强调色、8px 网格——然后每个新元素自动继承这些约束。AI 没有这种"全局变量"式的设计记忆。
简而言之：AI 前端的粗糙感不是单个原因造成的。四个机制问题——局部生成、无视觉反馈、数据污染、数学短处——叠加在一起，才让"AI 味"变成了默认输出。
工具现状：谁在改善，谁还没解决
几个主要玩家的情况。
已经改善的：v0（Vercel）用强约束 React + Tailwind + shadcn/ui 栈换来了质量和一致性，实时预览反馈是正确方向；Claude Code 官方的 frontend-design skill 点名了三类默认审美（奶油底+衬线+赤陶色 / 近黑底+酸性绿 / 报纸式发丝线布局），要求先做 token 方案再写码，甚至说"一张图顶一千个 token"（a picture is worth 1000 tokens）；Kombai 从 Figma 设计稿直接生成代码，把"UI 当系统"处理；shadcn 官方 MCP 让 AI 能读最新组件文档，不再靠"记忆中的版本"写码；Tweag Agentic Coding Handbook 记录了截图回环的实操流程。
仍是痛点的：自定义交互和微动效、复杂组件状态管理、无障碍（AI 顺手丢 aria-hidden 是常态）、默认选最重的实现方案、移动端和桌面端的一致性。
有社区声音吐槽 Claude Code 的前端输出同质化——HN 上有人说"见过太多棕色网站，全是一个模子刻出来的"（brown sites all the same）。这个吐槽指向的不是某个工具不行，而是"给定相同 prompt + 相同 skill，输出风格高度收敛"这个更底层的同质化问题。
一句话：工具层正在快速迭代，但解决的都是"生成质量"而非"设计一致性"。Incoherence 问题还在那。
破解办法：把"好看"变成可执行的规则
这些都不需要等下一代模型。现在的工具 + 正确的约束，已经能把"粗糙感"压到很低。
4.1 给 AI 喂设计系统 token（最高杠杆）
核心元法则来自 dev.to 那篇文章：每个设计轴只选一个值，全局复用。
- 圆角：锐角 / 柔和 / 胶囊，三选一。
- 阴影：单一光源方向（比如永远从左上角来）。
- 强调色：只用一个，加一个语义色（错误红、成功绿）。
- 间距：8px 网格，所有 margin/padding 都是 8 的倍数。
- 图标：同一家族（Phosphor / Lucide / Heroicons，别混搭）。
- 字号：模块化比例（如 1.25 倍递增）。
- 动效：同一缓动函数族。
- 控件高度：统一 40px。
"If the corners are sharp, everything should be sharp."（如果角是锐的，一切就都该是锐的。——dev.to @kiwibreaksme）
落地方法：固定 shadcn/Tailwind/design tokens，装上 shadcn MCP（让 AI 读取最新组件文档）。"把粘性决策写下来让 AI 复制，而不是让它发明。"
4.2 截图回环
渲染 → 截图 → 连同具体指令喂回模型。Tweag Agentic Coding Handbook 记录的实战提示词："这是当前 UI，间距不对、侧边栏没对齐，请对齐到 Figma 的干净平衡布局。"
4.3 AI 视觉 lint/评审
把"混搭"当 lint 错误而非风格选择。开源工具 StyleSeed 内置 coherence grader，输出 "Design Score: 70/100"，逐项扣分（Color discipline / Cards & elevation / Coherence）。这跟 ESLint 一个思路——不让 AI 决定风格是否一致，而是直接用规则检测。
图源：world.hey.com @kosta（改造前后对比）
4.4 提示词工程
社区开源了 Taste Skill，四步流程：先推断设计需求 → 设定三个刻度盘（布局灵活度/动画深度/信息密度）→ Anti-Slop 硬性禁令 → 交付前检查清单。或者更简单：直接告诉 AI"请遵循 Apple HIG / Material Design 3"，让 AI 动手前先反问需求细节。
4.5 人机分工
AI 干脚手架、token 迁移、翻译、无聊活。人管品味、管最终裁决。HN 上这句评论是现状最佳注脚："你得盯紧它，不断要求修改直到匹配你的审美——因为 AI 确实不知道'好'长什么样"（You have to babysit it and keep asking for changes until it aligns with your aesthetic, because the AI really doesn't know what 'good' looks like.）。
不夸张地说：不需要等下一代模型。固定每个设计轴的一个值、用完截图回环、跑视觉 lint——这三条组合拳，已经能把"AI 味"从明显压到几乎看不出来。
先把三个值写下来，再让 AI 写码
"当 AI 有太多选项时，它就靠猜，然后搞得一团糟"（When the AI has too many options, it just guesses and makes a mess——AmareshHebbar @HN）。
这是整件事的核心。AI 前端粗糙感的根因，不是模型太笨，是它拿到了太多自由度。圆角可以选 4px、8px、12px、16px、全圆？它会每种都试一次。阴影可以选 sm、md、lg、xl、2xl？它会在同一个页面里轮流用。
但如果你先写下来："圆角全用 8px，阴影只用 md，强调色 #2563EB，间距全是 8 的倍数"——那 AI 输出的设计一致性，会直接从 60 分跳到 85 分。
哪怕不建完整的设计系统，动手前先定"一个圆角 + 一个强调色 + 一套间距"，再让 AI 写码。这是今天就能用的、最高杠杆的一条规则。
你在用哪些 AI 前端工具？有没有"改了 5 轮还是不对"的经历？评论区聊聊。
参考阅读：
- HN：《Slightly reducing the sloppiness of AI generated front end》— news.ycombinator.com/item?id=48504912
- nerdy.dev：《Why AI Sucks At Front End》— nerdy.dev/why-ai-sucks-at-front-end
- dev.to：《Why AI-Generated UIs Look 'Off'》— dev.to/kiwibreaksme
- performative-ui：vorpus.github.io/performativeUI
- Anthropic frontend-design skill — github.com/anthropics/claude-code
- Tweag Agentic Coding Handbook — tweag.github.io/agentic-coding-handbook
- StyleSeed（coherence grader）— github.com/bitjaru/styleseed
- 知乎 Taste Skill — zhuanlan.zhihu.com/p/2046896494385558491
- 知乎《低代码+AI》— zhuanlan.zhihu.com/p/2004942157937677906
- 知乎卡卡罗特AI：《网站 AI 味儿太冲？》— zhuanlan.zhihu.com/p/2059226292755732132
- 掘金：《AI编程页面不好看？》— juejin.cn/post/7614031047329890314