本文源自 GLM Coding 大师作品征集赛 的获奖作品，原文作者为 冰冻大西瓜 。
数万开发者严选的编码搭子 GLM Coding Plan

推荐语：

从工具选型到AI协作，从环境配置到MCP接入，本文几乎涵盖了AI编程的全流程实战。 作者不仅展现了GLM-4.6在Claude Code框架下的灵活适配，还通过Vitepress项目案例，验证了AI在复杂前端任务中的落地能力。 逻辑清晰、细节扎实、技巧丰富，是一篇真正“能落地、能复现、能启发”的AI实战指南。

---

1. 工具选择

现在AI工具+各种模型算是百花齐放了, 我个人用的AI工具时间最久的算是 Claude Code (以下简称CC), 其他的工具比如codex、cursor、zed等等我也都尝试过,最后选择CC的理由是 它支持子代理( Sub-agents),这有什么好处呢?

这就非常方便了,这让我非常的满意, 目前我还没发现其他工具有类似功能支持的

---

2. 模型选择

CC虽然很好, 尤其是新出的Sonnet 4.5,非常的强大, 但是作为国内使用者, 不便之处也是显而易见的:

1. 使用困难,CC在大规模封禁国内使用者的账号,更别提苛刻的支付渠道了
2. 价格昂贵,CC现在不但套餐昂贵,而且还进一步限制了使用量,属于加价又减量了

幸好国内大模型陆续兼容了CC,比如智谱的GLM-4.6,deepseek-3.2,qwen3等等,为方便后续讲解,本文以GLM-4.6大模型作为示例

---

3. 安装并配置

3.1 安装

智谱文档已经都写得很详细了,这里不做太多赘述,但我也要补充一些细节,当然仅限于windows系统方面

提示

我习惯使用pnpm作为包管理器,你们也可以直接用npm下载包,替换镜像源的方法这里就不再赘述了

1. 下载CC: pnpm add -g @anthropic-ai/claude-code

2. (推荐)下载状态栏插件:pnpm add -g @cometix/ccline

3. 下载状态栏插件程序:GitHub地址、蓝奏盘-免登录

提示

这个状态栏插件,是可选择安装的,安装后主要作用是方便查看本次使用CC消耗的token数量,认为没有必要显示,大家也可以不用安装

下载好后,打开压缩包,将里面的exe程序放入C:\Users\用户名\.claude\ccline\文件夹内

同时在.claude文件夹中创建settings.json,写入以下内容:

{
  "statusLine": {
    "type": "command",
    "command": "%USERPROFILE%\\.claude\\ccline\\ccline.exe",
    "padding": 0
  }
}

状态栏样式调整可以在终端运行命令:ccline -c,这里不再赘述

3.2 配置CC使用GLM-4.6

这里有很多种方式来实现, 我遇到过有人在电脑高级设置里选择环境变量去添加的, 我不推荐这种方式,因为以后去做修改token的时候非常的繁琐

我来分享一下我自用的方法:

code $profile

如果你用vscsode的话, 在终端执行以上命令,就会打开一个配置文件, 如果没有打开或者文件不存在的话,在以下路径手动创建文件 C:\Users\用户名\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1

写入以下内容:

提示

这里禁用claude code自动升级是因为它的升级非常的频繁,有时候一天更新2次,平时基本上是天天更新,这里禁用自动升级后,可以选择手动升级 pnpm update -g 即可

# 禁止claude code 自动升级
$env:DISABLE_AUTOUPDATER = 1
# 禁用不必要的流量
$env:CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC = 1
# 智谱AI (个人)
$env:ANTHROPIC_AUTH_TOKEN = "替换引号内的内容"
$env:ANTHROPIC_BASE_URL = "https://open.bigmodel.cn/api/anthropic"
$env:ANTHROPIC_MODEL = "glm-4.6"

在智谱AI开放平台创建一个新的key后, 复制到ANTHROPIC_AUTH_TOKEN后边的引号里就可以了

---

4. 配置全局提示词和全局MCP

4.1 全局提示词

全局提示词文件路径:C:\Users\用户名\.claude\CLAUDE.md

全局提示词在之前已经写过了, 这里就引用一下吧,避免文章篇幅过长

我在逛论坛的时候,经常发现很多L友分享的AI提示词,尤其是编程类的, 全部都是通篇大论,500字远远不止. 我想说的是AI的提示词是算到上下文长度里的,有些模型本身上下文窗口就小, 你还整那么多字的提示词,那正文还写不写了?代码还读不读了? 还有一点就是不知道从哪抄过来的提示词, 都不检查一下里面的需求矛不矛盾,很多提示词都既要有要, 既要灵活, 又要准确, 这是人话吗? 你让AI怎么理解? …

基本要素就是:

1. 使用简体中文回复

2. 告知模型你的操作系统以及使用的shell环境(避免大模型老是在windows里使用Linux的命令)

3. 主动使用MCP服务

4. 主动使用子代理

4.2 全局MCP

全局MCP文件路径:C:\Users\用户名\.claude.json MCP有各种各样的, 我自己只用一个MCP,就是exa MCP, 这个MCP可以让你的大模型拥有互联网访问的能力,让它可以阅读网页 阅读GitHub项目,是一个非常实用的MCP,比context7 mcp还要好,因为它非常的节省token 我们直接在文件最后追加内容即可

"mcpServers": {
    "exa": {
        "type": "http",
        "url": "https://mcp.exa.ai/mcp",
        "headers": {
        }
    }
}

现在随便进入一个项目 启动终端测试一下服务是否正常:

MCP正常后, 我们测试一下网络访问能力

表现非常OK, 这为我们后面的AI实战做好了充足的准备工作!

---

5. AI实战

主要目标,在vitepress框架的博客上内嵌入Rough Notation风格的动画库,实现加粗/超链接/行内代码/引用内容自动应用动画风格效果

因为楼主是Vue党,所以一直在混vue生态圈,使用的博客也是Vitepress框架。

5.1 准备工作

安装vitepress,并选择自定义主题

全部的选项配置:

安装vue和rough-notation依赖文件

提示

说句题外话,使用Pnpm的好处现在就体现出来了,复用110个文件,下载了0个文件,有效节省硬盘空间

当前的package.json文件内容:

{
  "devDependencies": {
    "vitepress": "2.0.0-alpha.12"
  },
  "scripts": {
    "dev": "vitepress dev",
    "build": "vitepress build",
    "preview": "vitepress preview"
  },
  "dependencies": {
    "rough-notation": "^0.5.1",
    "vue": "^3.5.22"
  }
}

执行pnpm dev 打开网站页面看看效果

到目前为止,我们的准备工作算是完成了, 当然,默认的一些文章样式比较少,我就从以前的笔记里拿过来一篇作为演示示例

我们的目标是, 在不修改文章内容的前提下,自动应用rough-notation动画库的样式风格, 在没有AI大模型的前提下, 我们要手动实现显然是要吃透rough-notation库代码才行的, 现在有了Glm-4.6, 我们来看看AI到底行不行,有没有这个实力

5.2 开始AIcoding

运行claude 输入问题

这是一个vitepress框架的静态博客,我希望能在博客应用rough-notation风格的动画    
库,实现markdown格式的文章在加粗/行内代码/超链接等样式中自动应用动画风格,        
目前博客采用了默认主题+自定义的风格,你可以把rough-notation的内容封装在.vitep    
ress/theme/rough-notation下,然后在theme/index.ts中调用,如果有不清楚的vitepre    
ss和 rough-notation 地方可以通过exa mcp 查询资料 
地址分别为https://vitepress.dev/zh/ 
和https://github.com/rough-stuff/rough-notation

可以看到大模型已经成功访问互联网查询资料,并开始构建代码,当然了肉眼可见这是一个比较复杂的任务,当前没有什么模型能够一次性成功完成,我们看看结果

网页报错, 并且没有显示任何内容, 我们让AI继续帮助我们

有错误不要怕, 把浏览器控制台的报错复制给大模型,让大模型自己分析

现在网页效果已经出来了

显然,成功了但是还没有完全成功,动画库效果应该应用于文章正文本身,而不是在侧边栏以及导航栏上应用, 我们继续

提示

可以看到大模型多次调用了exa mcp, 这个mcp看得出来是非常实用的一个mcp了

现在的导航栏和侧边栏已经显示正常了

当然了,配色还是有一点问题,但这只是属于在css里调整一下颜色即可,我们可以看一下glm-4.6生成的代码质量

受限于文章篇幅,我就不显示太多了,大家可以自行试试看

5.3 扩展

目前实战已经算是成功结束,当然后续我们还可以让大模型把这个封装为一个vitepress版本的动画库,发布到npm上,因为文章篇幅,大家可以自己尝试一下

可以看到,在大模型的高效下,我们做到以前都不敢想的事情,感谢国产大模型,感谢Claude code。