VibeCoding 与 Claude Code
最近一直在用 Cursor,后来也体验了 Copilot(因为有免费额度),但一直还没真正体验过 Claude Code。听说最近 GLM 4.7 非常火,就打算来体验一下 CC + GLM 4.7 的效果。
🌊 什么是 VibeCoding
VibeCoding = Vibe(氛围/直觉)+ Coding(编程)
一种新的编程范式:你用自然语言描述意图,AI Agent 执行操作。你不再是逐行敲代码,而是与 AI 对话式协作——你负责"想做什么",AI 负责"怎么做"。
传统编程:IDE + 手写代码 → VibeCoding:AI Agent + 自然语言指令
🛠️ 主流 VibeCoding 工具对比
| 工具 | 定位 | 核心优势 | 典型场景 |
|---|---|---|---|
| Claude Code | CLI 工具 | 终端原生、Agent 任务、MCP 生态 | 自动化脚本、代码重构、项目操作 |
| Cursor | IDE | VSCode 体验、代码库理解、多模型切换 | 日常开发、新项目上手、代码补全 |
| Copilot | 编辑器插件 | GitHub 深度集成、代码补全 | 快速补全、样板代码生成 |
| Cline | VSCode 插件 | 自动任务执行、多步骤操作 | 复杂任务自动化 |
Claude Code 的安装与配置
我是先在 WSL 里安装的 Claude Code,中间遇到代理的问题,WSL 不支持 WIN 本地的代理,于是用的虚拟网卡设置代理,要打开 clash 的局域网选项才可以。
在zshrc中添加了一下配置就ok了
1 | export ALL_PROXY="http://host.docker.internal:7897" |
什么是 MCP
MCP = Model Context Protocol(模型上下文协议)
一个开放标准协议,让 AI 模型能够安全、统一地访问外部数据源和工具。
1 | ┌─────────────┐ MCP ┌──────────────┐ |
核心价值:AI 不再是"孤立的大脑",而是能连接真实世界的"智能体"。
什么是 Agent
Agent = 智能体,能自主执行复杂任务的 AI 系统。
1 | 传统 LLM AI Agent |
Agent 的能力: - 规划:把复杂任务拆解成步骤 - 工具调用:读写文件、执行命令、搜索网页 - 自我修正:遇到错误自动重试
MCP 生态
这是 Claude Code 最强大的地方。MCP 允许你扩展 Claude 的能力:
| MCP 类型 | 作用 | 示例 |
|---|---|---|
| 文件系统 | 读写文件 | @filesystem |
| Git 操作 | commit/rebase/branch | @git |
| 网页搜索 | 查询最新资料 | @web-search |
| 数据库 | 查询/修改数据 | @postgres/@sqlite |
| 浏览器 | 自动化操作 | @puppeteer |
如何安装 MCP
是的,MCP 服务器需要自己安装。MCP 采用"客户端-服务器"架构:
1 | ┌─────────────────┐ 配置 ┌─────────────────┐ |
安装步骤(以 npx 方式为例):
1 | # 方法1:使用 claude mcp 命令 |
已配置的 MCP 服务器
| MCP 服务器 | 包名 | 功能说明 |
|---|---|---|
| zai-mcp-server | @z_ai/mcp-server |
UI 分析、OCR 文字提取、错误诊断、数据可视化分析、视频内容理解 |
| memory | @modelcontextprotocol/server-memory |
持久化记忆存储,可创建实体和关系,跨会话保存信息 |
| filesystem | @modelcontextprotocol/server-filesystem |
安全的文件系统访问,支持读写、搜索、目录树等操作 |
| fetch | @kazuph/mcp-fetch |
HTTP 请求工具,可获取网页内容、调用 API |
使用 GLM 模型
Claude Code 支持自定义 API,可以接入 GLM 等国产大模型。
配置方式:在 ~/.claude/settings.json 中添加环境变量:
1 | { |
| 环境变量 | 说明 |
|---|---|
ANTHROPIC_AUTH_TOKEN |
API Key |
ANTHROPIC_BASE_URL |
API 地址 |
ANTHROPIC_DEFAULT_*_MODEL |
默认模型映射 |
CLAUDE.md
CLAUDE.md 是项目根目录的特殊文件,用于向 Claude 提供项目上下文。每次新会话开始时,Claude 会自动读取它。
典型用途: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17# 项目说明
这是一个基于 Next.js 的博客系统。
## 项目结构
- `/source` - 博客文章源码
- `/themes` - 主题文件
- `package.json` 中的 `build` 命令用于生成静态站点
## 开发规范
- 使用 TypeScript
- 组件放在 `/components` 目录
- 样式使用 CSS Modules
## 注意事项
- 构建前先运行 `npm run lint`
- 部署使用 `npm run deploy`
| 技巧 | 说明 | 示例 |
|---|---|---|
| 文件引用 | 用 [filename.js](src/filename.js) 格式引用文件,生成可点击链接 |
代码定位更快 |
| 明确意图 | 一次性说完整需求,避免来回确认 | "添加一个深色切换按钮,点击时切换主题,状态存 localStorage" |
| 分步任务 | 复杂任务直接说"帮我规划" | "帮我规划一下如何重构登录流程" |
| 选中代码 | IDE 中选中代码后提问,Claude 知道上下文 | 选中函数后问"优化这段代码" |
| /commit | 自动生成 commit message | /commit |
适用场景
| 场景 | 推荐工具 |
|---|---|
| 日常开发、代码补全 | Cursor |
| 项目重构、脚本自动化 | Claude Code |
| 快速补全、GitHub 深度集成 | Copilot |
总结
如果你已经在用 Cursor 或 Copilot,不妨试试 Claude Code,它可能会给你带来不一样的体验。