读完这篇文章，你会用 Bolt.new 在浏览器里做出一个能公网访问的网站，全程不装任何软件。
Bolt.new 是什么
Bolt.new 是 StackBlitz 推出的 AI 全栈开发工具。一句话概括它的能力，你打字描述需求，它生成网站，一键部署上线。
它和 Cursor、Windsurf 这类工具最大的区别是，你不需要在电脑上装任何东西。打开浏览器，输入 bolt.new，就能开始做项目。
核心依赖两项技术,
- WebContainers，在浏览器里运行完整的 Node.js 环境，不用本地装 Node
- AI 模型，理解你的需求并生成代码，自动安装依赖、修复错误
你能用它做什么
| 场景 | 可行性 | 例子 |
|---|---|---|
| 落地页 / 官网 | 很适合 | 咖啡店介绍页、个人作品集 |
| 博客站点 | 很适合 | 技术博客、生活记录 |
| 工具类网页 | 适合 | 计算器、待办清单、二维码生成器 |
| 带后端的应用 | 可以 | 登录注册、数据存储（接 Supabase） |
| 复杂业务系统 | 吃力 | 权限管理、支付流程、实时通信 |
| 移动端 App | 不适合 | 它做的是网页，不是原生 App |
简单说，做网页类项目它是神器。一旦涉及复杂后端逻辑，就得考虑切到 Cursor 这类工具了。
四步做出你的第一个网站
第一步，打开 bolt.new
浏览器地址栏输入 bolt.new，回车。你会看到一个聊天框，这就是你和 AI 交互的入口。
不需要注册就能用，但建议用 GitHub 账号登录，方便保存项目和后续部署。
第二步，描述你要什么
在聊天框里用自然语言描述你的需求。不需要写代码，就像跟朋友说话一样。
一个好的提示词长这样,
做一个咖啡店介绍网站，要求,
- 首页有大图轮播，展示店内环境
- 菜单页，展示咖啡品类和价格
- 关于我们页面，介绍店铺故事
- 联系页面，嵌入地图和营业时间
- 整体风格温暖，用棕色和米色为主色调
- 用 React + Tailwind CSS
关键技巧,
- 说清楚有哪些页面，AI 才知道做几个路由
- 说清楚风格，颜色、氛围、参考网站都行
- 说清楚技术栈，不确定就不写，AI 会自动选
- 一次说全，别挤牙膏式补充，一条消息把需求讲完
第三步，等 AI 生成
点发送后，AI 开始干活。你会看到它一步步操作,
- 创建项目结构
- 安装依赖包
- 生成页面代码
- 启动开发服务器
- 右侧自动出现预览
整个过程通常 30 秒到 2 分钟，取决于项目复杂度。如果报错了，AI 会自动尝试修复，大多数情况下不需要你干预。
第四步，预览 + 部署
右侧预览区实时显示效果。不满意就继续在聊天框里说,
- 「首页大图换成深色风格」
- 「菜单加一个分类筛选功能」
- 「手机上看起来不太好，优化一下移动端」
满意了，点右上角的 Deploy 按钮，选择 Netlify 或 Cloudflare，几秒钟后你会得到一个公网链接。把这个链接发给别人，他们就能访问你的网站了。
Bolt.new 界面长什么样
整个界面分三个区域,
| 区域 | 位置 | 作用 |
|---|---|---|
| 聊天区 | 左侧 | 你和 AI 对话的地方，输入需求、提修改 |
| 代码区 | 中间 | AI 生成的代码，可以手动编辑（但零代码派通常不用管） |
| 预览区 | 右侧 | 实时显示网站效果，可以点击交互 |
零代码派只需要关心左侧聊天区和右侧预览区。中间的代码当它不存在就行。
免费额度够用吗
Bolt.new 采用 Token 消耗计费模式,
| 方案 | 价格 | Token 额度 | 适合 |
|---|---|---|---|
| 免费版 | 免费 | 每天有限额度 | 试用、做小项目 |
| Pro | $20/月 | 1000万 Token | 经常做项目 |
| Pro Max | $50/月 | 2600万 Token | 重度用户 |
免费版够不够？ 第一次做项目够了。但如果你要反复修改、做多个项目，免费额度会很快用完。建议先用免费版跑通流程，觉得好用再考虑付费。
省 Token 的技巧，把需求一次性写清楚，减少来回修改。每发一条消息都消耗 Token，来回改 10 次不如一次说清楚。
五个实战技巧
1. 用参考网站描述风格
「做一个类似 Apple 官网风格的落地页」 「参考 notion.so 的设计风格」
AI 会分析参考网站的风格并模仿。比你说「简约大气」有效 10 倍。
2. 分阶段做复杂项目
不要一次性让 AI 做一个 10 个页面的网站。先做首页，确认满意了，再说「加一个博客列表页」，再满意了，说「加一个联系页」。每一步都确认效果，避免最后要全部返工。
3. 出了问题直接说
预览区看到不对的地方，截图或描述给 AI,
「菜单页的价格显示错位了，在手机上看」 「首页轮播图切换太快，慢一点」
AI 能根据你的描述定位问题并修复。
4. 导出代码备用
项目做完了，点下载按钮把代码导出到本地。这样即使 Bolt.new 以后收费或关停，你手里还有代码，可以用 Cursor 或其他工具继续开发。
5. 选对框架
不确定选什么框架就不用写，让 AI 自己选。如果你有偏好,
- 简单网页 → Vite + React
- 博客 → Astro
- 带后端 → Next.js
- 文档站 → VitePress
Bolt.new vs 其他零代码工具
| 对比项 | Bolt.new | v0 | Lovable |
|---|---|---|---|
| 最擅长 | 全栈网页应用 | 前端 UI 组件 | 带后端的应用 |
| 能部署 | 一键部署 | 需配合 Vercel | 内置部署 |
| 代码可见 | 可编辑 | 可复制 | 部分可见 |
| 免费额度 | 有 | 有 | 有 |
| 适合谁 | 想快速出完整网站 | 做前端 UI 组件 | 要数据库和登录 |
三个工具不冲突，先用 Bolt.new 做整体框架，再用 v0 打磨 UI 细节，需要后端就用 Lovable。
常见问题
Bolt.new 需要翻墙吗？
国内可以直接访问 bolt.new，但速度可能不稳定。如果加载慢，挂个加速器体验会好很多。
生成的网站是永久的吗？
部署到 Netlify 后是永久的，只要你不删除项目。免费版 Netlify 有流量限制，个人用足够。
我能拿走代码吗？
可以。Bolt.new 支持导出完整项目代码，包括 package.json、源文件、配置文件。导出后可以用 Cursor 或 VS Code 打开继续开发。
Bolt.new 和 Bolt.diy 什么关系？
Bolt.diy 是 Bolt.new 的开源版本，可以自己部署、接任意 AI 模型（包括本地模型）。适合对数据隐私有要求或想自控成本的用户。但部署 Bolt.diy 需要一定技术基础，零基础建议直接用 Bolt.new 在线版。
做出来的网站能接自己的域名吗？
可以。部署到 Netlify 后，在 Netlify 控制台绑定自己的域名即可。免费的 .netlify.app 子域名也够日常用。
下一步
现在你知道了 Bolt.new 怎么用，可以,