用 AI 从 0 做一个个人网站（实战）
做一个属于自己的网站，现在不需要先学三个月前端。借助 AI 工具，你描述想要什么，它就能生成页面并帮你部署上线。下面按真实顺序走一遍，包括我自己踩过的几个坑。
第一步：选对工具
这两个工具的分工不是”谁更强”，而是”擅长的活不一样”。v0 背后是 Vercel 的生态，生成的多是 React + Tailwind 的静态展示页，适合”人设主页”这种以内容和排版为主的场景；Bolt 走的是 WebContainer 路线，直接在浏览器里跑一个 Node 环境，能装依赖、能跑后端逻辑，适合你想加”留言板""预约表单提交后写数据库”这类带状态的功能。如果你现在的需求只是”有个页面能被别人搜到、看到我做过什么”，别犹豫，直接上 v0，别为了显得”高级”硬上 Bolt——多出来的复杂度全是你自己以后要维护的债。
新手建议先用 v0 把”门面”做出来，需要更多功能再上 Bolt，两边生成的代码风格接近（都是 React 组件化），后续迁移不会推倒重来。
第二步：把需求描述清楚
把脑子里的网站拆成具体的话再告诉 AI，比如：
- 顶部：我的名字 + 一句自我介绍
- 中间：三块内容，分别是”关于我""作品""联系方式”
- 风格：简洁、浅色、专业
需求越具体，生成结果越接近预期。也可以丢一张喜欢的网站截图当参考——图片描述比文字描述省心得多，尤其是”留白多大""字体多粗”这类很难用语言精确说清的细节。
但光有这三条还不够，实战中容易漏掉的是”内容颗粒度”和”数据来源”这两件事，我建议你在第一版提示词里就把它们说清楚：
- 内容颗粒度：不要只说”作品”，要给出 2-3 个真实条目当范例，比如”作品1：XX小程序，一句话介绍，配一张截图”。AI 没有你的真实经历，只能靠占位符瞎编，你给的例子越具体，它照着模仿的结构就越贴近你想要的样子。
- 数据来源：网站上的文字、图片是你后面手动改，还是接一个 CMS（比如飞书多维表格、Notion）自动同步？零基础做静态展示页，直接手改文案最省事；如果你打算经常更新作品集，提前想好用什么工具管理内容，别等页面做完了才发现改一个字都要重新生成一遍。
风格描述上，与其说”简洁大气”这种模糊词，不如直接甩一个具体的参照对象，比如”配色和 Linear 官网类似""字体大小层级参考 Notion 的个人主页模板”。AI 对具体产品名的理解，远比对形容词的理解准。
第三步：生成并调整
让工具生成第一版后，逐句给反馈：
- “把标题字号调大一点”
- “三块内容改成卡片排列”
- “配色换成更冷的蓝灰”
记住”生成—看效果—具体反馈—再生成”的节奏，每次只改一两处，越调越准。这里有个常被忽略的坑：一次性丢一堆修改意见（比如同时说”字号调大、配色换掉、布局改成两栏、加个按钮”），AI 很容易顾此失彼，改好了字号又把之前调好的间距搞乱。拆成单点修改，每次改完看一眼再继续，返工率会明显下降。
另外几个实战技巧：
- 手机端单独看一遍。v0 和 Bolt 默认预览多是桌面视图，生成完第一版后一定切到移动端预览检查，个人网站至少一半流量来自手机打开的链接（微信里分享、社交媒体简介栏的链接），移动端排版乱掉比桌面端更容易让人直接划走。
- 图片先占位后替换。生成阶段用 AI 给的占位图或从 Unsplash 挑的图先跑通布局，最后一步再换成你自己的照片和作品截图，避免边找素材边调布局两头卡壳。
- 保留一份”能跑的版本”。每次大改动前，如果工具支持版本历史（v0 和 Bolt 都有），先另存一个检查点，改坏了能一键退回，不用从头再来一遍对话。
第四步：部署上线
v0、Bolt 这类工具大多内置一键部署，生成后能直接发布到一个可访问的网址（v0 走 Vercel，会给你一个 xxx.vercel.app 的子域名；Bolt 支持导出或直接部署到 Netlify）。如果你想绑定自己的域名，流程通常是：先在域名注册商（比如阿里云、Namecheap）那边买好域名，再去部署平台的项目设置里找到”Domains”，把平台给的 CNAME 或 A 记录填回域名解析后台，一般十几分钟到一小时内会生效。
第一次可以先用平台给的默认网址，跑通整个流程再考虑换域名，理由很实际：换域名要等 DNS 生效、要处理证书签发，这段时间页面本身可能还在改，先用默认域名把”内容对不对、体验顺不顺”确认完，再花心思折腾域名，效率更高。
如果你后面想让别人通过网站联系到你，记得在部署时确认这几件事：
- 表单提交是发邮件、存数据库还是调第三方服务（比如 Formspree、腾讯问卷）？零代码经验建议直接用现成的表单收集服务，几分钟接入，不用自己维护后端。
- 部署平台的环境变量（Environment Variables）功能是用来存密钥的地方，任何 API Key、邮件服务密码，都填在这里，而不是写进页面代码里——这一点在下面”几点提醒”里会再展开。
几点提醒
- 别期待一句话生成”完整商业系统”，AI 擅长起步和提速，生成的是”能看能用的第一版”，不是”生产级的最终版”。你的期待值摆对了，用起来才不会觉得”AI 不行”。
- 生成的代码大致看懂结构，方便以后修改：一个页面通常拆成几个组件文件，比如 Header、Hero、About、Contact，你不需要精通 React，但知道”想改联系方式那一块，就去找 Contact 相关的文件”，能省下大量来回沟通的时间。
- 联系方式表单若要收数据，注意别把密钥写进前端。前端代码是任何人打开浏览器”查看源代码”都能看到的，把邮件服务的 API Key 直接写在页面 JS 里，等于把钥匙挂在自己家门口。正确做法是用部署平台的环境变量功能存密钥，前端只调用一个中转的接口（Serverless Function），密钥留在服务端，用户永远看不到。
- 免费额度不是无限的。v0、Bolt 免费版通常有生成次数或算力限制，如果你打算频繁调整、反复试错，提前了解一下免费额度用完之后是按次付费还是要订阅，避免调到一半卡在付费墙前。
- 网站上线后别忘了测一遍所有链接和按钮，尤其是”关于我""联系方式”这类跳转，AI 生成时偶尔会留下占位链接（比如
#或示例邮箱），上线前手动点一遍确认没有遗漏。
想了解三种建站路线的取舍，可以看新手用 AI 建站。如果你想把个人网站升级成能持续维护的真项目，欢迎到我们的 AI 编程课 学习完整流程。