VibeCoding 实战：Claude Code + GLM4.7 全能手册

myluzh 发布于 2026-1-25 22:25 阅读：3006 VibeCdoing

前言

使用 Claude Code 让我的生产力翻了 10 倍。这不仅仅是一篇教程，更是我 VibeCoding 之路的完整记录。本文将作为长期更新的备忘录，收录最实用的配置、插件与心得，带你彻底拥抱 VibeCoding 新范式。
（2025-01-27更新：文章内有彩蛋，送给大家一张GLM体验卡。）

什么是 Claude Code？

Claude Code 简称（CC）是 Anthropic 出品的 AI 编程助手，相当于一个听得懂人话的“全能秘书”。你只管下指令，脏活累活它全包：不管是写代码修 Bug，还是翻译文章、分析 Excel 数据，甚至帮你快速糊个网站和小工具，它都能搞定。

graph LR
    %% 1. 起点：工具
    CC(Claude Code<br/>AI 编程工具)

    %% 2. 决策点
    Need{需要<br/>模型驱动}

    %% 3. 对比分支
    Default[默认模型: Claude Opus 4.5<br/>公认最强 但价格劝退]
    GLM([✅国产推荐: GLM 4.7<br/>量大管饱 性价比之王])

    %% 4. 最终结果
    Result{{🚀 VibeCoding<br/>生产力翻 10 倍}}

    %% 5. 连线逻辑
    CC --> Need
    Need -.->|💸 贵到用不起| Default
    Need ==>|🔥 完美平替| GLM
    GLM ==> Result

    %% 6. 样式美化
    %% 基础蓝色
    classDef start fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,color:#0d47a1;
    %% 灰色/不可用
    classDef bad fill:#f5f5f5,stroke:#bdbdbd,stroke-width:2px,stroke-dasharray: 5 5,color:#757575;
    %% 推荐黄色
    classDef good fill:#fff9c4,stroke:#fbc02d,stroke-width:3px,color:#e65100;
    %% 结果绿色 (修改处：浅绿底+深绿字，清晰度Max)
    classDef endNode fill:#d1e7dd,stroke:#0f5132,stroke-width:4px,color:#0f5132,font-weight:bold;

    class CC,Need start;
    class Default bad;
    class GLM good;
    class Result endNode;

    %% 高亮推荐路径
    linkStyle 2,3 stroke:#0f5132,stroke-width:3px;

教程

安装Claude Code，配置GLM4.7

Q：为什么要用 Claude Code + GLM 4.7 ？
A：Claude Code只是一个工具，需要搭配大模型使用，目前CC默认搭配的模型Claude Opus 4.5（目前公认最强的Coding模型），但是价格实在是太贵，根本用不起。这时候就显得智谱GLM模型性价比实在是太高了，量大管饱。所以我推荐大家跟我一样，安装完Claude Code之后，把依赖的模型换成GLM，文章后面会详细介绍怎么把GLM配置到Claude Code之中。

步骤一：安装 Claude Code

1、前提条件

您需要安装 Node.js 18 或更新版本环境，推荐安装v22(LTS)，安装后通过node --version查看。
Windows 用户还需安装 Git for Windows

2、安装Claude Code

# 进入命令行界面，安装 Claude Code（如果在安装过程中遇到权限问题，请尝试使用 sudo（MacOS/Linux）或以管理员身份运行命令提示符（Windows）重新执行安装命令）
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保存即可。
方案二：也可以使用智谱官方GLM小插件Coding Tool Helper，快速将您的GLM编码套餐加载到您喜爱的编码工具中。安装并运行它，按照界面提示操作即可自动完成工具安装，套餐配置，MCP服务器管理等。

# 进入命令行界面，执行如下运行 Coding Tool Helper，按照提示输入 GLM的API keys就完成了。
npx @z_ai/coding-helper

步骤三：使用 Claude Code

配置完成后，进入一个您的代码目录或者工作目录，在终端中执行claude命令即可开始使用 Claude Code。

# 若遇到「Do you want to use this API key」选择 Yes 即可
myluzh@myluzhMacBookPro ~ % claude
╭─── Claude Code v2.1.5 ───────────────────────────────────────────────────────────────╮
│                                 │ Tips for getting started                           │
│          Welcome back!          │ Run /init to create a CLAUDE.md file with instruc… │
│                                 │ Note: You have launched claude in your home direc… │
│             ▐▛███▜▌             │ ────────────────────────────────────────────────── │
│            ▝▜█████▛▘            │ Recent activity                                    │
│              ▘▘ ▝▝              │ No recent activity                                 │
│                                 │                                                    │
│   glm-4.7 · API Usage Billing   │                                                    │
│         C:\Users\myluzh         │                                                    │
╰──────────────────────────────────────────────────────────────────────────────────────╯
  /model to try Opus 4.5
> 你好
● 你好！有什么我可以帮助你的吗？
> 帮我review下整个项目

# 也可以使用 --dangerously-skip-permissions 参数，进入yolo模式（让ai放手去干，免得他跟一个实习生一样，有问题都会小心翼翼的来问你）。
myluzh@myluzhMacBookPro ~ % claude --dangerously-skip-permissions

完毕！现在就可以正常使用 Claude Code 。你可以让Claude Code 帮你审计某个代码,开发某些模块,优化某些项目,发邮件，写PPT 等等..只要你想到的需求，都可以告诉它！

购买GLM订阅计划

彩蛋：智谱给了我几张7天体验卡，送给各位，先到先得，赠送你1张7天AI Coding体验卡，一起来用吧
如果你觉得GLM好用，优惠就剩最后一周了，我已经购买了GLM订阅套餐，我也推荐你购买。性价比实在是太高了。而且套餐内就算最低的用量，基本上也用不完，量大管饱还便宜！GLM订阅计划优惠20%，只剩最后一周！还没买的抓紧了！
说个题外话，我自己是买了 GLM Coding Pro 年费，对于我这种重度用户来说足够了，现在所有的脏活累活都让他干了，现在官方开始搞限售了，所以需要每天10点才进去购买，要不然根本没货。

文章后面这部分，是提高你的Claude Code能力的，我会把一些好用的技能插件都分享记录下来，你有兴趣也可以看看。

MCP

MCP (Model Context Protocol) 是连接 AI 与外部系统的通用开放标准，让 Claude 能直接操作浏览器或读取本地数据；MCP 相当于给 AI 装上了“USB 接口”。

Chrome DevTools MCP

谷歌浏览器原生的MCP，有了它，Claude Code 就能直接操作你的 Chrome 浏览器了。
官方仓库 https://www.npmjs.com/package/chrome-devtools-mcp

# claude 安装
claude mcp add --scope user chrome-devtools npx chrome-devtools-mcp@latest

Chrome 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 安装
claude mcp add --scope user --transport http chrome-mcp-server 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-METHOD

BMAD 是一个全流程的 AI 敏捷开发解决方案，它集结了 12 位虚拟专家组成智能团队，通过自适应的结构化工作流，引导你完成从构思到部署的专家级交付。
官方仓库 https://github.com/bmad-code-org/BMAD-METHOD
更多关于BMAD的内容，我专门写了一篇文章 https://itho.cn/vibecoding/573.html

ralph-claude-code

自动重复叫 Claude Code 干活的工具，直到活干完或出问题为止。
官方仓库 https://github.com/frankbria/ralph-claude-code

常用网站篇

lmarena

查看各类模型排名
https://lmarena.ai/zh/leaderboard

sim接码平台

claude注册要手机号验证的时候这个有用
https://5sim.net/

skillsmp

一个收集查找 claude skill 的站
https://skillsmp.com/

glm 智谱 claudecode vibecoding claude glm4.7

正文到此结束

版权声明：若无特殊注明，本文皆为 Myluzh Blog 原创，转载请保留文章出处。
文章内容：https://itho.cn/vibecoding/570.html
文章标题：《VibeCoding 实战：Claude Code + GLM4.7 全能手册》