最近用 Cursor 批量做了几个网站原型结果发现一个有点尴尬的现象只要页面是 AI 参与生成的打开地址栏之前你基本就能认出来。紫蓝渐变、磨砂玻璃、超大圆角、居中 Hero、按钮上写着 Get Started文案里全是 Unlock your potential。这套流水线审美正在让互联网变得越来越同质化最近社区里甚至出现了一个专门吐槽这种风格的词AI Slop翻译过来就是“AI 垃圾美学”。这篇文章想聊的正是一个被反复讨论、却又非常现实的话题怎么让 Vibe Coding 生成的网站不带上那股浓烈的“AI 味”。Vibe Coding 是近两年非常流行的编程方式指的是开发者把需求和氛围描述清楚后让大模型直接生成整段代码。它上手快、产出快但如果完全不做设计约束生成出来的页面就会高度雷同。全文会从概念、设计判断力、Prompt 写法、代码示例到排查清单展开适合正在使用 Cursor、GitHub Copilot 或同类 AI 编程工具的同学也适合想给个人站、作品集或创业项目一个更可信外观的产品经理和独立开发者。1. 背景Vibe Coding 为什么流行又为什么容易翻车1.1 什么是 Vibe CodingVibe Coding 这个概念最初由前 OpenAI 研究员 Andrej Karpathy 在一次直播中提出。它描述的是一种全新的编程方式开发者不需要逐行写代码而是用自然语言描述“我想要一个什么样的页面”大模型像配合默契的结对编程搭档一样直接把可运行的代码交给你。这种模式最典型的落地工具包括 Cursor、GitHub Copilot、Claude 的 Artifacts以及 v0、Lovable 这类偏前端的生成平台。它们的共同特点是开发者给出一段自然语言需求模型生成完整页面或组件开发者可以通过连续对话不断修改样式、逻辑和结构生成结果可以立即预览形成“改动 → 反馈 → 再改动”的快速闭环。从这个角度看Vibe Coding 对独立开发者、产品经理、后端工程师非常友好。过去一个后端同学想做个落地页需要先学 HTML、CSS、Flexbox 和响应式布局折腾一整天可能还做得不够好看现在给 AI 一段描述10 分钟就能出一个能看的版本。效率提升了但问题也随之而来。1.2 AI Slop 的脸谱怎么一眼认出 AI 生成的页面当大量开发者和非开发者都使用同一批大模型、同一批默认提示词时生成结果会收敛到非常相似的“平均风格”。我把这种风格称为 AI Slop 的“标准脸谱”常见特征包括配色永远是紫蓝渐变或青紫渐变背景搭配模糊的彩色光晕字体清一色系统无衬线标题加粗到 800靠字号制造“气势”排版永远居中Hero 区正中间放一句口号下面两个按钮再往下是六张一模一样的卡片卡片使用玻璃拟态、大圆角、发光阴影看起来精致但没有信息量文案充满营销套话像 “Unlock Your Potential”“Welcome to the Future”“Elevate Your Business” 这类空泛表达装饰性元素全是 SVG blob、渐变圆斑和 ✨ 这类 emoji。为什么会出现这种局面根本原因是模型在大量网站数据上训练数据里数量最多的就是模板站和营销页模型天然会把“最常见”理解成“最应该生成”的风格。如果你不告诉它“不要这样做”它就会用概率最高的方案交差。所以想让 Vibe Coding 产物有灵魂第一步不是学更多 AI 技巧而是建立足够清晰的设计约束。1.3 这篇文章能帮你解决什么问题本文不会教你写一套完整的设计系统也不会让你变成专业视觉设计师而是提供一套普通人也能执行的“设计防 AI 味流程”。学完以后你会得到以下几个具体能力能准确识别 AI 生成页面里的“流水线痕迹”会写带设计约束的 Prompt让 Cursor 等工具从第一次生成就不跑偏会通过设计令牌Design Tokens统一颜色、字体、间距和圆角能对照清单做一轮人工审查和打磨让页面从“AI 模板”变成“有人的温度”。2. 先建立设计判断力写给开发者的设计常识2.1 你不是没有审美而是缺少对照物很多开发者觉得自己“审美不行”实际上问题往往不是审美能力而是缺少可参照的标准。看到一张海报你能判断它是否舒服但让你从零开始设计你不知道从哪里下手。这是正常的因为设计判断需要经验积累而经验来自大量“看好的东西”和“对比差的东西”。所以在让 AI 帮你干活之前先花 30 分钟建立你的视觉参考库。具体做法很简单打开你喜欢的 5 个网站可以是产品官网、个人博客、独立开发者主页问自己三个问题它用的什么字体主色是什么为什么这个页面让你觉得专业把截图保存到本地文件夹作为给 AI 的参考素材。这里有一个很实用的技巧截图比语言描述更准确。你在 Prompt 里写“高级一点”是模糊的但如果你告诉 AI“参考这张截图的配色和排版”生成结果会稳定很多。Cursor 支持把图片拖入对话框这就是你建立设计约束的重要入口。2.2 建立情绪板与参考库情绪板这个工具听起来有点玄本质上就是把颜色、字体、材质、排版方式的参考图集中在一起。工程师可以用更工程的方式处理它建一个design-reference/文件夹放你喜欢的网站截图用取色工具比如 macOS 自带的数码测色计或在线工具提取参考页的主色、辅助色、文字色记录你喜欢的字体名称和字号层级后面直接让 AI 复刻。有了情绪板AI 就不再是自由发挥而是在你划定的范围内工作。这就像写代码时先定接口再让团队成员实现而不是让每个人自由发挥。对于 Vibe Coding这套“先框定边界再生成”的思路同样适用。2.3 把设计语言翻译成可执行规则设计师之间沟通会说“这个页面要有呼吸感”但 AI 听不懂“呼吸感”。你需要把它翻译成可执行的规则比如“呼吸感” → 区块间距至少 96px段落行高 1.8不要把所有内容挤在一屏“高级感” → 使用衬线标题字体减少颜色数量增加留白“可信赖” → 使用真实产品截图减少插画和装饰性元素。这一步是全文最核心的方法论。AI 不是没有审美而是不知道你的审美标准。你要做的是把审美标准转化成它能够执行的具体指令而不是指望它自动理解你的想法。3. 环境准备与工具链3.1 AI 编程工具与使用方式当前主流的 Vibe Coding 环境以 Cursor 最具代表性它本质上是 VS Code 的增强版在编辑器里集成了对话、代码补全和自动改写能力。除了 Cursor还可以使用 GitHub Copilot 配合 VS Code或者在 Claude 的 Artifacts、v0 等网页工具里先做原型再迁移到真实项目。版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路。技术栈选择上新项目推荐使用 Next.js Tailwind CSS因为它能快速搭建页面且 AI 模型对这套组合的训练数据非常充分生成代码的出错率相对较低。你也可以用 Vite React Tailwind效果类似。在开始之前确认你的环境满足以下条件已安装 Node.js 18 以上版本已安装 pnpm、npm 或 yarn 任一包管理器已安装 Cursor 或 VS Code Copilot 插件拥有一个可用的 OpenAI 兼容 API 或 AI 编程工具的订阅账号。3.2 项目技术栈与目录约定为了让 AI 生成的代码不散乱建议在项目初始化时就把目录结构约定好。一个典型的 Next.js 页面项目结构如下my-soul-site/ ├── src/ │ ├── app/ │ │ ├── layout.tsx # 全局布局与字体加载 │ │ ├── page.tsx # 首页 │ │ └── globals.css # 全局样式与设计令牌 │ └── components/ │ ├── Hero.tsx # 首屏 │ ├── Feature.tsx # 功能模块 │ ├── Footer.tsx # 页脚 │ └── ui/ # 基础 UI 组件 ├── public/ │ └── images/ # 产品截图、头像等真实素材 ├── CLAUDE.md # AI 协作规则Cursor 会自动读取 └── package.json你不需要完全照搬这个结构但建议保持“组件按功能拆分、样式集中在 tokens 层、AI 规则写入独立文件”的思路。这样做的最大好处是当 AI 生成的代码出错或不符合要求时你能快速定位是哪个组件的问题而不是在一个巨型文件里翻找。3.3 把设计规则写进项目很多人用 Cursor 时只是把需求丢进去然后不断说“再改一下样式”来回拉扯十几轮。更工程化的做法是写一个专门的规则文件让 AI 每次生成代码前都先读到它。Cursor 支持项目级规则文件Claude Code 也支持类似机制。对于 Next.js 项目你可以在项目根目录创建一个CLAUDE.md文件内容就是你的设计红线。下面是一个可直接使用的示例# 视觉规则AI 协作时必须遵守 ## 禁止 - 禁止紫蓝渐变、青紫渐变、发光文字和玻璃拟态 - 禁止所有内容居中排版 - 禁止使用 ✨ 等装饰性 emoji - 禁止 Unlock Your Potential、Welcome to the Future 等营销套话 - 禁止生成 6 个一行的同质化卡片网格 - 禁止使用 SVG blob 作为背景装饰 ## 必须 - 使用 src/app/globals.css 中的颜色变量与间距变量 - 标题使用 serif 字体最多两行避免加粗到 800 - 每个区块必须有真实文案不要使用 lorem ipsum 占位 - 优先使用真实截图、数据图表和产品内容不要用泛化插画 - 留白优先于装饰间距必须从 --space-* 变量中取值把这段规则放到项目根目录后你和 AI 的每一次对话都会默认带上这套约束。它相当于给 AI 安装了一套“价值观过滤器”效果远好于每次对话临时补充要求。4. 六个核心设计原则摆脱 AI Slop4.1 字体是页面气质的 70%普通人看一个网站专不专业第一眼往往不是颜色而是字体。AI 默认生成的页面通常使用系统无衬线字体比如system-ui, -apple-system, sans-serif这种字体本身没问题但所有 AI 页面都用它时就产生了强烈的雷同感。解决思路是给页面引入一两款有性格的字体。常见的组合方式是标题使用衬线字体Serif例如 Newsreader、Source Serif 4、Noto Serif SC正文使用无衬线字体Sans-Serif例如 IBM Plex Sans、Inter、思源黑体全站最多使用两款字体不要三套以上。在 Next.js 中可以通过next/font优雅地加载字体避免额外请求第三方 CDN// src/app/layout.tsx import { Newsreader, IBM_Plex_Sans } from next/font/google; const newsreader Newsreader({ weight: [400, 500, 600], subsets: [latin], variable: --font-display, }); const ibmPlexSans IBM_Plex_Sans({ weight: [400, 500], subsets: [latin], variable: --font-body, }); export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( html langzh-CN className{${newsreader.variable} ${ibmPlexSans.variable}} body{children}/body /html ); }字体的选择要匹配内容气质。个人博客、产品官网和工具站适合用带有“写作感”的衬线字体数据密集型后台则不太适合衬线字体。这个原则不一定绝对但你至少应该做出选择而不是让 AI 用默认值。4.2 配色远离默认紫蓝渐变AI Slop 最大的视觉特征是紫蓝渐变。为什么会这样因为训练数据里大量 SaaS 模板和营销站都使用这个配色模型已经形成路径依赖。你可以做一个实验让 AI 生成一个科技产品首页10 次里有 8 次会出现from-violet-600 to-blue-600这类代码。写这篇文章前后我在 Cursor 里连续做了多组测试只要不给明确色板生成结果几乎都会落在紫色和蓝色区间。这进一步说明必须用设计令牌提前锁死色板。这里给出一套“去 AI 味”的配色方案它使用米白底、墨色文字和砖红强调色更多灵感来自传统印刷品和纸质刊物/* src/app/globals.css */ :root { /* 基础色板 */ --color-bg: #faf7f2; /* 米白底色 */ --color-surface: #ffffff; /* 卡片表面 */ --color-ink: #1a1a18; /* 主文字接近黑色但不是纯黑 */ --color-muted: #6b675f; /* 次要文字 */ --color-accent: #b3452e; /* 砖红强调色 */ --color-border: #e5dfd5; /* 边框色 */ /* 间距节奏基于 4px */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* 圆角与阴影克制而不是夸张 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); }这套色板的特点是有“纸张感”而不是“屏幕发光感”。它天然让人联想到出版物、独立杂志和人写的内容能有效对冲 AI 生成的塑料感。你可以根据自己的品牌调整但核心思路是颜色数量要少、明度要有层次、避免大面积高饱和渐变。4.3 布局不是每个区块都要居中AI 生成页面的另一个习惯是把所有内容居中。Hero 居中、按钮居中、卡片居中、页脚居中整个页面像一个被刻意摆正的陈列柜缺乏节奏。好的页面设计更像排版有的区块左对齐有的区块两栏错落有的地方需要留白停顿。以 Hero 区为例与其使用“居中口号 两个按钮”的模板不如试试左对齐两栏布局左边放标题、副标题和行动按钮右边放产品截图或实时数据。这种布局在视觉上更接近真实产品首页也更容易让用户快速理解产品是什么。// src/components/Hero.tsx export default function Hero() { return ( section classNamegrid grid-cols-1 lg:grid-cols-2 gap-12 items-center div p classNametext-sm uppercase tracking-[0.2em] text-[var(--color-accent)] Independent Developer /p h1 classNamemt-4 font-display text-4xl md:text-5xl leading-[1.15] 我用十年时间 br / 把复杂系统做成简单工具。 /h1 p classNamemt-6 text-lg text-[var(--color-muted)] max-w-md 这里是我的产品、写作与工程思考。 没有浮夸包装只有能落地的经验。 /p div classNamemt-8 flex flex-wrap gap-4 a href/blog classNamepx-6 py-3 bg-[var(--color-ink)] text-white rounded-[var(--radius-sm)] 阅读博客 /a a href/projects classNamepx-6 py-3 border border-[var(--color-ink)] rounded-[var(--radius-sm)] 查看项目 /a /div /div div classNamehidden lg:block img src/images/dashboard-preview.png alt产品界面截图 classNamerounded-[var(--radius-md)] shadow-[var(--shadow-card)] border border-[var(--color-border)] / /div /section ); }注意这里几个细节标题字重没有用到 800而是用字号和字距拉开层次行动按钮使用直角小圆角而不是胶囊圆角右侧使用真实产品截图而不是 blob 背景。这些改动单独看都很小但它们叠加起来就是“非 AI 味”的关键。4.4 文案写人话不说套装话AI Slop 不只体现在视觉上文案更是重灾区。你会发现 AI 生成的产品文案高度雷同翻来覆去就是几个关键词Innovative、Seamless、Empower、Solution、Revolutionary。换成中文就是“赋能”“一站式”“极致体验”“解决方案”。这些词之所以被 AI 反复使用是因为它们出现在大量营销页里本质上是一种“安全但空洞”的表达。要破解这个问题你需要给 AI 提供真实的素材你的产品具体解决什么问题用户是谁有哪些真实数据把这些写进 PromptAI 才能生成有信息的文案。举个例子与其让 AI 写 “Empower your team to work smarter”不如告诉它“我们的产品是一个周报自动汇总工具用户是 10-50 人规模的软件团队痛点是没有时间写周报核心指标是节省每周 2 小时。”这样一来AI 生成的文案就会落回具体场景。Prompt 中应该提供的文案素材 - 产品名称和一句话定位 - 目标用户和他们的主要痛点 - 三个可以量化的收益节省时间、降低成本、提升效率 - 你希望用户读完后的第一反应文案的气质会影响整个页面的可信度。同样一个页面标题从 “Unlock Your Potential” 改成 “一个让周报自动汇总的小工具”给人的感觉就从空泛营销变成了真诚工具后者在独立开发者产品里反而更受欢迎。4.5 细节边框、阴影、纹理很多 AI 页面看起来“假”根源在于缺少物理世界的细节。真实网站经过设计师打磨后会有细腻的边框、克制的阴影、清晰的层级。而 AI 生成的页面往往是大色块、大阴影、大圆角一切都是“大而均匀”的。这里给出几条具体可执行的细节规则边框颜色不要用纯黑要用带灰度的色调比如#e5dfd5接近纸张的边缘阴影不要用大范围模糊用小偏移、低透明度的多层阴影模拟真实物体离桌面的距离圆角不要统一使用 1rem 或 9999px标题按钮、输入框、卡片各自使用不同层级可以给页面增加轻微噪点纹理让大面积纯色背景不显得死板。在 CSS 里实现噪点纹理最简单的办法是使用一个内联 SVG 作为背景body { background-color: var(--color-bg); background-image: url(data:image/svgxml,%3Csvg viewBox0 0 200 200 xmlnshttp://www.w3.org/2000/svg%3E%3Cfilter idn%3E%3CfeTurbulence typefractalNoise baseFrequency0.8 numOctaves3 stitchTilesstitch/%3E%3C/filter%3E%3Crect width100%25 height100%25 filterurl(%23n) opacity0.03/%3E%3C/svg%3E); }这个写法的本质是给背景叠加一层 3% 透明度的噪点视觉上几乎看不出来但能破除大面积纯色的“数字感”。如果主题是极简风格也可以不要这层噪点但整体方向是减少装饰元素的数量增加现有元素的质感。4.6 动效克制而有反馈AI 生成的页面往往有两种极端要么完全没有动效要么上来就是大段动画库效果。前者显得死板后者显得廉价。好的动效原则是“有反馈不表演”。按钮 hover 时颜色变化而不是放大加发光卡片 hover 时轻微上移 2px而不是 3D 翻转页面滚动时可以出现轻微的淡入效果但不要超过 300ms减少元素运动让用户注意力集中在内容上。下面是一个用 CSS 实现的简单反馈动效不需要引入任何动画库a, button { transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease; } a:hover, button:hover { opacity: 0.85; } .card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }如果你希望页面有滚动淡入效果也可以使用IntersectionObserver逐个小块处理而不是一次性载入整段动画库。做法是给目标元素加一个初始透明类当元素进入视口时移除该类整个过程交给 CSS transition 完成性能更好也不会产生“全场乱动”的廉价感。5. 完整实战案例从 Prompt 到成品5.1 案例需求与目标下面通过一个完整的案例把前面提到的方法串起来。假设我们要为一个独立开发者做一个个人官网首页包含Hero 区、精选文章、项目展示、页脚。要求页面看起来专业、可信、不像 AI 生成的模板。这个案例会演示三条关键路径如何写好第一版 Prompt让 AI 从源头避开 AI Slop如何通过设计令牌统一全局样式如何对生成结果做一轮人工审查和修正。5.2 第一版 Prompt让 AI 按规则生成很多人写 Prompt 时只给一句“帮我做一个个人网站首页”这几乎等于把设计主动权完全交给了 AI结果自然是默认模板。更好的做法是在 Prompt 里明确指定技术栈、页面区块、设计约束和内容素材。下面是一个可以直接复制到 Cursor 的 Prompt 示例请为独立开发者林川生成一个个人官网首页技术栈使用 Next.js Tailwind CSS。 页面需要包含以下区块 1. Hero 区姓名、一句话定位、两个行动按钮 2. 精选文章展示最近 3 篇文章的标题、日期、摘要 3. 项目展示展示 2 个已完成项目包含名称、简介和技术栈标签 4. 页脚社交链接和版权信息 设计约束必须严格遵守 - 不使用紫色、蓝色的渐变背景不使用玻璃拟态、发光文字和胶囊按钮 - 配色使用米白底色 #faf7f2、墨色文字 #1a1a18、砖红强调色 #b3452e - 标题使用 serif 字体正文使用 sans-serif 字体 - Hero 采用左对齐两栏布局右侧放产品截图位 - 文案必须具体可信不要使用 Unlock Your Potential 这类营销套话 - 间距从 4px 基数取值区块与区块之间留白充足 内容素材 - 定位专注开发者工具的前端工程师 - 文章最近写了三篇关于 React 性能优化、AI 编程工具对比、个人知识管理的文章 - 项目一个是 Markdown 编辑器一个是 API 调试工具这个 Prompt 的价值在于它把需求边界画得很清楚AI 生成的代码会直接落在你的设计轨道上。如果生成的细节还有偏差再通过小步对话修正而不是推翻重来。5.3 设计令牌与基础样式在项目初始化后首先把之前定义过的全局样式写入globals.css。这一步的关键不是简单复制而是理解设计令牌的存在意义只要颜色、间距、圆角、阴影都从变量取值后续想整体调整风格就只需要改变量不需要逐个组件去改。/* src/app/globals.css */ tailwind base; tailwind components; tailwind utilities; :root { --color-bg: #faf7f2; --color-surface: #ffffff; --color-ink: #1a1a18; --color-muted: #6b675f; --color-accent: #b3452e; --color-border: #e5dfd5; --font-display: var(--font-display-var, Newsreader, serif); --font-body: var(--font-body-var, IBM Plex Sans, sans-serif); --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); } body { background-color: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); line-height: 1.75; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; }这里把标题字重设成 500 而不是默认的 bold是为了让标题看起来更接近“作者手写选择”的排版而不是 AI 默认加粗。字形风格会根据你的字体选择产生很大差异你可以根据自己的品牌气质调整。5.4 核心组件代码有了设计令牌和 Prompt 约束AI 生成的组件代码会相对规范。下面给出一个精选文章区块的完整示例重点看它如何保持视觉统一和内容可信// src/components/Posts.tsx const posts [ { id: 1, title: React 18 并发渲染下的一处性能陷阱, date: 2025-11-02, excerpt: 一个看似普通的 setState 调用在 Suspense 场景下触发了整棵组件树的重复渲染……, tags: [React, 性能优化], }, { id: 2, title: 我如何用 Cursor 重写一个后端管理界面, date: 2025-10-18, excerpt: Vibe Coding 不是银弹。这篇文章记录了把旧 jQuery 页面迁移到 React 的过程中踩过的坑。, tags: [AI 编程, Cursor], }, { id: 3, title: 个人知识库从 Notion 迁移到纯文本, date: 2025-09-30, excerpt: 用了三个月 Markdown Git 管理笔记聊聊这套方案的可维护性和代价。, tags: [效率, 知识管理], }, ]; export default function Posts() { return ( section classNamepy-[var(--space-24)] div classNamemax-w-5xl mx-auto px-6 div classNameflex items-end justify-between h2 classNametext-3xl最近写的文章/h2 a href/blog classNametext-[var(--color-accent)] text-sm hover:opacity-80 查看全部 → /a /div div classNamemt-10 border-t border-[var(--color-border)] {posts.map((post) ( article key{post.id} classNamegrid grid-cols-1 md:grid-cols-4 gap-4 py-8 border-b border-[var(--color-border)] time classNametext-sm text-[var(--color-muted)] md:col-span-1 {post.date} /time div classNamemd:col-span-3 h3 classNametext-xl hover:text-[var(--color-accent)] a href{/blog/${post.id}}{post.title}/a /h3 p classNamemt-2 text-[var(--color-muted)] max-w-2xl {post.excerpt} /p div classNamemt-3 flex gap-2 {post.tags.map((tag) ( span key{tag} classNametext-xs px-2 py-1 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-sm)] {tag} /span ))} /div /div /article ))} /div /div /section ); }这个区块的设计思路是“像一篇编辑排版过的文章列表”而不是“三张悬浮卡片”。日期、标题、摘要、标签形成清晰的阅读节奏分隔线替代了卡片背景整体感觉更接近真实内容也更容易融入个人品牌。5.5 运行与验证在写完 Prompt 和核心组件后运行以下命令启动项目npm install npm run dev启动成功后浏览器打开http://localhost:3000预览页面。建议至少做以下几项检查npm run build # 检查是否存在构建错误 npm run lint # 检查代码规范存在未使用变量时优先修复构建通过后可以用 Chrome 开发者工具里的 Lighthouse 做一次性能与可访问性评分。一般情况下只要没有大体积图片和多余的动画库分数不会太差。这里要提醒的是避免为了“好看”一次性引入过多依赖Font Awesome、Animate.css、GSAP 这些库在大多数场景下都不是必需的。5.6 改造前后对比做一次直观的对比你会更清楚约束的价值。同一个需求“独立开发者官网首页”第一版使用不设约束的默认 Prompt第二版使用本文的设计令牌和规则约束差异主要体现在对比维度默认 Prompt 生成加入设计约束后生成配色紫蓝渐变米白底、墨色、砖红强调色字体默认系统无衬线Serif 标题 无衬线正文Hero 布局居中口号 两个按钮左对齐两栏右侧产品截图文案Unlock Your Potential“一个让周报自动汇总的小工具”卡片6 张玻璃拟态卡片边框分隔的文章列表装饰SVG blob 和 emoji无装饰靠留白与真实内容这份对比不是说要彻底否定默认风格而是说明一个事实设计约束越明确AI 产出就越接近你想要的结果而不是全凭概率。6. 常见问题与排查思路在实际使用 Cursor 或其他 AI 工具生成网站时会遇到一些高频问题。下面整理成表格方便直接对照排查。问题现象常见原因解决思路AI 还是生成了紫色渐变没有在 Prompt 和规则文件里明令禁止在 CLAUDE.md 中写入“禁止紫蓝渐变”并给出具体色板按钮全是圆角胶囊模型训练数据中按钮大量使用胶囊样式在 Prompt 中指定rounded-sm或提供直角按钮参考图文案空泛像营销套话没有提供真实产品信息在 Prompt 中补充用户身份、痛点、可量化收益字体加载后页面抖动没有使用 next/font 等预加载方案启用next/font避免在运行时动态请求字体卡片布局高度雷同模型默认使用“三列卡片”结构指定布局为文章列表、表格或不对称网格页面太暗或对比度低使用了低对比度的灰色文字检查 --color-muted 与背景的对比度至少满足 WCAG AA 标准除了表格里的问题还有一个更常见的场景AI 第一次生成的代码不符合预期。这时候不要反复说“再改好看一点”这是无效指令。正确做法是指出具体元素和方向例如把 Hero 区的两个按钮改成左对齐按钮圆角从 rounded-full 改成 4px 把背景从渐变改为纯色 #faf7f2 删除 hero 区右侧的 blob 装饰替换为产品截图容器。如果 AI 仍然不执行可以先人工修改局部样式再让 AI 基于修改后的代码继续迭代。Vibe Coding 不是全自动流水线它更像“驾驶辅助”方向盘始终应该在你手里。另外还有一个容易踩坑的点设计规则文件写好后如果 Cursor 没有自动读取可能是因为会话是在规则文件创建之前启动的。解决方案是重启 Cursor 会话或把规则内容直接粘贴到当前对话里。7. 最佳实践与工程建议7.1 把设计约束沉淀为团队规则如果你不是单打独斗而是团队协作视觉规则不应该只存在某个人的 Cursor 里。建议把设计令牌、字体规范、禁止项和常用 Prompt 沉淀到项目的 README 或 docs 目录中甚至作为 Pull Request 的检查项之一。一个简单有效的做法是建立design-rules.md内容包含项目使用的色板与色值来源字体选择与加载方式间距、圆角、阴影的使用层级生成页面时必须遵守的禁止项常用 Prompt 模板方便成员复用。这样做的好处是当新成员加入时不需要重新摸索“这个项目的审美标准”直接读文档就知道边界在哪里。AI 协作项目尤其需要这种文档因为模型的输出高度依赖历史对话和项目上下文。7.2 小步迭代人工把关Vibe Coding 常见的问题是“生成了一大堆代码但没有人真正看懂”。长此以往项目会变成一个无法维护的黑盒。建议调整节奏每次只让 AI 生成一个区块或一个组件不要一次性生成整个站点生成后立即预览确认样式和内容是否符合预期发现偏差就修正不要等到最后一起改定期人工阅读核心代码保持对项目结构的掌控。如果 AI 生成代码越来越乱可以考虑把重构诉求写进 Prompt“请把这几个组件重构成更清晰的目录结构并删除重复代码。”模型通常能较好地完成这类任务。但无论 AI 多么强大项目必然需要一个人来做最终决策这个人只能是你。7.3 性能与 SEO 不能丢设计打磨很重要但不应该以牺牲性能为代价。AI 生成页面时经常会引入大量不必要的依赖。每次生成完建议检查一下是否引入了完整的 UI 组件库而只用了其中两个组件是否引入了动画库而实际动效用 CSS transition 就能完成图片是否直接引用了远程链接而不是放在public/images中并压缩组件是否存在循环依赖或明显冗余代码。SEO 方面核心是保证页面信息结构清晰。使用语义化标签header、nav、main、section、article、footer每个页面保持唯一的title和description图片补充alt属性。AI 通常会生成这些内容但它未必理解你的产品定位需要你手动修正文案里的关键词和页面标题。7.4 版本管理与回滚AI 生成代码时可能存在不确定行为某次对话后页面突然样式错乱、组件报错。为了避免“改不回去”建议养成几个习惯每次大改动前先用 Git 提交一次形成可回滚的基线要求 AI 在修改前先展示计划而不是直接动代码对样式文件做小步提交颜色、字体、间距分别提交方便定位问题避免在 main 分支上直接让 AI 改代码使用分支或草稿会话。这套流程本质上和传统开发没有区别只是把“人写代码”换成了“AI 写代码 人审代码”。版本管理越规范越敢于让 AI 放开手脚尝试。8. 总结与学习路线回到开头的问题怎么让 Vibe Coding 生成的网站不像 AI Slop答案不是禁止使用 AI也不是让每个人都去上设计课而是建立一套约束和流程。把审美标准翻译成 AI 能理解的规则把设计决策收回到自己手里把内容做成真实可信、而不是概率平均的东西。做好这三件事页面就会慢慢拥有“人的特征”也就是标题里说的 Soul。如果你想继续深挖建议按下面顺序进阶学习基础排版知识了解字号层级、行高、字距对阅读体验的影响掌握颜色理论至少理解色相、明度、饱和度之间的关系学会做对比度检查学习 Tailwind CSS 或 CSS Modules把设计令牌应用到实际项目练习“写 Prompt 约束”的技巧从只写功能需求升级为写“功能 视觉 文案 禁止项”的完整需求多看高质量网站建立自己的参考库并尝试用 AI 临摹它的风格再逐步脱离临摹。本文介绍的设计令牌、CLAUDE.md 规则、Prompt 模板和排查清单都可以直接复制到你的项目里使用。建议你先拿一个旧页面做一轮“去 AI 味”改造亲自跑一遍完整流程感受会比只看文章深得多。如果过程中遇到其他奇怪问题欢迎在评论区把你的报错和页面截图发出来我们再一起看看怎么修。