VibeCoding 实战：Claude Code + GLM4.7 全能手册
前言
使用 Claude Code 让我的生产力翻了 10 倍。 这不仅仅是一篇教程，更是我 VibeCoding 之路的完整记录。本文将作为长期更新的备忘录，收录最实用的配置、插件与心得，带你彻底拥抱 VibeCoding 新范式。
什么是 Claude Code？
Claude Code 简称（CC） 是 Anthropic 出品的 AI 编程助手，相当于一个听得懂人话的“全能秘书”。你只管下指令，脏活累活它全包：不管是写代码修 Bug，还是翻译文章、分析 Excel 数据，甚至帮你快速糊个网站和小工具，它都能搞定。
教程
安装Claude Code，配置GLM4.7
Q:为什么要用 CC + GLM 4.7
A:Claude Opus是目前公认最强的模型，好用是好用但是价格实在是太贵！虽然GLM比Claude Opus略逊一筹，但是便宜，量大管饱。
步骤一：安装 Claude Code
1、前提条件
- 您需要安装 Node.js 18 或更新版本环境，推荐安装v22(LTS)，安装后通过
node --version查看。 - Windows 用户还需安装 Git for Windows
2、安装Claude Code
# 进入命令行界面，安装 Claude Code
npm install -g @anthropic-ai/claude-code
# 运行如下命令，查看安装结果，若显示版本号则表示安装成功
claude --version步骤二：配置 GLM Coding
1、注册账号
点此注册智谱开放平台账号，按照提示完成账号注册流程，新用户赠送2000万Token额度，够你体验使用了，体验后觉得好用再购买订阅计划。
2、获取API Key
登录后，在个人中心页面，点击 API Keys，创建一个新的 API Key。
3、配置API Key
我这边推荐使用CC-Switch直接配置，安装CC Switch后，直接选择添加新供应商，选择预设供应商Z.ai GLM，添加你的API Key保存即可。
也可以使用Coding Tool Helper，快速将您的GLM编码套餐加载到您喜爱的编码工具中。安装并运行它，按照界面提示操作即可自动完成工具安装，套餐配置，MCP服务器管理等。
# 进入命令行界面，执行如下运行 Coding Tool Helper
npx @z_ai/coding-helper步骤三：使用 Claude Code
# 配置完成后，进入一个您的代码工作目录，在终端中执行 claude 命令即可开始使用 Claude Code
# 若遇到「Do you want to use this API key」选择 Yes 即可
C:\Users\myluzh\Desktop>claude
╭─── Claude Code v2.1.5 ──────────────────────────────────────────────────────────────────────────────╮
│ │ Tips for getting started │
│ Welcome back! │ Run /init to create a CLAUDE.md file with instructions for Claude │
│ │ ───────────────────────────────────────────────────────────────── │
│ ▐▛███▜▌ │ Recent activity │
│ ▝▜█████▛▘ │ No recent activity │
│ ▘▘ ▝▝ │ │
│ │ │
│ glm-4.7 · API Usage Billing │ │
│ ~\Desktop │ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────╯
/model to try Opus 4.5
> 你好
● 你好！有什么我可以帮助你的吗？
> 帮我review下整个项目完毕！现在就可以正常使用 Claude Code 进行开发了。
MCP
MCP (Model Context Protocol) 是连接 AI 与外部系统的通用开放标准，让 Claude 能直接操作浏览器或读取本地数据；MCP 相当于给 AI 装上了“USB 接口”。
Chrome DevTools MCP
谷歌浏览器原生的MCP
https://www.npmjs.com/package/chrome-devtools-mcp
# claude 安装当前项目
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
# claude 安装全局
claude mcp add --scope user chrome-devtools npx chrome-devtools-mcp@latestChrome MCP
第三方，无需启动独立的浏览器进程，直接利用用户已打开的Chrome浏览器， 自动使用已登录状态，完整保留用户环境等，但是要装chrome插件。
https://github.com/hangwin/mcp-chrome
# 1 装chrome插件，下载插件解压，打开chrome，访问chrome://extensions/，开发者模式，加载已解压插件，加载。
https://github.com/hangwin/mcp-chrome/releases
# 2 安装mcp-chrome-bridge
npm install -g mcp-chrome-bridge
# 3 claude 安装 mcp
{
"mcpServers": {
"chrome-mcp-server": {
"type": "streamableHttp",
"url": "http://127.0.0.1:12306/mcp"
}
}
}Skills
Skills 则是赋予 AI 特定领域任务的“能力扩展包”，如前端还原或代码审查技能，相当于给 AI 装备了垂直领域的“工具箱”
关于 skills 官方介绍 https://code.claude.com/docs/zh-CN/skills
frontend-design
摆脱一眼 AI 味的平庸设计，生成更具创意、更像专业设计师制作的生产级前端界面。
https://github.com/anthropics/skills/tree/main/skills/frontend-design
其他工具
CC-Switch
专为多环境 Claude 用户打造的配置管理工具，支持一键在不同的 API Key 或供应商之间快速切换，告别频繁手动修改配置文件的繁琐。
https://github.com/farion1231/cc-switch/releases
claude-auto-resume
专为长耗时任务设计的守护脚本，能够自动检测并恢复因网络波动或超时而中断的 Claude 对话，实现真正的“无人值守”式编程。
https://github.com/terryso/claude-auto-resume/tree/develop
BMad
BMad 是一个全流程的 AI 敏捷开发 解决方案，它集结了 12 位虚拟专家组成智能团队，通过自适应的结构化工作流，引导你完成从构思到部署的专家级交付。
https://github.com/bmad-code-org/BMAD-METHOD
常用网站篇
lmarena
查看各类模型排名
https://lmarena.ai/zh/leaderboard