两年前做一个网站你需要懂 HTML、CSS、JavaScript还要理解响应式布局、兼容性、部署链路今天你只需要打开 Cursor 或 Claude说一句“帮我做一个落地页风格现代简洁”几十秒后就能拿到一个能跑的页面。门槛确实降到了历史最低但随之而来的一个尴尬场景也变得极其常见你刷到一个又一个网站第一反应已经不是“这产品不错”而是“这又是 AI 做的吧”。这个现象已经有了一个专门的名字AI Slop。它指的不是 AI 本身而是那些批量生产、面目模糊、视觉上趋同、文案上空洞的 AI 生成内容。放到网站语境里就是蓝紫渐变背景、Inter 字体、三张圆角功能卡片、一个“Get Started”按钮、再加一段“Unlock Your Potential”式的营销套话。做这个页面的人没有做错任何事他用的是最常见、最合理的指令而 AI 也忠实执行了——它把“现代简洁”四个字还原成了训练数据里的最大公约数。所以这里真正的问题已经变了AI 降低了代码开发成本却没有降低好设计的成本。一个网站值得被记住靠的从来不是“正确”而是它有没有一个明确的姿态。这篇文章不打算再教一百个 prompt 技巧而是从设计系统的底层逻辑拆解Vibe-coded 网站为什么会变成 AI Slop以及如何通过设计词汇表、CSS 设计 Token、内容优先的布局方法让 AI 生成一个真正有设计灵魂的网站。读完你会得到一套可以直接套用的提示词框架、一组去模板化的代码示例以及一份自查清单。无论你现在用的是 Cursor、Claude、GitHub Copilot 还是其他 AI 编程工具这套方法都能直接落地。1. 什么是 Vibe-Coded什么是 AI Slop很多讨论把这几个词混着用但它们是两个层面的概念。Vibe-Coded 是一种工作方式。它描述的是开发者主要通过自然语言描述意图、让 AI 模型生成代码的过程而不是逐行手写。你可以不懂 JavaScript 闭包也可以分不清 flex 和 grid只要你能不断给 AI 提要求、看结果、再提要求就能把一个网站“带”出来。这个词的流行某种程度上是 2024 到 2025 年 AI 编程工具普及后的必然结果编程从“手工艺”变成了“策展与判断”。AI Slop 则是一个质量标签。Slop 在英语里本来指“糊状食物”网络语境中引申为低质量、大批量、无个性的生成内容。一个网站如果一眼就能看出它是“模板 AI 填充”的产物那么它无论跑得多快、功能多完整本质上就是一坨 AI Slop。这里的关键判断是Vibe-coded 不等于 AI Slop。用 AI 做网站完全可以做出高设计水准的页面只是默认路径很容易滑向 Slop。因为 AI 模型在生成网页时天然会往训练数据中最常见的方向靠拢而互联网上最常见、占比最高的网页类型就是那些用统一建站模板做出来的 SaaS 官网。AI 学到的“现代网页的样子”正是被模板网站规模化定义过的样子。维度Vibe-CodedAI Slop定义一种开发方式一种成品质量工具Cursor、Claude、Copilot 等与工具无关只看结果典型产出代码生成速度快、迭代灵活视觉模板化、文案空洞、缺少真实内容是否一定相关不必然产生 Slop大量 Vibe-Coded 页面是 Slop但可避免所以这篇文章真正要解决的不是“要不要用 AI 写网站”而是“在用 AI 写网站的时候怎么避免它落入最平庸的那条路径”。2. 为什么 AI 生成的网站一眼就能被认出来要打破 AI Slop先得知道 AI Slop 长什么样。以下四个特征几乎出现在每一个缺乏设计的 AI 生成网站上。2.1 视觉模板的趋同AI 生成网页时不是从一张白纸开始而是从概率分布开始。你让它做一个落地页它最可能输出的结构是全屏 Hero 区、一句中心标题、一个主按钮、三列 Feature 卡片、一个 Pricing 区、一个 Footer。这个结构本身没有问题问题在于 AI 几乎没有做设计决策只是把所有可能的结构里概率最高的那个拉出来拼在一起。对比真正经过设计的产品页你会发现每个区之间的节奏是有变化的有的部分密集有的部分留白有的部分不按卡片排列而用表格或长文。模板页的问题不是结构不好而是结构没有呼吸感所有元素都在等宽、等距、等高。2.2 色彩和字体的条件反射如果 prompt 里出现“现代简洁”AI 基本会输出白色或深色背景蓝紫色渐变#6366F1 到 #8B5CF6 是重灾区Inter 或系统无衬线字体大圆角卡片大面积弥散阴影原因很简单在训练数据里被称为“现代简洁”的网页视觉最大公约数就是这个样子。你不是在让 AI 设计你是在让 AI 做统计。想跳出这个循环就不能给“感觉词”要给它“克制词”指定色值、指定字体、指定圆角范围、指定阴影方向。2.3 文案的空洞视觉模板化之外文案的模板化更致命。Unlock your potential、Take your business to the next level、Streamline your workflow、Empower your team——这些句子看起来像英文营销金句实际不含任何信息。它不告诉用户你到底做什么、为谁做、有什么不一样。用户来到一个网站前三秒判断的不是“好不好看”而是“这跟我有没有关系”。模板化文案直接切断这个判断过程因为用户根本看不懂“next level”是哪一层。2.4 几乎没有真实内容很多 AI 生成的页面会给你放上一张看不出用途的高清抽象图配一个“Product”的占位框或者一段没有任何数据的客户评价。真实网站里必须有产品截图、有具体折扣、有团队照片、有“我们服务过 200 家工厂”这种数字。AI 默认生成的是“没有真实内容的容器”于是它只能靠视觉装饰来填满页面结果就是“干净而空”。3. 让 AI 网站有设计灵魂四个核心思路理解问题之后这一步是建立设计判断力。以下四个思路是让 AI 生成网站跳出 Slop 的核心方法论。3.1 先写一份“设计词汇表”在设计之前先给自己一个清单这个网站的气质是什么用一种颜色、一种字体、一种材质、一种摄影风格、一个词来描述。比如做一个冥想类产品设计词汇可以是低对比、暖棕、纸感、呼吸感、无衬线细体。做一个数据基础设施工具可以是精密、工业、单片金属、低饱和灰蓝、等宽字点缀。把这些词汇写下来作为后续所有提示词的“宪法”。没有这份词汇表AI 无法理解你说的“设计”到底是哪一种设计。3.2 从真实内容出发而不是从模板出发最好的网页不是从一个“hero features pricing”的模板倒推出来的而是从文案逻辑长出来的。你应该先写清楚这个产品解决什么具体问题用户是谁最想传达的一句话是什么有没有真实数据、真实截图、真实案例然后把这段内容交给 AI让它基于内容决定版式和布局。内容驱动的布局往往比组件拼接更有说服力因为页面结构和用户阅读逻辑是一致的。3.3 用设计系统不用散件很多 AI 生成的页面初看还行细看全是问题标题一会儿 16px 一会儿 17px间距一会儿 8px 一会儿 10px按钮一会儿圆角 8px 一会儿圆角 12px。原因是 AI 生成过程中没有统一的设计 Token每个组件都在局部自行决策。设计 Token 就是一套被命名的视觉变量颜色、字体、间距、圆角、阴影。你在 prompt 里要求 AI“必须先定义一组 CSS 变量所有组件严格引用这些变量”产出的页面会立刻拥有系统感。3.4 让 AI 做重复劳动你做决策AI 擅长的是把 30 个功能卡片排列整齐把按钮的 hover 状态写完把响应式断点调好。AI 不擅长的是回答“这个页面最重要的信息是什么”“这个品牌应该让人产生什么感觉”。这些决策必须由人来做。所以在 AI 生成的过程中你要做的不是不断说“再改好看一点”而是不断问自己这个区块需要存在吗它放在这里是不是牺牲了其他信息这个字体传达的气质对不对把决策留给自己AI 负责执行产出质量会有本质差别。4. 实操一套避免 AI Slop 的提示词框架理论部分讲完下面给可以直接复制到 Cursor、Claude 或任何 AI 编程工具里的提示词模板。4.1 基础提示词模板我建议把这段内容放在项目根目录的AI_DESIGN_GUIDE.md里每次开启新会话时直接让它先读取这份文件。你是一个资深品牌设计师与前端工程师。你要为一个「{产品名}」做网站。 在开始生成任何代码之前先阅读以下设计规范并把它们作为最高优先级 1. 不要使用紫色/蓝色渐变作为主视觉除非我明确要求。 2. 不要使用 Unlock the power、Supercharge、Take it to the next level 等空泛营销文案。 3. 先分析我提供的真实产品内容再决定页面结构禁止先套用 Hero Features Pricing 模板。 4. 页面必须有内容层次最强的信息放在首屏而不是最夸张的装饰。 5. 必须定义一组 CSS 变量作为设计 Token颜色、字体、间距、圆角、阴影 所有组件样式必须引用这些变量不允许出现魔法值。 6. 最多使用两种字体一种用于标题一种用于正文。 明确指定字重、行高、字间距。 7. 卡片类组件最多出现两种宁可用分区和留白替代到处叠卡片。 8. 所有文案必须是具体、真实的如果我没有提供用 [待补充] 标注 不要自行编造营销话术。 9. 页面中的图片占位符用具体描述代替例如 一张深色背景的机械键盘实拍图 方便我后续替换真实素材。 10. 生成的代码要满足可访问性文本对比度不低于 4.5:1 所有可交互元素必须有明确的 focus 状态。 我的产品内容如下 [把真实产品描述、目标用户、核心卖点、真实数据粘贴在这里]这个模板比“做一个现代简洁的落地页”指令长得多但价值也大得多。它把最容易导致 AI Slop 的几条路径都堵住了模板布局、紫色渐变、空洞文案、无约束的组件拼贴。4.2 一个内容驱动布局的示例假设你在做一个本地独立咖啡馆的网站传统 prompt 会生成一个标准的 SaaS 页面。内容驱动的方式则是这样我是一家开在杭州中山中路的独立咖啡馆 主打“手冲咖啡 黑胶唱片 周末现场爵士”。 我们的目标客户是 25-35 岁、喜欢音乐、注重空间体验的上班族。 店内 20 个座位营业时间 10:00-22:00。 请用上面这套设计规范帮我设计网站首屏。 我希望首屏的信息顺序是 1. 店名和一句“我们不是网红店是一家放黑胶的咖啡馆” 2. 本周咖啡豆单3 款含产地和处理法 3. 店内照片实拍 4. 最简单的地址和营业时间。把内容先铺出来AI 才知道自己做的不是营销页而是一个真实空间的延伸。这样的页面结构是内容驱动的而不是模板驱动的。5. 代码示例用设计 Token 去除模板味这一节用代码展示同样是“设计 Token”模板味和设计感的差距在哪里。5.1 反面示例AI 默认生成的 Token/* 文件路径src/tokens.css反面示例不推荐 */ :root { --primary: #6366f1; --secondary: #8b5cf6; --gradient: linear-gradient(135deg, #6366f1, #8b5cf6); --dark: #0b1120; --light: #ffffff; --radius: 16px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.12); --font: Inter, -apple-system, sans-serif; }这组 Token 本身没有语法错误但它没有任何“姿态”。它只是一个配色平均值没有体现品牌、行业或内容特性。几乎所有 AI 生成的网站都在用这个近似组合所以它成了模板味的第一来源。5.2 正面示例有意识地设计 Token用前面“独立咖啡馆”的例子我们可以设计一组更有姿态的 Token/* 文件路径src/tokens.css推荐 */ :root { /* 色彩纸感、暖调、低对比不用电子感渐变 */ --bg: #f7f4ed; --ink: #2b2620; --muted: #746c5e; --accent: #a64b2a; --line: #e2dbcd; /* 字体衬线标题 无衬线正文 */ --font-display: Source Serif 4, Noto Serif SC, serif; --font-body: InterVariable, PingFang SC, sans-serif; /* 间距用 4px 基准建立阶数 */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 32px; --space-5: 64px; --space-6: 128px; /* 圆角弱圆角突出纸感而非塑料感 */ --radius-sm: 2px; --radius-md: 6px; --radius-lg: 10px; /* 阴影克制靠边框而不是弥散阴影来建立层次 */ --shadow-card: 0 1px 2px rgba(43, 38, 32, 0.06); --shadow-modal: 0 4px 24px rgba(43, 38, 32, 0.12); }主要区别不在于颜色本身而在于这组 Token 有清晰的设计倾向——它明确选择了低对比、暖调、纸感、弱圆角。任何组件引用这组 Token 之后都会自动拥有这种气质而不会因为某个局部样式写错而破坏整体一致性。5.3 按钮对比示例再来看一个最容易被忽略、也最能体现设计功力的组件按钮。/* 模板味的按钮渐变 大圆角 大弥散阴影 */ .btn-template { background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; border-radius: 999px; padding: 12px 28px; color: #fff; font-weight: 600; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); transition: transform 0.2s ease; } .btn-template:hover { transform: translateY(-2px); }/* 有设计感的按钮利用设计 Token克制且有反馈 */ .btn-soul { background: var(--ink); border: none; border-radius: var(--radius-sm); padding: 12px 24px; color: var(--bg); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease; } .btn-soul:hover { background: var(--accent); color: #ffffff; } .btn-soul:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }第一个按钮并不难看但它是“所有人都在用的按钮”的平均值第二个按钮有真实的触感同时多了 focus 状态在可访问性上也更完整。6. 验证清单你的网站还有没有 AI Slop 味代码写完不等于设计完成。从一个 AI 生成网页面向“有设计灵魂的网站”需要一套可执行的检查标准。6.1 视觉检查清单下面这张表可以直接复制到项目的 README 或 code review 模板里。检查项模板味明显有设计灵魂首屏第一句话“Software that empowers your team”一句话说清为谁、解决什么问题主色调紫蓝渐变能用一个词说出品牌色并解释为什么字体全站 Inter无字重层级标题与正文有明确的字体对比卡片密度满屏卡片 阴影 大圆角克制使用卡片用分区和留白建立节奏图片不明用途的抽象图 / 占位图真实产品截图、真实场景、有说明的图文案空泛口号有具体数字、具体流程、具体结果响应式只保证能用小屏上有专门的排版决策不是简单堆叠6.2 用命令快速扫描模板色值如果你想快速检查旧项目里有没有“隐藏的模板味”可以直接在代码仓库里跑一条命令# 扫描样式文件中是否出现常见的 AI 模板色值 grep -rniE #6366f1|#8b5cf6|#7c3aed|#a78bfa|#0ea5e9|#f43f5e|#0b1120 src/ || echo 未发现模板色值这条命令不复杂但它能提醒你当下一个 AI 会话又悄悄把 #6366f1 塞进 CSS 的时候你能够第一时间发现并修正。6.3 三问自查法改完视觉以后再问自己三个问题这个网站如果去掉所有渐变色还成立吗首屏文案能不能直接发到目标用户的群里而不被当成垃圾广告如果明天有十个同类产品上线用户在十秒内能记住我这一家吗这三个问题没有一个需要懂代码但它们比任何 lint 规则都更能揪出 AI Slop 的根。7. 常见问题与排查思路在使用这套方法的过程中你可能会遇到下面这些具体问题。问题现象可能原因排查方向解决方案提示词已经写得很长了生成结果还是模板味视觉要求不够具体只在描述“感觉”检查是否给出了色值、字体名、圆角值使用 4.1 节的提示词模板给出确定性约束页面组件零散整体不统一没有设计 Token每个组件自己在定义样式查看 CSS 变量是否被完整引用先定义 :root 变量再统一替换组件样式AI 老是把按钮做成蓝色或紫色prompt 中没显式禁用模型往高概率方向走检查是否出现 #6366f1 类色值在提示词中加入禁止项并给替代色值图标风格不统一像大杂烩AI 在多个图标库里随机选择检查 SVG 是线性还是填充风格指定唯一图标集例如“统一线性描边stroke-width: 1.5”文案内容太虚全是营销词没有给 AI 提供真实内容检查文案里有没有具体数字和流程先写内容再让 AI 做布局不要让它自动生成文案图片看着很像 AI 合成场景使用了通用占位图检查图片是否有真实产品/场景换成真实产品截图或明确授权图库生成的代码自带一堆重库AI 倾向引入依赖解决通用问题查看 bundle 大小明确要求“禁止引入除 React/Vue 之外的额外 UI 库”网站没有 focus 状态键盘不可操作AI 默认不关注可访问性用 Tab 键走一遍交互提示词中要求 focus-visible 样式8. 最佳实践与工程建议如果你已经决定把“有设计灵魂”作为 AI 生成网站的目标下面这几个工程层面的建议可以帮助你把这件事固化到流程里而不是靠每次碰运气。8.1 把设计规范写进仓库建议在项目根目录维护一个AGENTS.md或AI_DESIGN_GUIDE.md把 4.1 节的提示词模板放进去。每次开启新会话时先让 AI 读取这个文件。这样团队里任何人都能用 AI 生成页面但所有页面都遵守同一套设计约束。8.2 建立 tokens.css 单一事实源所有颜色、字体、间距、圆角、阴影都必须定义在src/tokens.css或对应的 Tailwind Config / Design Token 文件里。组件里禁止出现魔法值。这样可以保证换主题、换品牌色时只改一个文件即可。8.3 组件抽取与统一管制AI 生成到第二个页面时通常会把按钮、卡片、标签等重复组件再生成一遍。正确做法是要求 AI“先查看项目里有没有同名组件有就直接复用”。否则很快就会产生两个按钮、三种卡片、四种间距标准。8.4 设计 Review 流程即使有提示词约束AI 仍然可能在某些局部跑偏。建议在项目里加入一步“反模板 Review”删除所有渐变背景看页面是否依然成立扫一遍色值看是否出现模板色用窄屏看一遍确认不是因为宽度变窄而堆叠。8.5 可访问性与性能AI 生成代码时默认不会主动考虑文本对比度、焦点状态、图片 alt 文本、按需加载。这些细节决定一个网站是“可以看”还是“可以用”。建议在提示词里显式要求并在代码审查时补充检查。9. 总结与下一步行动Vibe-coding 是一个不可逆的趋势它让“做网站”这件事从专业开发者手里扩散到了产品、运营和设计师之外的所有人手里。但工具越普及“设计判断力”就越成为新的稀缺资源。AI 能帮你写代码却没法替你回答一个根本问题你这个网站到底为什么值得被记住。这篇文章的核心不是教你抵制 AI而是教你在面对 AI 时不交出全部决策权。设计词汇表负责定义气质内容优先负责定义结构CSS 设计 Token 负责统一样式提示词模板负责约束生成方向。四层配合AI 生成效率的优势才能被保留而人工审美的判断力才能真正注入页面。如果你现在正准备用 AI 开始一个新网站的项目我的建议很简单先别急着让 AI 出图。抽出 10 分钟写一份只有三行的设计词汇表写下你的目标用户和最关键的真实信息然后再打开 Cursor。你会发现AI 生成的结果和默认路径完全不同。它开始成为一个有立场、有辨识度的网站而不是互联网上第 10001 个“Empower your team”的翻版。