Bolt.new实战指南①｜5分钟搭建你的第一个AI应用

这是Bolt.new实战指南的第一篇。在接下来的7篇中，我们将从零开始，完整掌握这款浏览器内AI全栈开发工具。今天先搞清楚它是什么、能做什么、怎么开始。

Bolt.new是什么？

Bolt.new是StackBlitz推出的AI全栈开发平台，核心卖点就一句话：在浏览器里用自然语言描述需求，AI自动生成完整Web应用并实时预览。

和Cursor、Claude Code等"编码助手"不同，Bolt.new的定位更偏"应用生成器"——你不需要写代码，甚至不需要懂代码，只需要描述你想要什么。

与其他工具的定位差异

核心能力一览

1. 自然语言生成应用：描述需求→AI生成前端+后端+数据库
2. 实时预览：代码变化即时反映在右侧预览窗口
3. 一键部署：开发完成后直接部署到StackBlitz云平台
4. 全栈支持：React、Vue、Svelte、Node.js、Python等主流框架
5. NPM集成：可直接安装任何NPM包
6. 协作编辑：支持多人同时在线编辑

快速开始：5分钟搭建第一个应用

步骤1：打开Bolt.new

访问 bolt.new，使用GitHub或Google账号登录。免费版每月有一定额度，足够入门使用。

步骤2：描述你的需求

在输入框中用自然语言描述你想做的应用。比如：

做一个待办事项应用，支持：
- 添加、删除、标记完成
- 按优先级排序
- 本地存储，刷新不丢失
- 深色/浅色主题切换

Bolt.new会自动选择技术栈（通常是React + TypeScript），然后开始生成代码。

步骤3：实时预览与调整

AI生成代码后，右侧会实时显示应用预览。如果效果不理想，直接在对话框中说：

把按钮颜色改成蓝色
添加一个"全部清除"按钮
列表为空时显示一个空状态提示

Bolt.new会理解你的意图并修改对应代码。

步骤4：部署上线

满意后，点击右上角"Deploy"按钮，Bolt.new会自动将应用部署到StackBlitz CDN，生成一个公开访问链接。

免费版 vs 付费版

入门阶段免费版完全够用，等项目复杂了再考虑升级。

常见问题

Q：Bolt.new生成的代码质量如何？
A：简单应用（CRUD、展示页）质量不错，可直接使用。复杂应用（复杂状态管理、性能优化）需要人工审查和调整。

Q：支持哪些框架？
A：主流都支持——React、Vue、Svelte、Angular、Next.js、Nuxt、Astro等。AI会根据你的描述自动选择最合适的框架。

Q：可以导入已有项目吗？
A：可以。支持从GitHub仓库导入，导入后Bolt.new会分析项目结构并理解代码上下文。

下一篇，我们将深入Bolt.new的Prompt工程——如何精准描述需求，让AI一次生成满意的应用。这是Bolt.new使用中最核心的技能。