Bolt.new 是 2026 年最值得普通人上手的「AI 全栈开发」工具——你在浏览器里说话，它就能写代码、装依赖、起服务器、部署上线。本教程用真项目演示：搭一个面向独立开发者的「AI Prompt 模板市场」，从空文件夹到一个能在 Stripe 收钱的网站，每一步都点给你看。

Bolt.new 在浏览器中通过对话生成全栈应用
Bolt.new 在浏览器中通过对话生成全栈应用

为什么选 Bolt.new 而不是 Cursor 或 v0

  • Cursor 是 IDE，适合你已经在本地有项目，想提速。Bolt.new 适合从 0 开始、想要一个能立刻跑起来的成品
  • v0 只生成前端 UI。Bolt.new 前后端、数据库、部署一条龙
  • Windsurf/Lovable 都是同品类工具，但 Bolt.new 的免费额度更慷慨（约 150 万 Token），足够做 MVP
  • 整个过程在浏览器里完成，不需要装任何软件，Mac/Windows/Linux 都能用

第一步：注册并新建项目

  1. 打开 bolt.new，用 Google/GitHub 账号登录
  2. 点「New Project」，会进入一个空的全栈开发环境（左边文件树，中间编辑器，右边终端）
  3. 默认模板是 React + Vite + Tailwind + Supabase，不用改，直接开干

注意：Bolt.new 账户分免费版和 Pro 版。免费版每月 150 万 Token，做一个落地页绰绰有余；如果要做完整 SaaS，Pro 版 $20/月不限 Token，更划算。

第二步：用中文描述产品，Bolt 会自己拆解

在右侧 AI 对话框，输入下面的完整需求。这一段话不需要翻译成英文——Bolt 对中文的理解已经足够好：

我要做一个面向独立开发者的「AI Prompt 模板市场」MVP：

核心功能：
1. 首页：展示精选 Prompt 模板，每个模板显示标题、作者、价格（0 表示免费）、预览图
2. 模板详情页：显示完整 Prompt 内容、评分、评论
3. 购买流程：用 Stripe Checkout 完成支付，付完自动解锁
4. 用户系统：邮箱注册登录，登录后能查看已购买的模板
5. 数据：所有数据存 Supabase（postgres）

技术栈：
- 前端 React + Tailwind CSS
- 后端 Supabase（auth + database）
- 支付 Stripe Checkout
- 部署到 Bolt 的一键部署

设计风格：极简现代，主色 #6366f1，留白多，移动端适配。

先给我搭出首页模板列表和详情页，支付先接 Stripe test mode。

回车后等约 2 分钟。Bolt 会一边写文件、一边在终端装依赖。过程中你可以看它每一步在做什么，文件树会逐渐长出目录。

第三步：用对话迭代细节

AI 第一次生成的页面往往是「能用但不好看」。在 Bolt 里你不用自己改 CSS，直接说话：

目前首页的卡片太挤了。改一下：
1. 卡片间距加大，每行显示 3 个改成每行 2 个
2. 价格显示做大、加粗
3. 顶栏加一个「免费 vs 付费」的切换 Tab
4. 模板预览图默认用 Unsplash 相关主题

Bolt 会在十几秒内改好。迭代几次之后，页面会比较像样了。如果改坏了，点顶部的「Checkpoint」可以回到任意历史版本。

第四步：接 Supabase 数据库

Bolt 内置了 Supabase 集成，绑定一下就行：

  1. 在 Supabase 官网（supabase.com）注册，新建项目，记下 Project URL 和 anon key
  2. 回到 Bolt，右上角点「Supabase」图标 → Connect，输入 URL 和 key
  3. Bolt 会自动建好表结构：users、templates、purchases、reviews
-- 手动建表的 SQL（Bolt 自动生成的版本）
create table templates (
  id uuid primary key default gen_random_uuid(),
  title text not null,
  description text,
  prompt_content text,
  price int default 0,
  preview_url text,
  author_id uuid references auth.users,
  created_at timestamptz default now()
);

create table purchases (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users,
  template_id uuid references templates,
  stripe_session_id text,
  amount int,
  created_at timestamptz default now()
);

表建好后，回到 Bolt 跟它说「给首页加上真实数据，从 templates 表读取」，它会自动改代码。

第五步：接 Stripe 收款

  1. 去 stripe.com 注册（暂不开通，需要境外银行卡，但 test mode 不需要），拿到 test secret key
  2. 在 Bolt 里装 Stripe 依赖：npm install stripe @stripe/stripe-js
  3. 告诉 Bolt：「创建 /api/checkout 路由，接收模板 id，返回 Stripe Checkout URL；前端点购买按钮跳这个 URL；创建一个 webhook /api/webhook 接收 payment_intent.succeeded 事件，往 purchases 表写一条记录」

用 Stripe 提供的测试卡 4242 4242 4242 4242、任意未来日期和 CVC 走一遍流程。支付成功页面跳回你的网站，purchases 表里多一条记录——这就跑通了真实付费的最小闭环。

第六步：一键部署

这一步最爽。Bolt 右上角点「Deploy」按钮，它会自动部署到 Netlify 或 Vercel，给你一个临时的 url（比如 xxx.bolt.hosting）。

如果你想用自己的域名：

  1. 在 Cloudflare 买个域名（一年十几块）
  2. 在 Netlify/Vercel 后台加 Custom Domain，复制它给的 CNAME
  3. 到 Cloudflare 的 DNS 里把 CNAME 配好，10 分钟内全球生效

第七步：上线后的检查清单

  • 把 Stripe 切到 live mode，把 SUPABASE 密钥都换成生产环境
  • 在 Supabase 后台打开 Row Level Security，避免别人读到别人的购买记录
  • 接一个简单的分析（推荐 Plausible 或 Umami，5 分钟搞定）
  • 加一个 Sentry 或 PostHog 做错误监控，Bolt 部署好的项目默认没监控

经验之谈：什么时候该离开 Bolt

Bolt 做 MVP 无敌，但项目超过 1 万行代码后你会发现：「我想自己改一行，但 Bolt 改了之后整个页面又重写了」——这是 AI 全栈工具的通病，因为它的代码组织不总是你想要的。

用 Bolt 做 0 到 1 的速度是过去 10 倍；做 1 到 100，还是回到 Cursor 或 Claude Code 这种 IDE 级工具更稳。