AI 编程、模型配置、代码管理、上线部署——新手做 Vibe Coding 必备的四类工具,怎么选、怎么装、怎么用一次讲清
新手想尝试 Vibe Coding,到底要装哪些工具?
你可能已经看过非常多 Vibe Coding 视频。工具介绍五花八门——有人说可以用网页做,也有人说必须下载 Claude Code。到底哪些工具才能完整跑通 Vibe Coding?
今天一次讲明白:Vibe Coding 必备工具集,分四类——
我们一类一类讲,每一类讲三件事:是什么、怎么装、要不要收费。
本期出现的所有工具官网链接:
| 工具 | 链接 | 说明 |
|---|---|---|
| VSCode(推荐) | code.visualstudio.com | 主用,免费 |
| Cursor | cursor.com | 备选 |
| Trae | trae.ai | 备选 |
| 插件 | 链接 | 计费方式 |
|---|---|---|
| Claude Code 插件 | 在 VS Code 扩展市场搜索 Claude Code(Anthropic 官方) | 需 API Key |
| Kimi Code | kimi.com/code | Coding Plan,不是 API Key |
| 工具 | 链接 | 用途 |
|---|---|---|
| DeepSeek 平台 | platform.deepseek.com | 申请 API Key |
| CC Switch | ccswitch.io/zh | 一键切换第三方模型 |
| 工具 | 链接 | 用途 |
|---|---|---|
| GitHub | github.com | 代码仓库、版本管理 |
| 工具 | 链接 | 适合场景 |
|---|---|---|
| Vercel | vercel.com | 海外访问,一键发布 |
| Netlify | netlify.com | 海外访问,一键发布 |
不知道某个工具怎么用?直接问已经接入的 AI——它会通过网络搜索或自带知识库给你指导。
AI 编程工具的代表有三类:
它们的界面都差不多,核心作用一致:代码与文档编辑器 + 提供让 AI 修改文件的环境。
下面以「VSCode + AI 插件」为例演示,后续步骤也用这个方式。
直接去 VSCode 官网 下载安装包,选自己电脑对应的版本,一路下一步即可,没有难度。
打开 VSCode 后,点击左侧的「拓展」图标,搜索并安装这三个插件:
| 插件 | 搜索关键词 | 作用 |
|---|---|---|
| 中文插件 | 中文插件 | 把 VSCode 界面切到中文 |
| Claude Code 插件 | Claude Code | 选 Anthropic 官方认证的版本 |
| Kimi Code 插件 | Kimi Code | 国产替代,国内网络友好 |
安装完后,左边栏会出现对应的图标(Claude Code、Kimi Code 都有自己的入口)。
这时你已经有了写代码的环境,但 AI 插件还没接入大模型,所以它们暂时无法干活。
下一步就是申请 API Key 并配置模型——这是「工具二」的事。
没有 Claude Pro 账号,能用国产模型代替吗?完全可以。
下面以 DeepSeek 为例,把它接入 Claude Code。
打开 DeepSeek 平台,注册账号后申请一个 API Key(建议存到密码管理器里)。
CC Switch 是模型配置工具,专门用来一键切换第三方模型。
进入 CC Switch 官网,下载并安装。打开后:
在 VSCode 里打开 Claude Code 对话窗口,问它:
你现在使用的模型是什么?
如果回答是 DeepSeek v4 Pro(或对应版本),说明模型已经成功接入,Claude Code 现在用 DeepSeek 在驱动编码。
不同 AI 插件都可以用类似方法接入第三方模型,框架能力(文件读写、命令执行)完全保留,只是底层换成了你指定的模型。
编程环境 + 驱动编程的 AI 都齐了。现在可以正式开始 Vibe Coding。
在本地新建一个文件夹,这个文件夹就是你的项目空间——之后该项目所有文件都在这里。
VSCode 左上角:文件 → 新建窗口 → 打开文件夹 → 选刚才新建的文件夹。
打开后,整个文件夹就是你的工作区。
在 Claude Code(或 Kimi Code)的对话框里输入指令,AI 就会开始在本地写代码。
具体怎么进行 Vibe Coding——比如怎么搭建工作区、怎么和 AI 协作、怎么用「构建循环」推进项目——可以去看「停止 Vibe Coding,开始 Learn by Building」教程,里面讲得很细。
到这一步,你已经有了完整的本地开发能力。从这里开始,所有事情都是在指挥 AI 干活。
项目写到一定阶段,你会遇到三个新需求:
这些都需要 GitHub——一个云端代码仓库。
去 GitHub 官网 注册,记住你注册用的邮箱(后面配置 SSH Key 要用)。
在 VSCode 中打开 Claude Code,发送下面的提示词:
我现在要给 GitHub 配置 SSH Key,帮我生成密钥,然后告诉我如何配置。
后面的所有操作都交给 AI 指导——它让你做什么配置,你就照着做。
完成 SSH 配置后,你就可以在本地把代码推送到 GitHub。每完成一个开发阶段,让 AI 做一次提交,做好备份。
如果某天写坏了,可以随时回退到之前的存档版本——这就是为什么要定期提交。
GitHub 就是你代码的云端存储 + 时间机器——只要养成提交习惯,永远不怕项目崩。
项目做好后,根据使用场景选不同的部署方式。
每次使用时打开本地开发服务器即可,不需要部署任何东西。
可以用 Vercel 或 Netlify 这类轻量级部署工具:
风险: 国内网络环境下可能无法访问。
如果你要发布一个国内能稳定访问、并且部署在自己服务器上的项目,流程会复杂一些:
如果项目不必公开发布,自己用就好,不用走这套流程。
直接问你已经接入的 AI——它会通过网络搜索或自带的知识库给你指导。
目前博主上线的产品包括小程序、APP、Vibe 项目——这些上线步骤全部都是 AI 指导完成的。有些环节甚至可以直接用命令行让 AI 帮你执行,不用再额外找教程。
以上就是做一个完整 Vibe Coding 项目需要准备的全部工具。最后快速回顾一下:
| 类别 | 必备工具 | 替代方案 |
|---|---|---|
| AI 编程工具 | VSCode + AI 插件 | Cursor / Trae |
| 模型配置工具 | API Key + CC Switch | (Anthropic 账号可省略) |
| 代码存储与管理 | GitHub | —— |
| 上线部署 | 本地服务器 / Vercel / Netlify / 云服务器 | 看场景选 |
如果以上工具的链接或具体教程找不到,可以来「搞定空间站」找,里面有:
如果这篇教程对你有用,给个收藏关注,下期见。