用Vibe Coding从零搭建个人网站：全流程实战指南

Vibe CodingAI编程个人网站

于 2026-08-30 04:09:28 修改

·本内容遵循CC 4.0 BY-SA版权协议

最近用 Vibe Coding 的方式重新做了一遍自己的个人网站，整个过程比我预想的要顺畅，中间也踩了不少有意思的坑。这篇文章把从想法到上线的完整过程整理出来，包含工具选型、Prompt 写法、代码生成、部署上线的全流程，以及几个容易翻车的细节。

如果你正在纠结个人网站怎么做、想试试让 AI 帮你写代码，或者已经在 Vibe Coding 但经常改着改着就崩，那这篇文章应该能给你一个相对完整的参考。

1. 什么是 Vibe Coding（背景与核心概念）

1.1 Vibe Coding 是什么

Vibe Coding 是这两年 AI 编程领域非常流行的一个说法。通俗点讲，就是你不再像传统开发那样逐行手写代码，而是用自然语言把你想要的功能描述给 AI，让 AI 帮你完成代码生成、修改和排错。

这个说法的流行和 AI 代码生成能力的大幅提升关系很大。最早提出这个概念的人把它描述为一种“凭着感觉写代码”的状态：你有一个想法，把它说清楚，然后 AI 负责把想法翻译成代码，你再通过运行效果来反馈，告诉 AI“哪里不对”“改成什么样”，反复迭代直到满意。

它和我们常说的 AI 辅助编程有一点区别：

AI 辅助编程更偏“副驾”角色，核心代码还是开发者自己写，AI 负责补全。
Vibe Coding 更偏“主驾”角色，你负责描述方向、审核结果、把握边界，AI 负责大部分代码实现。

作为个人开发者和内容创作者，这种模式特别适合用来做个人网站，因为它不需要你从零手写 HTML、CSS、JavaScript，也不需要你掌握很深的框架知识，只要能把需求表达清楚，就能得到一个能跑、能看、能部署的成果。

1.2 Vibe Coding 与传统开发的区别

为了更清楚地理解 Vibe Coding，我用个人网站开发来做一个对比。

传统开发流程通常是这样的：

确定技术选型，比如用 Vue 还是 React，还是单纯 HTML。
搭建工程化环境，安装依赖、配置构建工具。
手动编写页面结构、样式、交互逻辑。
处理浏览器兼容、响应式布局、路由跳转。
本地测试通过后，再到服务器或平台上部署。

Vibe Coding 的开发流程变成了这样：

用一句话描述你的网站目标，比如“做一个展示个人作品的主页”。
AI 自动生成项目结构、页面代码、样式和基础交互。
你打开浏览器预览，点击看看效果。
发现不满意的地方，用自然语言反馈给 AI，比如“导航栏太挤”“配色太暗”“卡片改成三列布局”。
反复几轮后，代码质量基本达到可用状态。
直接部署上线或继续叠加功能。

最大的变化不是“代码少了”，而是“开发重心转移了”。你不再需要把所有精力花在语法和框架细节上，而是花在需求表达、方案判断和效果验收上。

1.3 为什么适合做个人网站

个人网站是一个很适合 Vibe Coding 的实践场景，原因有三点：

第一，需求边界清晰。个人网站通常就几个页面：首页、关于我、作品集、联系方式。功能不会无限膨胀，AI 很容易理解。

第二，技术栈可控。个人网站技术栈一般是 HTML、CSS、JavaScript，或者选一个轻量框架。这些内容在 AI 的训练数据里非常充足，生成质量高。

第三，验证成本低。个人网站的验证标准是“看起来舒服”“链接能跳”“部署后能访问”，不涉及复杂的业务逻辑和大量数据处理，非常适合快速迭代。

如果你刚开始接触 Vibe Coding，个人网站几乎是最好的第一个练手项目。

2. 环境准备与工具选型

2.1 AI 编程工具选择

Vibe Coding 的体验很大程度上取决于你用哪个 AI 编程工具。目前主流的有这么几类。

第一类是 AI 代码编辑器，比如 Cursor、Windsurf、Trae 这类带 AI 对话能力的编辑器。它们的特点是你能在熟悉的编辑器界面里让 AI 直接修改整个文件，也可以框选一段代码让它解释或重构，交互效率很高。

第二类是通用大模型对话工具，比如 ChatGPT、Claude、通义千问、DeepSeek 这类聊天产品。它们适合用来生成整段代码、解释概念、排查报错。缺点是拿到的代码需要自己粘到本地文件里，迭代时反馈链路没那么顺畅。

第三类是垂直的 AI 建站平台，比如 Vercel 生态下的 v0、常见的一些 AI 网页生成工具。这类平台把“对话生成”和“在线预览部署”绑定在一起，生成的页面可以直接部署上线，适合不想碰本地环境的人。

我的建议是，如果你能接受简单的本地环境，优先选择 AI 代码编辑器加通用大模型的组合，灵活度最高。如果完全不想装工具，那就直接用在线建站平台。

2.2 部署平台选择

个人网站部署平台，我这次选的是 Vercel。

Vercel 是一个前端部署平台，它的核心优势是：

支持从 GitHub 仓库自动部署，只要把代码推到指定分支，平台会自动拉取、构建、发布。
自带 HTTPS 证书，不需要自己配置证书。
支持自定义域名，绑定很快。
有免费套餐，个人网站基本够用。
对 Next.js、Vue、React 等前端框架支持很好。

当然，如果你更熟悉国内环境，也可以选择阿里云 OSS 静态网站托管、腾讯云 COS、Gitee Pages 这些方案。静态个人网站本质上就是一坨 HTML、CSS、JS 文件，哪里都能托。

2.3 本地开发环境准备

如果你打算用 AI 代码编辑器加本地开发的方式，本地环境很简单。

操作系统层面，Windows、macOS、Linux 都可以。需要准备的东西有：

Node.js 运行时。个人网站如果涉及构建工具，比如 Vite，就需要 Node.js。版本建议用 LTS 版本，具体按你的系统提示安装即可，不需要追求最新。
Git。用于版本管理和后续关联部署平台。
AI 代码编辑器，比如 Cursor。
一个现代浏览器，用于预览调试。

不需要提前安装数据库、不需要配置服务器，起步成本非常低。

3. Vibe Coding 的核心工作流

3.1 描述需求的 Prompt 写法

Vibe Coding 最重要的能力不是写代码，而是把需求讲清楚。很多人在第一步就翻车，原因是给 AI 的需求太模糊。

举个反例：

TEXT

帮我做一个个人网站。

这种描述信息量太少，AI 无法判断你想要什么风格、什么内容、什么布局，只能给出一堆通用模板，你拿到的显然不是自己想要的东西。

更好的写法是提供足够的上下文，包括：

网站目标：是求职用、作品展示用、还是博客用。
目标用户：访客是 HR、客户、朋友还是陌生人。
风格倾向：简约、复古、科技感、手绘风。
内容模块：需要哪些区块。
技术偏好：有没有指定的框架或部署方式。
参考案例：如果有喜欢的网站，描述一下它给你留下的印象。

结合这些信息，我当时的 Prompt 是这么写的：

TEXT

我想做一个个人网站，目标是展示我的项目作品和技术博客。

访客可能是招聘方的 HR，也可能是同行开发者。

整体风格希望简洁清爽，带一点科技感，主色调用蓝白灰。

页面分为四个部分：顶部导航、个人简介、作品集、联系方式。

不需要登录注册，不需要后台，静态页面即可。

技术栈可以选 React 和 Tailwind CSS，最后要部署到 Vercel。

首页要有一个很吸引人的 Hero 区域。

这个 Prompt 明确给了目标、受众、风格、模块、技术栈和部署目标，AI 生成出来的代码就非常有针对性。

3.2 迭代与纠错

Vibe Coding 不是一锤子买卖，AI 第一次生成的页面通常只能达到及格水平。真正让页面“有趣”的，是后面一轮又一轮的修改。

迭代的方式有两种。

一种是整体反馈，比如：

TEXT

首页现在的信息密度太低，Hero 区域太空了，帮我增加一个打字机效果的标语。

另一种是局部反馈，选中一段代码或一个组件后说：

TEXT

这个卡片区域的间距不一致，卡片高度也参差不齐，请统一成两列布局，并让每张卡片的高度保持一致。

在迭代过程中有一个经验非常重要：一次只提一个核心诉求。

不要在一次反馈里塞三四个修改点，AI 经常改完一个忘掉另一个，或者改到最后代码飘了。小步快跑，每轮确认一个效果，反而整体速度更快。

3.3 如何让 AI 生成稳定代码

Vibe Coding 最让人头疼的问题是，AI 改着改着会把原来能跑的代码改坏。这种情况我遇到很多次，后来总结出几条经验。

第一，让 AI 在修改之前先说明思路。不要直接说“改一下”，而是说“这个布局想改成左右结构，你觉得怎么改比较合理”？AI 先讲方案，你再让它动手，改动质量会高很多。

第二，要求 AI 尽量复用现有代码。如果网站已经有一套 Card 组件，你新增内容时让 AI “基于现有 Card 组件扩展”，而不是“重新写一套”。

第三，及时把能跑的版本提交到 Git。每次 AI 改完一轮，只要页面效果是正常的，就立刻提交一次。这样后面改崩了也能随时回来。

第四，要求 AI 给你解释关键代码。不是所有 AI 生成的代码你都看得懂，但至少要让 AI 在交付代码的同时说明这个文件的作用、关键函数做什么、哪些地方改起来需要注意。这样出了问题你能快速定位。

4. 完整实战：用 Vibe Coding 搭建个人网站

接下来进入实操部分。我以一个个人作品展示网站为例，完整走一遍从需求到部署的流程。

4.1 明确网站需求

先确定需求：

网站类型：个人作品展示站。
页面数量：单页站，一个页面内包含四个模块。
模块划分：导航栏、Hero 区、作品展示区、关于我和联系方式。
视觉风格：深色背景，带一点渐变高光，霓虹色点缀。
技术栈：原生 HTML、CSS、JavaScript。
部署目标：Vercel。

选原生三件套而不是 React，是为了让生成结果更轻量、不依赖构建过程，任何环境下都能直接跑。如果你熟悉框架，也可以让 AI 生成 React 版本。

4.2 用 AI 生成项目骨架

我和 AI 的对话是这样的：

TEXT

先生成一个单页个人作品网站的项目骨架，使用原生 HTML、CSS、JavaScript，不要引入构建工具。

项目的目录结构如下：

- public/index.html

- public/css/style.css

- public/js/main.js

请先创建一个清晰易扩展的项目结构，并生成基础页面框架。

AI 生成的目录结构看起来是这样的：

BASH

my-portfolio/

├── public/

│ ├── index.html

│ ├── css/

│ │ └── style.css

│ └── js/

│ └── main.js

└── vercel.json

这个结构很简单，public 目录存放静态资源，vercel.json 最后用于部署配置。

4.3 编写页面核心代码

为了让你看到实际效果，我分享一下 AI 生成后我们共同迭代出来的核心代码。这里只展示关键部分，完整代码以你实际生成结果为准。

首先是 public/index.html，这是页面的主体结构：

HTML

<!DOCTYPE html>

<head>

<title>My Vibe Portfolio</title>

</head>

<body>

</ul>

</nav>

<p class="hero__subtitle">前端开发者 / 独立创作者</p>

</header>

<p>这是一个 AI 辅助生成的个人网站项目。</p>

</article>

<p>一个简洁的待办事项管理页面。</p>

</article>

</div>

</section>

<p>热爱前端技术，喜欢用 AI 工具提升开发效率。</p>

</section>

<p>邮箱：hello@example.com</p>

<p>GitHub：github.com/example</p>

</footer>

</body>

</html>

然后是 public/css/style.css 的核心样式：

CSS

/* 文件路径：public/css/style.css */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: system-ui, -apple-system, sans-serif;

background: #0f172a;

color: #e2e8f0;

line-height: 1.7;

}

.navbar {

position: fixed;

top: 0;

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 2rem;

background: rgba(15, 23, 42, 0.9);

backdrop-filter: blur(8px);

z-index: 100;

}

.navbar__menu {

display: flex;

gap: 1.5rem;

list-style: none;

}

.navbar__menu a {

color: #e2e8f0;

text-decoration: none;

transition: color 0.3s;

}

.navbar__menu a:hover {

color: #38bdf8;

}

.hero {

min-height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

}

.hero__title {

font-size: 3rem;

background: linear-gradient(90deg, #38bdf8, #818cf8);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.hero__type {

margin-top: 1rem;

font-size: 1.25rem;

color: #94a3b8;

}

.section {

max-width: 960px;

margin: 0 auto;

padding: 4rem 1.5rem;

}

.card-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 1.5rem;

margin-top: 2rem;

}

.card {

padding: 1.5rem;

border-radius: 12px;

background: #1e293b;

border: 1px solid #334155;

transition: transform 0.3s, border-color 0.3s;

}

.card:hover {

transform: translateY(-4px);

border-color: #38bdf8;

}

最后是 public/js/main.js 里的打字机效果：

JAVASCRIPT

// 文件路径：public/js/main.js

const typingElement = document.getElementById('typing');

const phrases = [

'我喜欢用 Vibe Coding 构建有趣的小项目。',

'这里是我的作品集。',

'欢迎和我交流前端与 AI 开发。'

];

let phraseIndex = 0;

let charIndex = 0;

function type() {

if (charIndex < phrases[phraseIndex].length) {

typingElement.textContent += phrases[phraseIndex][charIndex];

charIndex++;

setTimeout(type, 80);

} else {

setTimeout(erase, 2000);

}

function erase() {

if (charIndex > 0) {

typingElement.textContent = phrases[phraseIndex].slice(0, charIndex - 1);

charIndex--;

setTimeout(erase, 40);

} else {

phraseIndex = (phraseIndex + 1) % phrases.length;

setTimeout(type, 300);

}

type();

这三段代码合在一起，就是一个能跑的静态页面：深色背景、渐变标题、可点击的导航、响应式卡片布局，还有一个自动切换内容的打字机效果。整个过程中，我只在 AI 生成的基础上调整了文案和个别样式细节，核心代码基本由 AI 完成。

4.4 本地预览与调整

把项目在本地跑起来非常简单。因为项目是纯静态页面，不需要 npm install，只需要一个静态服务器。

如果你安装了 Python，可以在项目根目录执行：

BASH

cd public

python -m http.server 8080

然后打开浏览器访问 http://localhost:8080。

如果你更习惯 Node.js，也可以用 npx 启动：

BASH

npx serve public

启动之后，我在浏览器里预览了一遍，发现两个问题：

移动端导航菜单没有做折叠，窄屏下会变得很挤。
Hero 区域的打字机文字在较慢的设备上闪烁明显。

我把这两个问题依次反馈给 AI。AI 给移动端导航加了一个汉堡按钮，并给打字机效果增加了更平滑的淡入淡出动画。这里就是前面说的小步迭代，两个问题分两轮处理，每一轮改完都看一次效果。

4.5 部署到 Vercel

本地效果满意之后，进入部署环节。我推荐使用 Vercel，流程很短。

第一步，在项目根目录创建 vercel.json。

JSON

{

"cleanUrls": true

}

对于纯静态项目，这个配置不是必须的，cleanUrls 的作用是让路径 about 能直接访问而不用写 about.html。如果是单页应用，可能需要加入 SPA 重写规则：

JSON

{

"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]

}

单页应用的历史路由模式需要所有请求回退到 index.html，这个配置就是为了解决部署后刷新页面出现 404 的问题。

第二步，把代码推到 GitHub 仓库：

BASH

git init

git add .

git commit -m "feat: portfolio site generated with vibe coding"

git branch -M main

git remote add origin https://github.com/yourname/my-portfolio.git

git push -u origin main

第三步，在 Vercel 控制台导入这个仓库。

点击 Deploy，等待一两分钟，Vercel 会返回一个 https://xxx.vercel.app 的域名。

如果你有自定义域名，可以在项目设置的 Domains 里添加。Vercel 会自动申请和续期 HTTPS 证书，不需要手动操作。

部署完成后，打开线上地址，能正常看到页面，导航能跳转，打字机效果正常，那么一个 Vibe Coding 个人网站就算正式上线了。

5. 常见问题与排查思路

Vibe Coding 流程中的坑，我总结下来主要有下面几类。

问题现象	常见原因	解决思路
页面布局错乱	AI 生成的 CSS 选择器层级冲突	让 AI 使用更具体的 class 命名，检查是否有重复定义
部署后刷新 404	单页应用路由未配置回退	在 vercel.json 中添加 rewrites 回退到 index.html
图片显示不出来	图片路径写成了绝对路径或相对路径错误	检查 HTML 中路径与 public 目录结构是否一致
AI 改一个功能导致其他功能失效	一次迭代修改范围过大	小步提交，每轮只改一个点，改完立刻验证
页面在手机端错位	缺少 viewport 配置	检查 head 中是否有 meta viewport 标签
字体图标不显示	引入方式不对或网络加载失败	优先使用 SVG 或系统字体，避免依赖外链资源
本地预览正常但线上空白	部署时输出目录配置错误	在 Vercel 中确认 Output Directory 是否指向 public
AI 生成代码使用了不存在的 API	模型幻觉	要求 AI 给出代码对应的文档依据，或手动验证接口

这里挑几个重点展开说一下。

第一个是 SPA 刷新 404。如果你是单页应用，本地开发时路由跳转一切正常，但部署到 Vercel 后，你在根路径点进子路由，再刷新，就出现了 404。原因是 Vercel 服务器上并没有对应的物理文件。解决办法就是在 vercel.json 里加 rewrite 规则，让所有请求都回到 index.html。

第二个是 AI 改坏已有功能。这几乎是每个 Vibe Coding 新手都会遇到的问题。第一次修改很顺利，第二次也正常，第三次 AI 为了一个小功能把整个组件重写了，老功能全部失效。我的经验是，每次 AI 改完，立刻在浏览器里跑一遍完整流程，发现问题马上回滚到上一个 Git 提交，重新让 AI 用更小范围的方式修改。

第三个是外部资源引用问题。AI 经常会把 Google Fonts、CDN 图标库这类外部资源直接写进代码。在国内网络环境下，这些资源加载很慢甚至失败，导致字体和图标看起来很怪。建议在 Prompt 里明确要求“不要依赖外部 CDN 资源”，或者让 AI 改成系统字体加内联 SVG 图标。

6. 最佳实践与工程建议

6.1 Prompt 工程建议

Vibe Coding 的工作质量，天花板就是你的描述能力。几个实用的建议：

关于结构，一个好的 Prompt 应该包含角色、目标、受众、风格、功能清单、技术约束、参考案例。缺信息时，可以先让 AI 问你问题，而不是让它猜。

关于反馈，描述问题时要具体到元素和位置。说“第三个卡片标题的颜色太刺眼”比“整体颜色不好看”有用得多。

关于约束，像“不要修改导航栏”“不要动现有的 CSS 变量”这类限制条件要写在反馈开头，AI 才更容易遵守。

6.2 代码审查与安全

AI 生成的代码不能直接上生产，至少要过一遍基础的安全审查。

第一，检查有没有硬编码的敏感信息。AI 在生成示例时可能顺手在代码里写下 API Key、密码、Token。部署到公开仓库前，必须全局搜索这些关键词。

第二，不要把 GitHub 仓库设为公开时包含敏感内容。个人网站如果只是展示作用，静态页面一般问题不大，但如果接了评论区、表单、第三方服务，就要注意后台接口的鉴权。

第三，表单提交类功能要确认有后端校验。单纯前端校验是不安全的，任何用户输入都可能被构造绕过。

个人网站虽然小，但安全边界意识最好从一开始就建立起来。

6.3 版本管理与可维护性

Vibe Coding 项目同样需要版本管理。建议习惯：

每个可运行状态打一个 Git 提交，提交信息写清楚这次改了什么。
大改动前先开一个分支，确认没问题再合并到主分支。
不要让 AI 一次性生成几百行代码不提交，出了问题很难定位。

维护性方面，要求 AI 输出带注释的代码，并且保持组件化思维。即使只是静态页面，也可以把 Hero、Card、Footer 拆成独立文件或独立函数，后续改动更安全。

6.4 性能与 SEO

个人网站虽然小，但性能和 SEO 基础建议顺手做了。

图片使用现代格式，并设置宽高属性，避免布局偏移。字体不要引用多个外链字体文件，中文字体建议直接用系统字体栈。页面首屏内容尽量精简，不要为了炫技堆砌大量动画。

SEO 基础主要是三点：

每个页面有自己的 title 和 description。
重要内容放在语义化标签里，比如 h1、nav、article。
加上 <meta name="viewport"> 确保移动端体验正常。

这些优化点不需要太多代码，但对网站收录和用户体感很有帮助。

7. 总结与后续学习方向

这次用 Vibe Coding 做个人网站，我最大的感受是，开发的重心已经变了。

过去做一个网站，要先会 HTML、CSS、JavaScript，再学框架、打包工具、部署流程，一套下来至少一两周。现在，只要能把需求讲清楚，AI 就能把大部分代码写出来，你需要做的是验证效果、发现问题、描述问题，然后再次交给 AI。这不是说基础知识不重要了，恰恰相反，正因为你懂一些前端基础，才能判断 AI 生成的代码对不对、改的方案是否合理、部署报错该怎么排。Vibe Coding 更像是一个放大器，它放大的是你的判断力和审美。

如果你准备上手试一下，我建议按这个路线走：

第一轮，做一个最简单的静态个人主页，只包含头像、简介、一个链接按钮。走通从生成到部署的完整流程。

第二轮，增加作品展示区和博客模块，练习用自然语言描述布局和交互。

第三轮，尝试引入一个轻量框架，比如 Vue 或 React，体验组件化开发中 Vibe Coding 的迭代方式。

第四轮，可以给网站加上表单收集、暗黑模式切换、访问统计这些小功能，练习和第三方服务的集成。

如果你在过程中发现 AI 生成的代码质量不稳定，别灰心，这通常不是你的问题，而是 Prompt 表达得还不够具体。把需求拆细一点，反馈改小一点，质量会明显提升。

如果你也想做一个自己的个人网站，欢迎用这套思路试试。打开一个 AI 工具，写下你的第一条需求，剩下的，就是一轮一轮把它打磨成你想要的样子。