Vibe session · Learning mode阅读、尝试、提问都留在同一个工作区
Course Map
练习进度 0/55
Learning Guide
Build session

Vibe Coding 工具全景图 — 选对工具少走弯路

warmup · 10-14 min · 步骤 1/4

工具太多了,到底该用哪个?

你去搜"AI 编程工具",能搜出来几十个。Cursor、Bolt.new、Claude Code、Lovable、Windsurf、Copilot、v0、Replit、Cline、aider……每个都说自己最厉害,每个都有人在吹,每个的 landing page 都写着"build apps in minutes"。

说实话,我刚接触这个领域的时候也是一脸懵。Cursor 和 Windsurf 有什么区别?Bolt.new 和 Lovable 哪个好?Claude Code 和 aider 不都是终端工具吗?为什么有的工具要装,有的打开浏览器就能用?

五类 AI 编程工具的交通工具类比——从自行车到火箭,不同工具对应不同能力级别

后来我花了不少时间把这些工具都试了一遍,终于理出了一个很清楚的分类框架。这个框架不是我发明的,行业里基本也是这么分的——按照你在哪里写代码,所有 Vibe Coding 工具可以分成三大类:

AI 编程工具全景图(2025 年版)——对话式 AI、AI 代码编辑器、IDE 插件、网页版、命令行工具一览

第一类:Browser-based(浏览器工具)

顾名思义,就是打开浏览器就能用的工具。你不需要安装任何东西,不需要配置环境,不需要知道什么叫 Node.js——打开网页,输入你想做什么,它就开始帮你做。

这类工具的代表有:

  • Bolt.new —— StackBlitz 出品,可以在浏览器里生成、运行、部署完整的全栈应用。你说一句"帮我做一个 Todo App",它从前端到后端全给你搞定,而且你能实时预览
  • Lovable —— 号称"Idea to app in seconds",特别适合做漂亮的 UI。你甚至可以上传一张设计图,它直接帮你还原成代码
  • v0 —— Vercel 出品,特别擅长生成 React + Next.js 的组件和页面。设计感很强,生成的代码质量在浏览器工具里算顶尖的
  • Replit —— 老牌在线编程环境,现在加了 AI Agent 功能,可以用自然语言描述需求然后自动生成项目
  • Firebase Studio —— Google 的浏览器开发环境,可以直接连 Firebase 后端服务
这类工具的最大优势是:零门槛。你妈如果会打字、会上网,理论上就能用 Lovable 做一个网站出来。我不是开玩笑——我真的见过完全不懂编程的产品经理用 Bolt.new 做出了一个可以演示的原型,然后拿去给投资人看。

但浏览器工具也有很明显的天花板。当你的项目超过 5-10 个页面,或者需要复杂的后端逻辑(比如支付、权限系统、文件处理),或者需要接入自定义的 API 和数据库,浏览器工具就开始吃力了。它们的定制能力有限,你没办法完全控制生成的代码结构。

简单粗暴地总结:浏览器工具是 Vibe Coding 的入门起点,适合快速出原型和做 MVP 验证,但不适合做复杂产品。

Trae IDE 实际开发界面——左侧项目文件、中间实时预览、右侧 AI 对话,一边聊天一边写代码

第二类:IDE-based(编辑器工具)

IDE 就是写代码的编辑器。AI IDE 在传统编辑器上增加了对话、补全、跨文件修改和差异审查能力。

这类工具需要你下载安装,需要你在本地有一个项目文件夹,但它们的能力比浏览器工具强得多。你可以同时编辑几十个文件、有完整的 Git 版本管理、可以装任何你想要的依赖包、可以完全控制项目结构。

代表工具:

  • Cursor —— 支持对话、代码补全、跨文件 Agent 修改和 diff 审查,适合已有本地代码仓库的开发者
  • Windsurf —— 提供多步骤 Agent 工作流,可在编辑器里规划并执行一组关联修改
  • Zed —— 强调编辑器性能与协作体验,并提供 AI 辅助能力
  • Trae IDE —— 提供内置 AI 对话、代码生成和预览能力;具体模型与套餐以产品内当前说明为准
  • Amazon Kiro —— 强调 Spec-driven Development,适合先明确需求、设计和任务再进入实现
多文件编辑的价值不在于"一次改得多",而在于你可以先限定范围,再逐个审查 diff。例如把一组组件从 CSS Modules 迁到 Tailwind 时,应先列出目标文件、运行测试,再决定接受哪些修改。

Cursor Composer 界面实拍——左侧代码编辑区高亮 diff,右侧 AI Chat 对话窗口Cline(VS Code 插件)界面——AI Agent 自动读取文件、修改代码、运行测试

但 IDE 工具的门槛比浏览器高。你至少需要知道怎么打开终端、怎么安装 Node.js、怎么 git clone 一个项目。这对程序员来说是常识,但对零基础的人来说就是一道坎。

第三类:CLI-based(命令行工具)

CLI 就是 Command Line Interface,纯终端操作。没有图形界面、没有按钮、没有实时预览——你在终端里输入文字指令,AI 在终端里输出结果。

这是门槛最高、但在特定场景下效率也最高的一类。

代表工具:

  • Claude Code —— Anthropic 的终端编码工具,可读取项目文件、修改代码、运行命令并辅助 Code Review;实际可执行范围受项目配置和权限控制
  • aider —— 开源的 AI 结对编程工具,Git-first 的设计,每次代码改动自动生成 commit
  • Gemini CLI —— Google 的命令行 AI 工具;可用模型、免费额度和速率限制可能变化,以当前账户页面为准
  • GitHub Copilot CLI —— GitHub 的命令行代理,支持 Autopilot 模式
CLI 工具适合把文件检索、Git diff、测试和 Code Review 串成一条工作流。例如让它检查最近一次修改时,它可以读取相关 diff 和测试结果,再给出带文件位置的建议;但仍需要你核对操作范围和结论。

但 CLI 工具的学习曲线是最陡的。你得习惯终端操作、得会基本的 Git 命令、得能读懂 AI 输出的 diff。对于没有终端经验的人来说,这基本就是另一个世界。

所有 AI 编程工具的共同能力——自然语言生成代码、理解上下文、解释和修改、多轮对话迭代、错误诊断修复AI 工具五大能力循环——生成、理解、解释、对话、修复,形成完整的开发闭环
Vibe Workspace
Live build context

三类工具:Browser、IDE、CLI

先搞清楚你的选择范围,再决定用什么

自动保存在此设备
理解 Vibe Coding 工具的三大分类:Browser / IDE / CLI掌握根据自身技术水平和项目需求选择工具的决策框架了解主流工具的核心特点和适用场景
Home| Vibe Lab
草稿自动保存