Bolt.new 的上手速度是真的快——打开浏览器，登录，写一句话，等几分钟，一个能跑的应用就出来了。不需要装任何东西。

注册账号

1. 打开 bolt.new
2. 点击聊天框，系统会引导你登录
3. 支持 Google、GitHub 或邮箱注册
4. 填一个简短问卷（几秒钟的事）
5. 进入主界面，可以直接开始

不需要信用卡，免费计划就够体验所有核心功能。

免费计划能干什么

日常学习和小项目完全够用。token 用完了等第二天就会重置，不会额外收费。

界面长什么样

Bolt.new 的界面分三块：

• 左侧聊天区：你和 AI 对话的地方，输入 prompt 描述你要什么
• 中间代码编辑器：显示 AI 生成的代码，你也可以直接手动改
• 右侧实时预览：一个真正在跑的应用，可以点击、输入、交互

还有几个重要的 UI 元素：

• Inspector 模式：直接点击预览里的任何元素，可以调整文字、间距、颜色
• 终端：底部有个终端窗口，能跑 npm 命令
• 齿轮图标：项目设置，配环境变量、选 AI 模型

写好第一条 Prompt

第一条 prompt 非常关键——它决定了整个项目的骨架。写得越具体，后面需要返工的次数越少。

不够好的 prompt：

帮我做一个记账应用

好的 prompt：

用 React + Tailwind CSS + shadcn/ui 创建一个个人记账应用：
- 添加收入/支出记录（金额、分类、日期、备注）
- 分类有：餐饮、交通、购物、娱乐、工资、兼职
- 首页展示本月总收入、总支出、余额
- 用饼图展示各分类占比
- 按月份筛选历史记录
- 数据暂时存 localStorage
- 界面风格简洁现代，主色调用蓝色系

注意几个点：明确技术栈（React + Tailwind），列出具体功能，说明数据存储方式，给出 UI 风格偏好。

生成 → 预览 → 迭代

点击发送后，Bolt.new 会花大概 1-5 分钟生成整个应用。你能实时看到：

1. AI 在聊天区解释它在干什么
2. 代码编辑器里文件一个个出现
3. 右侧预览自动刷新，应用逐渐成型

生成完毕后，直接在预览里点击测试。觉得哪里不对，继续发 prompt 调整：

把饼图换成环形图，中间显示总支出金额。
收支记录列表加上左滑删除功能。

每次修改都是一个独立的版本，随时可以回滚到之前的状态。

一键部署

应用满意后，部署到线上只需要两步：

1. 点右上角 Deploy 按钮
2. 选择 Netlify（推荐），等待 30 秒左右

部署完成后，你会得到一个类似 https://your-app.netlify.app 的公开链接，直接发给别人就能用。

# 如果你想下载代码到本地继续开发
# 点击项目设置里的 Download 按钮
# 解压后：
cd your-project
npm install
npm run dev
# 本地 localhost:5173 就能跑起来

一个完整的 10 分钟示例

做一个"每日习惯打卡"应用：

Prompt 1（生成应用，~3 分钟）：

用 React + Tailwind 创建一个习惯打卡应用：
- 可以添加/删除习惯（比如"跑步"、"读书"、"冥想"）
- 每天给每个习惯打卡（打卡/未打卡）
- 日历视图，绿色表示打卡天，灰色表示未打卡
- 展示连续打卡天数
- 数据存 localStorage
- 深色主题，简约风格

Prompt 2（调整 UI，~2 分钟）：

习惯卡片加上 emoji 图标选择器，
每个习惯可以选一个 emoji 作为图标。
连续打卡超过 7 天的习惯加一个火焰 🔥 动画效果。

Prompt 3（部署，~30 秒）：

帮我部署到 Netlify

三步搞定，一个功能完整、界面好看的习惯打卡应用就上线了。