为什么不用 Cursor？

虽然 Cursor 是一个很强大的 AI 编程工具，但它更适合完整的开发环境。而当我们需要快速搭建一个网站原型时，可能需要：

• 配置本地环境
• 安装依赖包
• 处理部署问题
• 解决跨平台兼容

这时，一个基于浏览器的全栈开发环境可能是更好的选择。

什么是Bolt.new

Bolt.new 是 StackBlitz 团队推出的一款革命性 AI 驱动的 Web 开发工具，它让你直接在浏览器中就能进行全栈开发，无需任何本地环境配置。

通过简单的自然语言对话，它能帮你完成从项目创建、依赖安装到部署上线的全过程，支持 React、Vue、Astro 等主流框架，还能运行 Node.js 服务器并处理 API 请求，是一个集开发、测试、部署于一体的 AI 辅助开发平台。

作为一个爱折腾的开发者，我第一时间体验了一下，没想到真的用它十分钟就搭建并上线了一个手机网站！今天就来分享下这个有趣的经历~

初遇 Bolt.new

说实话，一开始我也没抱太大期望。毕竟市面上 AI 工具那么多，真能有多神奇？但当我了解到它的特点后，确实被吸引了。

直接在浏览器里就能进行全栈开发

不用配置本地环境，还能用 AI 帮你写代码、装依赖、部署上线...

听起来是不是很心动？

Bolt.new 就是这样一个工具。它把 AI 能力和开发环境完美结合在一起，让你专注于创造，而不是被各种配置和环境问题困扰。

? 十分钟开发实录

好了，说说我的实际体验。打开 bolt.new 的那一刻，我就对着 AI 说：

"帮我创建一个基于 Astro 和 Vue 的移动端网站，用 Tailwind CSS 做样式"

就这么简单一句话，AI 就开始忙活起来了：创建项目、装依赖、配置环境...虽然等待的过程比本地开发慢了点，但胜在完全不用自己动手。

等环境准备好，我继续让 AI 帮我搭建基础布局：

<div class="w-full h-screen max-w-md mx-auto">
  <header class="sticky top-0 bg-white/80 backdrop-blur-sm">
    <nav class="flex justify-between items-center p-4">
      <h1 class="text-lg font-semibold">产品展示</h1>
      <button class="p-2 hover:bg-gray-100 rounded-full">
        <span class="sr-only">菜单</span>
      </button>
    </nav>
  </header>

  <main class="p-4 space-y-6">
    <!-- 要放产品列表的地方 -->
  </main>
</div>

看到这个基础框架，我心里有谱了。接下来就是添加实际内容，我让 AI 帮我设计了一个产品卡片组件：

function ProductCard({ product }) {
  return (
    <div class="bg-white/70 backdrop-blur-sm rounded-xl p-4">
      <div class="aspect-square rounded-lg overflow-hidden">
        <img
          loading="lazy"
          src={product.image}
          alt={product.name}
          class="w-full h-full object-cover"
        />
      </div>
      <div class="mt-3">
        <h3 class="font-medium">{product.name}</h3>
        <p class="text-sm text-gray-600">{product.description}</p>
      </div>
    </div>
  );
}

部署

页面生成完成后,就可以直接部署了,点击右上角的 deploy

程序会自动生成构建过程

然后一个线上可访问的地址就这么生成好了:

在线预览地址:
https://cozy-bavarois-746d6a.netlify.app/

提示词

完成上面的内容,我把整套的提示词都整理好了,需要的朋友可以在后台回复关键词"blot"

提示词打磨了近半个小时600多字,扔进去就可以直接生成一个现代美观的网站 ,里面包含了丰富详细的设计规范和代码提示,很有参照价值

使用小贴士

不过实际使用中也有一些小技巧要注意。比如跟 AI 说话要具体一点，"做个好看的按钮"不如"做个带阴影和渐变的圆角按钮"。

还有就是性能优化别忘了，我习惯性地加了一些优化代码：

// 图片懒加载
<img loading="lazy" />

// 组件按需加载
const LazyComponent = lazy(() => import('./Component'))

最后的思考

Bolt.new 最适合什么场景？我觉得是那些需要快速验证想法的时候。比如：

想试试新学的框架？用它！
要做个演示 Demo？用它！
要快速搭建原型？用它！

但如果是复杂的业务项目，可能还是更适合传统开发方式。毕竟工具再好，也是辅助，不是万能的。

写在最后

技术在进步，工具在进化，但最重要的还是我们如何用好它们。Bolt.new 给了我们一个新的可能，让开发变得更轻松有趣。

期待未来会有更多这样的工具出现。毕竟谁不想又快又好地把想法变成现实呢？?

喜欢这篇文章的话，点个在看支持一下吧！一起探索更多有趣的技术~