企业官网建设流程全解析

前几天有朋友问我：大家都在说的 Vibe Coding，是不是真的可以让我这种不太会写前端的人，直接做出一个有设计感的个人网站？我当时的回答是：能，但不是靠一句“帮我做一个漂亮网站”就完事。真正能用 Vibe Coding 把个人网站做到有设计感的人，往往不是提示词写得最长的人，而是愿意先想清楚“我要什么感觉”、再一步步把这种感觉翻译成 AI 能执行需求的人。这段时间我陆陆续续帮朋友搭了好几个个人网站，也看了一些 AI 生成的项目，一个很直观的感受是：工具已经把生成代码的门槛拉得很低，真正拉开差距的，是围绕“设计感”做拆解、验证和迭代的能力。

1. Vibe Coding 不是偷懒，而是换了一种和代码对话的方式

1.1 先破除“一句话生成网站”的误解

“Vibe Coding”这个词如今在技术社区里几乎绕不开。它可以被理解成一种“带着感觉写代码”的工作方式：你把自己期望的体验、风格、交互细节描述出来，AI 生成草稿，你再基于结果调整方向，继续让 AI 修改。这个过程很像在设计工作室里跟助手不断说“再高级一点”“这里有点闷”“左边能不能再透点气”——只是你对话的对象变成了模型，输出物变成了能直接运行的代码。

但很多人第一次尝试都会被现实教育：在对话框里输入“帮我做一个有设计感的个人网站”，得到的往往是一个套着默认色板、居中布局、圆角卡片、hover 阴影的通用页面。它不丑，但也没设计感。它最大的问题是“零个性”——和一百个其他 AI 生成站点的观感没有区别。

这不是模型能力不够，而是你的需求描述里缺少设计约束。设计感不是一个附加属性，不是最后“美化一下”就能解决的，它是由版式、字体、色彩、间距、动效和内容气质共同决定的系统结果。你没说清楚这些变量，模型就只能选择最安全、最平均的输出。

1.2 为什么过去个人网站难在“设计感”

早年间个人网站主要靠手写 HTML/CSS，或者套用现成模板。对不是设计出身的人来说，难点是“不会写代码”；对会写代码的人来说，难点是“不会做设计”。前者卡在实现，后者卡在审美。模板能解决一部分问题，但模板有它的边界：你用模板只是换衣服，衣服的结构、尺码、气质都是别人定好的，想要调整成自己的想法，反而比从零开始更难。

Vibe Coding 真正的价值，是同时降低了两边的门槛。它不要求你精通 CSS 语法，也不要求你背下来设计规范，你只需要具备两样能力：知道自己想要什么感觉，以及能识别输出结果离这种感觉有多远。这两样能力不需要五年美术功底，更接近日常审美判断：你觉得某个人网站舒服，是因为它的留白够多、字体够稳、信息层级清楚，还是因为配图干净、动效克制？

过去这些“感觉”很难直接变成代码。现在你可以把它们写成文字：左边窄栏放导航，主内容区留白多，标题用略带几何感的衬线字体，正文用普通无衬线，主色调不超过两种，卡片之间用大间距而不是边框线。AI 会把这些描述转成基础代码。真正的设计感，是在这一轮又一轮描述、生成、审视、修正中长出来的。

1.3 Vibe Coding 真正改变的是迭代成本

这是我最想强调的一点。过去你请一个前端朋友帮你改网站，往往不好意思反复说“再试一版”；你找模板，改一个全局配色都可能牵一发动全身。而 Vibe Coding 把“改一版”的成本压到了极低：对话里补一句，几秒后你就能看到新的结果。你不再需要为了一个按钮的圆角半径去翻文档，也不需要担心把页面改坏后回不去——版本在你每一次对话里自然留痕。

低迭代成本带来的连锁反应是：你愿意试更多方向，愿意先跑出来再优化。这非常重要，因为“设计感”不是一次生成出来的，它是反复逼近出来的。如果说传统的网页设计流程是“先取景，再动笔，最后渲染”，Vibe Coding 更像是“先糊一个泥胚，再一边转一边修形”；前者要求你一开始就完整，后者允许你在过程中不断调整。

当然，低迭代成本也有副作用：你很容易陷入“不断让它改，但整体仍不理想”的原地打转。这也是后面几个章节要解决的问题。

2. 开始之前，先想清楚你的网站要解决什么问题

2.1 个人网站的三种定位

不管你是想要一个作品集、博客、个人名片，还是一个“把各种链接和导航收在一起的中转站”，定位不同，设计语言完全不同。

我一般把个人网站分成三类：

• 作品集型：核心目标是展示项目、案例、能力。适合用大图、网格、项目详情的叙事结构，视觉上可以更个性。
• 博客型：核心目标是长文阅读。设计重点在排版、栏目、内容分类和阅读体验，视觉应该比作品集更安静。
• 链接集合型：很多人的个人网站其实是一个个人导航站，把社交账号、文章目录、联系方式、作品入口集中在一起。结构越轻越好，信息密度高但层级清楚。

你可以先问自己：这个网站的访客是谁？他们进来之后五秒内应该看到什么？他们最可能需要做什么？这三个问题会直接影响信息架构，而信息架构又决定了设计骨架。如果一开始不做这个判断，后面所有“设计感”都只是涂脂抹粉。

2.2 用“三句话”定义设计方向

我建议你和 AI 开始对话之前，先写下三句话，作为这个项目的“设计宪法”。比如：

• 我希望访客感觉这个网站像一个安静的工作室，而不是热闹的商场橱窗。
• 我希望首页能在三秒内告诉别人：我是谁，我在写什么，我的联系方式是什么。
• 我接受少量动态效果，但所有动效都必须服务于表达，而不是为了炫技。

这三句话看起来像是文字概念，但它们会极大改善 AI 的生成质量。因为模型在理解风格时，需要具体的方向词，而不是“好看”“高级”“有设计感”这样的形容词。形容词是结果，方向才是路径。

你也可以把喜欢的网站截图发给 AI，告诉它“我想要这样的整体气质，但不需要完全一样的元素”。比较新的 AI 编程工具大多支持图片输入，你可以把参考网站的头图、配色、字体搭配作为输入。这个时候你其实是在给 AI 提供高质量的先验样本，它会比你用纯文字描述更准确地理解你的审美倾向。

2.3 选定技术栈的底线原则

对非前端专业的人来说，技术栈不用太复杂。我的建议是：能在静态托管上跑的，就不要先上服务器；能用单页解决的，就不要先上复杂路由；能用轻量方案，就不要一上来引入重型框架。这个选择不是因为技术越轻越“高级”，而是因为个人网站最大的敌人不是功能不够，而是你半年后懒得更新。越轻的栈，越容易被你重新打开修改。

在常见实践里，如果你用 AI 编程平台，通常不需要自己搭脚手架，平台会生成一个可以直接预览的项目；如果你在代码托管平台配合 Vercel 一类部署服务，流程也基本是“推送代码 -> 自动构建 -> 生成访问地址”。这里有一个原则：任何你不想手动维护的部署步骤，都应该自动化。个人网站能活多久，不取决于当时做得多惊艳，而取决于内容更新和改版的阻力有多大。

还要注意：很多 AI 生成的项目会默认引入 Node.js 环境、依赖包构建流程。如果你不熟悉这些，后期维护会感觉很吃力。这时候可以优先选择输出为纯静态 HTML/CSS 或者轻量静态站点生成器的方案。先跑通再扩展，比一开始把所有工具都堆上去更稳妥。

3. 让 AI 做设计，而不是让 AI 替你做梦

3.1 最小可行页面：先让页面跑起来

很多人一开始就让 AI 生成“一个完整个人网站”，然后对着一个长页面开始挑错。这样容易陷入两个问题：一是结果文件太复杂，改一个模块容易影响另一个；二是你还不清楚自己到底要什么，就急着让 AI 输出“完整答案”。

我更建议你先定义一个最小可行页面：一个首页，包含标题、简短介绍、导航、一个主要行动按钮。让 AI 生成这一页，部署到临时地址，然后集中精力把这一页的设计语言打磨到你满意。

为什么这么做？因为个人网站的视觉体系，通常在一个页面里就可以定义清楚：用什么字体、什么间距、什么卡片样式、什么动效风格。你确定这些之后再扩展到其他页面，AI 只需要按照既有风格复制和延展即可。如果一开始就多页面并行，风格很容易乱，排查成本也会成倍增加。

3.2 设计感从情绪板开始

设计感不是从“我不喜欢这个颜色”开始的，而是从情绪板开始的。情绪板不一定非要做成 PPT，你可以用一段话、一组描述词、三张参考图来构成。

比如写一个个人博客，你可以告诉 AI：

参考方向：安静杂志排版，大量留白，标题带一点报纸标题感， 正文用衬线字体，行距 1.8，页面底色用暖灰，不要用亮红色。

这些描述比“极简风”更有价值。“极简风”是概念，模型无法判断你的极简是包豪斯、日式还是侘寂；但“暖灰底色、衬线字体、行距 1.8”是可执行参数。你把可执行参数给到 AI，AI 生成的页面会更接近你的想象。

你需要小心的是：不要在一个提示词里塞进太多设计约束。一次提太多，AI 可能会顾此失彼。最好是先定整体方向，再逐层优化细节，每次只改一个关键变量。

3.3 迭代式提示词：一次只改一个变量

这是整个 Vibe Coding 工作流里最重要的一条。一个常见的反面案例是：“标题字体不好看，颜色也太艳，然后间距也再大一点，顺便把导航放上面。”这种提示词会让 AI 同时修改多个变量，结果就是：它可能把字体改好了，但颜色更艳了；间距变大后，布局又乱了一点。你很难判断问题是出在“这个变量本来就不合适”还是“多个变量互相干扰了”。

正确的节奏是：一次只改一个变量，观察效果，确认满意后再进入下一个。比如先只调字体，再只调颜色，再只调间距。每轮修改后，你都要明确告诉 AI“这个方向对了，继续保持；下一个问题是……”或者“这个方向不对，我们回到上一版，只改 XX”。

注意：一次只改一个变量，是 Vibe Coding 项目里最值得养成的习惯。它能把你从“玄学调参”里拉出来，让每一次修改都可追溯。

你可以把这理解为一种“人机合奏”：你负责审美判断和方向选择，AI 负责快速输出不同方案。你不需要每行代码都看懂，但需要能判断“这次改完是不是更接近目标”。这种判断力本身就是设计能力的重要组成。

3.4 引入参考结构，而不是直接抄参考站

如果你想参考某个网站的风格，不要直接要求 AI“一模一样复制它”。一方面没有必要，另一方面完全复刻会让你的网站失去自己的骨架。你可以把参考站拆解成结构语言：它用的是左右分栏还是上下分栏？导航是常驻还是滚动后隐藏？内容密度是高还是低？卡片是照片为主还是文字为主？

把这些结构特征告诉 AI，比直接扔给它一个“模仿某某网站”的指令更可控。AI 生成的代码也会更接近你的需要，而不是在“像素级模仿”和“完全无感”之间摇摆。

如果你用的是支持上传图片的 AI 工具，可以上传参考截图，但同时补充一句：“参考它的版式节奏和配色关系，但内容结构和文案不要照搬。”这样模型会理解你的意图是风格借鉴，不是内容复制。

4. 设计感不是一句“好看”，而是可拆解的四个层面

4.1 版式节奏

设计感首先来自版式。一个有设计感的页面，通常不会让所有内容都居中堆在页面中心。它会有一种“节奏”：标题区可能占满全宽，正文区缩窄成舒适阅读列，图片列表用非对称网格，页脚回到简单居中的信息行。

在给 AI 的提示词里，你可以描述：“首页先用一个大标题区，标题左侧留白，右侧放一句话简介，下面用两列项目卡片，不要整体居中，采用左对齐。”版式节奏是设计感的第一根骨架，它比颜色和字体更早被访客感知。

一个非常实用的检查方法：把页面缩得很小看轮廓。如果整个页面看起来像一个均匀分布在屏幕上的长方形色块，那通常是节奏太平了。好的页面应该有一个明显的视觉焦点，有疏密关系，有对比。

4.2 字体和层级

字体是个人网站设计感的重要来源。默认字体最容易让页面显得像“任务式开发”的产物。你可以让 AI 引入一组字体搭配：标题用带几何感的无衬线字体，正文用阅读流畅的衬线或人文字体，代码、数据等内容用等宽字体。

字体设计需要注意两点：一是字体数量不要太多，通常两族到三族就够；二是字重和字号要形成清晰层级，比如“首页大标题 72px，二级标题 28px，正文 16px，辅助文字 13px”。字重不要全部用 400，适当用 500 或 700 制造强调。

要注意的是，使用在线字体时需要留意网络加载。字体文件通常比较重，如果只是个人站点，建议最多引入一套重点字体。加载速度本身就是体验的一部分，一个“设计感十足”但打开要等三秒的站点，给访客的体验反而不好。

4.3 色彩和间距

色彩上最容易出现的坑是“什么都想用”。一个稳的做法是：选择一到两个主色，再加上中性色背景和深色文字，构成整个页面的颜色系统。个人网站不需要明显的品牌色，也可以只用黑白灰加一个强调色。强调色应该被用于需要被看见的操作或信息，比如链接、按钮、当前导航项。

间距比颜色更容易体现设计感。合适的间距会让一个简单的页面显得从容，间距不足则会让页面显得局促。你可以给 AI 设定一个间距系统，例如：页面最大宽度 1080px，卡片间距 24px，区块间距 96px，正文段落间距 1.8 倍行高。间距系统统一后，页面的高级感会明显提升。

有一个反直觉的点：很多普通页面是因为“元素之间靠得太紧”显得像半成品，而不是因为缺少装饰。所以当你觉得页面没有设计感时，先检查间距，再检查颜色，通常比继续加装饰更有效。

4.4 动效和交互细节

动效是双刃剑。一个有效的动效是“让用户知道发生了什么”：鼠标悬停时卡片轻微上移、按钮颜色渐变、页面滚动时模块渐入。一个无效的动效是“每样东西都在动”：弹跳、旋转、粒子特效，结果让访客注意力被分散。

用 Vibe Coding 做动效，最省力的方式是把动效描述成“触发条件 + 动作 + 时长”，比如：

标题在页面加载后 0.2 秒内淡入并向上移动 10px； 卡片 hover 时阴影加深并上移 4px，持续 0.3 秒； 所有动效遵循 ease-out。

这比“加一个炫酷入场效果”具体得多，AI 生成的代码也更容易控制。

另一个建议是：在动效调试阶段，先把所有动画时间设置为 0.6 秒以上，方便你观察效果；等确认之后，再调成 0.2 到 0.4 秒。因为动画太快很难看清是否符合预期。

5. 部署、域名、内容与长期维护

5.1 免费部署与自动更新

个人网站最常见的方式是静态托管。部署平台有很多选择，比如 Vercel、Netlify、GitHub Pages，一些 AI 编程平台也内置了发布能力。至于选哪个，取决于你的技术栈：纯 HTML 静态文件几乎哪里都能托管；基于 Git 仓库构建的项目，用 Vercel 或 Netlify 会更顺手。

如果不想碰命令行，使用网页版 AI 工具时通常会直接提供一个预览和发布入口，很多平台支持一键绑定域名。如果你是第一次操作，建议走“AI 生成项目 -> 平台预览 -> 一键发布 -> 访问临时域名”的路径。整个过程不需要理解服务器配置，但也正因如此，发布后有条件的话要自己刷新检查一遍，确认字体、样式、图片都正常加载。

如果你不熟悉命令行，优先走“AI 生成 -> 平台预览 -> 一键发布”的路径，不要一开始就折腾服务器配置。个人网站的访问量通常不高，免费方案基本能满足初期需求。

在你还没想好用哪个平台之前，不要急着买付费方案。先用免费额度把开发流程跑通。等你真的需要自定义域名、更多带宽或更多构建分钟数，再升级也不迟。

5.2 内容从“站点”变成“工作流”

很多个人网站的问题是：做的时候很有热情，三个月后因为更新太麻烦就闲置了。要避免这个结局，关键在于把“内容发布”变成一门低成本的手艺。

如果是博客型网站，建议用 Markdown 写内容，然后让 AI 帮你根据文章内容生成页面卡片、摘要和标签。你不需要每次改 HTML，只需要维护内容文件；如果是作品集，建议把项目资料整理成一个统一格式的 JSON 或 Markdown 文件，后续想新增项目时，只要复制一条记录改内容即可。

Vibe Coding 在这里的价值是“把重复流程固化下来”。你可以让 AI 生成一个“新增文章指南”，用非常短的操作步骤描述你每次更新内容的路径：在哪改文件、命令是什么、如何提交。把这个指南放在项目里，下次想更新时不用重新研究之前的代码。

另一个很重要的工作是“留档”。每次 AI 生成的关键版本，如果感觉不错，建议截图或者保存为一个分支。这样你改坏了某个版本时，可以回到之前的思路，而不是靠记忆复原。这比“让它继续改”安全得多。

5.3 什么时候该从 Vibe Coding 切换到手写代码

Vibe Coding 不是万能的，你也不用永远依赖对话生成代码。当你开始频繁做这些事时，说明已经可以手写一些关键部分了：

• 反复调整同一个样式，但 AI 每次都会在其他地方引入新问题。
• 你需要精确控制某些交互逻辑，靠文字描述越来越难。
• 你已经有稳定视觉体系，想把它固化成可复用组件。

此时更合理的做法是：让 AI 生成基础组件，你用编辑器手写微调细节，再让 AI 帮助你解释代码、写注释、补充边界处理。这比“全盘手写”更快，也比“全盘让 AI 写”更可控。

很多时候，Vibe Coding 的终点不是“不再写代码”，而是“把写代码的主要精力放在理解项目、定义边界和验证结果上”。这反而是更接近工程师思维的状态。

6. 常见问题排查链路：先看输入，再看环境，最后看边界

6.1 页面和预期差距大

当你觉得页面整体气质不对，先不要急着让 AI 继续改。先回到输入层检查：你说的方向是否足够具体？你给的是“好看”“高级”这类评价，还是“背景用暖灰、标题字重加大、区块间距增加”这类可执行指令？如果方向词太多，先重新写一轮提示词，把审美判断转成参数判断。

如果输入明确，但页面还是不对，再检查是否为技术限制。比如你想实现某个复杂的边框融合效果或全屏滚动动画，但 AI 生成的代码可能只是模拟了两三成。这个时候你要考虑降低目标或换一种实现方式，而不是无休止地让它重试。

6.2 部署成功但样式丢失

“本地预览正常，部署后页面没有样式”是静态站点部署里很常见的问题。排查顺序建议是：

1. 打开浏览器开发者工具，看 CSS 文件是否 404。
2. 检查项目里引用的路径是相对路径还是绝对路径。很多 AI 生成的代码会写死“/style.css”之类的绝对路径，部署在子路径或某些静态托管服务时就会找不到。
3. 检查构建命令是否正确。基于框架的项目通常需要执行构建步骤，如果你没有配好构建命令，部署结果可能只是源码目录里的 HTML。
4. 检查字体资源是否也部署上线。使用在线字体一般没有这个问题，本地字体则要注意路径。

这一套排查链路里，最容易被忽略的是“路径问题”。AI 在生成代码时，经常使用当前开发环境下的绝对路径，换到另一个部署环境就会失效。遇到样式丢失时，优先检查路径，而不是怀疑浏览器缓存。

6.3 AI 反复修不好同一个问题

如果你连续几轮让 AI 修同一个 Bug，但问题没消失，甚至出现了新问题，通常有几种原因：

• 当前的上下文里已经有过多版本代码，AI 自己也不清楚哪一段是“最新正确”。
• 问题其实不止一个，但你只描述了表象，AI 没看到根本原因。
• 生成环境和你本地/预览环境之间不一致，修改方案没有真正跑到能复现问题的环境里。

这种时候，我建议你停止继续对话。新建一个会话，把项目目录结构和当前关键代码贴给 AI，并把问题压缩成一句带复现步骤的描述：“这个页面在 1080px 宽度下，底部导航会遮挡正文。可能和 .nav 的 fixed 定位有关，我已经在样式里启用了 z-index，但依然被遮挡。请帮我检查父容器和定位上下文。”

当连续让 AI 修同一个问题都失败时，先别继续对话，而是整理问题描述并重开会话。给 AI 一个干净的开始，往往比在旧上下文里继续纠缠更有效。

给 AI 足够具体的错误描述，比连续问“为什么不对”有效得多。同时也说明一个问题：当工具不稳定时，你要做的不是更用力地使用工具，而是停下来整理问题、缩小范围。

6.4 什么时候要放弃当前方案

最后一条边界判断：如果一个页面改动超过十几轮，而每次修改都在破坏别处，很可能不是因为 AI 笨，而是因为你选择的方案结构不适合这个需求。比如你让 AI 在纯 HTML 页面里实现复杂路由和状态管理，它即使能生成，代码也会越来越难维护。

此时建议重开项目，换一种技术栈或页面结构，把上一次得到的视觉方向作为“样式参考”带过去。保留设计方向，重构底层结构，比在歪斜的地基上继续垒墙更重要。

7. 沉淀一套属于自己的 Vibe Coding 方法

7.1 建立个人“好设计”样例库

使用 Vibe Coding 做得越久，你越会发现：审美判断是有复利效应的。把平时看到的好网站、好配色、好排版保存下来，整理成一个笔记或文件夹，分类可以包括“版式参考”“字体搭配”“色彩方案”“交互动效”。下一次开新项目时，你不用从零描述，直接从中挑几张截图作为情绪板。

这个样例库是你的审美参照系，也是你和 AI 沟通的“词典”。当 AI 不理解你说的“安静”时，你可以从样例库里给它一张图片；当 AI 生成的风格太花哨时，你可以从样例库里找一张更“素”的作为反向示例。随着样例库越来越丰富，你的 Vibe Coding 效率也会明显提升。

7.2 写一份“提示词模板”，但不要被它限制

在你做过两三个站点后，可以写一份自己的“项目启动提示词模板”，大体长这样：

[项目定位] 个人博客 [设计气质] 安静、杂志感、留白充足 [颜色范围] 暖灰背景 + 深灰文字 + 一个琥珀色强调色 [字体系列] 标题用思源宋体，正文用系统无衬线，行距 1.8 [首页内容] 标题区、一句话简介、最新文章列表、订阅入口 [其他页面] 文章页、关于页 [技术偏好] 纯静态，不引入重型框架

模板能帮你减少重复输入，也能保证每个项目都有清晰起点。但模板不能替代每次的判断。不同网站的目标不同，你不应该把一个博客的提示词原样套到作品集上。更合理的用法是：把模板当作检查清单，每次开始前先逐项回答一遍，再基于回答和 AI 对话。这样既稳定，又不会僵硬。

另外，建议记录哪些提示词有效、哪些无效。你会慢慢发现一些自己的“高频表达”：比如我常用“更大的留白”或“更克制的信息层级”来描述方向。这些表达在别人眼里可能不够精确，但因为你已经和同一个模型建立了反馈循环，它反而成为你个人工作流里的一部分。

7.3 从个人项目到长期生产力

个人网站看起来是个小项目，但它几乎覆盖了前端开发、内容组织、设计系统、部署发布、迭代维护的完整链路。只要你愿意把它当成一个“可持续打磨的项目”，它会带给你比一个页面本身更多的东西：你会理解一个按钮的 hover 效果如何影响整体气质，会知道为什么同样的代码在本地和线上表现不同，也会习惯在每一次改版前先问“这次想解决什么”。

我一般会把整个流程压缩成五步：定位 -> 三句话设计方向 -> 最小可行页面 -> 逐模块迭代 -> 部署与复盘。每次开始新项目时，我都会先走一遍这五步，它看起来简单，却能避免大部分“AI 生成后不知道从哪改起”的困境。

这些经验会迁移到工作里，也会让你以后学新工具时拥有更好的判断力。Vibe Coding 最有价值的产物，可能不是一个漂亮的个人网站，而是那套你用来描述感觉、验证结果、修正方向的方法。工具更新很快，方法不会。

所以回到最开始的问题：用 Vibe Coding 做有设计感的个人网站，真正要练的并不是提示词技巧。它更像是一种“有方向感的试错”：把模糊的审美直觉，转化成可执行的变量；把一次性的页面，打磨成可持续维护的小系统。如果你现在正要动手，我的建议是从最小页面开始，先写三句话确定方向，再让 AI 生成第一版，然后一次只改一个变量。过程中不要追求一步到位，设计感会在迭代里慢慢长出来。

下次打开 AI 对话框之前，先问自己一个问题：这个页面最需要立住的，是排版、是字体、是颜色，还是那个让人想点下去的按钮？想清楚了再开始，Vibe Coding 会很有意思。