Vibe Coding 这个说法近两年在开发圈已经不算陌生，但真正把它落到“有设计感的个人网站”这个场景，很多人还是没跑通完整链路。它指的不是某一种特定语言或框架，而是用自然语言描述需求，让 AI 完成大部分编码工作，再通过持续对话逐步调优的开发方式。放到个人网站里，好处很直接：你不需要把 CSS 网格、响应式布局、交互动画全部背熟，也能在几小时内得到一个设计感不错、并且能免费部署上线的站点。
这篇文章围绕“如何 Vibe Coding 有设计感的个人网站”展开，覆盖提示词设计、技术选型、本地预览、功能测试、Vercel 免费部署和域名配置的完整闭环。适合三类读者：零基础但想快速上线个人主页的创作者；想用 AI 辅助完成作品集或导航站的开发者；已经会写基础 HTML，但想把视觉细节和部署流程补齐的前端新手。
先给结论：Vibe Coding 特别适合把“个人网站”当作第一个练习项目，因为它覆盖完整——页面布局、响应式、SEO、交互、部署、域名，几乎每个环节都能借助 AI 快速推进。但不要指望 AI 生成完直接上线，最关键的其实是验证和部署部分：样式是不是稳定、移动端是否错乱、链接路径是否对、部署后有没有 404。后面这些环节才是这篇内容的重心。
1. Vibe Coding 个人网站核心能力速览
| 能力项 | 说明 |
|---|---|
| 开发方式 | 自然语言对话驱动，AI 输出 HTML/CSS/JS 或项目级代码 |
| 面向人群 | 零基础创作者、设计师、前端初学者、想快速迭代的工程师 |
| 技术门槛 | 极低，能说清需求就能上手；理解 Web 基础概念会更好 |
| 成本 | 开发阶段可使用主流 AI 编程工具；部署阶段可用 Vercel / GitHub Pages 免费额度 |
| 主要产出 | 个人主页、作品集、导航站、博客页面、落地页、简历页 |
| 核心难点 | 视觉一致性、代码回归、部署配置，而不是“写出第一行代码” |
| 适合场景 | 个人品牌展示、作品集、导航站、活动落地页、简历型站点 |
从实操角度，我把它拆成四个关键能力：需求描述、AI 生成、迭代调优、部署验证。流程跑通以后，第二次做网站的时间会成倍减少，后面你完全可以基于同一套 workflow，去改造成导航站、作品集、甚至轻量博客。
需要提醒一点：Vibe Coding 门槛低，但建议还是理解几个基础概念。HTML/CSS 负责结构和样式，JavaScript 负责交互，Git 负责版本管理，部署平台负责把文件变成公网地址。理解这些概念不是让你去背文档，而是为了在 AI 输出错误、页面白屏、部署失败时，你能向 AI 准确描述问题。
2. Vibe Coding 建站适用场景与使用边界
Vibe Coding 不是万能方案，它在个人网站场景里优势明显，但边界同样要清楚。
适合的场景：
- 个人主页：展示你是谁、你的经历、你的项目，单页就够。
- 作品集：用卡片形式展示设计、文章、代码、视频等，适合设计师和内容创作者。
- 导航站：把常用工具、学习资料、灵感链接分类整理，做成个人导航页。
- 活动落地页：一个独立页面承载活动信息、报名入口、二维码。
- 轻量博客：用 Vite/Astro 搭配 Markdown，自动化生成文章列表和详情页。
不适合或需要小心的场景：
- 带登录、支付、数据库的复杂业务系统：AI 能生成原型，但权限、安全和数据一致性很难保证。
- 强隐私需求的应用：涉及用户上传、个人数据收集，需要有后端和隐私设计经验，不建议只靠 AI 生成。
- 像素级定制的品牌官网：AI 可以接近最好效果，但精细设计还原仍需要人工调整。
- 高并发或强 SEO 型站点：静态站基本可以，但动态内容和服务端渲染仍需深入配置。
使用边界方面，有几个点特意说一下。Vibe Coding 会生成代码，但代码的版权来源需要自己注意；做网站时如果使用图片、字体、图标，尽量选可商用授权或自备素材；如果页面有表单、收藏夹、评论功能，不要收集超过必要的用户信息，也不要在未经授权的情况下展示他人作品或照片。涉及 AI 教程和导航站时，不要做成仿冒官方、仿冒知名产品的页面，避免产生侵权和误导风险。
3. 免费个人网站技术选型与前置环境
3.1 技术选型
| 方案 | 特点 | 适合 |
|---|---|---|
| 单个 HTML 文件 | 结构最简单，CSS/JS 内联，文件即页面 | 零基础第一步、导航页、落地页 |
| Astro / Vite 静态站 | 组件化、支持 Markdown、构建快速 | 想认真经营个人博客或作品集 |
| Next.js | 可扩展接口、SSR 强、SEO 好 | 有后端或内容动态化需求 |
| WordPress + XAMPP | 传统建站方式，本地导入主题、后台管理 | 已经熟悉 WordPress 的创作者 |
| 个人导航网站模板 | 基于开源模板改颜色和栏目 | 想快速得到一个导航页 |
个人建议：第一次尝试 Vibe Coding 建站，从“单个 HTML 文件”或“Vite 静态站”开始，不要一上来就选择完整框架。单文件方案对 AI 对话窗口最友好，生成完直接双击就能看；Vite 方案适合你确定要长期维护这个网站，需要组件化、自动构建、批量部署。
另一种常见路径是 WordPress 加 XAMPP 本地建站，如果你已有现成主题，可以通过导入主题和插件的方式建立个人博客。这种方法适合已经习惯后台管理、不想碰代码的人。不过 Vibe Coding 的直接优势在于快速生成结构和样式，WordPress 的动态模板反而会限制这种自由发挥，所以本文主流程仍然推荐静态站方案。
3.2 前置环境检查清单
- 一个 GitHub 账号：用于存代码，也是大部分免费部署平台的基础。
- 一个 Vercel 或 Netlify 账号：负责构建和分发你的网站。
- Node.js：可选，但推荐安装当前 LTS 版本，给本地预览和构建工具用。
- VS Code 或其他编辑器：有内置终端和插件，体验更好。
- 浏览器 DevTools：验证页面、查看报错、模拟移动端。
- 一套 AI 编程工具：ChatGPT、Claude 或其他主流工具都可以，能输出代码就行。
这些环境基本都是免费的。你不需要买服务器，不需要域名也能先跑通流程，最后再决定是否绑一个自己的域名。
3.3 目录规划建议
my-personal-site/ ├── index.html ├── assets/ │ ├── css/style.css │ ├── js/main.js │ └── images/ └── README.md即使 AI 一次只给了单个文件，也建议把它放进规范目录。后面如果页面变多，这个结构能避免一团糟。
4. Vibe Coding 建站完整工作流
4.1 第一步：把设计需求写成提示词
Vibe Coding 的关键不是直接说“做一个网站”，而是把设计需求、内容结构、交互效果、目标用户拆开描述。AI 对模糊需求的猜测空间很大，提示词写得越具体，生成结果越稳定。
这里给一个可以直接复制修改的示例：
请帮我生成一个个人主页网站，单页结构，风格定为： - 极简、留白多，主色调为深蓝 #0F172A 搭配白底 - 板块包括：Hero区、关于我、作品展示、联系方式 - 字体使用系统无衬线字体，避免加载额外字体文件 - 页面在手机、平板、桌面三个尺寸下必须正常显示 - 交互要求：Hero区标题有渐入动画，作品卡片 hover 时上浮 - 不需要登录和后台 输出时请使用单一 HTML 文件，CSS 和 JS 内联，并在关键样式处加中文注释。提示词里最核心的四个要素是：风格关键词、内容结构、交互细节、技术约束。如果你要做个人导航网站，可以把“作品展示”换成“常用导航链接”，再加一句“按分类两列展示，每个分类带图标”。如果你想做作品集，就补充“每个作品卡片包含封面、标题、关键词、外链”。
4.2 第二步：生成项目骨架
在第一轮生成后，AI 通常只输出一个 HTML 文件或若干代码片段。你需要让它补全文件目录和整体结构。
请把上述页面按标准项目结构输出，包括： - index.html - assets/css/style.css - assets/js/main.js - assets/images/README.txt - README.md 所有相对路径都要正确，图片使用占位链接。这样做的好处是，后续改动样式和逻辑时，AI 能准确定位到具体文件，而不是反复生成整个页面。生成的骨架符合预期后，再进入迭代阶段。
4.3 第三步：持续对话迭代
Vibe Coding 的“Vibe”就体现在这一步：你不必一次确认所有细节，而是像和同事沟通一样，一轮一轮调整。常见对话方式包括：
Hero 区文案太长了，压缩到 10 个字以内，副标题保留两行。 作品卡片在移动端显示成单列，间距缩小到 12px。 导航栏滚动后加半透明背景，不要影响阅读。 “关于我”区域加一张圆形头像占位图，使用灰色背景。迭代时建议一次只提 1 到 3 个改动点，改动过多会导致 AI 生成结果不稳定。每轮改完，立刻在本地预览确认，通过后再输入下一轮需求。
4.4 第四步：本地预览
本地预览是上线前最重要的一步。最简单的方式是直接双击 HTML 文件，浏览器会打开本地静态页面。如果页面引用了多个 CSS/JS 文件，推荐用本地 HTTP 服务方式：
cd my-personal-site python -m http.server 8080然后浏览器访问：
http://localhost:8080如果你用 VS Code，也可以安装 Live Server 插件，右键 index.html 选择 Open with Live Server，它能自动刷新页面，改完代码立刻看到效果，非常适合 Vibe Coding 的快速迭代场景。
4.5 第五步：代码审查后部署
部署前即使代码是 AI 生成的，也建议人工过一遍关键点：
- 页面是否引入了不认识的第三方脚本，来源是否可信。
- 图片、CSS、JS 是否使用相对路径，避免部署后资源 404。
- meta 标签是否完整、标题描述是否符合内容。
- 是否意外暴露了个人信息、API Key、邮箱地址等敏感信息。
- 页面内容是否真实、没有编造项目经历或成果。
确认完这些，再进入部署流程。
5. 个人网站功能测试与效果验证
AI 生成的页面，功能测试不能跳过。即使视觉上看着没问题，也可能在移动端、SEO 或者交互上出问题。
5.1 响应式布局测试
打开浏览器 DevTools，切换设备模拟器，分别测试 375px、768px、1440px 三档宽度：
- 导航栏是否折行或遮挡。
- 文字和卡片是否有横向滚动。
- 图片是否被拉伸或裁切。
- 按钮和链接是否方便点击。
如果发现问题，直接把问题描述给 AI：
在移动端 375px 宽度下，导航菜单四个链接挤在一起，请改成汉堡菜单或竖向排列。5.2 SEO 基础验证
个人网站要能被搜索引擎正确收录，基本信息要完整。检查 HTML 的 head 区域是否包含以下内容：
<title>个人主页 - 作品集与导航</title> <meta name="description" content="个人作品集网站，展示设计与开发项目"> <meta property="og:title" content="我的个人主页"> <meta property="og:description" content="在这里了解我的项目和作品"> <meta property="og:type" content="website">可以告诉 AI：
请为页面补全 SEO 标签，包括 title、description、og:title、og:description。5.3 交互与链接测试
逐个点击页面里的所有链接，确认：
- 站内锚点能否跳转到对应板块。
- 外链是否新窗口打开，并添加
target="_blank"和rel="noopener"。 - 图片链接是否有效，没有出现破损图片图标。
- 如果页面有表单，确认没有收集多余信息，并保证可提交路径合理。
# 本地验证页面是否能正常返回 curl -I http://127.0.0.1:8080预期返回类似：
HTTP/1.1 200 OK如果返回 404，检查文件路径和文件名。
5.4 页面性能测试
用 Chrome DevTools 的 Lighthouse 做一次性能检查，重点关注性能、SEO、最佳实践三项分数。一般来说，个人网站性能分数在 80 分以上就够用。分数偏低时，优先检查图片体积和字体加载。
请把页面中所有未压缩图片替换为占位图，并给图片加上懒加载属性 loading="lazy"。5.5 功能测试表格
| 测试项 | 操作方法 | 预期结果 | 异常处理 |
|---|---|---|---|
| 页面打开 | 本地访问 index.html | 首屏正常渲染，无白屏 | 查看 Console 报错 |
| 响应式 | DevTools 模拟三档宽度 | 无横向滚动，布局不重叠 | 检查 media query |
| 锚点导航 | 点击导航链接 | 平滑滚动到对应板块 | 检查 id 是否重复 |
| 图片资源 | 查看 Network 面板 | 全部 200，无损坏 | 检查相对路径 |
| SEO 信息 | 查看 head 区域 | title/description 完整 | 补充 meta 标签 |
| 交互动画 | 刷新页面 | Hero 标题渐入 | 检查 JS 是否加载 |
6. 免费部署到 Vercel 与自定义域名
6.1 为什么选择 Vercel
选择 Vercel 的原因很直接：免费额度对个人网站足够用，支持静态站和前端框架，GitHub 仓库推送后能自动构建发布。如果你不想注册太多平台，GitHub Pages 也可以实现类似效果，但没有自动构建的自定义域名配置灵活。
Vercel 也常常和 AI 建站流程绑定，很多 AI 前端生成工具都支持导出直接部署到 Vercel。你可以在工具里确认生成的代码是否能导出为完整项目，而不是只停留在在线预览。
6.2 部署步骤
第一步，把本地项目推送到 GitHub：
cd my-personal-site git init git add . git commit -m "feat: personal site initial" git remote add origin https://github.com/yourname/my-personal-site.git git branch -M main git push -u origin main注意把仓库地址替换成你自己的。
第二步，登录 Vercel 控制台，点击 Add New Project，选择你刚推送的 GitHub 仓库。框架预设选择静态站，或者直接让 Vercel 自动识别，点击 Deploy 等待构建完成。
如果更喜欢用命令行，也可以安装 Vercel CLI：
npm i -g vercel vercel login vercel命令行会引导你完成登录和项目关联，结束后会输出一个公网访问地址。
6.3 自定义域名绑定
在 Vercel 项目 Settings 里找到 Domains，输入你的域名，按照提示添加 DNS 记录。如果是 CNAME 记录，一般填写 www 到 cname.vercel-dns.com；如果使用根域名，可能需要添加 A 记录。解析生效时间通常几分钟到几十分钟不等。
配置完成后，验证方式：
- 打开自己的域名访问，确认能正常加载。
- 检查 HTTPS 证书是否自动签发，Vercel 一般会自动处理。
- 访问一个不存在的路径，确认 404 页面不会暴露源码目录结构。
6.4 部署后的完整验证
| 检查项 | 操作方法 | 预期结果 |
|---|---|---|
| 线上可访问 | 打开 Vercel 输出地址 | 页面正常渲染 |
| 静态资源 | DevTools Network 面板 | CSS/JS/图片均 200 |
| 自定义域名 | 浏览器访问域名 | HTTPS 正常，无证书警告 |
| Git 自动部署 | 本地修改后 push | Vercel 自动重新构建 |
| 移动端样式 | 手机访问 | 无横向滚动，布局正常 |
7. 资源占用与性能观察
Vibe Coding 建站不同于本地大模型推理，通常不依赖 GPU，所谓的资源占用主要集中在编辑器、浏览器和构建工具上。测试阶段可以按下面几个维度观察。
7.1 本地开发阶段
本地开发时，两个因素最容易影响体验：打开的工具太多，浏览器标签页太多。建议保持单个编辑器和单个预览标签页，让 AI 对话工具和代码编辑器形成稳定的工作闭环。观察本机 CPU 和内存占用时，可以在任务管理器中按进程查看，正常情况下 VS Code 和 Node 进程的占用比较低，如果构建工具内存持续飙升，优先检查是否引入了体积过大的依赖。
7.2 构建阶段
使用 Vite 或 Astro 构建时，命令行会输出构建产物大小。如果构建时间过长或产物过大，可以执行：
npm run build构建完成后，检查 dist 目录体积。如果产物非常大，让 AI 把页面拆成更小的组件，或者移除未使用的样式。个人网站静态产物通常控制在几 MB 以内比较理想，具体占用以实际项目为准。
7.3 部署平台侧
Vercel 免费版对个人网站的带宽和请求量支持足够，但如果你放了大量高清图片，还是建议压缩图片，或者使用免费图床。部署日志里可以查看每次构建的时间和产物大小，构建时间过长通常是因为依赖包太多，而不是页面本身复杂。
8. Vibe Coding 常见问题与排查方法
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 页面打开白屏 | JS 报错导致渲染中断 | DevTools Console 查看报错 | 把完整报错信息发给 AI，要求修复 |
| 样式错乱，没有图片 | CSS 或图片路径错误 | Network 面板看资源状态 | 改为相对路径，重新生成引用 |
| 移动端菜单点不开 | JS 交互未绑定或事件被覆盖 | Console 查看事件绑定报错 | 单独要求 AI 补全移动端交互 |
| 本地预览时图片正常，部署后图片消失 | 本地路径和部署路径不一致 | Vercel 预览看资源 404 | 统一使用相对路径并重新构建 |
| Vercel 部署失败 | 依赖安装失败或框架识别错误 | 打开部署日志定位错误 | 按日志修正 package.json 配置 |
| 自定义域名无法访问 | DNS 解析未生效 | 使用 dig 命令或在线工具检查 | 等待解析生效，或检查 CNAME 是否错误 |
| Git push 报错 | 本地身份认证未配置 | 查看 Git 错误信息 | 配置 SSH Key 或 token |
| AI 生成的内容只有预览没有项目代码 | 部分 AI 工具默认只展示结果 | 明确要求输出完整项目和文件目录 | 在提示词里写清“需要可部署的代码” |
| 页面 SEO 不被收录 | meta 标签缺失或 robots 配置错误 | 检查 head 区域和 robots.txt | 补全 meta，提交搜索引擎收录 |
遇到问题时，最有效的做法是把浏览器报错原样复制给 AI，而不是只写“页面坏了”。AI 对完整报错信息的定位能力远比模糊描述强。
9. Vibe Coding 最佳实践与合规提醒
Vibe Coding 建站速度快，但工程习惯不能丢。下面这组最佳实践是我比较推荐的：
- 每次改动前保留一个可用版本，提交到 Git。Vibe Coding 有时会越改越坏，有存档就能快速回退。
- 提示词写好后存成文档。同一个项目隔几天再迭代时，可以直接复用，不用重新描述需求。
- 第一次做项目时，先用小参数测试。比如先做单页面，再扩展多页面，不要一开始就让 AI 生成一个巨大项目。
- 图片和字体尽量压缩和使用本地资源。外链 CDN 虽然方便，但失效后会影响页面显示。
- 表单类功能不要直接在静态页面里接数据库，没有后端时使用邮箱链接或第三方服务，并明确隐私说明。
- 批量任务而不是单页时，例如批量生成多个分类页面，先让 AI 生成一个模板，再用模板套用，不要一条条生成。
- 涉及他人作品、头像、姓名时，确认已获得授权，不未经许可展示他人隐私信息。
- 不模仿官方站点钓鱼，不做品牌混淆页面，导航站也不要大量复制他人文案和内容。
- AI 生成的第三方脚本要审查来源。如果涉及用户浏览数据收集，必须明确告知和提供选择。
这些点不是流程外的工作，而是把 Vibe Coding 从“能跑”变成“能长期维护”的关键。
10. 总结与下一步
Vibe Coding 建个人网站，最值得尝试的点是它把整个开发链路压得很短：你只要能把需求讲清楚，AI 就能给出页面结构和样式，剩下的工作重点从“编码”变成“验证和迭代”。建议你最先做一个单页导航站，它结构清晰、功能直接，不会因为内容太多而失控。最容易踩的坑是：跳过本地测试直接部署，最后在手机上发现布局全乱。
下一步的扩展方向可以从三方面走：把单个 HTML 迁移到 Vite 或 Astro，支持 Markdown 博客；把个人主页和个人导航站合并成统一品牌页面；把网站内容链接到自己的 GitHub 或作品集，形成持续更新。如果你后续想尝试在鸿蒙生态里做应用页面原型，Vibe Coding 的提示词和项目管理思维方式同样可以迁移过去，只是目标平台和组件写法需要调整。先把这一套个人网站流程跑通，后面的开发节奏会快很多。
