最近“Vibe Coding”的热度一直没降很多人把它理解成“用嘴写代码”但真到自己上手还是会卡在几个关键问题上用什么工具、怎么描述需求、写完怎么跑起来、怎么部署给别人看。这次我分享一个用 Vibe Coding 方式做的个人网站从一句话想法到最终上线部署的完整过程包括提示词怎么写、AI 生成的代码长什么样、如何本地验证、如何部署到线上以及中途踩过的坑。先说结论Vibe Coding 不是让你完全不懂代码而是把“从零实现”变成“从需求到验证”的高频迭代。对个人网站、作品集、小工具页面这类场景它的效率提升非常明显。整篇文章会围绕一套可复用的流程展开读完你可以直接照着做一个自己的网站。1. Vibe Coding 核心能力速览能力项说明核心理念用自然语言描述功能需求由 AI 生成主要代码开发者负责验证与修正主流工具Cursor、Claude Code、Bolt.new、v0、通义灵码等 AI 编程工具硬件需求不需要本地 GPU主要依赖云端模型算力技术门槛不需要精通框架但需要能看懂报错、能描述清楚需求主要应用个人网站、静态页面、小工具、原型验证、脚本编写部署平台Vercel、Netlify、GitHub Pages 等静态托管服务是否支持 API支持AI 生成的代码可调用第三方 API是否支持批量任务取决于具体项目静态站可批量生成页面适合人群产品经理、设计师、独立开发者、想快速验证想法的技术爱好者从这张表能看出Vibe Coding 最大的特点就是“低硬件门槛 高迭代速度”。它不挑显卡、不挑系统真正关键的是你的需求描述能力和验证能力。2. Vibe Coding 的适用场景与使用边界2.1 适合做什么Vibe Coding 最舒服的场景是“信息展示 轻交互”的网站。个人主页 / 作品集展示项目、照片、联系方式。小工具页面计算器、待办清单、随机生成器。文档站点把 Markdown 文档转换成静态网站。活动落地页短时间上线一个活动介绍页面。原型验证把产品想法快速做成可点击的页面给团队看。这类网站的特点是页面数量少、交互逻辑简单、样式需求明确。AI 在这种场景下的代码生成质量非常高基本一次生成就能达到可用状态。2.2 不适合做什么大型业务系统需要复杂权限、数据库事务、多服务协同AI 生成的代码难以维护。高并发应用性能调优、缓存策略、分布式架构还是需要专业工程师。涉及敏感数据的应用身份认证、支付、隐私数据处理不能完全交给 AI 输出。深度定制的前端动画复杂的交互细节AI 需要多轮修正才能达到效果。2.3 合规与安全边界用 Vibe Coding 做网站必须注意几个边界不要把内部敏感数据、数据库连接串、密钥直接粘贴给 AI。如果 AI 生成了类似其他网站的设计或文案要确认是否符合版权要求。网站涉及用户上传内容、评论、表单时要明确数据用途添加隐私说明。如果以后要商用建议在项目早期就确认代码和素材的授权范围。3. Vibe Coding 个人网站环境准备Vibe Coding 对本地环境要求很低但该装的东西还是得装。3.1 工具清单工具用途是否必须AI 编程工具核心用于生成代码必须GitHub 账号代码托管、部署关联推荐Vercel / Netlify 账号一键部署网站推荐Node.js本地运行前端项目推荐Git版本管理推荐浏览器预览和调试必须如果你完全不用本地环境也能在 Bolt.new 这类云端工具里完成开发和预览最后直接部署。但本地装一套 Node.js 和 Git后面调试和改代码会方便很多。3.2 Node.js 安装检查在本地终端执行node -v npm -v如果没有输出去 Node.js 官网下载 LTS 版本安装。安装完成后重新打开终端再执行一次确认。3.3 项目目录规划建议先建一个干净的目录后面 AI 生成的代码都放这里。mkdir my-vibe-site cd my-vibe-site git init这样做的目的是从第一步就进入版本管理后面 AI 每改一版你都能知道改了什么、出问题还能回退。4. 从一句话需求到第一版网站这是 Vibe Coding 的核心流程用自然语言描述需求让 AI 输出代码然后本地运行验证。4.1 需求描述技巧AI 生成代码的质量很大程度上取决于你的描述质量。一个好的 Vibe Coding 提示词应该包含网站类型个人主页、作品集、落地页。目标用户给谁看。内容结构需要哪些板块。视觉风格简洁、活泼、科技感、极简。功能要求导航、轮播、点击效果、表单。技术偏好如果会代码可以直接指定 React、Vue 或纯 HTML。4.2 示例提示词以“做一个个人的趣味作品集网站”为例提示词可以这样写我要做一个个人作品集网站要求如下 1. 网站类型单页静态网站移动端和电脑端都能正常显示。 2. 主色调深色背景 蓝色渐变点缀。 3. 内容板块 - 顶部导航主页、关于我、项目、联系方式点击可平滑滚动到对应区域。 - Hero 区域一句个人介绍一个“查看我的项目”按钮。 - 项目列表展示 3 个虚拟项目卡片每张卡片包含标题、一句话描述、技术标签。 - 关于我一段个人简介。 - 联系区域一个邮箱链接和 GitHub 链接。 4. 技术要求使用纯 HTML CSS 少量 JavaScript不需要引入大型框架。 5. 请给出完整代码文件并说明如何本地运行。注意这里我特意写了“虚拟项目”是因为如果用真实项目信息需要你提供材料Vibe Coding 阶段建议先用占位内容跑通流程后面再替换真实信息。4.3 AI 生成的代码结构按照上面的提示词AI 通常会生成类似这样的文件结构my-vibe-site/ ├── index.html ├── style.css └── script.js如果你用的是 React 类的技术栈会生成my-vibe-site/ ├── package.json ├── vite.config.js ├── index.html └── src/ ├── App.jsx ├── main.jsx └── components/不管哪种结构核心逻辑都一样HTML 负责内容CSS 负责样式JavaScript 负责交互。4.4 本地运行验证如果是纯 HTML 文件直接双击index.html就能在浏览器打开。如果是 React 或 Vite 项目进入项目目录npm install npm run dev启动后终端会显示一个地址通常是http://localhost:5173在浏览器里访问这个地址就能看到页面。这里要注意AI 生成的项目依赖版本可能与你本地的 Node 版本有差异。如果npm install报错一般是因为依赖版本过高具体排查方式写在后面的常见问题章节。5. 功能测试与效果验证网站代码生成后不要急着部署先做一轮验证。我把 Vibe Coding 项目的验证分为四个层级页面渲染、交互逻辑、响应式布局、部署后回归。5.1 页面渲染测试打开页面后检查以下内容首页文字是否完整显示有没有乱码。导航栏是否在预期位置。图片是否能正常加载。背景色和文字颜色对比是否清晰。这一步主要看 AI 有没有把基础内容遗漏。5.2 交互逻辑测试Vibe Coding 生成的网站通常包含一些 JavaScript 交互比如平滑滚动、点击按钮、弹窗。逐项测试点击导航链接是否滚到对应区域。点击“查看项目”按钮是否跳转或展开内容。如果有表单输入内容后是否有反馈。控制台F12打开看有没有报错。5.3 响应式布局测试在浏览器开发者工具里切换到手机宽度375px 左右再切换到平板宽度768px确认页面没有横向滚动条、文字没有被截断、按钮可以正常点击。这一步很关键。Vibe Coding 生成的页面桌面端通常没问题但移动端偶尔会出现元素溢出。5.4 判断标准测试项通过标准页面渲染所有板块正常显示无乱码交互逻辑点击、滚动无报错交互有反馈响应式手机 / 平板 / 桌面布局均无溢出控制台无红色错误信息如果其中任何一项不通过把具体现象和浏览器报错信息复制给 AI让它修复。6. 部署上线与接口接入本地跑通只是第一步个人网站要给别人看需要部署到线上。6.1 推送到 GitHub先在 GitHub 创建一个仓库然后关联本地目录。git add . git commit -m vibe coding personal site git branch -M main git remote add origin https://github.com/你的用户名/你的仓库名.git git push -u origin main如果不会命令行也可以在 GitHub 网页端直接上传文件但用 Git 管理后面更新更方便。6.2 Vercel 一键部署Vercel 是目前部署静态网站最方便的平台之一和 GitHub 配合使用流程很顺。打开 Vercel 官网用 GitHub 账号登录。点击Add New Project。选择刚才推送的 GitHub 仓库。框架预设选择Vite或Other静态文件目录一般不用改。点击Deploy。等待一两分钟Vercel 会返回一个专属域名网站直接上线。部署完成后以后每次往 GitHub 推送代码Vercel 都会自动重新部署这种“提交即上线”的体验和 Vibe Coding 的迭代节奏很匹配。6.3 接入接口 API静态网站本身没有后端但可以通过第三方 API 实现动态功能。以联系表单为例可以接入表单服务import requests url https://formspree.io/f/YOUR_FORM_ID data { name: 测试用户, email: testexample.com, message: 这是一条来自 Vibe Coding 网站的测试消息 } response requests.post(url, datadata, timeout30) print(response.status_code) print(response.text)需要替换为你自己的表单 ID。接入后网站里的表单就能把用户输入发送到你的邮箱适合个人网站的留言场景。如果你想把接口能力也交给 AI 生成提示词这样写帮我给网站的联系表单添加提交功能提交后调用 https://formspree.io/f/YOUR_FORM_ID 这个接口 成功时提示“发送成功”失败时提示“请稍后重试”。输出修改后的表单代码。7. 成本与性能观察7.1 时间成本同样做一个个人作品集站点传统开发方式可能需要一两天Vibe Coding 的流程可以压缩到半小时以内前提是需求描述清楚。如果需求含糊AI 会生成一版“通用”页面再花几轮来回调整。我自己实际感受第一次使用 Vibe Coding 建站大部分时间花在“描述需求”和“验证结果”上而不是写代码本身。这和传统的“边写边想”是很不一样的体验。7.2 工具成本Vibe Coding 工具的费用要看具体产品。有的 AI 编程工具提供免费额度适合个人尝试深度使用且需要高速模型时通常要订阅付费版本。部署平台方面Vercel 对个人项目有免费额度个人网站流量一般不会触发计费。具体的费用以官方页面为准建议第一次先用免费额度跑通。7.3 网站性能Vibe Coding 生成的静态网站性能一般不会太差。但如果 AI 引入了大量 JavaScript 动画或较大的图片页面加载速度会受影响。验证性能的方式很直接# 使用 Lighthouse 检测页面性能直接在浏览器 DevTools 中选择 Lighthouse 标签页重点关注三项首屏加载时间、资源大小、移动端表现。如果得分偏低可以要求 AI 精简代码、压缩图片、移除冗余依赖。8. 常见问题与排查方法Vibe Coding 建站过程中最容易遇到下面这些问题问题现象可能原因排查方式解决方案AI 生成的代码本地跑不起来依赖版本与本地环境不兼容查看终端报错信息让 AI 提供兼容版本或手动降低依赖版本页面打开是空白JS 报错或资源路径错误打开控制台查看错误把报错信息复制给 AI让它修复移动端布局错乱缺少响应式样式使用开发者工具切换设备要求 AI 增加媒体查询和响应式布局GitHub 推送失败认证失败或仓库冲突查看 Git 报错信息使用 Personal Access Token 或重新关联仓库Vercel 部署失败构建命令或输出目录不对查看 Vercel 构建日志调整构建命令静态站通常用npm run build表单无法提交API 接口配置错误检查网络请求状态确认表单服务 ID 是否正确AI 生成的网站风格不符合预期提示词不够具体补充风格参考描述更明确的颜色、字体、布局偏好页面字体加载慢引入了外部字体库查看 Network 面板去掉不必要的外部字体或使用系统字体上面这些坑90% 都能通过“复制报错信息给 AI”解决。Vibe Coding 的调试逻辑不是直接去改代码而是让 AI 基于报错信息给出修复方案然后验证修复结果。9. 最佳实践与建议9.1 提示词分阶段描述不要一次把所有需求全部丢给 AI。先让它做一版基础页面再逐步增加功能比一次性生成复杂页面更稳定。推荐的节奏是结构 → 样式 → 交互 → 部署。9.2 保留最小可运行版本每一轮 AI 修改前确保当前版本是可运行的。如果新一轮修改引入了问题可以回退到上一个稳定版本而不是从头再生成。这就是前面建议用 Git 管理项目的原因。9.3 敏感信息不要进入提示词AI 工具的数据处理方式各不相同不要把密码、密钥、个人身份信息粘贴到对话中。Vibe Coding 应该处理的是一般性的功能需求不是敏感数据。9.4 验证后替换占位内容在 Vibe Coding 阶段建议先使用占位文字和示例图片等页面结构和功能稳定后再替换为真实内容。这样既能避免在最初阶段就因为文案反复调整也能确保内容版权清晰。9.5 明确授权与合规如果 AI 生成的代码来自某个开源项目训练结果或者设计风格明显参考了其他网站商用前要谨慎确认。个人网站可以放宽但涉及商业用途时保留必要的合规审查习惯是值得的。9.6 建立自己的验证清单每次让 AI 修改后不要急着看效果先按固定清单核验页面是否能打开、控制台是否有报错、移动端是否正常、核心功能是否可用。否则很多问题会叠加在一起难以定位。10. 总结与下一步这次用 Vibe Coding 做个人网站最值得尝试的点是它把“从零写代码”变成了“描述需求 验证结果”的循环对于个人网站这种轻量页面效率提升非常明显。如果你也想试建议先验证这四件事能不能用自然语言生成一版完整页面、能不能本地运行、能不能一键部署、能不能通过继续对话迭代功能。最容易踩的坑是需求描述不清楚导致 AI 反复生成不相关的版本。解决方式很简单就是先写清楚网站类型、内容板块、视觉风格然后逐步迭代。下一步可以尝试的方向很多在个人网站中加入一个自己的小工具比如抽奖、随机数、每日一句。接入第三方 API展示 GitHub 最新项目或天气信息。尝试用 React 等框架构建更复杂的交互页面。把 Vibe Coding 的方式用在工作中的原型验证上给团队快速提供可点击的 Demo。Vibe Coding 能做的事不局限于个人网站。把它当成一个“快速原型工具”和“学习编程的辅助工具”会比单纯追求“纯 AI 写代码”更有价值。建议先做一个简单的小网站跑通全流程再逐步拓展功能。 Vibe Coding实战：从一句话需求到个人网站上线
最近“Vibe Coding”的热度一直没降很多人把它理解成“用嘴写代码”但真到自己上手还是会卡在几个关键问题上用什么工具、怎么描述需求、写完怎么跑起来、怎么部署给别人看。这次我分享一个用 Vibe Coding 方式做的个人网站从一句话想法到最终上线部署的完整过程包括提示词怎么写、AI 生成的代码长什么样、如何本地验证、如何部署到线上以及中途踩过的坑。先说结论Vibe Coding 不是让你完全不懂代码而是把“从零实现”变成“从需求到验证”的高频迭代。对个人网站、作品集、小工具页面这类场景它的效率提升非常明显。整篇文章会围绕一套可复用的流程展开读完你可以直接照着做一个自己的网站。1. Vibe Coding 核心能力速览能力项说明核心理念用自然语言描述功能需求由 AI 生成主要代码开发者负责验证与修正主流工具Cursor、Claude Code、Bolt.new、v0、通义灵码等 AI 编程工具硬件需求不需要本地 GPU主要依赖云端模型算力技术门槛不需要精通框架但需要能看懂报错、能描述清楚需求主要应用个人网站、静态页面、小工具、原型验证、脚本编写部署平台Vercel、Netlify、GitHub Pages 等静态托管服务是否支持 API支持AI 生成的代码可调用第三方 API是否支持批量任务取决于具体项目静态站可批量生成页面适合人群产品经理、设计师、独立开发者、想快速验证想法的技术爱好者从这张表能看出Vibe Coding 最大的特点就是“低硬件门槛 高迭代速度”。它不挑显卡、不挑系统真正关键的是你的需求描述能力和验证能力。2. Vibe Coding 的适用场景与使用边界2.1 适合做什么Vibe Coding 最舒服的场景是“信息展示 轻交互”的网站。个人主页 / 作品集展示项目、照片、联系方式。小工具页面计算器、待办清单、随机生成器。文档站点把 Markdown 文档转换成静态网站。活动落地页短时间上线一个活动介绍页面。原型验证把产品想法快速做成可点击的页面给团队看。这类网站的特点是页面数量少、交互逻辑简单、样式需求明确。AI 在这种场景下的代码生成质量非常高基本一次生成就能达到可用状态。2.2 不适合做什么大型业务系统需要复杂权限、数据库事务、多服务协同AI 生成的代码难以维护。高并发应用性能调优、缓存策略、分布式架构还是需要专业工程师。涉及敏感数据的应用身份认证、支付、隐私数据处理不能完全交给 AI 输出。深度定制的前端动画复杂的交互细节AI 需要多轮修正才能达到效果。2.3 合规与安全边界用 Vibe Coding 做网站必须注意几个边界不要把内部敏感数据、数据库连接串、密钥直接粘贴给 AI。如果 AI 生成了类似其他网站的设计或文案要确认是否符合版权要求。网站涉及用户上传内容、评论、表单时要明确数据用途添加隐私说明。如果以后要商用建议在项目早期就确认代码和素材的授权范围。3. Vibe Coding 个人网站环境准备Vibe Coding 对本地环境要求很低但该装的东西还是得装。3.1 工具清单工具用途是否必须AI 编程工具核心用于生成代码必须GitHub 账号代码托管、部署关联推荐Vercel / Netlify 账号一键部署网站推荐Node.js本地运行前端项目推荐Git版本管理推荐浏览器预览和调试必须如果你完全不用本地环境也能在 Bolt.new 这类云端工具里完成开发和预览最后直接部署。但本地装一套 Node.js 和 Git后面调试和改代码会方便很多。3.2 Node.js 安装检查在本地终端执行node -v npm -v如果没有输出去 Node.js 官网下载 LTS 版本安装。安装完成后重新打开终端再执行一次确认。3.3 项目目录规划建议先建一个干净的目录后面 AI 生成的代码都放这里。mkdir my-vibe-site cd my-vibe-site git init这样做的目的是从第一步就进入版本管理后面 AI 每改一版你都能知道改了什么、出问题还能回退。4. 从一句话需求到第一版网站这是 Vibe Coding 的核心流程用自然语言描述需求让 AI 输出代码然后本地运行验证。4.1 需求描述技巧AI 生成代码的质量很大程度上取决于你的描述质量。一个好的 Vibe Coding 提示词应该包含网站类型个人主页、作品集、落地页。目标用户给谁看。内容结构需要哪些板块。视觉风格简洁、活泼、科技感、极简。功能要求导航、轮播、点击效果、表单。技术偏好如果会代码可以直接指定 React、Vue 或纯 HTML。4.2 示例提示词以“做一个个人的趣味作品集网站”为例提示词可以这样写我要做一个个人作品集网站要求如下 1. 网站类型单页静态网站移动端和电脑端都能正常显示。 2. 主色调深色背景 蓝色渐变点缀。 3. 内容板块 - 顶部导航主页、关于我、项目、联系方式点击可平滑滚动到对应区域。 - Hero 区域一句个人介绍一个“查看我的项目”按钮。 - 项目列表展示 3 个虚拟项目卡片每张卡片包含标题、一句话描述、技术标签。 - 关于我一段个人简介。 - 联系区域一个邮箱链接和 GitHub 链接。 4. 技术要求使用纯 HTML CSS 少量 JavaScript不需要引入大型框架。 5. 请给出完整代码文件并说明如何本地运行。注意这里我特意写了“虚拟项目”是因为如果用真实项目信息需要你提供材料Vibe Coding 阶段建议先用占位内容跑通流程后面再替换真实信息。4.3 AI 生成的代码结构按照上面的提示词AI 通常会生成类似这样的文件结构my-vibe-site/ ├── index.html ├── style.css └── script.js如果你用的是 React 类的技术栈会生成my-vibe-site/ ├── package.json ├── vite.config.js ├── index.html └── src/ ├── App.jsx ├── main.jsx └── components/不管哪种结构核心逻辑都一样HTML 负责内容CSS 负责样式JavaScript 负责交互。4.4 本地运行验证如果是纯 HTML 文件直接双击index.html就能在浏览器打开。如果是 React 或 Vite 项目进入项目目录npm install npm run dev启动后终端会显示一个地址通常是http://localhost:5173在浏览器里访问这个地址就能看到页面。这里要注意AI 生成的项目依赖版本可能与你本地的 Node 版本有差异。如果npm install报错一般是因为依赖版本过高具体排查方式写在后面的常见问题章节。5. 功能测试与效果验证网站代码生成后不要急着部署先做一轮验证。我把 Vibe Coding 项目的验证分为四个层级页面渲染、交互逻辑、响应式布局、部署后回归。5.1 页面渲染测试打开页面后检查以下内容首页文字是否完整显示有没有乱码。导航栏是否在预期位置。图片是否能正常加载。背景色和文字颜色对比是否清晰。这一步主要看 AI 有没有把基础内容遗漏。5.2 交互逻辑测试Vibe Coding 生成的网站通常包含一些 JavaScript 交互比如平滑滚动、点击按钮、弹窗。逐项测试点击导航链接是否滚到对应区域。点击“查看项目”按钮是否跳转或展开内容。如果有表单输入内容后是否有反馈。控制台F12打开看有没有报错。5.3 响应式布局测试在浏览器开发者工具里切换到手机宽度375px 左右再切换到平板宽度768px确认页面没有横向滚动条、文字没有被截断、按钮可以正常点击。这一步很关键。Vibe Coding 生成的页面桌面端通常没问题但移动端偶尔会出现元素溢出。5.4 判断标准测试项通过标准页面渲染所有板块正常显示无乱码交互逻辑点击、滚动无报错交互有反馈响应式手机 / 平板 / 桌面布局均无溢出控制台无红色错误信息如果其中任何一项不通过把具体现象和浏览器报错信息复制给 AI让它修复。6. 部署上线与接口接入本地跑通只是第一步个人网站要给别人看需要部署到线上。6.1 推送到 GitHub先在 GitHub 创建一个仓库然后关联本地目录。git add . git commit -m vibe coding personal site git branch -M main git remote add origin https://github.com/你的用户名/你的仓库名.git git push -u origin main如果不会命令行也可以在 GitHub 网页端直接上传文件但用 Git 管理后面更新更方便。6.2 Vercel 一键部署Vercel 是目前部署静态网站最方便的平台之一和 GitHub 配合使用流程很顺。打开 Vercel 官网用 GitHub 账号登录。点击Add New Project。选择刚才推送的 GitHub 仓库。框架预设选择Vite或Other静态文件目录一般不用改。点击Deploy。等待一两分钟Vercel 会返回一个专属域名网站直接上线。部署完成后以后每次往 GitHub 推送代码Vercel 都会自动重新部署这种“提交即上线”的体验和 Vibe Coding 的迭代节奏很匹配。6.3 接入接口 API静态网站本身没有后端但可以通过第三方 API 实现动态功能。以联系表单为例可以接入表单服务import requests url https://formspree.io/f/YOUR_FORM_ID data { name: 测试用户, email: testexample.com, message: 这是一条来自 Vibe Coding 网站的测试消息 } response requests.post(url, datadata, timeout30) print(response.status_code) print(response.text)需要替换为你自己的表单 ID。接入后网站里的表单就能把用户输入发送到你的邮箱适合个人网站的留言场景。如果你想把接口能力也交给 AI 生成提示词这样写帮我给网站的联系表单添加提交功能提交后调用 https://formspree.io/f/YOUR_FORM_ID 这个接口 成功时提示“发送成功”失败时提示“请稍后重试”。输出修改后的表单代码。7. 成本与性能观察7.1 时间成本同样做一个个人作品集站点传统开发方式可能需要一两天Vibe Coding 的流程可以压缩到半小时以内前提是需求描述清楚。如果需求含糊AI 会生成一版“通用”页面再花几轮来回调整。我自己实际感受第一次使用 Vibe Coding 建站大部分时间花在“描述需求”和“验证结果”上而不是写代码本身。这和传统的“边写边想”是很不一样的体验。7.2 工具成本Vibe Coding 工具的费用要看具体产品。有的 AI 编程工具提供免费额度适合个人尝试深度使用且需要高速模型时通常要订阅付费版本。部署平台方面Vercel 对个人项目有免费额度个人网站流量一般不会触发计费。具体的费用以官方页面为准建议第一次先用免费额度跑通。7.3 网站性能Vibe Coding 生成的静态网站性能一般不会太差。但如果 AI 引入了大量 JavaScript 动画或较大的图片页面加载速度会受影响。验证性能的方式很直接# 使用 Lighthouse 检测页面性能直接在浏览器 DevTools 中选择 Lighthouse 标签页重点关注三项首屏加载时间、资源大小、移动端表现。如果得分偏低可以要求 AI 精简代码、压缩图片、移除冗余依赖。8. 常见问题与排查方法Vibe Coding 建站过程中最容易遇到下面这些问题问题现象可能原因排查方式解决方案AI 生成的代码本地跑不起来依赖版本与本地环境不兼容查看终端报错信息让 AI 提供兼容版本或手动降低依赖版本页面打开是空白JS 报错或资源路径错误打开控制台查看错误把报错信息复制给 AI让它修复移动端布局错乱缺少响应式样式使用开发者工具切换设备要求 AI 增加媒体查询和响应式布局GitHub 推送失败认证失败或仓库冲突查看 Git 报错信息使用 Personal Access Token 或重新关联仓库Vercel 部署失败构建命令或输出目录不对查看 Vercel 构建日志调整构建命令静态站通常用npm run build表单无法提交API 接口配置错误检查网络请求状态确认表单服务 ID 是否正确AI 生成的网站风格不符合预期提示词不够具体补充风格参考描述更明确的颜色、字体、布局偏好页面字体加载慢引入了外部字体库查看 Network 面板去掉不必要的外部字体或使用系统字体上面这些坑90% 都能通过“复制报错信息给 AI”解决。Vibe Coding 的调试逻辑不是直接去改代码而是让 AI 基于报错信息给出修复方案然后验证修复结果。9. 最佳实践与建议9.1 提示词分阶段描述不要一次把所有需求全部丢给 AI。先让它做一版基础页面再逐步增加功能比一次性生成复杂页面更稳定。推荐的节奏是结构 → 样式 → 交互 → 部署。9.2 保留最小可运行版本每一轮 AI 修改前确保当前版本是可运行的。如果新一轮修改引入了问题可以回退到上一个稳定版本而不是从头再生成。这就是前面建议用 Git 管理项目的原因。9.3 敏感信息不要进入提示词AI 工具的数据处理方式各不相同不要把密码、密钥、个人身份信息粘贴到对话中。Vibe Coding 应该处理的是一般性的功能需求不是敏感数据。9.4 验证后替换占位内容在 Vibe Coding 阶段建议先使用占位文字和示例图片等页面结构和功能稳定后再替换为真实内容。这样既能避免在最初阶段就因为文案反复调整也能确保内容版权清晰。9.5 明确授权与合规如果 AI 生成的代码来自某个开源项目训练结果或者设计风格明显参考了其他网站商用前要谨慎确认。个人网站可以放宽但涉及商业用途时保留必要的合规审查习惯是值得的。9.6 建立自己的验证清单每次让 AI 修改后不要急着看效果先按固定清单核验页面是否能打开、控制台是否有报错、移动端是否正常、核心功能是否可用。否则很多问题会叠加在一起难以定位。10. 总结与下一步这次用 Vibe Coding 做个人网站最值得尝试的点是它把“从零写代码”变成了“描述需求 验证结果”的循环对于个人网站这种轻量页面效率提升非常明显。如果你也想试建议先验证这四件事能不能用自然语言生成一版完整页面、能不能本地运行、能不能一键部署、能不能通过继续对话迭代功能。最容易踩的坑是需求描述不清楚导致 AI 反复生成不相关的版本。解决方式很简单就是先写清楚网站类型、内容板块、视觉风格然后逐步迭代。下一步可以尝试的方向很多在个人网站中加入一个自己的小工具比如抽奖、随机数、每日一句。接入第三方 API展示 GitHub 最新项目或天气信息。尝试用 React 等框架构建更复杂的交互页面。把 Vibe Coding 的方式用在工作中的原型验证上给团队快速提供可点击的 Demo。Vibe Coding 能做的事不局限于个人网站。把它当成一个“快速原型工具”和“学习编程的辅助工具”会比单纯追求“纯 AI 写代码”更有价值。建议先做一个简单的小网站跑通全流程再逐步拓展功能。