Claude Code实战：Vibe Coding与MCP扩展开发指南

最近 Claude Code 的热度确实很高，Vibe Coding、MCP、Agent Skill 这些词一下子涌进了开发者的视野。很多同学在视频平台刷到过各种 demo：一句话生成整个模块、AI 自动跑测试、通过 MCP 操作浏览器验证页面……看起来很过瘾，但自己动手时却经常卡在环境、配置、报错上。

这篇文章就把我整理过的 Claude Code 实战思路完整讲一遍，重点拆解三件事：Claude Code 怎么装、怎么配；Vibe Coding 在实际项目里怎么落地；MCP 扩展到底怎么接。内容偏实操，建议打开终端跟着做一遍。

1. 为什么人人都想学 Claude Code

1.1 Claude Code：终端里的 AI 编程代理

Claude Code 是 Anthropic 推出的命令行 AI 编程助手，它和常见的 AI 代码补全插件有一个明显区别：Claude Code 不只是“在你敲代码时给建议”，而是以代理（Agent）的方式直接参与开发任务。

它可以在终端里做很多事：

• 读取并理解整个项目仓库的目录结构和代码。
• 按照你的自然语言描述，跨文件修改代码。
• 执行终端命令，比如安装依赖、运行测试、启动服务。
• 调用外部工具，比如通过 MCP 协议操作浏览器、数据库、设计稿等。
• 根据自己的观察结果反复调试代码，直到任务完成。

换句话说，Claude Code 更像是“一个住在终端里的结对程序员”。你负责描述清楚目标和约束，它负责具体执行——这就是 Vibe Coding 开发方式能成立的基础。

1.2 Vibe Coding 到底在解决什么问题

Vibe Coding（氛围编程、自然语言编程）指的不是某种编程语言的语法，而是一种新的开发范式：开发者用自然语言描述需求，AI 生成代码，开发者再通过反馈不断校正结果。

传统开发流程是：

需求分析 → 设计 → 手写代码 → 测试 → 修复

Vibe Coding 流程更接近：

需求描述 → AI 生成初版 → 运行验证 → 反馈优化 → 产出可交付代码

这里的关键不是“复制粘贴 AI 代码”，而是把精力从“怎么写”转移到“写什么、对不对”上。工程人员的价值从“逐行实现”变成“定义需求、约束边界、审查结果、修复关键问题”。

Vibe Coding 和 Spec-Driven 也有区别：Spec-Driven 强调先把规格说明、接口文档、验收标准写清楚，再让 AI 按规格实现，适合核心业务；Vibe Coding 更强调快速原型和迭代，适合内部工具、自动化脚本、探索性需求。实际企业项目里两者经常组合使用。

1.3 本文能帮你掌握什么

读完这篇文章，你可以掌握以下能力：

• 完成 Claude Code 的安装、登录和环境配置。
• 理解 CLAUDE.md、权限控制、模型接入等核心概念。
• 用 Vibe Coding 方式独立完成一个小工具。
• 在企业级项目（以若依分离版为例）中使用 Claude Code 辅助开发。
• 通过 MCP 扩展让 Claude Code 操作浏览器、文件系统等外部资源。
• 掌握常见报错排查思路和团队落地的最佳实践。

2. 环境准备：从零安装 Claude Code

2.1 安装 Node.js

Claude Code 基于 Node.js 开发，所以第一步是准备 Node.js 环境。以 Claude Code 当前常见的安装要求为例，建议安装 Node.js 18 或更高版本。版本要求会随 Claude Code 迭代变化，以官方文档为准。

检查本机是否已安装：

node -v npm -v

如果提示命令不存在，需要先安装 Node.js。Windows 用户建议直接下载 Node.js 官方安装包，或者使用 nvm-windows 管理版本；macOS/Linux 用户可以使用 nvm 安装：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash nvm install 20 nvm use 20

安装完成后再次执行node -v，能正常输出版本号即可。

2.2 使用 npm 安装 Claude Code

Node.js 环境就绪后，通过 npm 全局安装 Claude Code：

npm install -g @anthropic-ai/claude-code

安装过程可能需要几十秒，取决于网络情况。安装完成后，验证版本：

claude --version

如果提示claude命令找不到，通常是 npm 全局目录没有加入 PATH。可以手动检查 npm 的全局 bin 目录：

npm prefix -g

然后把输出目录加入系统 PATH，Windows 和 macOS 的配置方式略有不同，网上可以搜到对应的 PATH 设置方法。

2.3 登录与认证配置

安装好之后，在终端输入claude即可启动交互界面。首次使用需要完成认证，常见方式有两种。

方式一：直接在交互界面登录 Anthropic 账号。启动后输入/login，会跳转到浏览器完成授权。

方式二：使用 API Key。把 Anthropic API Key 配置到环境变量：

export ANTHROPIC_API_KEY=你的APIKey

在 Windows PowerShell 下的写法：

$env:ANTHROPIC_API_KEY="你的APIKey"

注意 API Key 是非常敏感的凭据，不要提交到 Git 仓库，也不要粘贴到公开聊天工具里。

2.4 配置模型接入

Claude Code 默认使用官方模型服务。在实际工作中，有些团队会通过自建或第三方提供的 API 兼容网关接入其他模型服务，比如 DeepSeek 等。这种方式不需要改造 Claude Code，只需要通过环境变量指定网关地址和模型名称：

export ANTHROPIC_BASE_URL=https://你的网关地址 export ANTHROPIC_MODEL=deepseek-chat export ANTHROPIC_AUTH_TOKEN=你的Token

整体思路是：ANTHROPIC_BASE_URL指向兼容 Anthropic Messages API 格式的网关，ANTHROPIC_MODEL指定具体的模型名，ANTHROPIC_AUTH_TOKEN提供认证信息。具体地址、模型名和 Token 需要向你的模型服务提供商确认，不要照抄。

如果设置的模型名不被当前 Claude Code 版本识别，通常会在运行时看到类似"your-model" is not a model this version of claude code recognizes的报错。遇到时按两个方向排查：一是确认模型名拼写是否正确；二是确认 Claude Code 版本是否过旧，必要时执行升级：

npm update -g @anthropic-ai/claude-code

3. 核心配置：让 AI 更懂你的项目

3.1 CLAUDE.md：项目的“长期记忆”

Claude Code 每次启动时只会读取当前项目内容，但如果你的项目很大、结构很复杂，AI 不一定能快速抓住关键约定。这时候就需要CLAUDE.md文件。

CLAUDE.md是项目级的说明文件，Claude Code 会自动读取，并在后续任务中作为项目背景持续参考。它通常放在项目根目录，也可以放在用户目录~/.claude/CLAUDE.md作为全局配置。

下面是一个典型的 CLAUDE.md 内容示例：

# 项目背景 这是一个基于 Spring Boot 3 + Vue 3 的商城系统后端仓库。 技术栈：Java 17、Spring Boot 3、MyBatis-Plus、MySQL 8、Redis。 # 编码规范 - 后端包名统一使用 com.example.mall。 - Service 必须写接口，Controller 里不写业务逻辑。 - 新增接口必须在 doc/api.md 中登记。 - 禁止修改 src/main/resources/application-prod.yml。 # 常用命令 - 启动后端：mvn spring-boot:run - 运行测试：mvn test - 前端构建：npm run build

当 Claude Code 读取到这些信息后，生成的代码会更贴近项目现有风格，而不是“看起来能用但融不进项目”的孤立代码。

3.2 权限控制与命令审批

Claude Code 作为一个能执行命令的代理，天然拥有较高的操作权限。默认情况下，它执行命令前会请求你的确认，比如读取文件、安装依赖、运行 shell 命令等。

在实际使用中，有几个原则值得坚持：

• 最小权限原则：只给当前任务需要的工具权限，不要直接跳过全部审批。
• 使用白名单而不是全放行：如果只需要让 AI 运行mvn test，不要把整台服务器的命令都放开。
• 大范围文件修改前先看 diff：涉及批量修改文件时，先让 Claude Code 输出修改计划，确认后再执行。

不同版本对权限参数的命名有差异，可以通过以下命令查看帮助：

claude --help

生产环境、数据库变更、删除操作等高风险场景，必须保留人工审批步骤，这是所有 AI 编程工具落地时都应该遵守的底线。

3.3 Agent Skill 与 MCP 有什么区别

现在 Claude Code 的生态里经常出现两个词：Agent Skill 和 MCP。很多初学者会混淆。

Agent Skill（技能）本质上是一组指令、模板、脚本和资源打包出来的“技能包”。它教会 AI 在特定场景下按某种成熟流程工作。比如“代码审查 Skill”会告诉 AI 先检查哪些点、按什么标准输出问题清单；“需求分析 Skill”会给出一套补齐需求细节的追问方式。

MCP（Model Context Protocol，模型上下文协议）则是一种标准化的“工具接入协议”。它让 AI 应用通过统一方式连接外部数据源、API 和硬件设备。比如通过 Playwright MCP，AI 可以控制浏览器执行点击、输入、截图等操作；通过数据库 MCP，AI 可以查询业务表结构。

简单对比：

两者不是替代关系，而是配合关系。Skill 管“怎么思考”，MCP 管“能碰到哪些外部资源”。

4. Vibe Coding 实战：用对话写一个日志分析工具

这一节我们用一个小项目完整演示 Vibe Coding 的流程。目标是用 Python 写一个 nginx 访问日志分析工具，统计访问量最高的 IP。

4.1 需求描述：从一句话开始

先新建一个项目目录，进入目录后启动 Claude Code：

mkdir log-analyzer cd log-analyzer claude

接下来在交互界面里输入需求。示例 Prompt：

请在当前目录创建一个 Python 命令行工具，需求如下： 1. 通过命令行参数指定 nginx 访问日志文件路径。 2. 解析日志中的客户端 IP、请求路径、HTTP 状态码。 3. 统计访问量最高的前 10 个 IP，并按降序输出。 4. 输出格式为表格，包含 IP、访问次数、占比。 5. 支持 --top 参数自定义输出条数。 请先生成 main.py，再告诉我如何运行和测试。

这个需求描述不算复杂，但是包含了输入、处理、输出三个关键点，并且给出了格式约束。Vibe Coding 的第一步不是写代码，而是把需求说清楚。

4.2 项目结构与初始化

Claude Code 收到需求后，通常不会直接甩给你一整个文件。它会先确认项目目录、是否需要依赖文件，然后生成代码。项目结构大致如下：

log-analyzer/ ├── main.py └── access.log # 测试日志，可以自己生成

4.3 核心代码生成

下面是一个可运行的示例版本，展示 Claude Code 可能给出的代码形态：

# main.py import argparse import re from collections import Counter from pathlib import Path LOG_PATTERN = re.compile( r'(?P<ip>\d+\.\d+\.\d+\.\d+) .*? \[.*?\] ' r'"(?P<method>\w+) (?P<path>\S+) \S+" (?P<status>\d{3})' ) def parse_log(file_path: Path) -> Counter: ip_counter = Counter() with open(file_path, "r", encoding="utf-8", errors="ignore") as f: for line in f: match = LOG_PATTERN.search(line) if match: ip_counter[match.group("ip")] += 1 return ip_counter def main(): parser = argparse.ArgumentParser(description="nginx 访问日志统计工具") parser.add_argument("log_file", help="nginx access.log 路径") parser.add_argument("--top", type=int, default=10, help="输出前 N 条") args = parser.parse_args() counter = parse_log(Path(args.log_file)) total = sum(counter.values()) print(f"{'IP':<20}{'次数':<8}{'占比':<8}") print("-" * 40) for ip, count in counter.most_common(args.top): percent = count / total * 100 print(f"{ip:<20}{count:<8}{percent:.2f}%") if __name__ == "__main__": main()

正则表达式的用途是提取每行日志里的 IP、请求方法和状态码。如果你的 nginx 日志格式和默认格式不同，可以再让 Claude Code 根据日志样例调整。

4.4 运行验证与迭代优化

准备一份测试日志access.log，内容大致如下：

192.168.1.10 - - [20/Feb/2025:10:00:01 +0800] "GET /index.html HTTP/1.1" 200 1024 192.168.1.11 - - [20/Feb/2025:10:00:02 +0800] "GET /api/user HTTP/1.1" 200 512 192.168.1.10 - - [20/Feb/2025:10:00:03 +0800] "GET /index.html HTTP/1.1" 200 1024

运行命令：

python main.py access.log --top 3

预期输出：

IP 次数 占比 ---------------------------------------- 192.168.1.10 2 33.33% 192.168.1.11 1 16.67%

到这里，一个最小可用的 Vibe Coding 流程就跑通了。后续可以继续提需求，比如“把结果输出为 CSV 文件”“按状态码分别统计”“过滤内网 IP”。这就是 Vibe Coding 的核心体验：不断用自然语言迭代，AI 快速调整代码，你负责验证结果是否正确。

5. 企业级实战：用 Claude Code 辅助若依分离版开发

小工具能跑通后，我们再上一个难度，看看在企业级后端项目中怎么用 Claude Code。

5.1 为什么选若依分离版作为案例

若依分离版（RuoYi-Vue）是国内非常经典的中后台脚手架，基于 Spring Boot + Vue 3 + Element Plus，自带权限管理、代码生成、多数据源等基础设施。用它做案例有三个好处：

• 技术栈通用，Java 后端 + Vue 前端的模式在国内企业中很常见。
• 项目结构规范，分层明确，适合演示“AI 读懂项目规范后生成代码”。
• 涉及数据库脚本、后端接口、前端页面、部署构建，覆盖完整开发流程。

5.2 先让 AI 读懂项目

第一次在企业项目里使用 Claude Code，不要急着让它写代码。先让 AI 读取项目结构和技术栈。示例 Prompt：

请先分析当前仓库的项目结构，判断是否为若依分离版。阅读这些内容： 1. pom.xml 和后端模块目录。 2. ruoyi-ui/src 下的目录结构。 3. sql 目录中的初始化脚本。 确认后，基于现有规范，为“订单管理”模块生成完整代码。要求： - 后端按若依分层：Controller、Service、Mapper、Domain。 - 使用若依自带的返回结果包装类。 - 前端使用若依 ui 风格，在系统管理下新增订单管理菜单。 - 生成对应的 SQL（包含菜单权限标识），先不要执行。 - 先输出开发计划，再逐个文件生成。

这步的关键是让 AI 先建立“项目上下文”。读到了 pom.xml，它知道版本号；读到了 Controller 结构，它知道返回值风格；读到了 SQL 脚本，它知道菜单表结构。这样生成的代码才不会像“外包代码”一样游离在项目规范之外。

5.3 生成订单管理模块

订单表只是示例，字段可以按实际业务扩充：

-- 需求：订单表（示例 SQL，按需调整字段） CREATE TABLE base_orders ( id BIGINT AUTO_INCREMENT PRIMARY KEY, order_no VARCHAR(32) NOT NULL COMMENT '订单编号', customer_id BIGINT NOT NULL COMMENT '客户ID', order_type VARCHAR(16) NULL COMMENT '订单类型', total_amount DECIMAL(10, 2) NOT NULL COMMENT '订单金额', status CHAR(1) DEFAULT '0' COMMENT '状态', create_by VARCHAR(64) DEFAULT '', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, remark VARCHAR(500) DEFAULT '' );

Claude Code 会根据若依规范生成类似这样的文件清单：

ruoyi-system/src/main/java/com/ruoyi/order/domain/BaseOrders.java ruoyi-system/src/main/java/com/ruoyi/order/mapper/BaseOrdersMapper.java ruoyi-system/src/main/java/com/ruoyi/order/service/IBaseOrdersService.java ruoyi-system/src/main/java/com/ruoyi/order/service/impl/BaseOrdersServiceImpl.java ruoyi-admin/src/main/java/com/ruoyi/order/controller/BaseOrdersController.java

具体路径和类名会随若依版本不同而变化，建议以你拉取的项目实际结构为准。无论生成结果如何，都要先让 Claude Code 输出计划，再逐步生成，不要一次性让它生成十几个文件再回头改。

5.4 前端页面与菜单

后端生成之后，继续让 Claude Code 生成若依风格的 Vue 页面：

按照若依 ruoyi-ui 的风格，为订单管理生成一个列表页面： - 支持关键字搜索：订单编号、客户ID。 - 支持分页查询。 - 操作列包含编辑、删除按钮。 - 新增和编辑使用弹窗表单。 - 页面文件放到 ruoyi-ui/src/views/order/ 目录。 - 同时生成菜单 SQL 和权限标识。

若依的权限标识通常形如order:list、order:add、order:edit、order:remove，这些规范可以写进 CLAUDE.md，让后续生成保持一致。

5.5 构建与部署关注点

开发完成后，部署阶段同样可以借助 AI。但部署环节风险较高，生产环境操作建议保持人工确认，具体可以这样用：

后端打包：

mvn clean package -DskipTests

前端构建：

cd ruoyi-ui npm install npm run build:prod

构建产物ruoyi-ui/dist部署到 Nginx，后端 jar 包部署到服务器。一个典型的若依分离版 Nginx 配置如下：

server { listen 80; server_name admin.example.com; root /opt/ruoyi-ui/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /prod-api/ { proxy_pass http://127.0.0.1:8080/; } }

部署时重点关注：数据库连接配置、Redis 地址、文件上传目录权限、Nginx 代理路径。这个环节不要图省事一键执行 AI 给出的所有命令。

6. MCP 扩展实战：让 Claude Code 连接外部世界

6.1 协议、Server 与工具三要素

MCP 的组成可以拆成三部分：

• MCP 协议：定义了 AI 应用和外部工具之间的通信规范。
• MCP Server：一个独立的服务进程，对外暴露若干工具。
• MCP Client：调用 MCP Server 的客户端，Claude Code 就是其中之一。

当你在 Claude Code 里说“用浏览器打开登录页并截图”时，Claude Code 会通过 MCP Client 连接浏览器 MCP Server，再调用对应的工具操作浏览器。

6.2 MCP 的两种配置方式

方式一：在项目根目录创建.mcp.json配置文件。

{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] }, "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/tmp/workspace"] } } }

注意 Windows 环境下command可能需要写成npx.cmd。MCP Server 的 npm 包名会随官方维护变动，建议先确认当前官方推荐包名。

方式二：使用 Claude Code 的 mcp 命令动态添加：

claude mcp add playwright -- npx @playwright/mcp@latest

查看当前已添加的 MCP Server：

claude mcp list

6.3 实战：Playwright MCP 浏览器自动化

Playwright MCP 是非常实用的一个 MCP Server，它让 Claude Code 能控制真实浏览器，适合做前端验证、截图、回归冒烟测试。

配置完成后，在 Claude Code 里可以这样描述任务：

使用 playwright 打开 http://localhost:8080/login， 输入用户名 admin，密码 admin123， 点击登录按钮，等待页面跳转到首页， 截图保存到 /tmp/home.png。

Claude Code 会调用 Playwright MCP 的工具逐步执行这些操作。遇到元素找不到、超时等问题时，它还能读取页面反馈重新尝试。这个场景对做中后台系统的同学尤其有用，因为很多业务逻辑卡在前端交互上。

6.4 实战：用 SDK 写一个自定义 MCP Server

如果内置 MCP Server 不够用，可以自己写。下面是一个基于 MCP SDK 的 Node.js 最小示例。

初始化项目并安装依赖：

mkdir mcp-demo-server cd mcp-demo-server npm init -y npm install @modelcontextprotocol/sdk

下面这个示例暴露了一个add工具，用于两个数字相加。SDK 写法会随版本迭代，使用时以官方文档