Bolt.new 全栈应用开发入门教程：5 步做出第一个可上线应用

Bolt.new 全栈应用开发只有 5 步：注册、描述需求、选中元素微调、加数据库和登录、发布上线。全程在浏览器完成，不用本地装环境，免费版每天 300K token 额度，跑通第一个应用够用。

它适合谁：产品经理、运营、学生这类没有开发背景、但想把想法快速变成能用页面的人，也适合开发者用它快速搭原型。官方首页列出的典型用户就包括产品经理、创业者、营销人和学生。

前置准备：账号、网络和免费额度

开始前确认三件事：

1. 准备一个邮箱或 Google 账号，注册即用。
2. 浏览器能稳定打开 bolt.new 官网，服务部署在海外，网络环境不同，生成速度会有差异。
3. 对免费额度有数：官方定价页写明免费版每天 300K token、每月 1M token，超出当日上限后无法继续用 AI 生成。

这里解释一下 token：它是 AI 读写文本的计量单位。Bolt 官方帮助中心说明，大部分 token 消耗来自把你的项目文件同步给模型，项目越大，每条消息的消耗越高。所以第一条提示词把需求说清楚、后面用小步修改，是最省额度的打法。

第 1 步：注册并进入工作台

打开 bolt.new，点右上角 Get Started 注册登录。进入后会看到「What will you build today?」的工作台界面，中间是需求输入框，可以切换 Website、App、Slides、Prototype 等项目类型，也支持从 Figma 设计稿、GitHub 仓库或官方模板起步。

不知道第一条提示词怎么写的，建议先逛官方模板库，里面有仪表盘、店铺、作品集等现成起点，参照一个再改成自己的需求，比从零描述省力得多。

第 2 步：用一段话描述你要做的应用

第一条提示词的质量直接决定生成效果。推荐写法是把页面结构、核心功能、视觉风格一次性说清，避免挤牙膏式追问，既省时间也省 token。

以个人记账工具为例，可以这样写：

「帮我做一个记账网页应用：支出记录列表、按月统计图表、分类标签三块内容；风格简洁，蓝白配色；手机浏览器打开也要排版正常。」

发送后，Bolt Agent 会自动拆解任务并生成代码，右侧同步出现可交互的预览。官方介绍 Bolt 会根据任务自动路由到合适的模型：免费用户使用 Standard 档，Pro 订阅用户可用更强的 Max 档。如果你只是想直接调用免费大模型 API 自己写代码，可以参考 Union Alpha 免费 262K 匿名大模型实测。

第 3 步：在预览里选中元素微调

第一版不满意很正常，关键是别推倒重来。Bolt 支持在预览界面直接点选某个元素，只对选中的部分下指令，例如「这个按钮换成圆角」「标题字号调大」。

选中再改有两个好处：一是改动范围小，AI 不用重新理解整个页面；二是消耗的 token 更少。这是新手最容易忽略、又最能省额度的一个操作，官方首页也把「Select an element on the preview」作为核心功能演示。

第 4 步：加数据库和登录

到这一步页面还只是「前端」，要成为全栈应用，需要数据存储和用户体系。Bolt 内置了 Bolt Cloud 后端，官方定价页标注免费版也包含无限个数据库、用户管理与认证能力。

操作依然是自然语言，例如：「给应用加用户登录，登录后每个人只能看到自己的记账记录。」Bolt 会生成对应的数据表结构和登录流程。

数据库方面，Pro 计划支持选择数据库提供商，官方帮助中心也有接入 Supabase 的专门章节，想自己掌控数据库的人可以后续再迁移。

第 5 步：发布上线拿到访问链接

功能验收后用发布功能把应用部署出去。免费版自带网站托管，每月最多 333K 次 Web 请求，但发布页面会带 Bolt 品牌标识，也不能绑定自定义域名。

需要去标识、绑定域名和 SEO 优化，就要 Pro 计划，25 美元每月起，同时取消每日 token 上限。具体额度规则和各档价格，可以看站内的 Bolt.new 额度与付费方案说明。

验收：怎么确认真的跑通了

1. 预览里完整走一遍核心流程。以记账应用为例：添加一条支出，列表和月度统计同步更新。
2. 刷新页面后数据仍在，说明数据库真的接上了，而不是只存在内存里。
3. 把发布后的链接放进手机浏览器，布局不乱才算合格。

新手最容易卡住的 5 个点

工具正在把「会做产品」的门槛降到「会说话」，这个变化对普通从业者意味着什么，可以看 晓辉博士谈 AI 时代的个体机会。想横向比较更多工具的读者，新媒体运营常用 AI 工具清单 按工作环节做了整理。