场景痛点：想做个小工具，却被环境配置劝退
你有没有过这种时刻——脑子里突然冒出一个产品点子，特别想把原型做出来，结果打开电脑第一步就卡住了：装 Node.js、配 npm、初始化项目、处理依赖冲突……折腾两个多小时，界面还没画出一个按钮。
我身边不少做运营、做产品的朋友都有这个困扰。倒不是他们学不会写代码，而是从”想法”到”能跑起来的东西”之间隔着太多琐碎的工程环节。传统开发流程里，环境搭建、依赖管理、部署上线这些事，每一件都够写一篇长文。
Bolt.new 的出现，基本上就是冲着这个环节来的。它把”写代码”这件事压缩成了一个输入框：你用大白话描述想要什么应用，它在浏览器里直接生成、运行、修改，全程不需要你在本地装任何东西。
下面这篇教程，我会带你从零开始跑通 Bolt.new 的完整流程，包括我踩过的几个坑。
Bolt.new 是什么：一句话讲清楚
Bolt.new 是 StackBlitz 团队推出的 AI 全栈开发工具，底层基于自家的 WebContainer 技术——简单说，就是把 Node.js 运行环境直接搬进了浏览器标签页。你在网页上输入需求，它生成完整的 React/Vue/Next.js 项目代码，并且立刻在右侧预览窗口跑给你看。
和 Cursor 这类”AI 辅助写代码”的工具不同，Bolt.new 走的是”AI 代替你写代码”的路线。你不需要看懂每一行代码，更重要的是把需求说清楚。这个定位决定了它特别适合三类人：想快速验证点子的产品经理、需要小工具的运营人员，以及想偷懒的前端开发者。
手把手教程：从一句需求到能用的应用
第一步：注册与界面初识
打开 bolt.new，用 Google 账号或 GitHub 账号登录即可，免费版每天有一定的 token 额度。进入工作台后，界面非常简洁：中央一个对话输入框，下面有几个示例提示词可以参考。
建议第一次使用时先别急着写自己的需求，点一个官方示例感受一下生成节奏——大概 30 秒到 2 分钟，你会看到代码在左侧逐行生成，右侧预览同步刷新，这个体验挺解压的。
第二步：写出高质量的第一条提示词
提示词的质量直接决定产出质量，这是我用下来的最大体会。差的提示词和好的提示词，结果可能差十倍。
我总结了一个”三层需求法”：
- 第一层：是什么。 说清楚应用类型，比如”做一个番茄钟计时器网页应用”
- 第二层：长什么样。 描述界面风格和核心元素，比如”深色主题，中央大号倒计时数字，底部三个按钮：开始、暂停、重置”
- 第三层：怎么动。 说明交互逻辑和数据要求，比如”计时结束播放提示音，历史记录存在本地，能查看最近 10 条”
三层都写清楚，第一次生成的完成度就能到 70% 以上。只写第一层的话，出来的东西往往就是个毛坯。
第三步：迭代修改，像指挥实习生一样对话
生成初版后，真正的工作才刚开始。Bolt.new 的修改方式是纯对话式的，你直接用中文说”把标题字体调大一点””这个按钮换成蓝色””给输入框加个字数限制”，它就会定位到对应代码进行修改。
这里有个关键技巧：一次只提一两个修改点，不要一口气甩五个需求。修改粒度太粗，AI 容易顾此失彼，改了 A 坏了 B。我一般按”视觉 → 交互 → 数据”的顺序逐步推进，每轮修改完先在预览窗口点一遍确认没引入新问题。
第四步：导出代码或一键部署
做到满意后有两条路：
- 下载代码：右上角导出为 zip，本地解压后 npm install && npm run dev 就能跑，方便交给开发同事接手
- 在线部署：连接 Netlify 账号一键发布，几分钟内拿到一个可分享的公网链接，适合给老板或客户演示
我的习惯是演示用在线部署，正式项目下载代码走团队流程。
进阶技巧：三个让效率翻倍的玩法
玩法一：贴参考图。 Bolt.new 支持上传截图，你可以把竞品界面或者设计稿丢进去，说”照这个风格做”。还原度虽然到不了像素级，但骨架和配色基本能对上，比纯文字描述靠谱得多。
玩法二：先要结构再要细节。 复杂项目别让它一口气生成，先说”只生成页面结构和导航，不要填充具体内容”，确认骨架对了再逐页细化。这个思路和盖房子一样，先立框架后砌墙。
玩法三：让它写注释。 在提示词里加一句”代码里加上中文注释”，导出给开发同事时沟通成本会低很多——他们至少能看懂每个模块是干嘛的。
避坑指南：我踩过的三个坑
坑一：token 消耗比想象中快。 免费版额度在多轮对话修改后很快见底，而每次修改都是全量代码重新生成。建议把小修小改攒一攒合并成一次修改，别想到什么改什么。
坑二：复杂业务逻辑别指望它。 Bolt.new 擅长界面和简单交互，涉及支付对接、复杂权限系统这类需求，生成出来的代码只是个架子，核心逻辑还是得人来写。它就是个原型加速器，不是程序员替代品。
坑三：生成的应用默认没有持久化后端。 数据存本地浏览器的 localStorage，换个设备就没了。如果你需要真正的数据存储，要么接 Supabase（Bolt.new 有内置集成），要么导出代码自己加后端。
成果展示：我用它做了什么
上周我用 Bolt.new 花了一个下午做了两样东西：一个是给团队用的需求优先级打分小工具（含导出 Excel 功能），一个是给自媒体账号做的粉丝抽奖页面。前者在传统流程里至少要找开发排期三天，后者可能得买个小程序模板。
两个项目的 token 消耗加起来大约 1 美元多一点，正好在付费计划的入门档位内。这个性价比，对一个经常需要”小工具救急”的人来说，完全值回票价。
延伸思考：原型工具的边界在哪
Bolt.new 这类工具最大的价值，是把”想法验证”的成本压到了接近零。以前一个点子要么放弃，要么攒够资源再做，现在一个下午就能看到能点能用的雏形。
但它也有清晰的边界：复杂系统、生产级代码、深度定制，依然离不开专业开发者。比较理性的用法是把它当成”需求沟通工具”——产品经理用 Bolt.new 做出可交互的原型再拿去和开发对齐，比十页 PRD 都直观。
如果你也有积压很久的小工具想法，不妨这周末就试试。
