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
2
3
export ALL_PROXY="http://host.docker.internal:7897"
export http_proxy="http://host.docker.internal:7897"
export https_proxy="http://host.docker.internal:7897"

什么是 MCP

MCP = Model Context Protocol(模型上下文协议)

一个开放标准协议,让 AI 模型能够安全、统一地访问外部数据源和工具

1
2
3
4
5
6
7
8
┌─────────────┐      MCP      ┌──────────────┐
│ AI Model │ ←──────────→ │ MCP Server │
│ (Claude等) │ 统一接口 │ (提供能力) │
└─────────────┘ └──────────────┘

┌───────────────┼───────────────┐
▼ ▼ ▼
[文件系统] [数据库] [API/网页]

核心价值:AI 不再是"孤立的大脑",而是能连接真实世界的"智能体"。

什么是 Agent

Agent = 智能体,能自主执行复杂任务的 AI 系统。

1
2
3
4
5
      传统 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
2
3
4
┌─────────────────┐     配置     ┌─────────────────┐
│ Claude Code │ ←────────→ │ MCP Servers │
│ (Client) │ │ (你自己安装) │
└─────────────────┘ └─────────────────┘

安装步骤(以 npx 方式为例):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 方法1:使用 claude mcp 命令
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /home/algernon

# 方法2:手动编辑 ~/.claude.json 或项目下的 .claude.json
# 添加 MCP 服务器配置:
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/allowed/path"]
},
"git": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-git", "--repository", "/path/to/repo"]
}
}
}

已配置的 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
2
3
4
5
6
7
8
9
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "your-api-key",
"ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.6",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.6",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air"
}
}
环境变量 说明
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,它可能会给你带来不一样的体验。