Bolt DIY搭建教程:免费开源AI编程工具完整指南

Bolt DIY是免费开源AI编程工具,配合免费API可零成本快速构建网站和应用。
Bolt DIY是Bolt.new的开源免费版本,支持自由集成Google Gemini等多种AI模型API,可在浏览器中运行完整开发环境。搭建仅需两分钟,通过自然语言即可快速生成高性能网站和应用,AI生成的代码在PageSpeed测试中性能得分99、SEO得分100,远超WordPress。还支持截图驱动设计、多模型切换等进阶功能,是目前性价比最高的零成本开发方案。
想要免费构建网站、应用和各种工具?Bolt DIY 是一个完全免费的开源 AI 编程工具,配合 Google Gemini 等免费 API,你可以在几分钟内完成过去需要数天甚至数周的开发工作。本文将详细介绍如何从零开始搭建 Bolt DIY,并展示它的强大能力。
什么是 Bolt DIY?
Bolt DIY 是 Bolt.new 的开源免费版本,托管在 GitHub 上。Bolt.new 由 StackBlitz 团队开发,其核心技术是基于 WebContainers——一种能在浏览器中运行完整 Node.js 开发环境的突破性技术。开源版 Bolt DIY 将这一能力解放出来,允许开发者在本地部署并自由集成任意 LLM(大型语言模型)API,形成「自带模型」(BYOM, Bring Your Own Model)的开放架构,代表着 AI 工具从封闭 SaaS 向开放基础设施演进的重要趋势。
与付费版 Bolt.new 相比,它不仅完全免费,还提供了更多自定义功能——你可以自由选择和切换不同的 AI 模型 API,包括 Google Gemini、Anthropic Claude、Perplexity 等。
它的核心优势在于:
- 完全免费:工具本身不收费,配合免费 API 即可使用
- 本地部署:数据和项目都在你自己的机器上,隐私有保障
- API 灵活切换:可以根据不同任务选择最合适的 AI 模型
- 功能更丰富:支持附件上传、语音指令、聊天导出等付费版不具备的功能
环境搭建:两分钟快速上手
前置准备
搭建 Bolt DIY 需要两个免费工具:Node.js 和 Docker。确保它们已安装并在后台运行。然后前往 Bolt DIY 的 GitHub 仓库,按照说明操作。
具体步骤非常简单:打开终端,按照 GitHub 页面上的指令依次复制粘贴命令即可。整个过程大约只需两分钟。如果遇到任何报错,可以将错误截图发给 ChatGPT,它会帮你快速排查问题。
搭建完成后,终端会给出一个本地访问地址(localhost URL),将其复制到浏览器中打开,你就能看到 Bolt DIY 的界面了。
配置免费 API 密钥
在开始编程之前,需要插入 API 密钥。推荐使用 Google Gemini 2.0 Flash,这是 Google DeepMind 于 2025 年推出的多模态旗舰模型,专为速度与效率优化。它支持文本、图像、音频等多模态输入,上下文窗口高达 100 万 token,在代码生成任务上表现尤为突出。通过 Google AI Studio 提供的免费 API 配额,个人开发者每分钟可发起数十次请求,足以支撑日常开发需求——这与 OpenAI GPT 系列的纯付费模式形成鲜明对比,是目前对独立开发者最友好的顶级模型之一。
获取方式如下:
- 访问 AI Studio
- 创建一个 API 密钥(完全免费)
- 回到 Bolt DIY,在 API 列表中选择 Google Gemini 2.0 Flash
- 粘贴你的 API 密钥
除了 Gemini,你还可以选择 Perplexity(支持实时联网)、Anthropic Claude 3.5 Sonnet(编程能力最强)等模型,随时在项目中切换。

实战演示:用 Bolt DIY 构建应用和网站
快速生成交互式应用
Bolt DIY 的使用方式和 ChatGPT 类似——左侧是对话窗口,右侧是实时生成的代码和预览。例如输入"build me a magical keyboard app",几秒钟内就能生成一个可交互的键盘应用。
你还可以通过自然语言持续迭代。比如对一个"爸爸笑话生成器"应用说"把按钮改成亮橙色,添加动画,加上彩虹背景",Bolt 会自动修改之前的项目代码,保留原有功能的同时应用所有更改。

构建 SEO 友好的高性能网站
这是 Bolt DIY 最实用的场景之一。你可以用一段提示词快速生成完整的博客网站或着陆页。例如:
"Create an affiliate SEO blog about bird watching. My name is Julian Goldie. Here's my Amazon affiliate ID. Make this website about birdwatching."
生成的网站不仅结构完整,而且代码质量远超 WordPress。原因在于:WordPress 网站通常依赖大量插件(页面构建器、SEO 插件、缓存插件等),产生冗余的 JavaScript 和 CSS,而 AI 直接生成的静态代码天然避免了这一问题,输出的 HTML/CSS/JS 结构精简,无多余依赖。

实测数据令人印象深刻:将 AI 生成的网站放入 Google PageSpeed Insights 检测,性能得分 99,SEO 得分 100。这一工具基于 Lighthouse 引擎,综合评估 LCP(最大内容绘制)、INP(交互到下一次绘制)、CLS(累积布局偏移)等核心 Web 指标(Core Web Vitals)——自 2021 年起,这些指标已被 Google 纳入搜索排名算法,直接影响网站在搜索结果页中的位置。而同类 WordPress 网站往往连核心 Web 指标都无法通过,这意味着用 Bolt DIY 构建的网站在搜索引擎排名上天然具有结构性优势。
一键部署上线
完成项目后,你可以通过以下步骤将网站发布到互联网:
- 点击"Download"下载完整代码
- 使用"Push to GitHub"将代码推送到 GitHub 仓库
- 在 Netlify 等免费托管平台上导入 GitHub 项目,一键部署上线
Netlify 是目前最主流的静态网站托管平台之一,采用 JAMstack 架构理念,其免费套餐提供每月 100GB 带宽、自动 HTTPS 和全球 CDN 分发。更关键的是,它支持「Git 即部署」的 CI/CD 工作流——每次推送代码到 GitHub,网站会自动重新构建并发布,极大降低了运维门槛。类似平台还有 Vercel 和 Cloudflare Pages,三者均提供慷慨的免费套餐,是独立开发者的首选基础设施。
整个流程中,唯一需要付费的环节就是域名托管费用。
进阶技巧:截图驱动的设计优化
当你对生成的网站外观不满意时,有一个非常实用的技巧:截图模仿法。
操作方法:
- 在网上找到一个你喜欢的网站设计
- 截图并上传到 Bolt DIY 的聊天窗口
- 输入"Follow the same design style as this screenshot"

这一功能之所以可行,依赖的是现代 LLM 的多模态视觉理解能力。模型会对截图进行语义分析,识别色彩层级(主色/辅色/背景色)、排版规律(字体大小比例、行高)、组件模式(卡片、导航栏、CTA 按钮样式)以及整体布局网格,本质上是将「设计稿转代码」(Design-to-Code)这一传统上需要专业前端工程师完成的工作自动化。Bolt 会将你的项目重新设计为类似的风格,效果提升非常显著——从朴素页面瞬间变成专业级设计。
这里还有一个关键建议:在设计优化阶段,将 API 切换到 Anthropic Claude 3.5 Sonnet。它在此场景下表现更优,原因在于其训练数据中包含大量高质量 UI 代码示例,对视觉细节的还原精度更高,能更准确地将视觉意图转化为语义化的 CSS 和组件结构。虽然是付费 API,但价格很低,非常适合用来做项目的最后打磨。
Bolt DIY 与 Bolt.new 功能对比
| 特性 | Bolt DIY(免费) | Bolt.new(付费) |
|---|---|---|
| 费用 | 免费 | 需购买 Token |
| API 选择 | 自由选择任意 API | 固定,无法自定义 |
| 附件上传 | ✅ | ❌ |
| 语音指令 | ✅ | ❌ |
| 聊天导出 | ✅ | ❌ |
| 部署方式 | 本地托管 | 云端托管 |
总体来看,Bolt DIY 在功能和灵活性上都优于付费版本,唯一的门槛是需要自己搭建环境。但正如前文所述,这个过程只需要两分钟。
总结
Bolt DIY 代表了 AI 编程工具的一个重要趋势:专业级开发能力的平民化。无论你是想快速搭建一个 SEO 博客、构建一个小工具,还是开发一个完整的应用,它都能在几分钟内帮你完成。配合免费的 Google Gemini API,整个过程零成本。
对于非技术背景的创业者和内容创作者来说,这可能是目前性价比最高的建站和应用开发方案。
核心要点
- Bolt DIY 是完全免费的开源 AI 编程工具,配合 Google Gemini 免费 API 可零成本构建网站和应用
- 搭建过程仅需两分钟,安装 Node.js 和 Docker 后按 GitHub 指令操作即可
- AI 生成的网站代码质量远超 WordPress,PageSpeed 性能得分可达 99,SEO 得分 100
- 支持截图驱动设计——上传喜欢的网站截图即可让 AI 模仿其风格重新设计项目
- 相比付费版 Bolt.new,免费的 Bolt DIY 提供更多功能且支持自由切换 API 模型
相关推荐
教程攻略Cursor+Codex双IDE协同:开源项目二开实战方法论
基于实战经验总结的开源项目二次开发完整方法论,详解Cursor+Codex双IDE协同工作流,涵盖二开七环节、MVP验证、AI读源码技巧,帮助开发者三天跑通项目、两周完成业务集成。
教程攻略Cursor多Agent实战:50分钟搭建Next.js全栈博客
使用Cursor IDE多Agent协作模式,50分钟内从零搭建全栈博客。涵盖Next.js、Clerk认证、Supabase数据库集成,详解4个AI Agent分阶段开发流程与关键避坑经验。
教程攻略从零搭建AI软件工厂:Cursor工程师的多Agent协作实战经验
Cursor工程师Eric分享AI软件工厂构建实战:从自动化六层级、护栏设计、并行Agent管理到规模化扩展,详解如何用多Agent协作实现7×24小时高效软件开发。