用 bolt.new 做一个全栈工具站实战
bolt.new 是一个在浏览器里直接生成、运行并部署全栈应用的 AI 编程工具——你描述需求，它生成完整代码（前端 + 后端 + 依赖），并在内嵌的容器里实时跑起来，确认无误后连 GitHub、一键部署上线。
这篇带你用 bolt 从零做一个在线小工具站：比如一个 JSON 格式化、单位换算或二维码生成的聚合小站。全程不离开浏览器，最后部署成一个真实可访问的网址。看完你就知道bolt 做工具站到底快在哪、坑在哪、token 怎么省。
bolt.new 是什么，和别的 AI 编程工具有什么不一样
市面上的 AI 编程工具大致分两类：装在本地的（像 Cursor、Claude Code）和跑在云端的（像 bolt）。
bolt 属于后者，它最大的特点是自带一个浏览器里的运行环境：
- 本地工具（Cursor / Claude Code）：在你电脑上改代码、跑命令，灵活但要自己装环境、配依赖。
- bolt：从生成、安装依赖、启动开发服务器到预览，全在浏览器里完成，不用配本地环境。
所以 bolt 特别适合两种人：完全不想折腾环境的新手，和想几分钟内验证一个想法的人。想系统学它的玩法，可以看 bolt 入门教程（规划中）。
拿三个常见工具横向摆一下，你就知道该在什么场景用什么：
| 工具 | 运行位置 | 适合场景 | 明显短板 |
|---|---|---|---|
| bolt.new | 浏览器容器 | 从零起盘、验证想法、做工具站/落地页 | 大项目会变卡，本地调试能力弱 |
| v0.dev | 浏览器 + 导出 | 只要 UI 组件、设计稿转代码 | 后端逻辑基本不管 |
| Cursor / Claude Code | 本地 | 长期维护、深度重构、接真实数据库 | 要自己装 Node、配环境变量 |
我自己的用法是：能在 bolt 里三分钟跑出来的，就别在本地折腾环境；一旦项目要接真实数据库、要写复杂的鉴权逻辑，立刻挪回本地——这两类工具不是二选一，是接力赛。
第一步：用一句话生成项目骨架
打开 bolt，在输入框里把需求说清楚。提示词越具体，返工越少。一个好用的工具站提示词模板：
做一个在线工具聚合站，技术栈用 React + Vite，首页是工具卡片网格，先实现三个工具：JSON 格式化、Base64 编解码、时间戳转换。每个工具一个独立页面，整体用简洁的深色主题。
bolt 会自动选型、生成全套文件、安装依赖并启动预览。几十秒后右侧就能看到一个能点的网站雏形。
关键技巧：第一句别贪多。先让它把骨架 + 一个工具做出来跑通，再逐个加功能，比一次性要十个工具稳得多。
提示词里最容易漏的三样东西，补上能少走很多弯路：
- 技术栈：明确写 React + Vite（或 Next.js），不写的话 bolt 会按自己的默认选型走，跟你后面想接的库不一定合得来。
- 样式基调：深色/浅色、卡片式还是列表式，写一句就够，别指望它猜你的审美。
- 数据怎么存：工具站大多不需要数据库，明确说”数据存在浏览器本地，不需要后端”，能省掉一整套没用的后端代码，也少烧 token。
如果你完全说不清技术栈，退而求其次的写法是：“帮我选一个适合做在线工具站的轻量技术栈”，让 bolt 自己拍板，通常也不会选错。
第二步：在线运行、对话式调试
骨架出来后，剩下的就是对话式迭代。直接用大白话提需求：
- “JSON 格式化加一个『压缩』按钮”
- “工具卡片加上图标和悬停效果”
- “顶部加一个搜索框，能按工具名过滤”
bolt 改完会自动热更新预览，你立刻能看到效果。如果某次改动把页面改崩了，它的版本回退能退回上一个能跑的状态——这点对新手很友好，不至于一步走错满盘皆输。
调试时记住一个原则：一次只改一件事。把”加按钮”和”换配色”分两次说，出问题时好定位，也更省 token（下面细讲）。
再补一个新手常忽略的调试动作：打开浏览器控制台看报错。bolt 的预览就是一个真实网页，页面白屏或按钮点了没反应时，控制台里的红字报错信息（比如 Cannot read properties of undefined）直接复制粘贴给 bolt，比你干描述”按钮坏了”精准得多，它能一次定位到具体是哪个文件、哪一行的问题。这个习惯不只对 bolt 有用，换成 Cursor 或 Claude Code 一样管用。
第三步：连 GitHub，做版本管理
工具站雏形满意后，把它连到 GitHub。bolt 支持把当前项目直接推成一个仓库：
- 在界面里找到 GitHub / Connect 入口，授权账号。
- 选择新建仓库或推到已有仓库。
- 之后的改动可以继续从 bolt 推送。
连上 GitHub 有两个实在的好处：代码有了备份和历史，以及可以随时把仓库拉到本地，用 Cursor 或 Claude Code 接着改——bolt 负责”快速起盘”，本地工具负责”精雕细琢”，这是很顺的工作流。
第四步：一键部署上线
最后一步是部署。bolt 内置了部署能力，工具站这类纯前端或轻后端项目，通常点一下就能拿到一个公网网址。
部署后建议做三件事：
- 真机访问一遍，手机、电脑都点点，确认工具都能用。
- 如果有自己的域名，在部署平台绑定自定义域名。
- 把网址收好，之后每次在 bolt 里改完重新部署即可更新。
部署平台的具体免费额度、构建限制等以官方为准，会变，别照着旧教程的数字硬记。
省 token 的 5 个实操技巧
bolt 这类云端 AI 工具按消耗计费，token 就是你的”额度”。会省 token，等于让免费/付费额度多撑好几倍。实测有效的几招：
- 提示词一次说清：把技术栈、页面结构、要哪几个功能在第一条里讲全，少来回纠偏。
- 一次只改一处：每轮对话只提一个明确改动，避免它大改特改重写一堆文件。
- 小步快跑别贪多：先跑通核心，再逐个加工具，别让它一口气生成十个页面。
- 复杂逻辑挪到本地：骨架在 bolt 起，难啃的业务逻辑拉到本地用 Cursor/Claude Code 改，省云端额度。
- 改稳了再连 GitHub 推送：避免对半成品反复重生成造成的浪费。
想把这套”AI 起盘 + 快速上线”的思路用到更复杂的产品上，可以看 用 AI 做 SaaS 产品（规划中）。
新手常见坑
- 想一句话做一个超复杂站：bolt 擅长中小型项目，工具站、落地页、小型管理面板很合适；想做大型系统会越改越乱。
- 依赖太新的库：偶尔会装到有兼容问题的版本，遇到报错把错误信息贴回对话框让它修即可。
- 改着改着越来越慢：项目大了上下文变长、token 消耗变快，这时更要”一次只改一处”。
- 以为部署就一劳永逸：在 bolt 里改了代码记得重新部署才会更新线上。
常见问题
bolt 做工具站需要会写代码吗？ 不需要也能做出能用的东西——全程用中文对话提需求即可。但懂一点前端会让你描述更准、排错更快，效果明显更好。完全零基础可以先看 不会编程怎么用 AI 写代码。
bolt 和 Cursor 该选哪个？ 想快速验证想法、不配本地环境就用 bolt；要长期维护、深度改一个项目就用 Cursor。最佳实践是两者配合：bolt 起盘，拉到本地用 Cursor 接着干。
bolt 生成的代码能拿到本地继续开发吗？ 能。连上 GitHub 后把仓库克隆到本地，用任何编辑器或 AI 工具继续改都行，代码完全是你的。
token 不够用了怎么办？ 先用上面的省 token 技巧把消耗压下来；把复杂逻辑挪到本地工具去写，云端只用来起盘和小改，能省下大量额度。
bolt 适合做正式上线的产品吗？ 小工具站、落地页、内部小工具这类轻量项目完全没问题，能直接上线。真正复杂的商业产品建议用它快速做出原型，再迁到本地工程化开发。
👉 看看我们的 AI 编程实战体系课，或逛 AI 编程教程大全 把基本功打扎实。