如果你最近在用 Cursor 这类 AI 编程工具做网站大概率已经撞上同一个坑Vibe-coded 出来的页面非常快但成品一眼就是 AI Slop。AI Slop 不是骂 AI它说的是那种没有判断、没有取舍、只有模板堆砌的产物紫色渐变、毛玻璃卡片、六个圆形图标、无数个“赋能”“助力”“一站式”。这周我连续帮朋友改了三个这样的网站发现问题几乎一样不是 AI 生成的代码不对而是从设计意图到信息架构再到视觉细节都没有人真正管过。这篇内容不教你堆 prompt也不解释某个 AI 工具的新功能。我想分享一套更实际的做法怎么样在享受 Vibe-coded 速度的同时让最终网站有明确的视觉方向、清晰的信息层级和稳定可维护的代码。适合三类人正在用 Cursor 做个人项目的开发者、一个人 Solo 做落地页的独立开发者以及刚接触 AI 编程、但不想把作品做成“模板批发市场”的学生党。核心判断只有一句AI 负责生产和提速设计判断必须由你接管。1. 先搞清楚 Vibe-coded 产物为什么容易变成 AI Slop1.1 Vibe-coded 本身不是坏事坏在“氛围”只停留在嘴上Vibe-coded 这个词现在常被拿来形容一种开发方式你不太想细节用自然语言描述一个感觉然后让 AI 把代码写出来。比如“做一个有深夜图书馆氛围的博客首页”“要有高级感、科技感、未来感”AI 马上生成一整套页面。这种做法的价值很明显原型搭建速度快适合验证想法也适合不懂前端的同学快速起步。但问题也出在这里。Vibe 是被你描述的而具体实现完全交给 AI。AI 并不知道你心里那家“深夜图书馆”是暖黄色木质桌子还是冷灰色玻璃幕墙。它只能从训练数据里找一个“高级感”的统计平均值。于是所有网站最后长得差不多像同一个模板换了标题和 Logo。所以 Vibe-coded 不是不能用而是不能把“氛围”当成一个不用落地的形容词。我一般会把 Vibe-coded 理解成“氛围驱动编码”。它适合做第一步不适合做最后一步。你可以靠它快速得到一个可点击的原型但不能靠它得到一个有主见的作品。两者之间的差距就是这篇文章要补的部分。1.2 AI 的默认审美是平均化不是设计最优解AI 生成网页时在训练数据里见过大量优秀和普通的案例。它更喜欢生成“最大概率的特征组合”因为这样不容易出错。常见组合包括深色 Hero 区、紫色或蓝色渐变、白色卡片、圆角 16 像素、毛玻璃效果、线性图标、无意义的数字滚动。单看每个元素都没错组合在一起就是没有记忆点。这也解释了为什么 AI 生成的设计总有一种“说不上来的雷同感”。它不是没有审美而是只在求稳。真实的设计需要做减法有时候要故意选一个不平均的颜色故意把圆角调小故意让一段文字顶满整屏。这些决定不会自动从模型里长出来必须有人在生成之后做一轮强干预。1.3 一眼识别 AI Slop 的六个特征要做强干预先得能识别问题。我一般会在浏览器里打开页面不看代码先用 30 秒扫一遍。如果出现下面这些特征基本就是 AI Slop首屏标题是“释放无限潜能”“开启数字化未来”这类空话。同一屏里出现三种以上高饱和颜色或者一个大到失控的渐变背景。所有功能卖点都用“三列卡片 圆形图标”的方式展示。图标一会儿是 emoji一会儿是线性图标一会儿是实心图标。全站没有一致的字号阶梯正文和标题差距混乱。暗色模式只是把背景反色文字和边框对比度明显不足。看到这些问题不要急着去改颜色也不用马上换 prompt。先停下来想一个问题这个页面到底要让用户做什么答案越具体后续改造就越有方向。2. 写第一行代码前先把“设计意图”固定下来2.1 把 Vibe 翻译成可执行的设计词很多人让 AI 建站时只会说“做个简洁大气的官网”。这句话看起来清楚其实完全没有约束力。‘大气’在 AI 那里可能是大面积留白也可能是超大字号还可能是深色背景加金色边框。为了让结果可控我会先写一句话设计原则原则里必须包含具体偏好。举个例子同样是个人作品集你可以把“简洁大气”改成“像一份印刷版简历白底、黑字、克制的蓝色点缀、大量留白、没有多余装饰”。把“有科技感”改成“深灰背景、等宽字体、绿色终端光标、表格化排版、不滥用渐变”。这样 AI 再生成时至少不会跑向紫色霓虹灯。做这一步的原因很简单AI 擅长补全不擅长选择题。你不确定方向它只能猜。你给的方向越具体生成结果越接近可用的初稿。2.2 先建最小设计系统设计 Tokens 先行设计 Tokens 听起来很专业其实就是一个颜色、字体、间距、圆角、阴影的统一定义。它可以是一份 CSS 变量也可是 JSON作用是让所有页面元素共用同一套基础规则。Vibe-coded 初稿容易乱就是因为 AI 在生成每个区块时都会临时发明一个颜色和字号。我建议打开项目后第一步不是改组件而是先建一份变量文件。下面是一个适合普通落地页的示例:root { /* 颜色 */ --color-bg: #f5f3ee; --color-surface: #ffffff; --color-text: #1f1e1b; --color-muted: #68645c; --color-accent: #bc6c25; /* 字体 */ --font-sans: Inter, system-ui, -apple-system, sans-serif; --font-serif: Georgia, Times New Roman, serif; /* 间距 */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px; --space-6: 96px; /* 圆角和阴影 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06); }这个文件的价值不在于代码量而在于它成为后续所有修改的“唯一入口”。想让整体颜色偏暖只改--color-bg和--color-surface所有引用变量的组件都会跟着变。相比让 AI 在几十个组件里逐个改颜色这种方式更快也更不容易失控。2.3 只保留一个视觉主角AI 生成页面时喜欢把能加的元素全加上渐变背景、插画、大图、复杂动效、多重阴影。每个元素单独看都不差放在一起就互相打架。真实设计里一个页面通常只需要一个视觉主角。这是什么意思如果主角是排版那就减少背景装饰用大字号和清晰字距建立冲击力。如果主角是摄影作品那就不要让卡片、阴影和渐变色抢夺注意力。如果主角是某个产品截图那就给它足够空间让周围元素都退后一步。我会用一个很笨的方法检查把页面截图缩小到 10%然后眯着眼睛看。如果看不清重点说明什么说明重点太多。先把主角定下来再决定要删除哪些次要元素。AI 生成的代码删起来很容易但方向不定的反复修改才是最浪费时间的。3. 用信息结构和内容把页面骨架重新搭起来3.1 先画信息架构再让 AI 生成很多 Vibe-coded 网站看起来空不是设计问题是信息架构问题。AI 只会根据 prompt 生成一堆区块但它不知道用户应该先看什么、再看什么、最后做什么。它也不会判断你的产品到底适不适合放价格页或评价墙。我通常会在写代码前先用文本画一个最小骨架。拿一个 SaaS 落地页举例可以是这样的顺序一句话说明产品给谁用、解决什么问题、带来什么结果。用户为什么需要写清楚痛点而不是罗列功能。方案如何工作三步或四步说明过程。证据和信任真实截图、案例数据、用户评价。回答反对意见常见疑问或风险说明。一个明确行动注册、试用、预约不要同时给五六个按钮。这个骨架不需要很完整但它决定了页面的叙述顺序。AI 生成内容时会按这个顺序去填充而不是自作主张把“关于我们”插到最前面。3.2 每个区块只承担一个任务一个很常见的 AI Slop 特征是每个区块都想说很多。功能区块里塞了三段介绍和一个按钮价格区块里放了表格、FAQ、客户 logo再加一个滚动动画。结果用户看下来什么都不记得。我检查页面时会为每个区块写一句话任务描述。比如Hero 区任务让访客 5 秒内知道产品是什么。功能区任务解释一个最关键的功能不列十个功能点。证据区任务证明方案有效不是展示设计能力。引导区任务推动用户点击下一步。如果一个区块写不出明确任务或者任务和旁边区块重叠就直接删掉。AI 生成的区块是冗余的你的判断才是做取舍的关键。3.3 用真实文案替换空话文案文案是 Vibe-coded 最容易露馅的地方。AI 会生成很多听起来很顺但没有任何信息量的话比如“我们相信技术的边界可以被突破”“助力企业实现数字化增长”。这些话放哪个网站都成立也就意味着没有记忆点。要避免 AI Slop内容必须具体。把“强大的 AI 平台”改成“使用 AI 辅助生成落地页3 天完成第一版”把“提高效率”改成“每周节省约 6 小时重复排版工作”把“我们的使命是帮助用户成长”改成“面向独立开发者的模板化建站工具不需要前端工程师也能发布网站”。越具体用户越容易判断这个产品适不适合自己。如果初稿内容不够不要急着让 AI 改写先自己把模糊词圈出来。用数字替换形容词用步骤替换口号用真实案例替换通用背书。这个过程没法外包给模型因为只有你知道自己的用户是谁。4. 把 AI 生成物拉回真实设计语言排版、颜色、间距4.1 字体排版是第一优先级AI 生成的页面往往忽略排版细节。常见的表现是标题用了一堆会变形的粗体正文行高太紧字距忽大忽小标题和正文之间缺少节奏。有经验的读者一眼就能感受到“不舒服”但说不出哪里不对。让我给一个比较稳的起步参数全站字体不超过两种建议一种无衬线体用于正文一种衬线体或等宽体用于强调标题。桌面端正文 16 到 18 像素行高 1.6 左右移动端正文不要小于 16 像素否则容易触发 iOS 自动缩放。大标题可以用clamp()实现响应式缩放例如h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }这个设置算不上创意但能避免大多数排版翻车。真正有辨识度的排版是在这套基础规则之上再建立统一节奏标题紧凑正文舒展留白给重点。AI 生成的初始值大概率不是这个节奏所以拿到代码后要逐级检查字体大小而不是只改首页第一个大标题。4.2 用间距而不是装饰制造层级AI 很喜欢用“加背景色、加阴影、加边框”来区分区块。但层级其实可以通过间距完成两个内容块靠得近说明关系紧密隔得远说明属于不同主题。我建议先定基础间距单位。常见的做法是 4 像素或 8 像素的倍数。区块上下边距可以用 64、96、128 像素卡片内部用 16、24、32 像素。统一之后页面会自然产生秩序感。很多 AI 生成的页面看起来乱不是因为颜色太多而是因为间距没有节奏所有卡片挤在一起所有标题都靠得太近。还有一个很实用的技巧减少阴影和边框增加留白。想让两个卡片区分开不一定非要加box-shadow可以只改背景色或者只加一条 1 像素边框。AI 默认生成的厚重阴影往往是页面显得“模板感”的最大来源。4.3 颜色、圆角、阴影和默认风格划清界限AI 生成界面的默认风格有一个固定配方深蓝或紫色渐变、白色半透明卡片、16 像素圆角、大面积模糊阴影。要避免 AI Slop我一般会把默认风格往回收。下面是我常用的对照思路设计属性AI 默认状态更稳健的选择背景深蓝紫色渐变单一暖白或浅灰少量渐变只用在重点区域主色紫色或蓝色根据内容气质选一个低饱和度强调色圆角全面 16px大组件可用 12-16px按钮和输入框用 6-8px阴影大而模糊小范围、低透明度的轻阴影更多靠边框和间距图标emoji 线性图标混用统一图标库统一描边粗细这些不是绝对规则而是用来打破默认感的参考。关键是你要意识到AI 生成的方案只是一个平均值不是设计答案。你只需要朝自己的方向移动几格页面就会立刻显得“像人做的”。4.4 图片、插画和图标需要统一气质AI 生成的页面里图片来源经常是 Unsplash 式的高清照片图标则来自多个库。照片风格不统一图标粗细不一致最后页面就缺乏整体感。我的做法是先决定一个图片策略。比如全部用真实产品截图或者全部用简洁线条插画或者全部用同一色系的摄影图。不要一个区域是真实照片、另一个区域是 3D 插画、另一个区域是 emoji。图标方面选一个线性图标库并设置统一的stroke-width。这样即使 AI 生成了不同风格的图标视觉上也更容易被拉回同一套系统。5. 从“看起来不错”到“能长期维护”的代码改造5.1 清理 AI 生成的样式和组件Vibe-coded 的另一个隐患是代码质量。AI 可以很快生成一堆能跑的组件但如果你不去整理项目很快就会变成一锅粥。常见情况有同一个按钮样式出现在五个文件里颜色值散落在各处CSS 类名又长又不可读组件的职责边界模糊。我会在功能跑通之后抽时间做一次重构。核心是“找重复”如果同一段样式或同一个结构重复超过两次就提取成组件。比如 AI 喜欢给每个卡片写一长串 Tailwind 类名你可以把它收进一个Card组件里之后只改组件一处全站就跟着变。这样不只是为了代码整洁更是为了让后续设计调整更快。这一步对 AI Slop 的修正非常关键。因为很多“看起来怪”的问题靠手动改每一个标签是改不完的。你必须先把它们抽象成统一系统再通过改系统让全站变化。5.2 响应式不是“能显示”是“读起来顺”AI 生成的响应式布局通常能达到“不报错、不溢出”的状态但离“读起来顺”可能还有距离。常见问题包括移动端标题过大正文没有留出足够的左右边距按钮点击区域太小表格在小屏幕上完全没法看。我会在浏览器开发者工具里把设备宽度从 360 像素一路调到 1440 像素逐段看页面变化。重点不是看有没有横向滚动条而是看信息层级是否保留。小屏幕上用户应该最先看到核心内容而不是一大段装饰性 Hero 图。AI 经常把桌面端布局机械地堆到移动端这时候需要你手动调换顺序、缩小图片、增大触控目标。5.3 语义化、可访问性和性能这一块最容易被 Vibe-coded 忽略。AI 生成的页面经常是 div 套 div按钮没有类型图片没有 alt输入框没有 label颜色对比度不够。这些问题平时看不出来但用户一旦依赖键盘或读屏软件体验会非常差。我自己的检查顺序是页面里是否只有一个h1标题层级是否连续。导航和底部是否使用nav、footer等语义标签。所有图片是否都有准确的alt。所有按钮是否都带type尤其表单里的按钮。输入框是否有对应label。键盘 Tab 键能否按顺序走完整个页面焦点是否可见。正文和背景的对比度是否达到 AA 标准。首屏图片是否足够小能否用懒加载。这些检查听起来繁琐但可以很快完成。AI 能帮你生成页面却不能替你理解残障用户的操作路径。如果你要把网站公开这一关必须亲手过。5.4 AI 会生成幻觉别把“能运行”当成“正确”使用 Cursor 这类工具时AI 偶尔会生成不存在的 API、错误的依赖配置或者过时的 props。你运行项目时可能没报错但某个功能就是不符合预期。这类问题不能靠肉眼 review 解决。我建议给项目加一层基础验证有 TypeScript 就开启tsc --noEmit有测试就跑测试有 build 流程就跑npm run build。对于没有测试的小项目至少要在浏览器里完整走一遍用户主流程打开页面、点击主按钮、提交表单、查看结果。AI 生成代码之后先用工具校验语法和类型再人工走关键路径。经历过一次“页面打开正常、提交却崩溃”的现场你就会明白这一步不能省。6. 建立自己的验收流程把 AI Slop 挡在生产环境之外6.1 用一份单页验收清单兜底AI Slop 很难靠灵感避免更靠流程兜底。我会在发布每个页面前对照清单做一遍快速检查。不需要做得很复杂只需要保证关键问题不会漏掉。下面是一份适合普通网站和落地页的清单检查项通过标准不通过时先做什么5 秒判断陌生人能说出网站是干什么的重写首屏标题和副标题标题文案没有“赋能、助力、一站式”等空话用具体数字和场景替换视觉主角每屏只有一个重点删除装饰性背景和多重视觉元素字体数量全站不超过两种字体统一为一个字体族颜色数量背景、正文、强调色三组以内收敛到设计 Tokens间距节奏间距按基础单位重复出现清理随机 margin 和 padding图标风格同一套图标、同一描边粗细统一图标库移动端阅读正文不小于 16px点击区域充足调整响应式断点可访问性键盘可操作焦点可见alt 完整补语义化标签代码构建build、lint、类型检查通过优先看报错后的第一行日志这组清单不一定适合所有项目但它能逼着你从“好不好看”转变到“能不能交付”。6.2 用陌生人测试代替自我感动设计者很容易被自己的作品说服。你觉得深色背景很有质感用户可能根本看不清标题你觉得动效很酷用户可能只关心按钮能不能点。要跳出这种视角最好的方法是陌生人测试。具体操作很简单找一个不了解项目背景的人把页面放在他面前给他 5 秒。然后问三个问题这个网站是做什么的你愿意继续往下看吗你知道下一步要怎么做吗如果回答含糊说明信息架构或视觉层级还有问题。不要解释不要引导问完就让他走。这个方法我几乎每次都会用。它不需要专业设计能力只需要你愿意接受“作品还不够清楚”的事实。AI 生成得越快这类测试越重要因为你会很容易误以为“能跑起来”就等于“能交付”。6.3 什么时候该抛弃 AI 生成手写覆盖有些地方不适合继续用 AI 修补。比如品牌主页的核心位置、严重依赖复杂布局的页面、需要精细控制动效的交互组件。这些问题不是 AI 能力不够而是需要反复推敲和微调。让 AI 在几十个类名里改不如直接手写一个原子化的组件。我的原则是AI 负责首版和重复性工作人负责关键判断和精细控制。比如小组件、列表、表单、通用卡片可以放心让 AI 生成。主视觉、首屏排版、品牌色彩值得自己花时间手写。这样既保留效率又不容易让品牌变成千篇一律的模板。6.4 推荐一个稳定的迭代节奏设计、内容、代码三轮最后给一个可复制的流程。第一轮确定设计意图写一个文本骨架告诉 AI 生成初稿。第二轮检查信息架构和文案把所有空话换成具体内容。第三轮清理设计 Tokens、组件结构和响应式样式跑一遍 build 和人工测试。三轮下来大多数 AI Slop 都能被清掉。你不需要一次性把所有东西做到位而是每轮只盯着一个目标。我现在的习惯是每个页面发布前先跑一次验收清单再找陌生人看 30 秒。只要他说不出来这个网站是干什么的不管 AI 生成得多快我都不会发布。Vibe-coded 的真正价值不是让你用更短时间生成模板而是让你把省下来的时间用在那些 AI 永远替你做不了的设计判断上。