Bolt.new 的上手速度是真的快——打开浏览器，登录，写一句话，等几分钟，一个能跑的应用就出来了。不需要装任何东西。
注册账号
- 打开 bolt.new
- 点击聊天框，系统会引导你登录
- 支持 Google、GitHub 或邮箱注册
- 填一个简短问卷（几秒钟的事）
- 进入主界面，可以直接开始
不需要信用卡，免费计划就够体验所有核心功能。
免费计划能干什么
| 项目 | 免费额度 |
|---|---|
| 每日 token | 300,000 |
| 每月 token | 1,000,000 |
| 项目数 | 无限制 |
| 部署 | 支持 |
| AI 模型 | 全部可用 |
日常学习和小项目完全够用。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 分钟生成整个应用。你能实时看到：
- AI 在聊天区解释它在干什么
- 代码编辑器里文件一个个出现
- 右侧预览自动刷新，应用逐渐成型
生成完毕后，直接在预览里点击测试。觉得哪里不对，继续发 prompt 调整：
把饼图换成环形图，中间显示总支出金额。
收支记录列表加上左滑删除功能。
每次修改都是一个独立的版本，随时可以回滚到之前的状态。
一键部署
应用满意后，部署到线上只需要两步：
- 点右上角 Deploy 按钮
- 选择 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
三步搞定，一个功能完整、界面好看的习惯打卡应用就上线了。
