Bolt.new 是一款由 StackBlitz 推出的 AI 驱动全栈编程工具,基于 WebContainers 技术实现浏览器端全流程开发,无需本地环境配置。 数据可以连接 Supabase。

体验了下 Lovable 。和 Bolt.new 体验差不多。

核心特性

  1. AI 驱动的全栈开发

    • 自然语言生成代码:用户可通过自然语言描述需求(如“使用 React 制作待办事项应用”),AI 自动生成完整的前后端代码结构,甚至包含数据库集成。
    • 动态安装依赖:支持通过命令直接安装 npm 包(如 Tailwind、OpenAI API),无需手动配置环境。
    • 代码修复与优化:集成自动错误检测和修复机制,简化调试流程。
  2. 云端一体化开发环境

    • 零本地配置:基于 WebContainers 技术,直接在浏览器中运行 Node.js、终端和现代工具链(如 Vite、Next.js)。代码也可以在 StackBlitz 中直接编辑,无需额外上传。
    • 实时协作与共享:通过 URL 分享项目,支持多人实时编辑,集成 Chrome DevTools 实现浏览器内后端调试。
    • 可以通过选择选择元素,截图等方式来和 AI 进行交互。说清楚做成什么样子。
  3. 一键部署与扩展性

    • 快速部署:支持将应用一键发布至 Netlify 等云平台,无需服务器配置。
    • 第三方 API 集成:允许与外部服务(如支付接口 Stripe、数据库 Supabase)无缝联动。
  4. 多框架支持
    兼容 React、Vue、Svelte、Astro、Next.js 等主流框架,但对 Nuxt/Vue 的深度支持仍有限。

  5. 支持接入 Figma。设计稿一键生成 React 组件。这个效果还没试,可以体验下。

二、与竞品对比

工具定位优势局限性
Bolt.new全栈生成器全流程浏览器开发、AI 生成完整应用、强部署能力对非 React 框架支持较弱,复杂项目需手动优化代码
v0UI 原型设计专注前端 UI 生成(如 Shadcn 组件库)、实时预览后端功能薄弱,依赖 Vercel 部署,定价较高($20/月)
CursorAI 编程助手深度集成 VS Code、智能代码补全/修复、支持 GPT-4仅限编辑器内使用,全栈开发能力弱,专业版订阅费高($20/月)
Replit教育/协作开发零配置启动、多语言支持、适合教学大型项目性能不足,AI 上下文记忆有限
Lovable非技术用户模板工具丰富模板库、快速构建 MVP(如投资组合跟踪工具)免费版仅支持公开项目,代码控制权低

三、适用场景与总结

  • Bolt.new 最佳场景

    • 快速生成全栈应用原型,尤其适合 React/Next.js 技术栈。
    • 零基础用户通过自然语言实现“提示→生成→部署”全流程。
    • 团队协作开发或教学演示(通过 URL 实时共享)。
  • 竞争力总结
    Bolt.new 凭借 浏览器端全栈开发AI 生成完整应用 的能力,成为轻量级项目的首选工具。其开源免费特性(GitHub 4.5K stars)进一步降低使用门槛。但对于复杂项目,仍需结合传统开发工具(如 VS Code)进行深度优化。

体验

金句卡片

开发 金句卡片 的体验还不错。描述需求,不仅可以用自然语言,也可以用截图。然后生成的代码也可以改,在改完后的代码上继续生成。遇到的不足:

  1. 垂直对齐搞不定。两个元素在同一行,但做不到垂直对齐。最后还是靠改代码实现的。

Zustand Demo

还行把。

记账软件

做个记账软件。要登录后才能用。单用户,通过 env 来配置账号和秘密。如果没配置账号秘密,默认为 joel/123456。

数据存 Supabase。 写数据总是不成功。

TODO

  1. 做一个关于设计原则/审美的演示站。
  2. 做一个每天抓一些感兴趣的内容的站?或其他 ai 的。