在 AI 编程工具越来越普及的今天很多开发者在几十分钟内就能用 Cursor、Copilot 或 Claude 直接聊出一个完整站点这种工作流就是常说的 Vibe Coding。速度确实快但问题也很集中大量 Vibe-coded 站点长得越来越像紫色渐变背景、玻璃拟态卡片、超大圆角、Hero 标题加三个特性卡片、底部再来一段通用感极强的 CTA。用户只要多刷几个这类站点就会产生一种明显的AI 味。真正需要解决的问题不是要不要用 AI 写页面而是如何让 AI 快速生成的网站具备真实产品的设计感和决策感看起来像由设计师认真推敲过而不是模型对海量模板做平均化之后拼出来的结果。这篇文章会从原理、约束、代码实现、状态设计到最后的上线前体检给出一条可执行的优化路径。读完以后你至少能回答三个问题AI 味具体来自哪里写 prompt 或项目规则时要做哪些约束已经生成的页面应该如何逐层排查和修复。1. 先理解 Vibe-Coding 的产出为什么容易带AI 味1.1 Vibe-Coding 的技术本质AI 在替你完成哪些决策Vibe Coding 这个词描述的是一种以自然语言为主的开发状态开发者把需求描述成一种感觉或氛围AI 根据上下文生成代码开发者快速验证、提出修改、循环迭代。它和传统编程最大的区别在于决策速度被大幅提高但决策来源也从人转移到了模型。在传统前端开发中页面长什么样是由人一步一步决定的选什么字体、为什么用暖灰而不是纯白、卡片到底要 12px 圆角还是 20px 圆角、首屏放什么内容。这些决策看起来琐碎但它们构成产品气质。Vibe Coding 把大部分决策交给了模型模型并不是在设计而是在预测最可能的解法。大语言模型的训练数据里有大量 Bootstrap 主题、模板站、营销页、内容管理系统默认主题、开源项目里的后台模板。它们不一定是差设计但一定是最常见、最安全、最不容易被挑出错的设计。于是模型输出的结果是统计意义上的平均设计蓝紫渐变、Inter 字体、居中 Hero、三列特性、玻璃拟态、圆角按钮。这些元素单独拿出来都不算错但放在一起就缺少记忆点也缺少人做设计时那种这里就是要不一样的意图。理解这一点很重要因为解决办法不是让 AI 更强大而是把 AI 无法自己生成的东西交还给人战略目标、信息优先级、审美倾向和判断标准。1.2 AI Slop 的典型视觉特征不是不好看而是没有决策感所谓 AI Slop不一定是丑更多是没有决策感。一个页面如果换掉文案、换掉品牌色之后可以无缝变成另一个产品的页面那它就不是一个设计过的页面而是一张填了内容的模板。常见的 AI 味视觉特征可以归纳为几张表。第一张表是元素级别的雷同视觉维度AI 默认表现典型来源配色蓝紫渐变、深色背景配霓虹高亮科技产品模板、AI 产品页字体Inter、默认系统字体、字重非常平均预加载的 Google Fonts 默认选项背景网格线、粒子、模糊渐变光斑登录页模板、开发工具宣传页卡片白色卡片加大阴影、玻璃拟态、16px 以上圆角组件库默认样式图标lucide、heroicons 等通用图标库AI 选中的默认依赖动效无意义浮动、入场淡入淡出流行 landing page 动效第二张表是区块结构层面的雷同区块AI 默认结构首屏全屏 Hero 副标题 两个按钮第二个屏三列特性卡片第三个屏产品截图或大图第四个屏双栏功能列表第五个屏团队介绍或 logo 墙底部CTA 邮箱订阅 页脚看到这张表之后再回头看自己生成的页面你会发现大多数 Vibe-coded 站点都命中至少五个区块。并不是说这些区块不能用而是它们出现得太规律用户翻两屏就能预测后面的内容整个页面就失去了张力。1.3 AI 味不止在视觉交互、文案和内容层同样明显视觉只是最容易被发现的层。Vibe-coded 站点的问题通常还体现在三个看不见的地方。第一是交互层。很多 AI 生成的按钮没有 hover 状态表单没有校验提示图片没有加载占位列表没有空状态。页面静态看像产品动一下鼠标就露馅。第二是文案层。AI 很容易生成Empower your team to achieve more这类听上去很对但完全没有信息量的话。用户看完不知道产品到底做什么、和竞品有什么差别。第三是内容层。当真实数据、真实截图、真实用户案例缺席时AI 会生成 placeholder 图片或虚构的数字。如果站点要用于演示、投稿或给客户验证这种虚构内容会直接伤害信任感。所以解决 AI 味的范围不能只停留在改配色、换字体而是要同时处理视觉约束、内容真实性和交互状态三个层面。接下来每一节都会围绕其中一个层面展开。2. 开始实现之前先用 Design Brief 约束 AI 的发挥空间2.1 三个问题比任何设计系统都重要很多人在让 AI 生成页面时只描述做一个 SaaS 官网然后 AI 就开始了。这样生成的页面只能靠运气。要让结果可控第一步不是写代码而是写一份 Design Brief用很短但非常具体的描述限定 AI 的决策空间。我建议在第一个 prompt 里先回答三个问题。第一个问题这个页面的核心任务是什么。是让用户注册、让用户下载、让用户听懂某个概念还是展示某个作品。核心任务一旦清楚首屏的布局和 CTA 就不应该由 AI 自由发挥。第二个问题目标用户是谁他们对视觉的预期是什么。给企业采购看的页面和使用者本人看的页面审美标准完全不同。企业用户更看重信息密度、稳定感、案例可信度创意社区用户更能接受打破常规的排版和大胆配色。第三个问题内容优先级是什么。页面需要展示哪些信息哪些必须出现在首屏哪些可以放到页脚。内容优先级决定信息架构而不是由模板决定。这三个问题写好之后再让 AI 出页面。这时候 AI 的发挥空间变小了但结果是你要的。2.2 把约束写进 Prompt 或 Cursor 规则Design Brief 不能只存在于脑海要写进 AI 能读取的地方。常见做法是维护一个项目级规则文件比如 Cursor 的.cursorrules或者 Claude 的CLAUDE.md。这个文件会被 AI 在每个会话中读取相当于给 AI 一个长期的项目人格。下面是一个不依赖具体框架的规则示例你正在为一个面向中小企业的数据看板产品设计官网。 项目定位清晰、可信、信息密度高。 视觉偏好 - 不使用渐变背景不使用玻璃拟态不使用网格线背景。 - 颜色尽量克制主色来自品牌色 #2563EB背景使用 #F8FAFC。 - 圆角使用 8px阴影使用低透明度层级不要使用大块模糊阴影。 - 字体使用系统字体栈不引入额外字体。 结构约束 - 首屏只需要一个标题、一句副标题、一个主按钮和一张产品截图。 - 不要生成三列特性卡片。如果需要展示特性使用表格或具体功能清单。 - 所有文案必须来自真实材料。如果材料缺失请直接标注 [占位内容待替换]。 - 每个区块必须说明它为什么存在。 交互约束 - 所有按钮需要有 hover 和 focus 状态。 - 表单元素需要有 label 和错误提示。 - 页面需要处理空状态和加载状态。这条规则的真正作用不是教 AI 做设计而是明确告诉它不要做什么。AI 最擅长的是在概率空间里选常见解给它一个排除清单它反而更容易做出有约束的页面。2.3 设计决策检查表哪些事必须由人决定用 AI 做页面时最容易出现的错误是把所有判断都交给模型。即使有规则文件人也应该在关键节点上保留决策权。下面是一张最小决策清单建议每次生成页面时过一遍决策项参考检查点人需要决定的问题目标页面核心转化是什么用户看完后第一动作是什么内容是否有真实产品数据用什么数据替换占位内容文案语气文案是否接近真实产品是商务严肃还是轻松口语信息层级首屏是否表达核心卖点哪些内容必须第一眼可见视觉元素配色、字体、圆角、阴影四个维度是否能在 20 秒内说清交互状态hover、focus、空态、加载态每个按钮点击后发生什么异常场景网络错误、无数据、权限不足用户遇到异常时看到什么文案这张表可以在项目一开始就填写。填得越具体AI 的自由发挥空间就越小页面就越有判断力。注意Prompt 写得再详细也不能保证 AI 完全遵守。它只能降低跑偏概率。真正的验收动作必须由人完成尤其是首屏内容和交互异常分支。3. 使用 Design Tokens 和组件规则建立统一视觉语言3.1 先杀掉 AI 默认审美渐变、阴影和玻璃拟态如果已经生成了页面第一个修复动作不是逐块修改样式而是检查视觉语言是否统一。AI 在生成一个长页面时经常会在第一个区块用卡片第二个区块换成大背景图第三个区块又加一个渐变边框结果整个页面像三个不同项目拼出来的。在动手改之前先用眼神扫一遍页面找出出现频率最高的三样东西渐变、大阴影、玻璃拟态。它们不一定要全部删掉但通常需要大幅收敛。推荐的做法是全站只保留一种可以接受的装饰性风格其他全部移除。如果你不能确定哪种更合适就选择最平淡的那种。一个具体可执行的方法是打开浏览器开发者工具搜索 CSS 里的以下关键词linear-gradientradial-gradientbackdrop-filterbox-shadowborder-radius统计这些属性出现了多少次。一个单页站点里如果border-radius出现超过 20 处且数值都在 16px 以上说明圆角是失控的。如果backdrop-filter出现两次以上说明玻璃拟态已经在泛滥。3.2 用 CSS 变量或 Tailwind 配置固化一套解法统计完成之后建立一套最基础的 Design Tokens。不需要设计系统那么复杂只需要覆盖五个维度颜色、间距、圆角、阴影、字体。使用 CSS 变量时可以定义成下面这样:root { /* 颜色 */ --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-border: #E2E8F0; --color-primary: #2563EB; /* 间距 */ --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: 12px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); /* 字体 */ --font-sans: system-ui, -apple-system, Segoe UI, sans-serif; }这套变量的关键价值是把散落各处的硬编码颜色和间距收拢到同一个来源。后续 AI 如果要调整某个区块也更容易遵循已有的视觉语言。如果项目使用 Tailwind可以在tailwind.config.js里覆盖默认主题。这里要注意的是AI 很可能会在生成代码时直接使用bg-gradient-to-rbackdrop-blur这类工具类如果不想保留它们配置层面就要做限制// tailwind.config.js module.exports { theme: { extend: { colors: { background: #F8FAFC, surface: #FFFFFF, primary: #2563EB, secondary: #475569, border: #E2E8F0, }, borderRadius: { sm: 4px, md: 8px, lg: 12px, }, boxShadow: { sm: 0 1px 2px rgba(15, 23, 42, 0.06), md: 0 4px 12px rgba(15, 23, 42, 0.08), }, }, }, };如果你使用的是 Tailwind 4它改用了theme的方式具体语法取决于项目版本。落地前先确认项目的 Tailwind 版本不要直接照抄命令。3.3 组件级约束让 AI 在同一套语言里工作只有全局变量还不够。AI 生成页面时很容易把同一个语义做成不同结构。比如按钮可能在一个区块里是button classbg-blue-500 rounded-lg在另一个区块里是a classshadow-xl px-6 py-3。一致性被破坏页面就会显得杂乱。推荐的做法是给项目建立最小组件集合。核心交互元素至少包括Button、Input、Card、Badge、EmptyState。下面是一个 React Tailwind 的示例// 组件结构示意实际项目需要按框架和路径调整 type ButtonProps { variant?: primary | secondary; children: React.ReactNode; }; export function Button({ variant primary, children }: ButtonProps) { const base inline-flex items-center justify-center rounded-md px-4 h-10 text-sm font-medium transition-colors; const styles { primary: bg-blue-600 text-white hover:bg-blue-700, secondary: bg-white text-slate-700 border border-slate-300 hover:bg-slate-50, }; return button className{${base} ${styles[variant]}}{children}/button; }这个组件看起来很简单但它具有约束作用AI 后续如果要添加按钮应该优先复用这个组件而不是重新发明一个。为了让 AI 遵守这个约定可以在规则文件里写明按钮必须使用components/ui/Button不得在页面文件里直接写按钮样式。注意只有在组件确实成为唯一事实来源之后约束才有效。如果团队里每个人还是直接写 class组件就只是装饰。4. 打破模板结构从真实内容反推页面布局4.1 高频雷同结构Hero、三卡片、大图区块Vibe-coded 站点最常见的骨架是Hero 全屏大标题、副标题、两个按钮然后三列特性卡片再来一张产品截图接着双栏功能列表最后 CTA 和页脚。这种结构不是不能用它的问题是信息密度太低用户翻了三屏可能还没搞清楚产品到底解决什么问题。要判断页面是否落入模板结构可以做一个实验把所有区块标题写下来遮住产品名让另一个人看。如果对方无法判断这个站点是做什么的说明页面缺乏有效信息结构。换句话说页面没有围绕真实内容组织而是把内容塞进了模板。4.2 内容反推布局的实操方法打破模板结构最稳定的办法是先写内容、再定布局而不是先定布局、再填内容。这一步可以在验证过程中手动完成也可以带着清单重新生成。具体操作分四步第一步把页面需要的真实信息列出来。包括产品功能、用户问题、使用流程、价格、案例、团队信息、联系方式。每一项都要写上具体内容避免解决方案这样模糊的占位词。第二步根据内容类型选择布局。功能清单适合表格流程适合时间线案例适合带具体数字的引用块价格适合对比表团队介绍适合精简列表而不是三张卡通头像卡片。第三步去掉模板区块。当某个区块没有具体内容可以放时先删掉不要为了填满页面而保留。第四步重新组织区块顺序。首屏只放用户最需要知道的判断信息比如这个工具解决什么问题我要怎么开始。下面是一个用表格替代三列特性卡片的示例。它表达的信息量明显更高const features [ { name: 页面和组件的对应关系, description: 每次生成的页面都继承 Design Tokens 和组件约束 }, { name: 状态覆盖, description: 包含加载、空状态、错误、权限不足等常见异常分支 }, { name: 内容真实度, description: 使用真实数据和文案不生成占位内容 }, ]; export function FeatureTable() { return ( div classNameoverflow-x-auto table classNamew-full text-sm thead tr classNameborder-b text-left th classNamepy-2能力/th th classNamepy-2要求/th /tr /thead tbody {features.map((item) ( tr key{item.name} classNameborder-b td classNamepy-2 font-medium{item.name}/td td classNamepy-2 text-slate-600{item.description}/td /tr ))} /tbody /table /div ); }表格的优势是信息密度高、结构清楚而且不容易被 AI 做成漂亮但没有信息的卡片。遇到功能列表、参数对比、版本差异时优先考虑表格而不是三列卡片。4.3 用真实感内容击败 AI 味AI 味很大程度上来自抽象内容。一个页面如果每个段落都是Unlock your potential这种句子用户会很清楚地感觉到这是套模板。修复方式很直接在 prompt 里要求 AI 使用真实材料或者在你没有提供材料时输出占位标记。例如当你缺少真实数据时不要编造数字也不要写空洞文案。 统一输出为中文占位符例如 - 在这里放真实截图 - 在这里写用户案例需要提供客户名称和具体效果 - 在这里写具体功能需要说明输入和输出内容真实的页面即使视觉朴素也比视觉效果丰富但内容空洞的页面更可信。因为用户是在找一个能解决自己问题的产品不是在评价一张海报。5. 交互和状态让网站用起来也像一个产品5.1 空状态、加载态、错误态设计很多 Vibe-coded 页面在静态状态下看起来不错但一旦交互问题就出来了。按钮没有反馈列表为空时没有任何提示接口报错时页面直接空白。解决交互层问题的核心是补齐状态设计。一个页面组件至少有四种状态数据加载前、加载中、加载成功、加载失败。AI 默认只会覆盖加载成功其他都需要额外要求。空状态组件示例export function EmptyState({ title, description, action }: { title: string; description: string; action?: React.ReactNode; }) { return ( div classNameflex flex-col items-center justify-center rounded-md border border-dashed px-6 py-16 text-center h2 classNametext-sm font-medium{title}/h2 p classNamemt-1 text-sm text-slate-500{description}/p {action ? div classNamemt-4{action}/div : null} /div ); }空状态并非只是为了有东西可看它是在告诉用户当前没有数据是因为没有产生数据还是因为操作错误。这正是产品感的一部分。类似地加载状态可以用骨架屏替代转圈让页面在数据未返回时仍然保持结构稳定。5.2 克制的动效和微交互AI 生成的页面经常带两种极端要么完全没有交互动效要么加入大量无意义的浮动和淡入淡出。后者更容易让页面显得廉价因为用户会马上感觉到动效没有承载意义。推荐的策略是只保留三类动效反馈类按钮 hover、表单聚焦、状态类加载、过渡、引导类用户操作后出现的确认或提示。下面的 CSS 示例实现了最基础的按钮反馈和表单聚焦.button { transition: background-color 120ms ease, border-color 120ms ease; } .input:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }这里的重点是动效持续时间要短120ms 到 200ms 是合理的范围。过长会让人感觉卡顿过短可能没有反馈效果。不要在页面加载时给所有区块加顺序入场动画那是最典型的模板感来源。5.3 可访问性AI 最容易忽略的角落可访问性对 AI 生成代码来说是一块硬伤因为训练数据里的很多页面虽然结构完整但语义标签、键盘操作和对比度并不达标。要做成一个真正可用的产品至少需要检查三件事。第一表单元素必须有关联的 label。AI 经常生成只有 placeholder 的输入框这在用户开始输入后没有任何提示。第二按钮和链接必须能通过键盘聚焦并且聚焦状态要可见。第三文字和背景的对比度要满足基本阅读需求尤其是灰色文字在白色背景上的场景。可以安装 axe 浏览器扩展或直接运行 Lighthouse 的 Accessibility 分类检查。这些工具会给出具体问题定位修复优先级比再让 AI 重新生成一遍页面要高得多。注意可访问性检查不只是合规要求。用户在不依赖鼠标操作、无法看清屏幕或使用低配设备访问页面时良好的可访问性是体验的一部分而不是额外的负担。6. AI 味体检清单上线前按序检查6.1 视觉层检查视觉体检不需要设计背景只需要做几组客观对比。打开页面依次检查配色、字体、圆角、阴影四个维度的数量。判断标准很简单同一维度出现超过三种不同风格就需要收敛。例如如果页面里同时存在 4px、8px、16px、24px 的圆角且之间没有明显规则就应该统一到 Design Tokens 里定义的三个档位。具体操作是打开开发者工具搜索# 检查渐变是否过度使用 grep -o linear-gradient\|radial-gradient -c src/**/*.css # 检查硬编码颜色示例路径按实际目录调整 grep -o #[0-9a-fA-F]\{3,8\} src/**/*.css src/**/*.tsx | sort | uniq -c如果颜色数量超过 15 个说明视觉语言还没有收敛。这时候不要逐个区块去猜应该先在变量里定义好颜色再全局替换。还有一个容易被忽略的问题截图和图片素材。如果页面里的截图是 AI 生成的假 UI 图片用户会很快识破。尽量替换成真实产品的截图或至少替换成带真实数据的模拟界面。6.2 内容层检查内容体检只需要回答三个问题用户是否知道这个产品解决什么问题用户是否知道下一步要做什么页面里有没有可以删掉一半内容仍然不影响表达信息量的区块。最常见的 AI 味文案有两类。第一类是过度承诺型Change the way you work forever用户看完没有具体记忆点。第二类是自我中心型We provide best solutions完全站在产品视角而不是用户视角。修复方式是给每个标题和段落写上具体的信息词。例如把Empower your team改成给线上客服团队减少 30% 重复接待时间后者至少让用户知道产品在哪个维度有作用。内容层检查可以通过一个表格进行检查项通过标准不通过表现首屏标题说清产品是什么、解决什么问题只有抽象 sloganCTA 按钮表达具体动作了解更多这类模糊动作特性描述每项都能说清输入和输出只有功能性形容词数据引用有来源或标注占位编造用户数和增长率案例内容有具体场景和效果只有客户 logo 没有说明6.3 代码与性能层检查视觉和内容问题可以被发现代码层的问题不容易被普通人注意到但它会直接影响长期维护。AI 生成代码常见的问题包括命名不规范、组件之间耦合、大量无效 DOM 嵌套、没有 key、插件或组件库过度引入。性能层最基本的检查是运行一次 Lighthousenpx lighthouse https://example.com --view关注 Performance、Accessibility、Best Practices 三个指标。如果 Performance 得分很低先检查是不是引入了大量未被使用的脚本或字体。AI 在生成过程中会自动添加依赖但这些依赖经常没有实际用途比如某个区块用了图标就引入了整个图标库。可以通过构建工具的分析命令查看包体积比如 Next.js 项目可以使用ANALYZEtrue npm run build在没有确认分析命令可用之前先看浏览器开发者工具的网络面板找到体积最大的 JS 和 CSS 文件确认它们是否真的被页面使用。未使用的依赖尽早移除避免体积不断膨胀。7. 常见坑、最佳实践与下一步训练方向7.1 三个高频坑为什么 AI 总是把页面做满第一个坑是页面信息过载。AI 倾向于每个区块都放足够多内容结果整个页面没有任何焦点。修复方式是要有删除优先的意识首屏只要一个主标题、一句副标题、一个主按钮其他内容全部移到下一屏。第二个坑是完全依赖 AI 生成文案。AI 文案最大的问题是平均它可以写出通顺的句子但无法写出你产品的真实差异点。这里的关键不是让 AI 更有创意而是给它提供真实的资料库产品说明、竞品分析、客户反馈、数据截图。资料越具体输出越可靠。第三个坑是只维护了正常路径。很多 Vibe-coded 页面只有在数据全部正常时好看一旦出现空列表、加载失败、输入校验失败页面就暴露原型状态。预防方法是在 prompt 里直接要求 AI 为每个交互元素补充四种状态并在验收时不只看 happy path。7.2 最佳实践清单在项目过程中积累一套固定的操作清单比反复修改一个页面更值钱。下面这份清单可以直接复制到项目文档里使用把设计约束写入.cursorrules或等价项目规则并在每次大规模生成前重新确认。全局先建立 Design Tokens再写页面组件禁止页面内硬编码颜色和圆角。所有按钮、输入框、表单复用同一个组件文件不允许多处各自实现。页面文案必须来自真实资料AI 输出占位时要明确标记不隐瞒缺失内容。每个区块在生成前说明它存在的原因生成后检查该区块是否真的完成这个目的。上线前至少完成一轮空状态、加载状态、错误状态测试。运行一次 Lighthouse记录 Performance、Accessibility、Best Practices 三类指标。删除未使用的依赖和组件库控制最终 JS 体积。在手机尺寸下完整走一遍核心流程AI 生成的桌面页面经常在窄屏下出现布局问题。7.3 从 Vibe-Coding 走向 Craft-CodingVibe Coding 的核心价值是速度它解决了从 0 到 1 的效率问题但它不能解决 1 到 10 的产品质量。想让 AI 生成的页面不像 AI Slop根本方法不是不用 AI而是让 AI 在一个更高质量的约束体系里工作。这套约束体系包含明确的设计目标、统一的视觉变量、可复用的组件、真实的内容材料和完整的交互状态。下一步建议做一个很具体的练习挑一个已经生成的 Vibe-coded 页面按本文第六节的顺序做一轮体检把发现的问题记录成清单然后逐个修复。修复两到三个页面之后你会积累出一份属于自己的项目约束模板。以后再让 AI 做新页面时直接带入这份模板产出的质量会比每次都临时写一句做得好看一点稳定得多。当 AI 承担生成工作人承担决策和验收工作写代码这件事的质感反而会回到它本质上最像的部分判断什么该留下什么该删掉什么值得被用户记住。