AB
AB
AiBoss站

全部分类

教程

Bolt.new

教程

用 Bolt.new 从自然语言提示词生成并部署完整 Web 应用

Bolt.new 让开发者在浏览器里用自然语言描述需求，直接生成可预览、可迭代、可导出的全栈 Web 项目。本文从提示词写法讲起，逐步完成一个待办应用与一个 AI 图片生成器，并覆盖环境变量配置、代码手动修改、第三方服务集成、导出到本地与部署上线的完整流程。

Bolt.new 是一个运行在浏览器里的 AI 驱动开发环境，它把大模型的代码生成能力与 WebContainer 技术结合起来，让使用者不需要在本地安装 Node.js、npm 或任何构建工具，就能从一句自然语言描述出发，得到一个包含项目结构、前端界面与后端逻辑的完整 Web 应用，并在同一个页面里预览、迭代、导出和部署。它适合三类人：想快速验证产品想法的创业者、想把设计稿变成可交互原型的设计师，以及想加速项目启动或通过动手实践学习 Web 开发的学习者。如果你更习惯在本地编辑器里逐行改代码，Bolt.new 的定位是「从零到可运行原型」，而不是替代专业 IDE。站内也有对应的工具条目可以对照查看：Bolt.new。

需要先说明一点：Bolt.new 生成的是可运行的初稿，不是可以直接上生产线的成品。它的价值在于把「搭骨架」这一步压缩到几分钟，剩下的代码审查、性能优化、安全加固仍然要由人来完成。下文按「准备工作 → 操作步骤 → 完整示例 → 注意事项」的顺序展开，所有命令与提示词都可以直接照抄修改。

准备工作

浏览器与账号

Bolt.new 的全部操作都在浏览器中完成，因此第一项前置条件是使用一个较新的现代浏览器。打开 Bolt.new 站点后，不注册也可以直接开始对话和生成项目；注册账号之后才能保存项目历史，方便之后回到某个项目继续迭代。如果打算长期使用，建议一开始就注册，避免刷新页面后丢失上下文。

不需要本地环境

这是 Bolt.new 与传统开发流程最大的差别：不需要在本地安装 Node.js、npm、Vite 或任何框架脚手架。项目依赖的安装、开发服务器的启动、预览窗口的渲染都在浏览器内的容器环境中完成。只有当你要把项目导出到本地继续开发时，才需要本机具备 Node.js 与 npm 环境。

第三方服务的密钥

如果应用需要调用外部 API（例如图片生成、数据库、认证、支付），要提前在对应服务商处申请密钥。密钥不要写进代码里，而是在 Bolt.new 的环境变量设置中配置，代码通过 import.meta.env.VITE_XXX 的形式读取。以图片生成场景为例，需要准备一个 Replicate 的 API Token，变量名可以定为 REPLICATE_API_TOKEN。

明确技术栈与功能边界

在动手之前，先想清楚三件事：用什么框架（React、Vue、Svelte、Next.js、Nuxt、SolidJS、Astro、Qwik 等都在支持范围内）、用 TypeScript 还是 JavaScript、第一版必须包含哪几个功能。这三项决定了第一条提示词的质量，也直接决定生成结果是否接近预期。

操作步骤

第一步：打开站点并进入对话界面

在浏览器访问 Bolt.new，页面主体是一个对话框加一个预览区。未注册状态下可以直接输入需求开始生成；注册后项目会与账号关联，可以随时回到历史项目。

第二步：写出结构化的第一条提示词

第一条提示词决定项目骨架，写得越具体，后续返工越少。一条合格的提示词通常包含四块内容：技术栈、功能清单、数据存储方式、界面风格。下面是一个待办事项应用的示例：

创建一个待办事项管理应用，要求：
- 使用 React 和 Tailwind CSS
- 可以添加、编辑、删除任务
- 任务有完成状态切换
- 数据本地存储到 localStorage
- 界面简洁现代，支持深色模式

对比一下模糊写法与具体写法，差别非常明显：

  • 模糊：「做一个电商网站」——AI 只能猜你要什么。
  • 具体：「创建一个简约风格的电商产品页面，使用 Next.js 14 和 Tailwind CSS，包含产品图片轮播、价格、描述、用户评价，添加『加入购物车』和『立即购买』按钮，响应式设计、移动端优先，使用 Framer Motion 添加微交互动画」——每一项都能落到代码上。

第三步：等待生成并检查项目结构

提交提示词后，Bolt.new 会在几秒到几十秒内生成完整项目。以 React 项目为例，生成的文件通常包括：

  • package.json：项目依赖配置
  • src/main.jsx：应用入口
  • src/App.jsx：主组件
  • src/components/：可复用组件目录
  • src/index.css：样式文件

生成完成后先不要急着加功能，花一分钟浏览文件树，确认目录结构符合预期、依赖没有明显缺失。这一步能提前发现「框架选错」这类需要整体重来的问题。

第四步：在预览窗口里测试交互

右侧预览窗口会实时渲染应用。建议按下面的顺序逐项验证：

  1. 点击按钮，确认交互事件正常触发。
  2. 输入数据，验证表单提交与校验逻辑。
  3. 切换深色 / 浅色模式，检查主题切换是否覆盖全部组件。
  4. 缩小浏览器窗口，检查响应式布局是否出现错位或溢出。

发现问题不必手动改代码，直接用一句话描述现象让 AI 修，例如「移动端宽度下任务列表右侧的删除按钮被截断了，请修复」。

第五步：用对话迭代功能

Bolt.new 的核心工作方式是对话式迭代。每次只提一到两个相关需求，改完确认无误再提下一批，比一次性堆十个需求更容易得到正确结果。例如在待办应用上继续追加：

添加任务分类功能，用户可以创建自定义分类
添加任务优先级标记（高、中、低）
添加搜索和过滤功能

AI 会定位到相关组件并修改代码，预览窗口同步更新。如果某次修改把原本正常的功能改坏了，直接说「刚才的修改导致新增任务按钮失效，请回退这部分并保留分类功能」即可。

第六步：手动编辑代码

生成的项目不是只读的。点击左侧文件树选中文件，就可以在代码编辑器里直接修改。AI 会理解你的手动改动并在后续对话中保持一致性，因此可以先用 AI 搭出结构，再手工精修关键逻辑。适合手动改的部分包括：变量命名、抽离重复逻辑、补充类型定义、调整样式细节。

第七步：配置环境变量

涉及密钥的功能必须走环境变量。在 Bolt.new 的设置中添加变量，例如：

REPLICATE_API_TOKEN=your_api_key_here

代码中通过 import.meta.env.VITE_XXX 读取。注意：永远不要在代码里硬编码敏感信息，包括 API 密钥、数据库连接串、支付密钥。导出项目时，同时创建一个 .env.example 文件，列出所有需要的变量名（不含真实值），方便他人或未来的自己知道要配哪些东西。

第八步：部署上线

功能验证通过后，点击 Deploy 按钮，选择部署平台（Netlify 或 Vercel），Bolt.new 会自动完成构建与部署，并生成一个公开访问链接。部署前请再确认一遍：环境变量已在部署平台侧配置、预览环境里测试过的功能在部署后仍然正常。

第九步：导出到本地继续开发

需要长期维护或接入更复杂的工程体系时，点击 Export 下载完整项目源码，然后在本地执行：

# 解压后进入项目目录
cd bolt-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

导出后记得补上 .env 文件（参照 .env.example），否则依赖环境变量的功能会在本地报错。

一个完整示例

下面用一个 AI 图片生成器走完整流程，覆盖从提示词到部署的全部环节。

需求定义

用户输入一段文字描述，应用调用 AI API 生成对应图片并展示，支持下载与历史记录。

第一轮：生成基础框架

创建一个 AI 图片生成器 Web 应用：
- 使用 React + Vite + Tailwind CSS
- 有一个文本输入框让用户输入图片描述
- 调用 Replicate API 生成图片
- 显示生成进度和结果图片
- 支持下载生成的图片
- 历史记录功能，保存最近生成的图片

这一轮结束后，项目里会有一个调用 API 的代码框架，但密钥位置是占位符。

第二轮：接入密钥

在代码中找到 API 调用部分，把占位符替换为环境变量读取方式，并在 Bolt.new 设置里添加 REPLICATE_API_TOKEN。推荐始终用环境变量，而不是把密钥直接写进源码——后者在导出、分享、部署时都容易泄露。

第三轮：优化用户体验

添加以下功能：
- 加载动画显示生成进度
- 错误处理和友好提示
- 图片画廊视图展示历史记录
- 支持不同宽高比选择（1:1, 16:9, 9:16）
- 添加风格预设（写实、动漫、艺术等）

第四轮：样式美化

改进 UI 设计：
- 使用渐变背景和玻璃态效果
- 添加平滑过渡动画
- 优化移动端响应式布局
- 添加分享功能按钮

第五轮：测试与部署

在预览窗口里依次测试：输入描述能否触发生成、生成过程中进度提示是否出现、API 报错时是否有友好提示、历史记录是否持久、三种宽高比是否都生效、移动端布局是否正常。全部通过后点击 Deploy，选择 Netlify 或 Vercel，拿到公开链接。

第六轮：导出与本地验证

下载源码，按前面的命令安装依赖并启动开发服务器，确认本地运行结果与线上一致。这一步能暴露「只在浏览器容器里成立」的隐性问题，例如某些依赖版本在本地解析结果不同。

注意事项

复杂项目要分阶段推进

一次性描述一个大型应用，生成结果往往结构混乱、功能残缺。建议按阶段拆：第一阶段创建基础结构和导航；第二阶段实现核心功能模块；第三阶段添加用户认证；第四阶段集成数据库；第五阶段优化性能和 SEO。每个阶段结束都验证一遍再进入下一阶段。

生成代码需要审查

Bolt.new 生成的代码通常遵循现代实践：函数组件与 Hooks、合理的结构与命名、响应式设计、基础错误处理。但用于生产之前仍应做代码审查与优化，重点关注边界条件、错误分支、以及是否存在不必要的依赖。

后端能力有边界

Bolt.new 主要面向前端应用。需要后端逻辑时，可行路径有三条：创建 Serverless 函数（Netlify Functions、Vercel API Routes）、集成后端即服务（Supabase、Firebase）、调用外部 API。例如要处理表单提交，可以这样描述：

添加一个 API 端点处理表单提交：
- 使用 Next.js API Routes
- 验证输入数据
- 发送邮件通知
- 返回成功/错误响应

第三方服务集成

常见集成方向包括：数据库用 Supabase、Firebase、PlanetScale；认证用 Clerk、Auth0、NextAuth；支付用 Stripe、Lemon Squeezy；分析用 Google Analytics、Plausible；邮件用 Resend、SendGrid。以认证为例，提示词可以写成：

添加用户登录功能：
- 使用 Clerk 进行认证
- 支持邮箱密码登录和 Google OAuth
- 保护需要登录的页面路由
- 显示用户头像和退出按钮

用模板缩短起步时间

Bolt.new 提供落地页、博客系统、仪表盘、电商商店、社交应用等模板。选模板再对话定制，通常比从空白项目开始更快，因为项目结构和常见页面已经就位。

性能优化要主动提

生成的应用只包含基础优化。需要更好表现时，明确要求：

优化应用性能：
- 实现图片懒加载
- 添加代码分割
- 使用 React.memo 优化组件渲染
- 添加 Service Worker 支持离线访问

套餐与配额

Bolt.new 提供免费套餐，包含不限次数的 AI 对话、基础项目创建与预览、有限的部署次数；付费套餐在部署项目数量、AI 响应优先级、高级模板访问、团队协作等方面有更多额度。具体价格、各档位的配额上限与功能范围会随时间调整，请以官网当前信息为准，不要依据第三方文章里的数字做预算决策。

提示词的三条原则

  • 具体明确：说明技术栈、功能需求、设计风格，不要只给一个品类名。
  • 结构化：用分点列表列出功能，比一段长句更容易被准确执行。
  • 渐进式：先创建基础框架，再逐步添加功能，每轮只推进一小步。

掌握与 AI 有效沟通的方式，比记住任何快捷键都重要。把需求拆成可验证的小块，每块生成后立刻在预览窗口里测一遍，是使用 Bolt.new 最稳的节奏。

返回