最近 Claude Code 的热度确实很高Vibe Coding、MCP、Agent Skill 这些词一下子涌进了开发者的视野。很多同学在视频平台刷到过各种 demo一句话生成整个模块、AI 自动跑测试、通过 MCP 操作浏览器验证页面……看起来很过瘾但自己动手时却经常卡在环境、配置、报错上。这篇文章就把我整理过的 Claude Code 实战思路完整讲一遍重点拆解三件事Claude Code 怎么装、怎么配Vibe Coding 在实际项目里怎么落地MCP 扩展到底怎么接。内容偏实操建议打开终端跟着做一遍。1. 为什么人人都想学 Claude Code1.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 Code2.1 安装 Node.jsClaude 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 CodeNode.js 环境就绪后通过 npm 全局安装 Claude Codenpm install -g anthropic-ai/claude-code安装过程可能需要几十秒取决于网络情况。安装完成后验证版本claude --version如果提示claude命令找不到通常是 npm 全局目录没有加入 PATH。可以手动检查 npm 的全局 bin 目录npm prefix -g然后把输出目录加入系统 PATHWindows 和 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_URLhttps://你的网关地址 export ANTHROPIC_MODELdeepseek-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-code3. 核心配置让 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”会给出一套补齐需求细节的追问方式。MCPModel Context Protocol模型上下文协议则是一种标准化的“工具接入协议”。它让 AI 应用通过统一方式连接外部数据源、API 和硬件设备。比如通过 Playwright MCPAI 可以控制浏览器执行点击、输入、截图等操作通过数据库 MCPAI 可以查询业务表结构。简单对比维度Agent SkillMCP Server本质一组指令、模板、脚本构成的技能包标准协议下的外部工具接入层主要作用教会 AI 按方法论完成任务让 AI 调用外部数据源、API 和硬件是否需要独立进程通常不需要通常需要启动一个服务进程典型例子代码审查 Skill、接口设计 SkillPlaywright MCP、文件系统 MCP使用方式AI 在对应场景按 Skill 步骤执行AI 按工具声明调用外部 Server两者不是替代关系而是配合关系。Skill 管“怎么思考”MCP 管“能碰到哪些外部资源”。4. Vibe Coding 实战用对话写一个日志分析工具这一节我们用一个小项目完整演示 Vibe Coding 的流程。目标是用 Python 写一个 nginx 访问日志分析工具统计访问量最高的 IP。4.1 需求描述从一句话开始先新建一个项目目录进入目录后启动 Claude Codemkdir 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(?Pip\d\.\d\.\d\.\d) .*? \[.*?\] r(?Pmethod\w) (?Ppath\S) \S (?Pstatus\d{3}) ) def parse_log(file_path: Path) - Counter: ip_counter Counter() with open(file_path, r, encodingutf-8, errorsignore) 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(descriptionnginx 访问日志统计工具) parser.add_argument(log_file, helpnginx access.log 路径) parser.add_argument(--top, typeint, default10, 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/mcplatest] }, 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/mcplatest查看当前已添加的 MCP Serverclaude mcp list6.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 写法会随版本迭代使用时以官方文档 Claude Code实战：Vibe Coding与MCP扩展开发指南
最近 Claude Code 的热度确实很高Vibe Coding、MCP、Agent Skill 这些词一下子涌进了开发者的视野。很多同学在视频平台刷到过各种 demo一句话生成整个模块、AI 自动跑测试、通过 MCP 操作浏览器验证页面……看起来很过瘾但自己动手时却经常卡在环境、配置、报错上。这篇文章就把我整理过的 Claude Code 实战思路完整讲一遍重点拆解三件事Claude Code 怎么装、怎么配Vibe Coding 在实际项目里怎么落地MCP 扩展到底怎么接。内容偏实操建议打开终端跟着做一遍。1. 为什么人人都想学 Claude Code1.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 Code2.1 安装 Node.jsClaude 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 CodeNode.js 环境就绪后通过 npm 全局安装 Claude Codenpm install -g anthropic-ai/claude-code安装过程可能需要几十秒取决于网络情况。安装完成后验证版本claude --version如果提示claude命令找不到通常是 npm 全局目录没有加入 PATH。可以手动检查 npm 的全局 bin 目录npm prefix -g然后把输出目录加入系统 PATHWindows 和 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_URLhttps://你的网关地址 export ANTHROPIC_MODELdeepseek-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-code3. 核心配置让 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”会给出一套补齐需求细节的追问方式。MCPModel Context Protocol模型上下文协议则是一种标准化的“工具接入协议”。它让 AI 应用通过统一方式连接外部数据源、API 和硬件设备。比如通过 Playwright MCPAI 可以控制浏览器执行点击、输入、截图等操作通过数据库 MCPAI 可以查询业务表结构。简单对比维度Agent SkillMCP Server本质一组指令、模板、脚本构成的技能包标准协议下的外部工具接入层主要作用教会 AI 按方法论完成任务让 AI 调用外部数据源、API 和硬件是否需要独立进程通常不需要通常需要启动一个服务进程典型例子代码审查 Skill、接口设计 SkillPlaywright MCP、文件系统 MCP使用方式AI 在对应场景按 Skill 步骤执行AI 按工具声明调用外部 Server两者不是替代关系而是配合关系。Skill 管“怎么思考”MCP 管“能碰到哪些外部资源”。4. Vibe Coding 实战用对话写一个日志分析工具这一节我们用一个小项目完整演示 Vibe Coding 的流程。目标是用 Python 写一个 nginx 访问日志分析工具统计访问量最高的 IP。4.1 需求描述从一句话开始先新建一个项目目录进入目录后启动 Claude Codemkdir 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(?Pip\d\.\d\.\d\.\d) .*? \[.*?\] r(?Pmethod\w) (?Ppath\S) \S (?Pstatus\d{3}) ) def parse_log(file_path: Path) - Counter: ip_counter Counter() with open(file_path, r, encodingutf-8, errorsignore) 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(descriptionnginx 访问日志统计工具) parser.add_argument(log_file, helpnginx access.log 路径) parser.add_argument(--top, typeint, default10, 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/mcplatest] }, 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/mcplatest查看当前已添加的 MCP Serverclaude mcp list6.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 写法会随版本迭代使用时以官方文档