Vibe Coding工程化落地：Cursor+Claude Code协同开发

一、前言：什么是 Vibe Coding

Vibe Coding（氛围编程）是 Karpathy 提出的新一代 AI 编程开发范式，区别于传统逐行敲代码、逐条问 AI 片段代码的模式，开发者只需要用自然语言描述需求、产品效果，由 AI 全权负责架构设计、编码、调试、自测全流程，人只把控项目方向与验收成果。

而Claude Code 是落地 Vibe Coding 最优终端工具，Anthropic 官方推出的 CLI 代码代理，可本地读取全项目源码、自动修改文件、执行脚本、调试报错，完美适配沉浸式氛围编程，也是目前开发者圈落地 Vibe Coding 使用率最高的工具。

简单一句话：传统编程 = 人写代码；Vibe Coding = 人说想法，Claude Code 写代码。

二、Claude Code 环境部署与安装

1、先在Windows上安装Node.js

访问Node.js官网下载Node.js安装程序：https://nodejs.org/zh-cn/download

下载完成后，双击下载的安装文件（如node-v22.18.0-x64.msi）

按照安装向导的指示进行操作。在安装过程中，你可以选择安装的位置和其他一些可选设置，如是否添加环境变量等。一般我们默认点击【Next】最后点击【Install】即可

安装完成后，打开命令提示符（CMD）或PowerShell，输入以下命令来检查Node.js和npm是否正确安装：

node -v

npm -v

如果这两个命令返回了版本号，说明Node.js和npm已经成功安装。

2、安装Claude code

输入安装命令：

npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com

运行 claude,在终端中输入 claude 即可

如果找不到命令，可能是环境变量有问题,配置自己电脑的环境变量即可。以下目录可供参考

C:\Users\用户名\AppData\Roaming\npm\node_modules\@anthropic-ai\claude-code\bin

3、配置大模型

下载CC Switch做多模型切换和管理CC Switch的GitHub仓库下载页：https://github.com/farion1231/cc-switch/releases/tag/v3.14.1最新版本号：v3.14.1

步骤1：在下载页，根据系统选择对应下载包：

步骤2：安装完成后，务必在打开Claude Code之前，优先设置CC Switch。在CC Switch的Claude Code页面添加API Key供应商：

步骤3：以DeepSeek为例，选择对应厂商，然后填写API Key和Base URL：

DeepSeek 开放平台：DeepSeek

ccswitch 的本质，其实是修改了一个配置文件

三、Claude code简单使用

先创建一个文件夹 test_cc，然后 cmd进入ctl端 ,输入 claude 进入

刚开始会选择风格：

安全提示：

创建工作空间：

接着在里面和他对话即可

四、Claude Code 新手入门

1、命令的分类

记忆功能

输入 # 就可以让 CC 帮我记住一些我一直想让它记住的功能，比如

#一直使用中文回复

/memory 查看记忆

2.Claude Code 的三种编辑模式

使用shift+tab，可以让Claude Code 在计划模式、默认模式和Accept Edits模式之间来回切换

Accept Edits模式【完全托管模式】：就是你啥也别管了，cc 自己来搞定，不需要询问你

举个例子：帮我创建一个 python 脚本，实现两个数相乘

默认模式：时不时的需要你选择，询问你

计划模式：就是在做一个复杂的项目之前，先进行对话，等充分理解的你的用意之后，再进行编辑执行。

比如：请使用 python 帮我实现一个点名系统

3、四种思考的深度

如果你想让你问的问题，让 AI 思考的更加深入,可以在你的问题后面 添加 关键字，有四个挡位，依次递进

think

think hard

think harder

ultra think

4、两个强大的技巧

1）在输入框中如果想快速删除输入框的内容，摁 Esc 键，可以快速删除内容

2） 如果输入框内没有内容，此时摁 Esc ，可以回退内容，也可以回退对话，还可以回退内容和对话

五、Claude Code 和 Cursor 的结合

1、下载安装Cursor ：

https://www.cursor.com/cn

需要注册和登录 Cursor，登录成功后，选择 AI 使用的语言：

点击 Ctrl + shift + p ,输入命令：configure display language，选择 中文(简体)

2、和 Claude code 的整合

ctrl+shift+~ 打开 cursor 的内置终端

输入 claude 如果报错：

PS C:\Users\Administrator\Desktop\lvyou> claude
claude : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\claude.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参
阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ claude
+ ~~~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

解决方案：

• 关闭 Cursor 编辑器
• 以管理员身份打开 PowerShell
• 按下Win键，搜索PowerShell
• 右键点击Windows PowerShell→ 选择以管理员身份运行
• 执行修改命令复制粘贴下面这行命令，回车运行：
• Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

确认修改弹出提示时，输入 Y 然后回车确认。

进入终端后再次输入 claude ,就不报错了，这个时候输入 /ide 会显示 Cursor 后面打 √

六、Claude code 的高级功能

1、恢复上一次的 claude 对话

每一次关闭 claude 之后，再重新打开，对话清空了，可以采用 claude -c 启动，这样就可以恢复到上一次关闭之前的对话状态了

也可以在新打开的 claude 对话中，输入/resume ，然后选择最近的一次对话，不过这个命令可以回到很多个会话点上，非常的方便

2、狂飙模式（YoLo 模式）

claude --dangerously-skip-permissions

YOLO 模式，是全程不需要问你，它拥有极高的权限

3、插入图片的方式

可以复制图片，拖拽图片，截图图片，然后粘贴到对话框中，然后发问即可

先将图片粘贴到你的项目中
然后@选中你需要的图片

4、激活文件

当你想要提问某个文件，不需要在对话框中@ 它，直接用鼠标选中，然后提问即可

七、Claude code和 MCP 服务

全局安装 MCP 服务

查看是否安装了 mcp 服务

在终端中执行

非全局安装：
claude mcp add --transport http context7 https://mcp.context7.com/mcp
全局安装需要添加 -s user即可
claude mcp add --transport http -s user context7 https://mcp.context7.com/mcp

通过 claude mcp list 查看是否安装

重新打开一个新的终端，输入 claude , 然后进入后输入/mcp 查看是否安装成功

什么是 context7 ，有何作用？

context7 可以实时读取 github 上的新的项目，实时喂给 claude code,完美解决 Claude code 知识库老旧滞后的问题

进入官网 context7.com

https://github.com/upstash/context7

https://context7.com/docs/resources/all-clients#claude-code

八、做一个网站实验一下

使用 springboot + echarts 实现一个可视化的 bi 展示页面，数据库数据见附件。

将数据上传到文件夹中

登陆界面

数据可视化界面

九、总结

Vibe Coding 依托 Claude Code，彻底重构了小型项目、原型项目的开发方式，开发者重心从代码语法转向产品设计与需求梳理。熟练掌握安装、指令、CLAUDE.md 配置这套体系，可实现半天落地一套可用 MVP。后续可拓展 Claude Code 插件生态，进一步放大 AI 编程效率。