企业官网建设流程全解析

如果你最近在用 Cursor 这类 AI 编程工具做网站，大概率已经撞上同一个坑：Vibe-coded 出来的页面非常快，但成品一眼就是 AI Slop。AI Slop 不是骂 AI，它说的是那种没有判断、没有取舍、只有模板堆砌的产物：紫色渐变、毛玻璃卡片、六个圆形图标、无数个“赋能”“助力”“一站式”。这周我连续帮朋友改了三个这样的网站，发现问题几乎一样：不是 AI 生成的代码不对，而是从设计意图到信息架构，再到视觉细节，都没有人真正管过。

这篇内容不教你堆 prompt，也不解释某个 AI 工具的新功能。我想分享一套更实际的做法：怎么样在享受 Vibe-coded 速度的同时，让最终网站有明确的视觉方向、清晰的信息层级和稳定可维护的代码。适合三类人：正在用 Cursor 做个人项目的开发者、一个人 Solo 做落地页的独立开发者，以及刚接触 AI 编程、但不想把作品做成“模板批发市场”的学生党。核心判断只有一句：AI 负责生产和提速，设计判断必须由你接管。

1. 先搞清楚 Vibe-coded 产物为什么容易变成 AI Slop

1.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 落地页举例，可以是这样的顺序：

1. 一句话说明产品：给谁用、解决什么问题、带来什么结果。
2. 用户为什么需要：写清楚痛点，而不是罗列功能。
3. 方案如何工作：三步或四步说明过程。
4. 证据和信任：真实截图、案例数据、用户评价。
5. 回答反对意见：常见疑问或风险说明。
6. 一个明确行动：注册、试用、预约，不要同时给五六个按钮。

这个骨架不需要很完整，但它决定了页面的叙述顺序。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 生成的方案只是一个平均值，不是设计答案。你只需要朝自己的方向移动几格，页面就会立刻显得“像人做的”。

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，颜色对比度不够。这些问题平时看不出来，但用户一旦依赖键盘或读屏软件，体验会非常差。

我自己的检查顺序是：

1. 页面里是否只有一个h1，标题层级是否连续。
2. 导航和底部是否使用nav、footer等语义标签。
3. 所有图片是否都有准确的alt。
4. 所有按钮是否都带type，尤其表单里的按钮。
5. 输入框是否有对应label。
6. 键盘 Tab 键能否按顺序走完整个页面，焦点是否可见。
7. 正文和背景的对比度是否达到 AA 标准。
8. 首屏图片是否足够小，能否用懒加载。

这些检查听起来繁琐，但可以很快完成。AI 能帮你生成页面，却不能替你理解残障用户的操作路径。如果你要把网站公开，这一关必须亲手过。

5.4 AI 会生成幻觉，别把“能运行”当成“正确”

使用 Cursor 这类工具时，AI 偶尔会生成不存在的 API、错误的依赖配置，或者过时的 props。你运行项目时可能没报错，但某个功能就是不符合预期。这类问题不能靠肉眼 review 解决。

我建议给项目加一层基础验证：有 TypeScript 就开启tsc --noEmit，有测试就跑测试，有 build 流程就跑npm run build。对于没有测试的小项目，至少要在浏览器里完整走一遍用户主流程：打开页面、点击主按钮、提交表单、查看结果。AI 生成代码之后，先用工具校验语法和类型，再人工走关键路径。经历过一次“页面打开正常、提交却崩溃”的现场，你就会明白这一步不能省。

6. 建立自己的验收流程，把 AI Slop 挡在生产环境之外

6.1 用一份单页验收清单兜底

AI Slop 很难靠灵感避免，更靠流程兜底。我会在发布每个页面前，对照清单做一遍快速检查。不需要做得很复杂，只需要保证关键问题不会漏掉。

下面是一份适合普通网站和落地页的清单：

这组清单不一定适合所有项目，但它能逼着你从“好不好看”转变到“能不能交付”。

6.2 用陌生人测试代替自我感动

设计者很容易被自己的作品说服。你觉得深色背景很有质感，用户可能根本看不清标题；你觉得动效很酷，用户可能只关心按钮能不能点。要跳出这种视角，最好的方法是陌生人测试。

具体操作很简单：找一个不了解项目背景的人，把页面放在他面前，给他 5 秒。然后问三个问题：这个网站是做什么的？你愿意继续往下看吗？你知道下一步要怎么做吗？如果回答含糊，说明信息架构或视觉层级还有问题。不要解释，不要引导，问完就让他走。

这个方法我几乎每次都会用。它不需要专业设计能力，只需要你愿意接受“作品还不够清楚”的事实。AI 生成得越快，这类测试越重要，因为你会很容易误以为“能跑起来”就等于“能交付”。

6.3 什么时候该抛弃 AI 生成，手写覆盖

有些地方不适合继续用 AI 修补。比如品牌主页的核心位置、严重依赖复杂布局的页面、需要精细控制动效的交互组件。这些问题不是 AI 能力不够，而是需要反复推敲和微调。让 AI 在几十个类名里改，不如直接手写一个原子化的组件。

我的原则是：AI 负责首版和重复性工作，人负责关键判断和精细控制。比如小组件、列表、表单、通用卡片，可以放心让 AI 生成。主视觉、首屏排版、品牌色彩，值得自己花时间手写。这样既保留效率，又不容易让品牌变成千篇一律的模板。

6.4 推荐一个稳定的迭代节奏：设计、内容、代码三轮

最后给一个可复制的流程。第一轮，确定设计意图，写一个文本骨架，告诉 AI 生成初稿。第二轮，检查信息架构和文案，把所有空话换成具体内容。第三轮，清理设计 Tokens、组件结构和响应式样式，跑一遍 build 和人工测试。

三轮下来，大多数 AI Slop 都能被清掉。你不需要一次性把所有东西做到位，而是每轮只盯着一个目标。我现在的习惯是：每个页面发布前，先跑一次验收清单，再找陌生人看 30 秒。只要他说不出来这个网站是干什么的，不管 AI 生成得多快，我都不会发布。Vibe-coded 的真正价值，不是让你用更短时间生成模板，而是让你把省下来的时间，用在那些 AI 永远替你做不了的设计判断上。