2026年一套教程让你不再畏惧使用AI Coding

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

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

推荐语：

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

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

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

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

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

下载CC: pnpm add -g @anthropic-ai/claude-code
(推荐)下载状态栏插件:pnpm add -g @cometix/ccline
下载状态栏插件程序:GitHub地址、蓝奏盘-免登录

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

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

}

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

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”

创建一个新的key后, 复制到ANTHROPIC_AUTH_TOKEN后边的引号里就可以了。

全局提示词文件路径:C:\Users\用户名.claude\CLAUDE.md
全局提示词在之前已经写过了, 这里就引用一下吧,避免文章篇幅过长

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

基本要素就是:

使用简体中文回复
告知模型你的操作系统以及使用的shell环境(避免大模型老是在windows里使用Linux的命令)
主动使用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实战做好了充足的准备工作!

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

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

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

全部的选项配置:

提示
说句题外话,使用 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到底行不行,有没有这个实力

运行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