logo

Bolt.new Prompt Guide

Bolt.new 的 prompt 写法,和传统聊天机器人不太一样。你不是在问一个答案,而是在给一个会直接生成项目结构、页面和逻辑的系统下任务。所以真正重要的不是修辞,而是任务定义有没有工程边界。

先把 prompt 当成任务说明书

一个好用的 Bolt prompt,通常至少要把下面几件事讲清楚:

  • 目标是什么
  • 用什么技术栈
  • 核心功能是什么
  • 数据先从哪里来
  • 哪些东西这轮明确不做
  • 什么叫“这一轮完成了”

这比“写得像不像高手 prompt”重要得多。因为 Bolt 一旦理解错了边界,后面每一轮都会在错误方向上叠代码。

一个更稳的基本结构

Goal: build a simple booking prototype.
Stack: React + Tailwind.
Data: local mock data only.
Features: create booking, list bookings, cancel booking.
Constraints: no auth, no backend, mobile-first.
Acceptance: user can create one booking and see it in the list.

这个结构有个现实好处: 你生成完以后,可以一条一条对照,而不是只看“页面好像差不多”。

Bolt 官方教程现在强调的方向

官方视频和帮助中心近几个月的内容,明显更偏“逐步构建”和“用 prompt library 提高复用”,而不是一口气把整个产品都扔进去。这其实挺合理,因为原型工具最怕第一轮 scope 爆炸。

所以我更建议把 prompt 分成三层:

  1. 第一次只拿结构和主流程
  2. 第二次再补数据状态和交互
  3. 第三次才要求视觉、copy 和 polish

为什么很多 prompt 会失败

最常见的失败不是模型不够强,而是你把太多未定义决策都交给它了。比如一上来就要:

  • auth
  • payment
  • admin panel
  • analytics
  • role-based dashboard
  • external API

这类 prompt 看起来完整,实际是在要求 Bolt 一次定义信息架构、数据流、页面状态和视觉层级。结果通常是页面很多,但主流程并不清楚。

复杂逻辑先要方案,别先要代码

如果任务已经涉及多组件状态、外部 API 或复杂交互,先让它说方案:

Do not write code yet.
First show the component breakdown, state flow, and files you plan to create.

这个动作的价值很大。它会强迫 Bolt 先暴露它的理解,而不是直接把理解错误写进代码里。

很有用的补充句式

  • Keep the current folder structure.
  • List assumptions first.
  • Show the files you plan to change before editing.
  • Fix with minimal changes.
  • Do not rewrite unrelated parts.

这些句子听起来很普通,但对控制原型质量很有效。它们的作用是压住“大重构冲动”。

一个更像真实使用者的经验

你如果已经知道要什么页面、什么流程、什么约束,Bolt.new 会非常快。
你如果自己都还在模糊探索,那就先让它帮你输出结构方案,而不是直接要完整 app。

Bolt.new 全栈开发指南
Vibe Coding

Bolt.new 全栈开发指南

Bolt.new 是 StackBlitz 推出的 AI 全栈开发工具,适合在浏览器中快速搭出可演示的全栈原型。

Bolt.new 全栈开发指南Prompt 技巧

Bolt.new Prompt Guide

Bolt.new 的 prompt 写法,和传统聊天机器人不太一样。你不是在问一个答案,而是在给一个会直接生成项目结构、页面和逻辑的系统下任务。所以真正重要的不是修辞,而是任务定义有没有工程边界。

#先把 prompt 当成任务说明书

一个好用的 Bolt prompt,通常至少要把下面几件事讲清楚:

  • 目标是什么
  • 用什么技术栈
  • 核心功能是什么
  • 数据先从哪里来
  • 哪些东西这轮明确不做
  • 什么叫“这一轮完成了”

这比“写得像不像高手 prompt”重要得多。因为 Bolt 一旦理解错了边界,后面每一轮都会在错误方向上叠代码。

#一个更稳的基本结构

text
Goal: build a simple booking prototype. Stack: React + Tailwind. Data: local mock data only. Features: create booking, list bookings, cancel booking. Constraints: no auth, no backend, mobile-first. Acceptance: user can create one booking and see it in the list.

这个结构有个现实好处: 你生成完以后,可以一条一条对照,而不是只看“页面好像差不多”。

#Bolt 官方教程现在强调的方向

官方视频和帮助中心近几个月的内容,明显更偏“逐步构建”和“用 prompt library 提高复用”,而不是一口气把整个产品都扔进去。这其实挺合理,因为原型工具最怕第一轮 scope 爆炸。

所以我更建议把 prompt 分成三层:

  1. 第一次只拿结构和主流程
  2. 第二次再补数据状态和交互
  3. 第三次才要求视觉、copy 和 polish

#为什么很多 prompt 会失败

最常见的失败不是模型不够强,而是你把太多未定义决策都交给它了。比如一上来就要:

  • auth
  • payment
  • admin panel
  • analytics
  • role-based dashboard
  • external API

这类 prompt 看起来完整,实际是在要求 Bolt 一次定义信息架构、数据流、页面状态和视觉层级。结果通常是页面很多,但主流程并不清楚。

#复杂逻辑先要方案,别先要代码

如果任务已经涉及多组件状态、外部 API 或复杂交互,先让它说方案:

text
Do not write code yet. First show the component breakdown, state flow, and files you plan to create.

这个动作的价值很大。它会强迫 Bolt 先暴露它的理解,而不是直接把理解错误写进代码里。

#很有用的补充句式

  • Keep the current folder structure.
  • List assumptions first.
  • Show the files you plan to change before editing.
  • Fix with minimal changes.
  • Do not rewrite unrelated parts.

这些句子听起来很普通,但对控制原型质量很有效。它们的作用是压住“大重构冲动”。

#一个更像真实使用者的经验

你如果已经知道要什么页面、什么流程、什么约束,Bolt.new 会非常快。
你如果自己都还在模糊探索,那就先让它帮你输出结构方案,而不是直接要完整 app。

Vibe Coding

AI 编程体系课:工具、流程与最佳实践

从零搭建 AI 编程工作流,提升开发效率。

进入 Vibe Coding →

相关路线图

常见问题

Bolt.new 适合做什么类型的项目?
更适合原型和中小型全栈应用。你可以在 30-60 分钟内做出可演示的版本,适合路演、教学演示和需求验证(经验推断)。
Bolt.new 和 Cursor 的差别在哪里?
Bolt.new 强调“浏览器内的全栈生成与运行”,适合快速产出完整应用;Cursor 更偏“本地代码增强”,适合长期工程化开发。
需要本地安装 Node.js 或配置环境吗?
不需要。Bolt.new 依赖 WebContainer,在浏览器中直接安装依赖并运行。
部署方式有哪些?
常见是直接连接 Netlify 或导出代码到 GitHub,再用 Vercel/Cloudflare Pages 等部署。