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可以看几个标志现象典型表现观感同质化配色紫色/蓝紫渐变、青色点缀、纯白背景像一个模板换了个 logo布局无节奏所有内容都居中段落间距相等没有视觉焦点排版无层级标题巨大、正文也巨大、间距像随机数分不清主次文案空洞“释放潜能”“开启未来”“轻松搞定一切”说了等于没说状态缺失没有 hover、focus、错误态、空状态静态图感强烈动效炫技所有元素都在飘、都在抖、都在渐变像在看一场廉价发布会这篇文章要解决的就是这几个问题。这里说的“设计”不是指动手画稿而是设计决策你作为产品负责人能不能定下风格方向让 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-next3.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 生成品。维度检查项通过标准配色全站主色是否少于 4 个页面用色能数得出来排版标题和正文字号是否有比例关系三档字号足以覆盖全部内容间距区块间距是否大于区块内间距滚屏时有节奏变化状态按钮是否有 hover/focus/disabled 样式鼠标和键盘都能感知反馈动效是否所有动画都服务于状态变化删除动画也不影响理解文案每段文案是否像一个人说话的口气能想象出说话者的职业和性格组件一致性同一组件在不同位置风格是否一致截图对比找不到视觉偏差响应式375px / 768px / 1440px 三档是否正常没有横向滚动条、没有错位图片素材是否全部使用同一种处理方式统一裁切、统一滤镜可访问性是否支持 prefers-reduced-motion 和键盘操作动效可关闭、Tab 可遍历检查时推荐打开浏览器开发者工具把所有状态都过一遍。特别要看空状态和错误状态这两个状态 AI 最容易漏也最能暴露一个网站是否被认真对待。6. 常见 AI Slop 症状与排查方法问题现象可能原因解决方案首页是紫色渐变AI 默认审美重写设计契约明确禁止紫色渐变替换为暖灰或单色背景所有内容都居中模板默认布局指定正文左对齐仅标题和 CTA 居中卡片 hover 乱飘动的元素太多限定 hover 只作用于边框色和阴影且过渡时间小于 200ms字体加载后页面跳动没有处理字体回退使用 size-adjust 匹配字体回退或用 next/font 等工具实现自动子集化文案全是空洞形容词AI 语言模型倾向在 prompt 里加入禁用词列表和具体化要求同一个按钮圆角不一致AI 没有全局变量意识搜出硬编码值全部替换为 CSS 变量移动端出现横向滚动AI 生成的网格未适配检查固定宽度布局改成 grid 的 minmax 自适应方案用户反馈“网站不太像我们”缺少品牌个性化元素从文案、配图、图标语言三个维度重新提炼品牌信号这里列的基本都是我在实际项目里遇到过的高频问题。你可以把这一小节当成 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”自然就远了。