← 返回Vibe Coding 必备工具集:四类工具一次讲明白
1 / 8
Tutorial·8

Vibe Coding 必备工具集:四类工具一次讲明白

AI 编程、模型配置、代码管理、上线部署——新手做 Vibe Coding 必备的四类工具,怎么选、怎么装、怎么用一次讲清

1
Step 1

开篇:四类工具,一次讲明白

新手想尝试 Vibe Coding,到底要装哪些工具?

你可能已经看过非常多 Vibe Coding 视频。工具介绍五花八门——有人说可以用网页做,也有人说必须下载 Claude Code。到底哪些工具才能完整跑通 Vibe Coding?

今天一次讲明白:Vibe Coding 必备工具集,分四类——

  • AI 编程工具:写代码、改文件的环境
  • 模型配置工具:驱动 AI 干活的"发动机"
  • 代码存储与管理工具:存档、备份、协作
  • 上线部署工具:把项目分享出去

我们一类一类讲,每一类讲三件事:是什么、怎么装、要不要收费


开篇:四类工具,一次讲明白
2
Step 2

本期资料合集

本期出现的所有工具官网链接:

AI 编程工具

工具链接说明
VSCode(推荐)code.visualstudio.com主用,免费
Cursorcursor.com备选
Traetrae.ai备选

VS Code 插件(AI 编程接入)

插件链接计费方式
Claude Code 插件在 VS Code 扩展市场搜索 Claude Code(Anthropic 官方)需 API Key
Kimi Codekimi.com/codeCoding Plan,不是 API Key

模型配置工具 & API

工具链接用途
DeepSeek 平台platform.deepseek.com申请 API Key
CC Switchccswitch.io/zh一键切换第三方模型

代码存储

工具链接用途
GitHubgithub.com代码仓库、版本管理

上线部署

工具链接适合场景
Vercelvercel.com海外访问,一键发布
Netlifynetlify.com海外访问,一键发布

不知道某个工具怎么用?直接问已经接入的 AI——它会通过网络搜索或自带知识库给你指导。

本期资料合集
3
Step 3

工具一:AI 编程工具(VSCode + AI 插件)

AI 编程工具的代表有三类:

它们的界面都差不多,核心作用一致:代码与文档编辑器 + 提供让 AI 修改文件的环境

下面以「VSCode + AI 插件」为例演示,后续步骤也用这个方式。

1. 下载安装 VSCode

直接去 VSCode 官网 下载安装包,选自己电脑对应的版本,一路下一步即可,没有难度。

2. 安装必备插件

打开 VSCode 后,点击左侧的「拓展」图标,搜索并安装这三个插件:

插件搜索关键词作用
中文插件中文插件把 VSCode 界面切到中文
Claude Code 插件Claude Code选 Anthropic 官方认证的版本
Kimi Code 插件Kimi Code国产替代,国内网络友好

安装完后,左边栏会出现对应的图标(Claude Code、Kimi Code 都有自己的入口)。

3. 现在能用了吗?还不行

这时你已经有了写代码的环境,但 AI 插件还没接入大模型,所以它们暂时无法干活

下一步就是申请 API Key 并配置模型——这是「工具二」的事。

工具一:AI 编程工具(VSCode + AI 插件)
4
Step 4

工具二:模型配置工具(CC Switch + API Key)

没有 Claude Pro 账号,能用国产模型代替吗?完全可以。

下面以 DeepSeek 为例,把它接入 Claude Code。

1. 申请 DeepSeek API Key

打开 DeepSeek 平台,注册账号后申请一个 API Key(建议存到密码管理器里)。

2. 下载 CC Switch

CC Switch 是模型配置工具,专门用来一键切换第三方模型。

进入 CC Switch 官网,下载并安装。打开后:

  1. 选择 DeepSeek
  2. 把刚才申请的 API Key 填进去
  3. 点击「切换」

3. 验证模型已切换

在 VSCode 里打开 Claude Code 对话窗口,问它:

你现在使用的模型是什么?

如果回答是 DeepSeek v4 Pro(或对应版本),说明模型已经成功接入,Claude Code 现在用 DeepSeek 在驱动编码。

不同 AI 插件都可以用类似方法接入第三方模型,框架能力(文件读写、命令执行)完全保留,只是底层换成了你指定的模型。

工具二:模型配置工具(CC Switch + API Key)
5
Step 5

现在就可以开始 Vibe Coding 了

编程环境 + 驱动编程的 AI 都齐了。现在可以正式开始 Vibe Coding。

1. 新建项目文件夹

在本地新建一个文件夹,这个文件夹就是你的项目空间——之后该项目所有文件都在这里。

2. 用 VSCode 打开文件夹

VSCode 左上角:文件 → 新建窗口 → 打开文件夹 → 选刚才新建的文件夹

打开后,整个文件夹就是你的工作区。

3. 在聊天框输入指令开始编码

在 Claude Code(或 Kimi Code)的对话框里输入指令,AI 就会开始在本地写代码。

具体怎么进行 Vibe Coding——比如怎么搭建工作区、怎么和 AI 协作、怎么用「构建循环」推进项目——可以去看「停止 Vibe Coding,开始 Learn by Building」教程,里面讲得很细。

到这一步,你已经有了完整的本地开发能力。从这里开始,所有事情都是在指挥 AI 干活

现在就可以开始 Vibe Coding 了
6
Step 6

工具三:代码存储与管理(GitHub)

项目写到一定阶段,你会遇到三个新需求:

  • 同时开发多个功能,怎么互不影响?
  • 想把代码分享给别人,怎么开放?
  • 改坏了想回滚,怎么找之前的版本?

这些都需要 GitHub——一个云端代码仓库

1. 注册 GitHub 账号

GitHub 官网 注册,记住你注册用的邮箱(后面配置 SSH Key 要用)。

2. 让 AI 帮你配 SSH Key

在 VSCode 中打开 Claude Code,发送下面的提示词:

我现在要给 GitHub 配置 SSH Key,帮我生成密钥,然后告诉我如何配置。

后面的所有操作都交给 AI 指导——它让你做什么配置,你就照着做。

3. 本地提交代码

完成 SSH 配置后,你就可以在本地把代码推送到 GitHub。每完成一个开发阶段,让 AI 做一次提交,做好备份。

4. 出问题就回滚

如果某天写坏了,可以随时回退到之前的存档版本——这就是为什么要定期提交。

GitHub 就是你代码的云端存储 + 时间机器——只要养成提交习惯,永远不怕项目崩。

工具三:代码存储与管理(GitHub)
7
Step 7

工具四:上线部署

项目做好后,根据使用场景选不同的部署方式。

场景一:自己用,不需要上线

每次使用时打开本地开发服务器即可,不需要部署任何东西

场景二:分享给别人用(轻量级)

可以用 VercelNetlify 这类轻量级部署工具:

  • 不需要服务器
  • 不需要域名
  • 打开 VSCode,从 GitHub 拉取代码,一键构建和发布

风险: 国内网络环境下可能无法访问。

场景三:国内可访问,部署到自有服务器

如果你要发布一个国内能稳定访问、并且部署在自己服务器上的项目,流程会复杂一些:

  1. 购买云服务器(阿里云、腾讯云等)
  2. 申请域名
  3. 完成 ICP 备案(公开网站必需)
  4. 通过 ICP 备案后,再做公安备案

如果项目不必公开发布,自己用就好,不用走这套流程

场景四:小程序、APP、其他平台

直接问你已经接入的 AI——它会通过网络搜索或自带的知识库给你指导。

目前博主上线的产品包括小程序、APP、Vibe 项目——这些上线步骤全部都是 AI 指导完成的。有些环节甚至可以直接用命令行让 AI 帮你执行,不用再额外找教程。

工具四:上线部署
8
Step 8

总结:四类工具速查表

以上就是做一个完整 Vibe Coding 项目需要准备的全部工具。最后快速回顾一下:

类别必备工具替代方案
AI 编程工具VSCode + AI 插件Cursor / Trae
模型配置工具API Key + CC Switch(Anthropic 账号可省略)
代码存储与管理GitHub——
上线部署本地服务器 / Vercel / Netlify / 云服务器看场景选

一些重要提醒

  • AI 编程要付费——和平时用的大语言模型不一样,需要申请 API 或 Coding Plan 才能驱动 AI 写代码
  • DeepSeek、Kimi 等国产模型完全可以替代 Claude,国内网络友好且价格合理
  • GitHub 是必备——版本管理、协作、回滚都靠它
  • 上线复杂度看场景——自己用不必部署,国内访问要走备案

找不到工具?

如果以上工具的链接或具体教程找不到,可以来「搞定空间站」找,里面有:

  • Vibe Coding 基础教程
  • 常用 AI 工具的地址
  • 各类配套实操指南

如果这篇教程对你有用,给个收藏关注,下期见。

总结:四类工具速查表
1 / 8