为什么你让AI写的前端总有一股模板味？taste-skill 找出了原因

目录

一、问题：AI 生成的页面，为什么永远是那副样子？
二、根因：LLM 不是在设计，是在求平均
三、taste-skill 的三层矫正机制

• 3.1 第一刀：Design Read，打断直接跳平均
• 3.2 第二刀：高频模式禁令，把 AI 从安全区往外推
• 3.3 第三刀：参数系统，控制偏离的幅度
  四、正向构建：不只说不行，也说怎么干
  五、本质：一个统计偏差矫正器
  六、对你意味着什么？
  七、总结

一、问题：AI 生成的页面，为什么永远是那副样子？

用 Cursor、Claude Code 或者任何 AI 工具写前端，你一定经历过这个场景：

让它做一个 SaaS 落地页。出来的是什么？

• Inter 字体
• Hero 区一张暗色背景加白色大字
• 三个居中的 feature 卡片
• 紫蓝色渐变按钮
• Lucide 图标

你让它”再现代一点”。AI 把紫色渐变换成了更浅的紫色渐变。按钮加了个 hover:shadow-xl。

你让它”再有点设计感”。AI 换了张 Unsplash 图片。

不是它不想做好。是它的工作方式，决定了它每次都会往同一个方向走。

二、根因：LLM 不是在设计，是在求平均

要理解为什么，得先退一步，看 LLM 到底在干什么。

LLM 的核心任务就一件事：预测最可能的下一个 token。

你给它一段 prompt，它基于训练数据里学到的概率分布，输出统计上最合理的续写。

这套机制，写代码好使，写邮件好使，写文案也好使。因为这些领域，正确答案确实有规律可循。

但到了视觉设计输出这里，问题就来了。

“统计上最合理的下一个 token”，在设计语言里对应的不是”最好看的”。是”训练数据里出现最多的”。

• Inter 字体出现最多？那就 Inter。
• 紫蓝渐变出现最多？那就紫蓝渐变。
• 居中对称卡片出现最多？那就居中对称。

这就是 AI slop 的根源。

不是模型能力的问题。是概率输出机制，在设计场景里天然偏向统计平均值。而统计平均值，恰好等于最无聊的那个点。

你让一百个设计师各自做一个落地页，输出一定千差万别——有人爱不对称，有人爱极简，有人爱粗野主义。

但你把互联网上所有的落地页揉成一团，求一个统计平均，你会得到什么？

一个紫蓝渐变的、Inter 字体的、居中对称卡片的页面。

AI 干的就是这件事：求平均。

三、taste-skill 的三层矫正机制

taste-skill（GitHub: Leonxlnx/taste-skill，39k+ stars）做的事情，跟审美没关系。它是在这个概率机器外面，套了一层强制偏离约束。

3.1 第一刀：Design Read，打断直接跳平均

SKILL.md 的 Section 0 有三条规则：

• 0.A 定原则：先读信号。决定美学方向的是受众，不是你。
• 0.B 给动作：写代码之前，先输出一行 Design Read。
• 0.C 讲原因：需求模糊就先问，别猜。大部分 LLM 设计产出烂，是因为模型直接跳到了默认审美，而不是读懂了场景。

正常 LLM 工作流：

prompt → 匹配最像的数据样本 → 开始吐代码

taste-skill 把它改成了：

prompt → 强制解读任务意图 → 基于解读选择设计方向 → 开始吐代码

多出来的这一步，就是偏离平均值的第一步。没有这一步，LLM 直接掉进频率最高的输出模式。有了这一步，它至少被拉出来，看了一眼方向。

3.2 第二刀：高频模式禁令，把 AI 从安全区往外推

Design Read 解决了没有场景锚点的问题。但即使有了明确场景，模型在选择具体实现方案时，仍然受训练数据频率分布支配。它会优先走最常见的那条路。

taste-skill 直接列了一份禁令清单：

这些禁令分两类：

• 默认倾向：Inter、紫蓝渐变、对称居中卡片——不是模型不会做，是它在默认状态下会回落到这些高频选项。
• 工程盲点：h-screen、emoji 滥用、模板文案——训练数据的固有偏差导致。

所以 SKILL.md 里大量使用 BANNED、NEVER、CRITICAL 这种命令式语言。不是作者脾气大，是跟一个概率输出系统讲道理没用。你不能跟它商量”这个配色方案在当下语境里合适吗？”它的选择依据是频率分布，不是语境判断。

你只能直接说：这条路封了。走别的。

3.3 第三刀：参数系统，控制偏离的幅度

禁令是告诉 AI 别往哪走。但光有禁令不够，还得给模型一个偏离的方向和幅度。

taste-skill 定义了三个参数：

• DESIGN_VARIANCE（默认 8/10）：控制布局的不对称程度。1 = 完美对称，10 = 艺术混沌。
• MOTION_INTENSITY（默认 6/10）：控制动画的丰富程度。1 = 静止，10 = 电影级物理动画。
• VISUAL_DENSITY（默认 4/10）：控制信息密度。1 = 画廊级留白，10 = 驾驶舱级数据密度。

这三个参数，本质上是偏离统计平均值的三个向量。

默认值（8, 6, 4）本身不重要。重要的是这个设计思路——不是固定一个好设计的标准，而是给三个可变旋钮，让输出可以在一个三维空间里移动。

如果有一天，所有人都用默认值，输出又开始趋同了？拧一下旋钮就行。VARIANCE 调到 5，DENSITY 调到 8，出来的就是完全不同的东西。

用参数化来对抗同质化。 不是给出一个新模板，是给出一个可以逃离模板的机制。

四、正向构建：不只说不行，也说怎么干

taste-skill 不只有禁令。SKILL.md 后半部分有完整的正向实现标准：

交互模式库：40+ premium UI concepts，包括磁吸按钮、Bento 网格、视差倾斜卡、全息箔卡、Tinder 滑动堆、文本解扰效果、粒子爆炸按钮。每个都配了技术栈说明和适用场景。

Bento Grid 规范：

• 卡片用大圆角，不用直角
• 阴影用扩散阴影，不用硬阴影
• 标签放在卡片外面，不放里面
• 网格内部所有卡片必须有持续性微交互——脉冲、打字机、浮动、微光或轮播

动效实现标准：

• 所有动画用 transform 和 opacity——走硬件加速，不用 top/left/width/height
• 磁性按钮必须用 Framer Motion 的 useMotionValue 和 useTransform，不能用 React 的 useState（后者在移动端会触发不必要的重渲染，掉帧）

这些不是禁令。这些是正向的、可执行的实现标准。

所以 taste-skill 的完整结构是：

禁令（封死默认回落）
  + 参数（控制偏离幅度）
  + 实现模式库（提供正向参考）
  = 一套完整的偏离约束系统

五、本质：一个统计偏差矫正器

写到这，可以给 taste-skill 下一个定义级别的总结了。

LLM 在设计输出上的问题，根子在训练数据的频率分布偏差。它的训练目标，是在所有可能的输出里选最可能的那一个。但”最可能”是由训练数据的频率分布决定的。而互联网上的设计数据，本身就向某些高频模式严重倾斜——Inter、紫蓝渐变、居中对称卡片出现的次数，远超其他选择。

taste-skill 做的事情，跟统计学里的”偏差矫正”完全同构。

就像做抽样调查，如果某些群体被过度代表，你得加权调整，才能还原真实分布。taste-skill 就是在给 LLM 的设计输出做加权调整——压低高频模式的权重，强制引入低频模式，用参数控制偏离幅度。

它不是设计系统。不是品味指南。不是审美教育。它是一个针对 LLM 设计输出频率偏差的矫正器。

这就是为什么它值 39k 星。不是因为那些规则本身多高明，是因为它第一次系统性地定义和解决了”LLM 在设计输出上的频率偏差”这个问题。

六、对你意味着什么？

如果你是一个用 AI 写前端代码的开发者，知道上面这些之后，你能做的事比装个 taste-skill 多得多。

第一，别等着 AI 某一天学会设计。

它在设计输出上的底层机制就是概率预测。概率预测天然偏向高频模式。这不是暂时的缺陷，是机制本身的特性。你能做的不是改变这个机制，是在这个机制外面加约束层。

第二，taste-skill 最有价值的部分，不是那些具体规则。

你的项目跟 Leon 的项目不一样。你的品牌字体、配色倾向、交互习惯、用户预期，都跟他的不一样。但 taste-skill 示范了一整套方法——怎么把设计判断翻译成机器可执行的约束。你读了 SKILL.md 之后，应该能写出属于你自己的那份约束文件。不是 fork，是从你自己的设计决策出发。

第三，参数化是一个被严重低估的思路。

别试图给 AI 一个完美设计的标准答案。没有这种东西。给它几个可调的维度，让输出可以在一个空间里移动。今天调这个组合，明天换另一个。用参数多样性，对冲同质化风险。

七、总结

AI 生成的前端页面之所以总有一股模板味，不是因为模型不够聪明，而是因为它的工作机制——预测最可能的下一个 token——在设计场景里天然等于”求统计平均”。而互联网上设计数据的统计平均，恰好就是那个紫蓝渐变、Inter 字体、居中对称卡片的页面。

taste-skill 的价值在于，它没有试图改变 LLM 的底层机制（也改变不了），而是在这个机制外面，系统性地构建了一套偏差矫正系统：用 Design Read 打断直接跳平均，用高频模式禁令封死默认回落，用参数系统控制偏离幅度，用实现模式库提供正向参考。

这不是魔法。这是工程。

本文技术细节基于 taste-skill 仓库（GitHub: Leonxlnx/taste-skill）默认 skill（v2 experimental）的公开资料。