AI 写前端为什么一股“模板味”?我找到了 8 个破绽

导读

你只要扫一眼：蓝紫渐变 Hero、三个圆角卡片、几组 99.99% 的假数据。基本就能判断，这不是设计，这是模型从模板堆里摸出来的平均数。

你有没有过这种体验？

让 AI 写个网页，代码能跑，功能正常。但你就是觉得哪里不对。说不上来，就是“太 AI 了”。

更诡异的是：AI 越来越强，这个“AI 味”反而越来越重。

Claude 写前端，动不动就是蓝紫渐变；GPT 写产品页，永远给你三个一样大的圆角卡片并排。不管什么网站，打开三秒你就能闻到那股熟悉的“模板味”。

这不是你的 prompt 不够好。是 AI 的训练机制本身，正在制造审美趋同。

这篇文章讲三件事：

1.AI 写前端最容易露馅的 8 个破绽。

2.为什么你说“别太 AI”，它根本改不掉。

3.Taste-Skill v2 为什么不是普通 prompt 合集，而是一套“审美门禁”。

01你的 AI 中了几个？8 条 AI 味自查清单

先来对号入座。

下面 8 条，是 Taste-Skill 作者 Leonxlnx 在生产测试中总结出来的 AI Tells。你不需要是设计师，普通人多看几个 AI 做的网站，也能感觉出来。

测一下：

• 中 1 到 2 条：只是有点模板味。
• 中 3 到 5 条：基本进入 AI 默认审美区。
• 中 6 条以上：不用怀疑，已经是 Slop 风格样板间。

Y Combinator 的 Raphael Schaad 也吐槽过这类 AI 假 Dashboard：多色 stat cards、Fisher-Price 原色、bento grid 布局，最后全世界的假产品 UI 都长成一个样。

最可怕的不是这些元素难看。

最可怕的是，它们正在变成一种新的“默认审美”。

你不主动反抗，AI 就会把全世界的网站都磨成同一张脸。

这已经不只是设计圈的吐槽。Merriam-Webster 把 Slop 评为 2025 年度词，定义为“通常由人工智能大量生产的低质量数字内容”。软件工程领域也已经有论文专门研究 AI Slop 对开发者协作、代码审查和信任关系造成的影响。

那为什么 AI 改不掉？

02为什么你说"别太 AI"，它根本听不懂

大部分人吐槽到“AI 审美不行”就停了。

但这还不够。

你得理解它为什么会这样，才知道解法应该往哪儿用力。

我把它拆成三层。

第一层：AI 不是没审美，它是在选择“最不容易出错”的审美

AI 写前端时，不是在像设计师一样判断“这个品牌应该长什么样”。

它更像是在训练数据的概率分布里采样。

当你 prompt 一句“帮我做一个 SaaS 产品页”，模型面对的是成千上万个真实网页、教程模板、开源组件和 landing page 的 token 序列。

它会选什么？

当然是出现频率最高、最不容易被骂错的东西。

• Inter 字体，安全。
• 蓝紫渐变，科技感。
• 三栏卡片，规整。
• 大圆角，现代。
• Hero 加一句大标题，下面放 CTA，稳。

这不是 AI “不会设计”。

而是统计上最安全的答案，恰恰是审美上最平庸的答案。

AI 不是在设计，它是在做最大似然估计。

最大似然估计天然指向“最不意外”的结果。但真正好的设计，很多时候恰恰需要一点“不那么平均”的判断。

第二层：AI 学会了“看起来完成”，而不是“真的完成”

假 Dashboard 为什么这么多？

因为它太容易“看起来完成”了。

你让 AI 做一个 analytics 页面，它给你三个彩色数字卡：

• Revenue: $128K
• Active Users: 24,893
• Uptime: 99.99%

页面一下子就丰满了。

但这些数据没有来源，没有交互，没有业务语境，也没有真实图表设计。它只是把“数据产品的样子”贴在页面上。

这背后有一个很现实的机制：AI 在训练和反馈中，容易被奖励那些短、更完整、更像成品的输出。

接入真实数据、设计真实图表、处理空状态和异常状态，很麻烦。

用几个 div 拼一个假 dashboard，很快。

于是模型学会了一个危险技能：假装完成。

所以你越要求“做得专业一点”，它越可能给你塞更多假图表、假头像、假公司 Logo 和假数据。

它不是偷懒。

它是被训练成了这样。

第三层：你说“别太 AI”，它根本没有可执行动作

这是最被忽视的一层。

当一个开发者说“别太 AI”，AI 根本不知道这句话对应哪些具体约束。

你说“换个风格”，它就换一套同样 AI 味的风格。

你说“专业一点”，它就加 gradient、trust logos、eyebrow、假 dashboard。

你说“高级一点”，它就加 blur、glow、glassmorphism。

问题不是你没有审美。

问题是你和 AI 之间存在一个“品味词汇缺口”：你能感知到输出不对，但没有把“不对”翻译成可执行规则。

三层加在一起，就形成了一条审美下降螺旋：

训练数据趋同 → 反馈奖励假完成 → 用户说不清楚 → AI 回到默认模板。

这个问题的本质，不是“模型不够聪明”。

而是很多隐性的专业判断，没有被翻译成 Agent 能执行的协议。

03Taste-Skill v2：不是提示词合集，而是审美门禁

这就是 Taste-Skill 真正有意思的地方。

它不是又一个“前端 prompt 合集”。

它更像是给 AI 装了一套审美安检门：不是建议它别犯错，而是犯了就不准过。

作者 Leonxlnx 的做法非常工程化：把资深前端设计师的隐性判断，写成一份 1200 多行的 SKILL.md，让 Agent 可以逐条对照执行。

也就是说，它不是在跟 AI 说：

你尽量做得好看一点。

而是在跟 AI 说：

这些东西不能出现。出现就 Fail。  这些层级必须满足。不满足就重做。  这些布局不能重复。重复就换。

这就是它和普通 prompt 最大的区别。

Prompt 是劝 AI 自觉。Checklist 是不给它蒙混过关。

3.1 三个拨盘：把"我要高级一点"翻译成参数

Taste-Skill v2 里面最关键的抽象，是三个设计拨盘：

默认预设是 8 / 6 / 4：高设计变体、中等动画、较低信息密度。

这三个拨盘的价值，不是让普通用户学设计。

它真正解决的是：把“我想要更高级一点”“别那么模板”“信息密度再高一点”这种模糊感受，翻译成 AI 能执行的参数。

你不是在微调 CSS。

你是在控制 AI 输出往哪个方向偏离“统计平均值”。

3.2 Brief Inference：强迫 AI 先读懂任务，再开始写代码

v2 里还有一个很容易被低估的设计：在生成任何代码前，Agent 必须先输出一行 Design Read。

比如：

Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion.

这行话看起来像废话，其实很关键。

它至少做了三件事。

第一，阻断默认路径。  不强制写这一行，模型很容易直接跳进最安全的网页模板。

第二，暴露理解偏差。  如果它一开始就读错了你的意图，你能马上发现，而不是等代码写完才发现风格全歪。

第三，锚定后续决策。  三拨盘的参数从这个 Design Read 推断出来，而不是从训练数据的统计平均里自动滑落。

这一步的价值很直接：

用一个小成本的前置理解，换掉一个大概率会发生的默认 fallback。

3.3 Pre-Flight Check：最狠的是，它连一个破折号都不放过

Taste-Skill 最值得看的地方，是最后的 Pre-Flight Check。

所有规则最终都要经过硬 checklist。

不是“建议少用”。

而是“出现即 Fail”。

比如这些禁令：

• em-dash 全面禁止
  标题、eyebrow、pill、button、quote attribution、alt text，任何地方出现 — 都算 Pre-Flight Fail。
• EYEBROW RESTRAINT
  每 3 个 section 最多只能有 1 个 eyebrow，超过就 Fail。
• Section-Layout-Repetition Ban
  同一 layout family 在一个页面最多出现一次。
• Hero 纪律
  Headline 最多 2 行，subtext 最多 20 个单词、4 行，Hero 里最多 4 个文本元素。
• ZIGZAG ALTERNATION CAP
  连续两个 left-image/right-text 之后，必须换其他布局。
• SHAPE CONSISTENCY LOCK
  整个页面只能用一套 corner-radius 系统，不能 Hero 用 rounded-3xl，卡片用 rounded-xl，按钮又用 rounded-lg。
• 纯黑禁止
  #000000 要替换为 zinc-950 或 off-black，阴影也不能用纯黑硬砸。

为什么一定要这么硬？

因为你不能相信 AI 的自我约束。

你说“尽量别用 em-dash”，它还是会用。

你说“少用一点 neon glow”，它理解成“少用一点，但还是可以用”。

你说“不要太模板”，它根本不知道模板味来自哪里。

只有“出现即 Fail”级别的规则，才能对抗模型在统计分布中被反复强化过的默认动作。

Taste-Skill 最有启发的地方就在这里：

反 Slop 靠的不是更委婉的 prompt，而是更硬的 guardrail。

04但别把它当万能药

当然，Taste-Skill 也不是万能药。

它更像是一套针对 AI 前端输出的审美 guardrail，而不是完整的产品设计系统。

目前更适合的场景是：

• marketing page
• landing page
• portfolio
• redesign
• 需要减少模板味的前端页面

不太适合直接拿来解决复杂 SaaS 产品 UI、后台管理系统、业务流程设计这类问题。

它也需要 Agent 环境配合，比如 Claude Code、Cursor、Codex 这类能加载 Skill 文件的工作流。你在普通 ChatGPT 网页版里直接说“使用 Taste-Skill”，效果不会等价。

另外，1200 多行规则听起来很多，但对普通使用者来说，不需要一口气读完。真正最容易内化的，其实是那几条高频门禁：

• 禁止 em-dash 滥用。
• 限制 eyebrow。
• 避免重复三栏卡片。
• 不做假 dashboard。
• Hero 不塞满东西。
• 统一圆角和阴影系统。

这几条记住，你再看 AI 写的网页，已经很难回到过去了。

05这件事真正重要的不是前端

Taste-Skill 真正让我兴奋的，不是它能让 AI 写出更好看的前端。

而是它证明了一件事：

专业判断可以被编码成 Agent 可执行的协议。

过去我们讲 prompt，总是在想怎么把需求说得更清楚。

但 Taste-Skill 提醒了另一个方向：很多时候，真正有效的不是继续“描述你想要什么”，而是明确“什么东西绝对不能过线”。

这就像从“请你自觉一点”，升级成“这里有一套门禁系统”。

前端审美只是第一个被显性化的领域。

下一个会是什么？

代码架构？安全规范？测试策略？文档质量？产品判断？

Agent Skill 这个方向如果真有价值，可能不是让 AI 更“聪明”的锦上添花，而是给 AI 装上刹车、方向盘和质检线。

未来真正稀缺的，可能不是“会不会用 AI”。

而是你能不能看出 AI 哪里不对，并且把这种判断写成规则。

因为 AI 会生成，已经不稀奇了。

能判断、能约束、能把专业品味变成可执行协议，才是下一阶段的分水岭。

所以，如果你也一眼看出过某个网页“太 AI 了”，这篇可以发给那个同样看得出来的人。

参考来源：

• Taste-Skill GitHub：https://github.com/Leonxlnx/taste-skill
• Taste Skill 官网：https://www.tasteskill.dev/
• Merriam-Webster 2025 Word of the Year: Slop：https://www.merriam-webster.com/wordplay/word-of-the-year
• arXiv: An Endless Stream of AI Slop：https://arxiv.org/abs/2603.27249

如果这篇内容对你有帮助，欢迎关注这个公众号，后续会更新更多精彩内容。