工具与环境

Vibe Coding 的核心不是“工具越多越好”，而是：

选择合适的工具，把想法稳定地变成可运行项目。

很多新手一开始会陷入工具选择焦虑：

应该用 ChatGPT 还是 Claude？
应该用 Cursor 还是 Windsurf？
应该用 Claude Code 还是 Codex？
Replit、Lovable、Bolt 适合什么？
我到底需不需要本地开发环境？
Git 和 GitHub 是不是必须学？

本模块会帮助你把这些问题理清楚。

本模块适合谁？

适合刚开始学习 Vibe Coding 的用户、产品经理、独立开发者、前端/后端开发者、教师学生，以及希望用 AI 快速做项目的人。

你会学到什么？

完成本模块后，你应该能够：

理解 Vibe Coding 常见工具的分类；
知道 ChatGPT、Codex、Claude、Claude Code、Cursor、Windsurf、Replit、Lovable、Bolt 分别适合什么；
搭建基础本地开发环境；
理解 Node.js、pnpm、VS Code、浏览器开发者工具的作用；
掌握 Git 与 GitHub 的基础概念；
知道做不同项目时该选择什么工具；
避免一开始就安装太多工具；
建立适合新手的 AI 编程工具链。

Vibe Coding 需要哪些工具？

Vibe Coding 通常会用到 5 类工具：

工具类型	作用	代表工具
聊天式 AI	解释代码、生成代码片段、分析报错	ChatGPT、Claude
AI 编程代理	读取项目、修改文件、运行命令、处理任务	Claude Code、Codex
AI IDE	在编辑器里补全、改代码、跨文件协作	Cursor、Windsurf
原型生成工具	用自然语言快速生成网页或应用	Replit、Lovable、Bolt
工程基础工具	本地运行、版本管理、部署项目	Node.js、pnpm、Git、GitHub、VS Code

新手不需要一次掌握全部。

最小工具组合可以是：

1. 一个聊天式 AI
2. 一个代码编辑器
3. Node.js
4. Git / GitHub
5. 一个部署平台

如果你使用云端原型工具，也可以先不配置完整本地环境。

工具分类

1. 聊天式 AI

适合：

解释概念；
解释代码；
生成代码片段；
分析报错；
写 Prompt；
写 README；
生成项目思路；
辅助写测试。

代表工具：

ChatGPT
Claude
Gemini

特点：

上手简单；
适合问答和分析；
不一定能直接修改本地项目；
需要你复制代码或文件内容。

2. AI 编程代理

适合：

阅读整个代码库；
修改多个文件；
运行命令；
修复测试；
生成提交说明；
处理 Git diff；
根据 issue 完成任务。

代表工具：

Claude Code
OpenAI Codex

特点：

更接近真实开发流程；
可以操作项目文件；
适合开发者；
需要理解权限和安全；
不适合无审查直接运行高风险命令。

3. AI IDE

适合：

在编辑器中写代码；
自动补全；
根据上下文修改文件；
多文件生成；
调试项目；
代码审查；
日常开发。

代表工具：

Cursor
Windsurf

特点：

更接近传统 IDE 使用习惯；
适合长期写代码；
适合开发者和进阶用户；
需要理解项目结构和 Git。

4. 原型生成工具

适合：

快速做网页；
做 MVP；
做可演示 Demo；
产品经理验证想法；
零基础用户生成应用初版。

代表工具：

Replit
Lovable
Bolt
v0

特点：

上手快；
自然语言驱动；
适合从想法到原型；
代码质量和可维护性仍需检查；
项目变复杂后可能需要迁移到更专业的开发环境。

5. 工程基础工具

无论你用什么 AI 工具，真实项目迟早会遇到：

如何运行项目？
如何安装依赖？
如何保存版本？
如何回滚错误修改？
如何部署上线？
如何检查浏览器报错？

所以你需要了解：

Node.js
pnpm / npm
VS Code
Git
GitHub
浏览器开发者工具
Vercel / Netlify / Cloudflare Pages

不同人群怎么选工具？

零基础用户

产品经理

开发者

独立开发者

推荐组合：

Claude Code / Codex
Cursor / Windsurf
GitHub
Vercel / Cloudflare Pages
Supabase / Neon

重点用途：

从想法到 MVP；
快速迭代；
部署上线；
处理用户反馈；
维护长期项目。

新手工具选择建议

不要一开始就问：

哪个工具最强？

更应该问：

我现在要完成什么任务？

任务	推荐工具
解释代码	ChatGPT / Claude
生成页面原型	Lovable / Bolt / Replit
修改真实项目	Claude Code / Cursor / Windsurf
根据 issue 开发	Codex / Claude Code
快速在线运行项目	Replit / Bolt
本地长期开发	Cursor / Windsurf / VS Code
管理版本	Git / GitHub
部署静态站点	Vercel / Netlify / Cloudflare Pages

最小工具栈

如果你刚开始，可以使用这个最小组合：

AI 助手：ChatGPT 或 Claude
原型工具：Replit / Lovable / Bolt 三选一
代码编辑器：VS Code
运行环境：Node.js + pnpm
版本管理：Git + GitHub
部署平台：Vercel 或 Cloudflare Pages

进阶工具栈

如果你已经会基本开发，可以使用：

AI IDE：Cursor 或 Windsurf
终端 Agent：Claude Code 或 Codex
版本管理：GitHub
数据库：Supabase / Neon
部署：Vercel / Cloudflare Pages
监控：Sentry
设计：Figma

本模块文章列表

文章	内容
Vibe Coding 工具总览	了解常见工具分类和选择方法
ChatGPT / Codex 用于编程	了解 ChatGPT 和 Codex 在编程中的作用
Claude / Claude Code 用于编程	了解 Claude 和 Claude Code 的使用方式
Cursor 入门	学习 AI IDE 的基础使用
Windsurf 入门	学习 Cascade 和 Agentic IDE 工作流
Replit / Lovable / Bolt 原型工具	学习自然语言生成应用的工具
本地开发环境准备	配置 Node.js、pnpm、VS Code、浏览器工具
Git 与 GitHub 基础	学会版本管理、diff、commit 和回滚

小结

工具与环境模块的核心目标是：

让你知道做不同 Vibe Coding 任务时应该用什么工具。

新手最重要的不是装很多工具，而是先建立一条能跑通的工作流：

描述想法
→ 生成项目
→ 本地运行
→ 修改代码
→ 查看 diff
→ 部署上线

工具只是辅助，真正重要的是：

需求表达；
小步开发；
版本管理；
测试验证；
安全意识。

工具与环境

你会学到什么？

Vibe Coding 需要哪些工具？

工具分类

1. 聊天式 AI

2. AI 编程代理

3. AI IDE

4. 原型生成工具

5. 工程基础工具

推荐学习顺序

不同人群怎么选工具？

零基础用户

产品经理

开发者

独立开发者

新手工具选择建议

最小工具栈

进阶工具栈

本模块文章列表

小结

参考资料

工具与环境 ​

你会学到什么？ ​

Vibe Coding 需要哪些工具？ ​

工具分类 ​

1. 聊天式 AI ​

2. AI 编程代理 ​

3. AI IDE ​

4. 原型生成工具 ​

5. 工程基础工具 ​

推荐学习顺序 ​

不同人群怎么选工具？ ​

零基础用户 ​

产品经理 ​

开发者 ​

独立开发者 ​

新手工具选择建议 ​

最小工具栈 ​

进阶工具栈 ​

本模块文章列表 ​

小结 ​

参考资料 ​

工具与环境

你会学到什么？

Vibe Coding 需要哪些工具？

工具分类

1. 聊天式 AI

2. AI 编程代理

3. AI IDE

4. 原型生成工具

5. 工程基础工具

推荐学习顺序

不同人群怎么选工具？

零基础用户

产品经理

开发者

独立开发者

新手工具选择建议

最小工具栈

进阶工具栈

本模块文章列表

小结

参考资料