Vibe Coding网站如何避免AI Slop？用设计契约打造有灵魂的界面

最近接手了一批用 Vibe Coding 快速搭出来的网站，功能确实都能跑，但打开首页的第一眼，几乎都逃不掉同一个问题：一眼 AI。紫色渐变、悬浮卡片、大而无当的标题、一堆说完等于没说的文案。用户的评价很统一——“这网站没灵魂”。

Vibe Coding 把建站门槛压到了历史最低，这是工具红利。但红利也有代价：AI 生成的界面在默认参数下会向“平均值”收敛，而平均值恰恰是最容易被认出来的 AI 味。这篇文章不聊怎么把功能做得更复杂，只聊一件事：在 Vibe Coding 的工作流里，怎么把“设计灵魂”塞回去，让网站从“AI 生成品”变成“有人认真做过的东西”。

1. Vibe Coding 与 AI Slop：先把问题定义清楚

Vibe Coding 这个词来自 Andrej Karpathy 的一次分享，大意是你靠“感觉”和 AI 结对编程：用自然语言描述需求，AI 负责生成代码，你在界面上看到结果再继续提需求，循环往复。它适合原型验证、内部工具、内容站点、小型商业落地页，也适合开发者快速验证产品想法。

问题出在 AI Slop。Slop 原意是“泔水”，在 AI 语境里指那些批量生成、无个性、无审美判断、只追求“看起来差不多”的数字垃圾。AI 写的代码本身没有审美意图，它会从训练数据里取最大公约数：最多人用过的布局、最保险的配色、最不会出错的组件库默认值。结果就是所有 Vibe Coding 出来的网站长得像同一套模具。

要判断一个网站是不是 AI Slop，可以看几个标志：

这篇文章要解决的就是这几个问题。这里说的“设计”不是指动手画稿，而是设计决策：你作为产品负责人能不能定下风格方向，让 AI 在明确的约束下生成，而不是让它自由发挥。

2. 为什么“能用”和“有灵魂”之间差了那么多

功能能跑，视觉上却廉价，根因不在 AI，而在工作流。Vibe Coding 的默认流程是：说需求 → 生成 → 看效果 → 再说需求。这个循环里，如果需求描述里只有“这是什么”“有哪些功能”，AI 就只会交付一个“合格但平庸”的界面。它没有动力去思考你是什么品牌、为什么用户要记住你、这个页面最核心的呼吸感在哪里。

具体拆开，三个原因造成了 AI Slop：

第一，大模型天然趋中。模型在训练数据里见过了海量网页，生成时计算的是最大概率的 token 序列。在 UI 场景里，最大概率就意味着最常见的工具链、最保险的组件组合。它不会主动选择一个小众但更有记忆点的设计方向，除非你把方向给它。

第二，默认组件库太强。Tailwind 的默认颜色、shadcn/ui 的默认圆角、各类 UI 库的默认栅格，这些工具能让你快速上线，但也让所有人共享同一套视觉基因。AI 深谙这些默认值，所以它生成出来的页面一定“不丑”，但一定“不特别”。不丑是底线，不是目标。

第三，AI 不理解“叙事”。一个有灵魂的网站有情绪曲线：打开页面的第一眼吸引你，往下滚动时逐步释放信息，关键位置用留白和节奏让你停下来。AI 不理解这个逻辑，它只会按“第一屏放 hero、第二屏放功能、第三屏放 CTA”的套路走，最后生成一个永远正确、永远无趣的页面。

这也是我看完一圈 Vibe Coding 项目后最强烈的感受：绝大部分项目缺的不是功能，而是确认感。用户看完你的网站，不知道你是严肃的、轻快的、先锋的还是温润的。这就是灵魂缺失。

3. 有灵魂的设计：十个必须落地的维度

接下来是全文最硬核的部分。这十个维度是我检查一个 Vibe Coding 网站时都会过一遍的标尺，每一项都可以直接写进你的 prompt，也可以作为上线前的人工检查项。

3.1 先定核心概念，而不是堆功能关键词

大多数 Vibe Coding 的 prompt 开头是“帮我做一个网站，功能有……”这不对。AI 拿到一堆功能点，就会按功能模块自动排列布局，最后做出来的网站像一张功能清单。

正确的做法是先给网站一句话定位，说清楚它是谁、给谁看、什么情绪。

我通常会写一段设计故事作为项目的锚点，然后放进每个 prompt 的开头。比如：

你正在为一个独立设计师创作个人作品集网站。这个设计师擅长把东方留白美学和瑞士网格体系结合。网站的气质应该是：安静、克制、但同时带有手作的温度。

这段描述比“做一个有高级感的作品集”有用得多。AI 接到“东方留白”“瑞士网格”“手作温度”这些具体意象后，生成的界面会明显偏离平均值。

3.2 用设计令牌约束，而不是改一个变量

设计令牌不是设计系统团队才需要的东西，Vibe Coding 尤其需要。因为 AI 在生成过程中如果每次都用硬编码的颜色和间距，你会发现整个网站的颜色有 20 个不同的蓝，间距时大时小。

先写一个全局样式文件，把颜色、字体、间距、圆角、阴影全放进去，然后要求 AI 只使用这些令牌。

:root { /* 核心色板 */ --color-bg: #faf9f7; --color-text: #1a1a18; --color-muted: #6b6b66; --color-accent: #b03a2e; --color-accent-soft: #f0dfda; /* 字体 */ --font-display: "Noto Serif SC", "Source Han Serif SC", Georgia, serif; --font-body: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; /* 间距节奏 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem; --space-8: 2rem; --space-16: 4rem; --space-24: 6rem; /* 圆角与阴影 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); }

然后把这段配置连同“只允许使用这些 token”的指令放进每个 prompt。AI 在生成组件时就不会自创变量，你的网站会天然拥有整体感。

3.3 排版系统：先用层级，再谈字体

很多 AI 生成的网站排版问题不是“字体不好看”，而是层级不清。body 是 16px，小标题是 18px，大标题是 40px，三个之间没有可感知的倍数关系，视觉上就会一团糟。

先定一个线性缩放比例，再让 AI 严格按这个比例执行：

字号使用 1.25 倍线性比例：正文 16，副标题 20，小标题 25，区块标题 31，大标题 39。 行高为 1.6，正文字体宽度 60-75 字符（约 40-50em）。

用 CSS 实现的话，可以用 clamp 保持响应式：

body { font-size: 1rem; line-height: 1.6; max-width: 65ch; } h1 { font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.2; }

这里还有个小细节：AI 生成的网站经常是全局 text-center，所有标题正文都居中。居中本身没错，但长期使用会丧失节奏感。我通常要求 AI：正文默认左对齐，标题和 CTA 才允许居中。这个小改动会让网站立刻进入“人类设计”的象限。

3.4 留白：从“填满屏幕”到“留出呼吸”

AI 趋中的另一个表现是把页面填得满满当当。因为训练数据里的模板大多是为了在有限空间里塞下最多信息。但设计里的高级感，恰恰来自敢于留白。

在 prompt 里明确写：区块之间的垂直间距必须大于区块内部间距，用 6rem 作为区块间距的主节奏；内容区宽度限制为 1100px 等。也可以直接访问在线留白系统，设定一道原则：宁可让内容少一屏，也不让信息挤在一起。

留白不是浪费，是暗示用户在电脑屏幕上用哪种节奏消费内容。一个每段间距都是一样的页面，用户在浏览时会很快疲劳。

3.5 细节材质：用细线、纹理和克制阴影替代默认悬浮卡片

AI 模板最爱的三个元素是：超大圆角卡片、hover 时浮起来的阴影、白色背景上的一堆图标卡片。这些元素单独看没问题，组合在一起就构成了深刻的“管理后台感”。

要打破这种 AI Slop 感，可以要求 AI 在细节上做三件事：

第一，用细边框代替大阴影。给卡片加一层1px的浅色边框，比大面积的阴影更耐看。

.card { border: 1px solid #e8e6e3; border-radius: var(--radius-md); box-shadow: none; } .card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }

第二，在背景上加一点微妙的质感。纯白色背景在屏幕上看着太生硬，换成#fafaf9这类带一点暖度的灰白，或者加一个只出现在特定区域的 radial-gradient 作为视觉锚点。

第三，阴影要收敛。控制阴影的范围和透明度，让它只是投影，不是发光。AI 默认生成的阴影往往透明度太高，颜色太黑，改掉这两点就能去掉大半“模板感”。

3.6 动效：目标是抚平过渡，不是炫技

AI Slop 味的动效有几个特征：hover 时整个卡片上浮、按钮颜色突然闪变、进入视口时所有元素一起飞进来。这些动效说明 AI 把“动效”当成了目标，而不是手段。

好的动效只需要做好一件事：让状态变化顺滑。hover 有 150ms 的过渡，页面滚动时卡片依次淡入但不要在无意义的位置跳动，弹窗的出现有 200ms 的透明度过渡。把这些约束写进 prompt：

页面动效遵循以下规则： - hover 过渡时间 150ms-200ms； - 只在状态发生变化时添加动画； - 同一屏内同时执行的动画不超过 2 个； - 动画要有缓动函数，不要使用 linear。

再用一个全局 CSS 方案限定：

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

这一条同时兼顾了无障碍访问，是“有灵魂”设计的重要组成部分——它表示你在乎所有用户。

3.7 文案内容：人话而不是 AI 话

这是最容易被忽视、也最致命的一点。AI 生成的内容网站，文案一读就知道是 AI 写的：

• “释放潜能”
• “革新体验”
• “赋能每一位创作者”

人类读者看到这种文案不会觉得高级，只会觉得你在糊弄。有灵魂的网站，文案一定具体、诚实、有说话者的语气。与其让 AI 写十句空话，不如自己写一句真实的话：“我做了这个工具，是因为我自己每天要花两小时整理素材，现在它把时间缩短到十分钟。这是我的方式，试试看。”

在 prompt 里可以直接禁止 AI 用某些词：

所有文案必须避免以下表达：赋能、解锁、助力、打造、重塑、彻底改变。 用第一人称写，像一个真实的人在有依据地说话。

3.8 图标和插画：统一在同一个视觉语言里

AI 生成的网站最常见的图标问题是杂。这一屏用线条图标，下一屏用表情符号，再下一页出现了另一个图标库的填充风格。视觉混乱的根源不是质量，而是不统一。

要让 AI 保持统一，在 prompt 里明确：图标统一使用同一个图标库并且只使用线框风格；插画统一使用同一种描边粗细和同一种配色范围；图片统一使用同一种滤镜、同一种圆角、同一种宽高比。

简洁的做法是把图标库写成依赖：

# 用 lucide 这类统一风格的图标库，避免混用 npm install lucide-vue-next

3.9 状态完整性：不能只有“正常态”

AI 特别擅长生成“完美状态”下的页面，但真实的产品有 hover、focus、loading、error、empty 这五种状态。如果这些状态缺失，用户一操作就会出现明显的“断裂感”。

这一条几乎可以当做一个“验收清单”写进整体测试流程。上线前逐页检查：

• 按钮 hover 和 focus 是否有反馈
• 表单错误时是否显示错误信息且有红色边框
• 图片加载失败时是否显示占位
• 列表为空时是否有空状态提示
• 提交后是否有 loading 动效

AI Slop 网站的典型问题就是只有成功路径，用户一旦手滑，就掉进了没经过设计的深渊。

3.10 一致性：同一个组件在页面不同位置长得一样

最后一条看起来简单，实际上 AI 很容易在不同上下文里生成微妙的偏差：同一个按钮在首页是圆角 8px，在另一个区块是圆角 16px；同样的标题字号在另一个页面变成了不同值。整体感被这种细碎的不一致毁掉了。

这是设计令牌必须存在的最大理由。只要全局变量约束住，AI 即便在不同会话里生成组件，也会引用同一套变量。如果已经出现了零散的不一致，可以在验收时做一个搜索：

# 搜索页面里硬编码的颜色，找出来统一替换成变量 grep -r "#[0-9a-fA-F]\{6\}" ./src --include="*.vue" --include="*.tsx" | head -50

把搜出来的硬编码全部替换成设计令牌，视觉一致性会立刻上一个台阶。

4. 与 AI 协作：把设计意图写进每一轮 Prompt

上一节说的十个维度，不能只在最后人工检查时用，更应该写进每一个 prompt。推荐的做法是建立一份“设计契约”文档，放在项目根目录，每次新开一个对话框时都先粘贴进去，再让它生成或修改代码。

4.1 设计契约文档

一份适合 Vibe Coding 场景的设计契约，建议长这样：

你是本项目的资深视觉设计师与前端工程师。在修改和生成代码前，必须先读以下约束。 【项目定位】 一个面向独立咖啡师的内容展示站。气质：温暖、手工感、不炫技。 【视觉约束】 - 完整使用 style.css 里定义的 CSS 变量，禁止硬编码颜色 - 配色不超过 4 种主色 - 字体组合：展示字体用 serif，正文用无衬线，显示行高不小于 1.6 - 正文默认左对齐，中心对齐仅限标题与 CTA - 圆角使用 --radius-sm/md/lg，禁止超过 24px 的圆角 - 阴影透明度控制在 0.2 以下 【动效约束】 - 只做状态过渡，不添加进入视口的漂浮动画 - hover 过渡时间 150ms-200ms - 添加 prefers-reduced-motion 适配 【文案约束】 - 禁止出现“赋能、解锁、助力”等空泛词汇 - 用第一人称、真实语气写作 - 每个区块的文案不超过 50 字 【禁止事项】 - 禁止全屏紫色渐变背景 - 禁止图标卡片同时使用两种粗细规格 - 禁止新增任何未定义的间距令牌 现在，请基于以上约束完成接下来的需求。

把这段文字复制进 Cursor、Copilot、Claude 或任何编码助手，都能显著提高设计完成度。需要注意的是：AI 的记忆是有限的，长上下文里它会逐渐“遗忘”开头的内容。所以最好在关键迭代时重新粘贴一次。

4.2 功能 prompt 也要带设计约束

Vibe Coding 的难点在于，你不可能每次修改功能时都把完整设计规范写一遍。解决办法是把设计契约和功能需求放在同一个 prompt 里，比如：

请按设计契约继续开发本页面。 新增需求：在首页 hero 区添加一个“今日特调”栏目，展示 3 款饮品卡片。 要求： - 卡片用 --radius-md 圆角，使用边框而不是大阴影 - 内容要具体，饮品描述写真实风味，不要写“口感丰富” - hover 状态只做 1px 边框颜色变化

这样每一轮迭代都带着设计约束，AI Slop 的生成概率会大幅下降。

4.3 先生成，再改风格，是低效路径

很多人用 Vibe Coding 的习惯是先让 AI 生成一个完成度很高的页面，再慢慢调样式。但 AI 一旦把结构和样式写死，后面改整体风格的难度和成本都很高。正确路径是先定方向，再生成结构。

方向上可以用一个例子让 AI 理解你想要的视觉参照：

参考 Muji 的网站风格：白底、细线、大量留白、黑白灰三分色，只有关键信息用一个小面积的点缀色。 结构上参考 Linear 的首页叙事：第一屏一句话，第二屏一个截图，第三屏一个细节说明。

这种“用品牌名字 + 视觉特征”的方式，能让 AI 快速对齐你的审美坐标，而不是把页面做到 80 分再推翻重来。

5. 验收测试：一张让网站脱离 AI Slop 的检查表

设计做完，功能跑通，别急着上线。我用下面这张检查表逐项过，满足得越多，网站就越不像 AI 生成品。

检查时推荐打开浏览器开发者工具，把所有状态都过一遍。特别要看空状态和错误状态，这两个状态 AI 最容易漏，也最能暴露一个网站是否被认真对待。

6. 常见 AI Slop 症状与排查方法

这里列的基本都是我在实际项目里遇到过的高频问题。你可以把这一小节当成 debug 手册，上线前对照着过一遍。

7. 最佳实践：把“有灵魂”变成可重复的工作流

到这里，设计原则和排查方法都齐了，最后分享几条工程化建议，让“有灵魂”这件事从一次运气变成稳定输出。

第一，每个项目都建一个design-contract.md。把设计契约当成项目的一部分来维护。换 AI 会话、换工具、隔了一周再回来继续开发，都能靠这一份文件找回上下文。

第二，坚持用设计令牌。不要相信 AI 会自觉保持一致，靠变量约束比靠 prompt 承诺可靠得多。项目里所有颜色、字体、间距、圆角都必须从全局变量取值，这是底线。

第三，小步快跑，一次只让 AI 改一个局部。Vibe Coding 最常见的失控方式是一次性让 AI 改十个地方，然后整个页面风格彻底崩坏。正确做法是一次改一屏，每次改动后用浏览器截图对比，确认没崩再继续下一块。

第四，上线前人工读一遍所有文案。AI 生成的文案永远是概率最大的一串词，不是最有感染力的一句话。首页标题、核心卖点、CTA 文案，这几处值得你亲手改写。

第五，注意素材合规。网站里的字体、图标、插画、图片，都有对应的授权要求。AI 生成的图片需要确认平台条款和素材来源；字体在商用前要检查授权，不能因为走的是 Vibe Coding 就把合规环节省掉。

8. 总结：先想清楚，再让 AI 去实现

Vibe Coding 最大的优势是让“做网站”从漫长的工程变成了快速的对话。但工具再快，判断力不能省。“有灵魂”不是什么玄学，它就是一系列具体的设计决策：这个网站只属于谁、页面用什么节奏呼吸、文案用什么样的语气说话、用户操作时能不能感受到被精心对待。

如果你只记住一条，那就是：不要跳过“设计契约”这一步。花十分钟想清楚网站的定位、情绪和约束条件，把这十条规则写进 prompt，后面每一轮 AI 生成的质量都会有结构性提升。

建议收藏备用。下次用 Vibe Coding 起新项目的时候，先把设计契约文档建出来，再让 AI 动手。做出来的网站离“AI Slop”自然就远了。