Vibe Coding 设计品味课：让 AI 生成不丑的界面

玩 vibe coding 的人都有过这种体验：让 AI 生成一个落地页，功能都对，打开一看——紫蓝渐变大标题、三个圆角卡片一字排开、满屏的 emoji 图标、五颜六色的 badge。能看，但就是有股说不出的"味儿"：一眼 AI 生成。

这篇文章的观点可能有点冒犯：品味不是天赋，是可以拆解成规则的东西。而 AI 没有品味，但它能不折不扣地执行你的品味。你觉得 AI 生成的界面丑，大概率不是 AI 的问题，是你没把品味讲清楚。下面是七条可落地的规则。

1. 先给参考，再谈需求

"做一个好看的落地页"是对 AI 最无效的指令之一，因为"好看"在它的训练数据里等于"平均好看"——也就是最俗的那一款。正确姿势是先扔参考：找 3–5 个你觉得好看的网站截图，告诉 AI"按这种感觉做"。

更进一步：用一句话说出你喜欢它的原因——"我喜欢它的留白""我喜欢它只用一种强调色"。AI 读不懂你的审美，但它读得懂"留白多""强调色少"这种可执行的描述。

2. 设计 tokens 先行，页面后行

业余做法：直接让 AI 写页面，颜色字体想到哪写到哪。专业做法：先定一套设计 tokens，再让所有页面引用它。

• 颜色：不超过 3 个主色 + 一套中性灰阶。灰阶用现成的（如 Tailwind 的 neutral），别让 AI 现调。
• 字体：1–2 种字体封顶。中文界面推荐系统字体栈，别整花活。
• 圆角与间距：定 3 档圆角（小/中/大）、一套 4px 基准的间距。全站统一，丑不起来。

把这套 tokens 写进项目的指令文件（AGENTS.md / CLAUDE.md），AI 每次生成都会自动遵守——品味前置，一劳永逸。

3. 排印决定 80% 的观感

一个残酷的真相：大多数人觉得"设计感"，其实感受到的是排印。字号层级拉开（标题/正文/注释至少差 4px）、行高给足（正文 1.6–1.8）、字重有对比（一个页面最多两种字重做强调），做到这三条，界面观感直接及格。

反例就是 AI 的默认输出：所有文字差不多大、行高挤在一起、到处加粗——信息没有主次，眼睛不知道先看哪。

4. 留白与节奏：一个屏幕只讲一件事

AI 有个毛病：怕页面"太空"，于是拼命往里塞东西——多加一个特性卡、多放一张图、再塞一段 testimonials。结果是每个区块都在喊，整体等于没人说话。

规则很简单：删掉一半装饰，一个屏幕只讲一件事。区块之间用留白分隔，而不是用分割线和背景色块。留白不是"没设计"，留白就是设计。

5. 克制动效：一个页面一种动效语言

AI 生成的动效常常是"动效大杂烩"：这里淡入、那里弹跳、滚动视差、hover 翻转全上。记住：动效是标点符号，不是正文。一个页面只用一种动效语言（比如统一用 200ms 的淡入上移），时长统一、缓动统一，质感立刻上来。

6. 背一份"不要清单"

品味的一半是"知道不要什么"。把这份清单也写进项目指令：

• ❌ 紫蓝渐变大标题（除非你的品牌色真是紫色）
• ❌ 不明所以的毛玻璃拟态（看不清字还费性能）
• ❌ 满屏 emoji 当图标（用 Lucide 这类线性图标）
• ❌ 五颜六色的 badge 和标签（状态色只用在状态上）
• ❌ 首屏三个特性卡片一字排开（这是 2015 年的模板）

"永远不用渐变"比"好看一点"有用 100 倍——否定式指令是 AI 最听得懂的审美语言。

7. 最后一招：让 AI 当甲方，你当设计师

生成完第一版后，别急着调细节，换个角色问 AI："如果你是挑剔的设计总监，这个页面最该删掉的三个东西是什么？"AI 在"批评模式"下比在"创作模式"下靠谱得多——让它生成容易陷入平均，让它做减法反而能逼出判断。

总结成一句话：AI 的审美等于它训练数据的平均值，而你的品味应该是一个明确的方向。方向越明确，AI 越不会把你带偏。Vibe coding 拼到最后，拼的不是 prompt 技巧，是你心里有没有一张"好看"的样子——并且能不能把它翻译成 AI 听得懂的规则。