第01章 AI 前端的廉价感陷阱
第01章 AI 前端的廉价感陷阱
“所有 AI 生成的网站看起来都一样。”——这不是审美问题，这是统计问题。
1.1 一个实验：让三个 AI 工具做同一个网站
打开 Cursor，输入一句话：
Build a modern SaaS landing page for a project management tool.
你会得到什么？
- Hero 区域：大标题居中，副标题居中，两个按钮居中，背景是浅紫或浅蓝渐变
- Features 区域：三列等宽卡片，每张卡片一个图标 + 标题 + 描述，圆角
rounded-xl，淡灰阴影 - Pricing 区域：三列定价卡，中间那列用紫色标注"Most Popular"
- Footer：四列链接，底部版权声明居中
现在换一个工具。打开 Copilot Agent Mode，输入同一句 prompt。再换 ChatGPT Canvas，还是同一句 prompt。
三个结果几乎一模一样。
不是因为你的 prompt 太笼统。把 prompt 改成"Build a minimal, premium SaaS landing page with asymmetric layout and sophisticated typography"——结果只是微调了间距和字号，核心布局结构完全不变：居中标题、三列卡片、紫色强调色。
这就是 AI Slop（AI 垃圾审美）的本质问题。
1.2 统计偏差：AI 不是没品味，是品味固化
大语言模型的训练数据来自互联网上的海量代码。GitHub 上有多少 React 项目用的是这套模式？
- Inter 字体：GitHub 上最常见的 UI 字体，因为它免费、覆盖全字符集、Google Fonts 默认推荐
- 紫色/蓝色渐变：从 Stripe 到 Vercel，过去五年最流行的 SaaS 配色
- 三列等宽布局：Bootstrap 教程的第一课
- 居中对称：CSS 新手最容易实现的布局方式
- 圆角阴影卡片：Tailwind UI 模板中出现频率最高的组件
这些不是"坏设计"——它们是概率最高的设计。LLM 在生成代码时，每一步选择的都是条件概率最高的下一个 token。当你说"modern SaaS"时，模型内部的概率分布直接指向这套模式。
问题不在于 AI 缺乏审美判断力，而在于它的审美判断力被训练数据的频率分布锁死了。
AI Slop 的五大特征
通过分析数百个 AI 生成的前端项目，可以归纳出五个反复出现的统计偏差模式：
| 特征 | AI 默认输出 | 专业设计 |
|---|---|---|
| 字体 | Inter / system-ui | Geist, Satoshi, Cabinet Grotesk, Outfit |
| 配色 | 紫色渐变 / Indigo-500 | 单一强调色 + 中性底色，饱和度 < 80% |
| 布局 | 居中对称 / 三列等宽 | 非对称分割 / 50-50 / 错位留白 |
| 卡片 | 圆角 + 外阴影 + 背景色 | 1px 边框 / 分隔线 / 纯粹负空间 |
| 动效 | 无 / hover 放大 | Spring 物理弹簧 / 交错出场 / 磁力追踪 |
1.3 专业设计与 AI 输出之间的差距
看一个真实对比。
场景：为一个精品咖啡品牌做官网首页。
AI 默认输出：
<section className="bg-gradient-to-b from-amber-50 to-white py-24">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-5xl font-bold text-gray-900">
Artisan Coffee, Perfected
</h1>
<p className="mt-4 text-lg text-gray-600">
Sourced from the finest farms worldwide
</p>
<button className="mt-8 px-6 py-3 bg-amber-600 text-white rounded-lg">
Shop Now
</button>
</div>
</section>
专业设计师的实现：
<section className="grid grid-cols-1 lg:grid-cols-2 min-h-[100dvh]">
<div className="flex flex-col justify-end p-8 lg:p-16 pb-16">
<p className="text-xs tracking-[0.3em] uppercase text-stone-400 mb-6">
Single Origin · Small Batch · Direct Trade
</p>
<h1 className="text-4xl lg:text-7xl font-light tracking-tighter
text-stone-900 leading-[0.9]">
Every Cup<br />Tells a Story
</h1>
<div className="mt-12 flex items-center gap-6">
<a href="/shop" className="text-sm tracking-wide uppercase
border-b border-stone-900 pb-1
hover:pb-2 transition-all">
Explore Origins
</a>
<span className="text-stone-300">|</span>
<a href="/process" className="text-sm tracking-wide uppercase
text-stone-400 hover:text-stone-900
transition-colors">
Our Process
</a>
</div>
</div>
<div className="relative overflow-hidden">
{/* Full-bleed image, no rounded corners */}
</div>
</section>
两段代码的功能完全相同：展示一个咖啡品牌的首屏。但视觉效果的差距是数量级的：
- 布局：居中对称 → 非对称双列分割
- 排版：粗体标题 → 细体 + 极紧字间距 + 手动换行
- 配色：渐变背景 + 彩色按钮 → 单色系 Stone 色板
- 交互：圆角按钮 → 底部下划线链接 + hover 过渡
- 尺寸：固定
py-24→min-h-[100dvh]全屏
这个差距在行业里值多少钱？ 一个普通的 AI 生成模板在 ThemeForest 上卖 $29。一个专业设计事务所做同样功能的网站收费 $15,000–$150,000。差距不在功能上，在品质感上。
1.4 为什么"写更好的 Prompt"不够
你可能会想：如果我写一个极其详细的 prompt，把所有设计要求都列出来呢？
试试看：
Build a coffee brand landing page. Requirements:
- Asymmetric 2-column split layout, no centered content
- Font: Geist, tracking-tighter for headlines
- Color: Stone palette only, no gradients
- No rounded buttons, use underline links
- Full viewport height with min-h-[100dvh]
- Left column: text content, bottom-aligned
- Right column: full-bleed hero image
结果确实好了很多。但有三个致命问题：
问题一：不可复用。 每次新项目你都要重写一遍这个 prompt。而且你必须记住所有规则——哪些字体被禁、哪些布局要用、哪些模式要避免。这不是开发者的工作方式。
问题二：规则会衰减。 在一个长对话中，LLM 对初始 prompt 中规则的遵守程度会随上下文长度增加而衰减。到第五个组件时，Inter 字体可能就悄悄回来了。
问题三：缺少反面约束。 "使用 Geist 字体"是一个正面指令。但 AI 真正需要的是反面约束：“禁止使用 Inter、system-ui、generic sans-serif”。研究表明，在 LLM 的决策过程中，明确告诉它"不要做什么"比"要做什么"更有效——因为"不要做 X"直接把概率最高的路径砍掉，迫使它探索其他选项。
这就是 Taste Skill 存在的原因。 它不是一段 prompt，它是一个持久的约束系统，在每一次代码生成中自动加载、持续生效、不会衰减。
1.5 Taste Skill 是什么——一句话定义
Taste Skill 是一组编码为 SKILL.md 文件的设计约束规则，被嵌入 AI 编码工具的上下文中，在代码生成时自动应用。
它的核心思想可以用三层结构概括：
┌──────────────────────────────────────┐
│ Layer 3: 执行协议 │
│ "How" — 具体的 CSS/React 实现规范 │
├──────────────────────────────────────┤
│ Layer 2: 正面指令 │
│ "Do" — 使用什么字体/颜色/布局/动效 │
├──────────────────────────────────────┤
│ Layer 1: 禁用清单（最底层，最强效） │
│ "Don't" — 绝对禁止的模式 │
└──────────────────────────────────────┘
Layer 1（禁用清单）是整个系统的基石。 它的工作原理：当 LLM 在生成代码时，每一步都在概率分布中选择下一个 token。禁用清单的作用是直接砍掉概率最高的若干路径（Inter 字体、紫色渐变、居中布局），迫使模型选择剩余路径中概率最高的——而这些通常是更有个性、更不"通用"的设计选择。
Layer 2（正面指令）在禁用清单的基础上进一步引导。 禁用 Inter 之后，模型可能选择 Roboto 或 Poppins——正面指令把它引导到 Geist、Satoshi 或 Cabinet Grotesk。
Layer 3（执行协议）确保落地质量。 不只是"用 Spring 动效"，而是精确到 stiffness: 100, damping: 20 的参数值。不只是"非对称布局"，而是 grid grid-cols-1 lg:grid-cols-2 的具体实现。
1.6 Taste Skill 的设计族谱
目前 Taste Skill 体系包含以下核心成员：
| Skill 名称 | 定位 | 核心特征 |
|---|---|---|
| design-taste-frontend | 基座 Skill | 完整的规则库，所有其他 Skill 的参考基准 |
| soft-taste-frontend | 柔和高端 | 低对比度、大留白、弹簧动效、SaaS/品牌场景 |
| minimalist-taste-frontend | 编辑器级 | Notion/Linear 风格、无卡片、等宽字体、信息密集 |
| brutalist-taste-frontend | 工业实验 | 瑞士排版、黑白高对比、尖锐几何、无圆角 |
| gpt-taste-frontend | 最严格约束 | 基座 Skill 的加强版、GSAP 集成、方差值 9 |
| output-taste-frontend | 输出保障 | 防截断、防占位符、完整性校验清单 |
| redesign-taste-frontend | 改造工作流 | 先审计后改造的三阶段方法论 |
| image-to-code-frontend | 图片驱动 | 先生成设计参考图 → 分析 → 实现的流水线 |
每个 Skill 都是一个独立的 .md 文件，放在 .agents/skills/ 目录下，由 AI 工具在对话开始时自动加载。
1.7 这本书的学习路径
本书的结构遵循从原理到实战的逻辑：
第一部分（第 1-4 章）：理解系统。 你正在读的这一章解释了问题。接下来三章拆解 Skill 文件的结构、三个核心旋钮的工作原理、以及禁用清单为什么是最强武器。
第二部分（第 5-9 章）：掌握风格。 每章深入一个具体 Skill，包括设计哲学、配置参数、完整的 CSS/React 代码实现、适用场景和可直接使用的提示词模板。
第三部分（第 10-12 章）：高级技巧。 Skill 叠加组合、旧项目改造、Image-to-Code 工作流，以及从零编写你自己的 Taste Skill。
每章都包含可直接使用的提示词。 不是理论讲解，而是你在 Cursor / Copilot / Claude 中可以直接粘贴运行的完整 prompt。
本章小结
- AI 前端的"廉价感"是统计偏差的必然结果——LLM 在生成代码时选择概率最高的模式，而概率最高的模式来自训练数据中出现频率最高的平庸设计
- "写更好的 prompt"无法根本解决问题——规则不可复用、会衰减、缺少反面约束
- Taste Skill 是一套嵌入 AI 工作流的持久约束系统——通过三层结构（禁用清单 → 正面指令 → 执行协议）在代码生成时自动生效
核心行动建议：在你的 AI 编码工具中找到 Skill 文件的加载位置（Cursor 的
.cursor/rules/、VS Code Agent 的.agents/skills/、Claude 的.claude/），为后续章节做好准备。