你大概率试过 Bolt.new——把一句话丢进去，浏览器里就长出一个能跑的网站。但如果你和大多数人一样，用它的方式是“打开页面→输入需求→盯着它烧Token”，那你只用了它三成功力。StackBlitz 这款基于 WebContainers（浏览器里直接跑 Node.js）的产品，2024年10月上线后据 TechCrunch 等多家媒体报道曾以创纪录速度冲到年化数千万美元收入，用户量早已千万级——但官方文档里那几个“开关”，社区教程至今没几个讲透的。这篇就聚焦 Bolt.new 一个工具，把八个真正省钱、省时间、防止你被平台锁死的隐藏用法拆开讲。每个都有具体操作步骤和适用场景，10分钟就能全部用上。

先搞清楚它的命门：Token

在讲技巧之前，必须先建立一个认知：Bolt 的一切都围绕 Token 计费。免费账户每天有固定 Token 额度（具体数额以官网 pricing 页为准，历史上是几十万级别），Pro 订阅起步约 $20/月，Token 用量越大账单越高。所以下面八个技巧，本质上分三类：怎么少烧、怎么烧在刀刃上、怎么在 Token 之外拿到更多。理解了这个框架，你自己都能推导出第六、第七个技巧。

技巧一：Discuss 模式——需求对齐阶段的 Token 花费趋近于零

这是全篇最重要的一招。 输入框上方有个不起眼的模式切换，默认是 Build（构建）模式，但很多人不知道可以切到 Discuss（讨论）模式。

• 操作步骤：点击输入框上方的模式切换器 → 选 Discuss → 把你的需求、技术栈偏好、页面结构全部在 Discuss 模式下聊清楚 → 聊透了再切回 Build，一次性下发总结好的需求。
• 预期效果：Discuss 模式只聊天、不执行代码、不跑构建，Token 消耗只有 Build 模式的零头。而大部分人把“需求讨论”直接放在 Build 模式里做，每轮对话都触发文件重写和构建，等于用烧钱的方式开会。
• 适用场景：项目立项前的需求打磨、技术选型纠结（用 React 还是 Astro？Tailwind 还是 MUI？）、给客户演示前的方案确认。任何“还不知道要什么”的阶段，都别用 Build 模式。

技巧二：看懂 Diff 计费，把指令拆成小步

Bolt 的 Token 消耗机制是：首轮回复按整文件计算，后续修改只按 Diff（改动差量）计费。这个机制写在官方文档里，但几乎没人据此调整自己的用法。

• 操作步骤：把“帮我重写整个页面”改成“只把 Hero 区的标题改成两行，其他不动”；把“加上登录、支付、后台”拆成三轮指令，每轮只做一件事。
• 预期效果：让它全量重写一个 500 行的文件和只改 10 行，消耗可能差一个数量级。指令越精准指向局部，Diff 越小，Token 越省。
• 适用场景：所有迭代阶段。尤其是那种“差一点就对了”的微调场景——这时最忌讳的就是一句话让它推倒重来。

技巧三：预览页里“选中元素”再说话

改一个按钮的颜色，你还在用文字描述“右上角那个蓝色的按钮”？Bolt 的预览窗口支持直接点击页面元素。

• 操作步骤：在右侧预览窗格中，点击目标元素 → 元素被选中并带入上下文 → 直接输入修改要求。
• 预期效果：省掉大量“描述定位”的文字，AI 也不会改错地方。定位 + 修改一气呵成，一轮对话解决。
• 适用场景：UI 微调、样式对齐、文案替换。这是前端外包沟通里最费口舌的部分，现在变成了一个点击。

技巧四：拖截图进去，按图复刻

Bolt 支持在对话中直接上传图片，这是它复刻设计稿能力的入口。

• 操作步骤：把目标页面截图（或设计稿导出图）直接拖进输入框 → 配合一句“按这张图还原布局和配色” → 生成后用技巧三逐元素修正。
• 预期效果：从“文字想象”变成“像素对照”，还原度明显提升。海外独立开发者圈常见的进阶玩法是用 Builder.io 的 Visual Copilot 这类 Figma 插件把设计稿转成代码结构再喂给 Bolt（社区工作流，非官方功能，效果因稿而异）。
• 适用场景：给客户做“照着这个网站改”的项目、把设计同事的稿子直接变前端、快速做竞品风格的演示页。

技巧五：GitHub 双向同步——别让代码锁死在别人家里

这是风险控制级别的技巧。很多人项目做完了才发现：代码在 Bolt 的工作区里，想搬走很麻烦。其实入口一直都在。

• 操作步骤：项目页连接你的 GitHub 账号 → 可以从已有仓库导入（import）老项目到 Bolt 里改 → 改完一键导出（export）回你的仓库，以 commit 形式落盘。
• 预期效果：你的代码资产随时在 GitHub 有完整备份，Bolt 只是一个“云端结对程序员”，而不是代码监狱。平台哪天改定价、改条款，你随时带着代码走。
• 适用场景：老项目局部重构（把它拉进来，让 AI 改完再推回去）、团队协作（Bolt 改完走正常 PR 评审流程）。国内用户注意：GitHub 同步需要网络条件配合，可考虑配合自己的镜像方案。

技巧六：Supabase 一键接入，MVP 自带用户系统

做个能注册登录、存数据的应用，后端才是大头。Bolt 和 Supabase 有官方级的集成。

• 操作步骤：在对话中明确要求“接入 Supabase，实现邮箱注册登录，建一张 orders 表” → 首次会触发 Supabase 授权登录 → 授权后 Bolt 自动完成建表、配置认证、生成前端对接代码。
• 预期效果：跳过“自建后端 + 写鉴权 + 配数据库”整条流水线，一个下午跑出带真实用户系统的 MVP。数据库、认证、文件存储全部由 Supabase 托管，免费档够验证期使用。
• 适用场景：出海小产品验证、给客户做的演示系统、内部工具。对比国内同类方案（微信登录体系绑死、备案流程长），这套组合适合面向海外市场的快速验证。

技巧七：Expo 出真机 App，扫码就能演示

大多数人以为 Bolt 只能做 Web 应用。实际上它支持通过 Expo 生成移动端应用。

• 操作步骤：在需求里明确说“用 Expo 构建一个移动端应用” → 生成项目后，预览区会出现二维码 → 手机装 Expo Go，扫码即可在真机上运行。
• 预期效果：不改一行原生代码，得到一个能在 iOS/Android 真机上跑的 App 原型。给客户演示时，真机体验的说服力和浏览器截图完全是两个价位。
• 适用场景：移动端产品原型验证、给非技术客户做演示、参加黑客松快速出 Demo。注意真机预览同样需要能访问 Expo 服务的网络环境。

技巧八：Publish 一键上线，ZIP 导出做兜底

Bolt 内置了发布流程，多数人却停在“预览成功”就截图交差。

• 操作步骤：点击右上角 Publish/Deploy → 应用部署到 Netlify，获得可访问的公网链接 → 在部署设置里绑定自定义域名 → 同时用下载 ZIP 功能把完整源码存一份本地。
• 预期效果：客户拿到的是能打开的真链接而不是演示视频；你的本地多一份源码兜底。这个动作让交付物从“作品”升级为“产品”。
• 适用场景：接单交付、作品集展示、给投资人/老板演示。配合技巧五的 GitHub 同步，形成“云上有仓库、本地有 ZIP、公网有链接”的三重保险。

推荐工作流：把八个技巧串起来

flowchart TD
    A["新想法"] --> B{"需求清楚吗？"}
    B -->|不清楚| C["Discuss模式聊需求"]
    C --> D["让Bolt先出实现计划"]
    B -->|清楚| D
    D --> E["Build模式生成首版"]
    E --> F{"局部改还是大改？"}
    F -->|局部| G["预览页选中元素再下指令"]
    F -->|大改| H["拆小步按Diff计费提交"]
    G --> I["截图对照逐项复刻"]
    H --> I
    I --> J{"要用户系统吗？"}
    J -->|要| K["接Supabase登录与建表"]
    J -->|不要| L["准备交付"]
    K --> M{"要真机App吗？"}
    M -->|要| N["Expo扫码真机预览"]
    M -->|不要| L
    N --> L
    L --> O["GitHub同步存档加本地ZIP"]
    O --> P["Netlify一键上线"]

信息差总结

行动指南

1. 今天：登录 bolt.new，新建项目，先切 Discuss 模式把一个搁置已久的想法聊成完整需求清单（让 AI 输出实现计划作为收尾）。
2. 第一轮迭代：切回 Build 生成首版，之后所有修改用“选中元素 + 局部指令”，体会 Diff 计费下的 Token 消耗差。
3. 加后端：要求接入 Supabase，跑通注册登录和一张业务表。
4. 做备份：绑定 GitHub 导出一次，再下载一份 ZIP。
5. 上线：Publish 到 Netlify，把公网链接发到你的朋友圈或客户群里——从想法到公网可访问，走完这一整圈，你才算真正用过 Bolt。

参考来源

1. Bolt.new 官网与产品入口：https://bolt.new
2. StackBlitz 官方文档（含 Discuss 模式、prompting 指南、GitHub 同步说明）：https://docs.stackblitz.com
3. StackBlitz 官方博客（产品更新公告）：https://blog.stackblitz.com
4. Supabase（后端集成对象）：https://supabase.com
5. Expo（移动端构建与真机预览）：https://expo.dev

注：文中免费额度、定价等细节以官网实时页面为准；据 TechCrunch 等媒体报道的 ARR 数据未经官方审计，仅作规模参考。

本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵爱卫生（微信ID: gprshome201101）维护。 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。

[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。