Bolt.new 快速速览
- 开局只给一个大方向加几个想要的功能——「记录工作时段、加任务、保存时段」——别写需求文档。一分钟左右 Bolt 就能搭出能跑的应用。
- 小步快跑地迭代,一次一个功能:结束按钮、分析页、饼图、暗色模式。一次没改到位,就换个说法再说一遍——第二遍通常就对了。
- 改动可能互相打架。按钮失灵时,用大白话描述 bug,或让 Bolt 回退到上一个正常版本——多数问题一次提示词就能修好。
- Google 登录离不开 Firebase:建项目、启用 Google 提供方、把 firebaseConfig 贴回 Bolt,最后在 Firebase 设置里授权你的部署域名。
Building an App from Scratch with Bolt.new
来源视频:Brock Mesarich · AI for Non Techies16:02
截图取自来源视频,均附时间戳深链署名。文字讲解为我们基于完整字幕独立撰写,事实与视频一致。
本教程是面向文字读者的独立图解版。想支持创作者,请观看上方链接的 AI for Non Techies 频道原视频。
在 Bolt.new 里做一个应用:分步图解
- 1
一条提示词描述你的想法
打开 bolt.new,写一个大方向加几个想要的功能——别写成需求文档。本例:「帮我做一个记录工作时段的应用,就叫 FocusFlow。目的是记录工作块、添加时段内完成的任务并保存,这样我能看出时间花在哪、哪些可以外包。」开局细节太多,反而拖慢第一版。
bolt.new 上的 FocusFlow 首条提示词:大方向加几个功能。视频 0:30 处 - 2
看第一版长出来——再用截图打磨
约一分钟后,Bolt 已经写完并跑起了代码:计时器、任务表单和统计卡片。对不满意的区域截图、贴回去、说要怎么改——「把这部分做得再简单一点」。视觉反馈比文字描述像素位置高效得多。
第一版预览,加上贴截图提的修改需求。视频 1:40 处 - 3
给任务加类目
让它加一个类目列,并给出具体例子——admin、内容创作、财务、内容调研、做应用。Bolt 会把它们变成按钮网格,之后每个任务都带彩色标签——这正是后面数据分析有意义的前提。
类目按钮网格,任务带着彩色标签。视频 2:30 处 - 4
要一个「结束会话」按钮
计时器能跑,但什么都没保存。提示:「加上结束会话的能力。」Bolt 新建 SessionControls、SessionSummary 组件接进应用,结束会话时给出时长、完成任务和最常做类目的汇总。
Bolt 规划并创建会话结束相关组件。视频 3:00 处 - 5
把汇总留在主面板
默认结束会话会跳到单独页面。不喜欢这个流程就直说:「不喜欢结束后跳到新页面,把它留在主面板上。」现在汇总卡片直接出现在主界面里。
Session Complete 卡片回到了主面板。视频 4:00 处 - 6
加一个数据分析页
提示加一个 Session Analytics 标签页,列出每天的全部任务和全天汇总。Bolt 把它放在 Current Session 旁边,每段完成的会话都能展开看任务历史——类目标签在这里开始发挥作用。
新的 Analytics 标签,挨着 Current Session。视频 4:30 处 - 7
记录每个任务花的时间
分析要有输入:让任务默认标记完成,并为每个任务加耗时输入。Bolt 加上小时和分钟输入(后来又换成一小时内自由拖动的滑杆),并把数字喂给分析页。
耗时输入加入了任务表单。视频 6:00 处 - 8
用饼图可视化时间
提示:「加个数据分析,用饼图展示每类事情花的时间。」第一版饼图大得离谱——「改小一点」第二遍就修好了。这种小 UI 修正正是 Bolt 快速迭代的舒适区。
尺寸修正后的每日时间分布饼图。视频 6:25 处 - 9
用大白话修回归 bug
构建中途改动可能互相冲突:按钮失灵,或者一个好玩的鼠标拖尾特效弄坏了布局。用平实的语言描述 bug,让 Bolt 删掉你不喜欢的部分,或者直接 Undo。Bolt 自己列的修复清单——这次是六项——通常一轮就能全修好。
六项修复清单:修好计时器,删掉发光特效。视频 9:30 处 - 10
加 Google 登录
想变成真正的产品,得有账号。提示:「加上通过 Google 登录的能力。」Bolt 回一张工作卡——更新 package.json、装依赖、创建 auth 上下文——并附上需要你在 Bolt 之外完成的 Firebase 分步操作。
Bolt 的 Add Google Authentication 工作卡。视频 11:00 处 - 11
创建 Firebase 项目
顺着 Bolt 给的链接打开 Firebase 控制台,新建项目(起名、选账号),就绪后进入控制台。免费 Spark 档足够本教程使用。
Firebase 项目就绪——继续进入控制台。视频 11:30 处 - 12
在登录方法里启用 Google
控制台里:Build → Authentication → Sign-in method。启用 Google 提供方,再把 Email/Password 也启用,让用户两种方式都能注册。这一步正是照着 Bolt 清单做的。
Google 已成为启用的登录方式。视频 12:00 处 - 13
把 firebaseConfig 贴回 Bolt
在 Project settings → Your apps 注册一个 Web 应用,复制 firebaseConfig 代码块,按 Bolt 的指示贴进它建好的配置文件。然后告诉 Bolt「我加好了 Firebase 配置」,它会把一切接好,出现可用的注册按钮。
要复制进 Bolt 配置文件的 firebaseConfig 代码块。视频 12:30 处 - 14
授权你的部署域名
在 Firebase 信任你的网址之前,Google 登录会报「弹窗被拦截」。先从 Bolt 部署应用,再到 Firebase → Authentication → Settings → Authorized domains,把 localhost、IDE 域名和部署网址都加上(问 Bolt,它会给你确切域名)。
Firebase 设置里的 Authorized domains。视频 14:00 处 - 15
上线并登录
打开部署网址,点 Sign in,继续用 Google——弹窗正常了,头像落在右上角,退出登录也好用。一个带真实账号系统的应用就这样部署上线,全程没写一行代码。
在部署好的 FocusFlow 上登录成功。视频 15:00 处