你大概率试过 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、公网有链接”的三重保险。 ## 推荐工作流：把八个技巧串起来 ```mermaid 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一键上线"] ``` ## 信息差总结 | 你以为的 Bolt | 实际上的 Bolt | |---|---| | 一个“输入一句话出网站”的玩具 | 一套有模式切换、按 Diff 计费的工程工具 | | 需求讨论也在 Build 模式里做 | Discuss 模式聊需求，Token 花费趋近于零 | | 改样式只能反复文字描述 | 预览页点选元素，指哪改哪 | | 代码只能留在 Bolt 里 | GitHub 导入导出 + ZIP 下载，随时可迁移 | | 只能做网页 | Supabase 补后端，Expo 出真机 App | | 预览成功就等于交付 | Publish 上线 + 自定义域名才算闭环 | ## 行动指南 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 等场景全覆盖。