学习路线

一、前置软件安装

选择自己对应型号的电脑，按照步骤操作装好需要的前置软件

1. 苹果电脑/mac 电脑

2. windows 电脑

mac 电脑

brew 安装（git 安装）

为什么需要安装 brew / git

1. mac 的很多软件都可以通过 brew 来安装

2. 安装 brew 的同时，git 默认就会安转，不用额外再安装

这里看到的都是 brew 的安装，因为安装 brew 完后， Git 就安装完成了

一举多得

第一步：打开终端

通过 Launchpad（启动台） 或者 spotlight（聚焦搜索）找到「终端」这个软件

通过启动台找到「终端」

打开后，默认的终端如下：

黑色的一个竖线那个地方就是输入命令的地方。

好，我们进入下一步，开始安装 brew

如果对 brew 不熟悉的话可以问豆包、问 GPT，了解 brew 的作用

第二步：开始安装 brew

参考链接：https://gitee.com/iamzhihuix/HomebrewCN

把下面的整条命令，复制拷贝到终端，执行

1

/bin/zsh -c "$(curl -fsSL https://gitee.com/happyaicoder/HomebrewCN/raw/master/Homebrew.sh)"

执行如下图。

有些地方如果显示 Password：形式的，输入你电脑的登录密码就可以，注意不要输错

输入 Y

直接回车

输入电脑密码

选择 2

到这里就安装成功了

按照提示执行。

需要执行的命令每个人的都不一样，需要从终端界面复制

终端界面会有显示执行什么命令

第三步：确认是否安装成功

1

brew -v

1

git --version 

windows 电脑

git 安装

Q：为什么需要安装 Git

A：

1. Claude Code 在所有系统上都需要识别、管理、保存代码项目的版本记录，而这项能力是 Git 提供的，Windows 系统默认是没有 Git的，必须手动安装，否则 Claude Code 无法识别项目的版本信息。

2. 后面代码的存档管理，也是需要 Git，开发基础环境必备，有了Git，Claude Code 才能安全、完整地理解并管理你的项目。

PS：注意，装Git的时候按默认路径装，不要自己改安装目录，一旦改了，后面就会报错

第一步：下载

官网地址：https://git-scm.com/

地址：https://git-scm.com/downloads

选择「Windows」即可

选择下载即可

第二步：安装

直接打开，下一步

选择安装目录

这里的安装目录强烈建议使用默认

后面涉及到环境变量识别的问题，还需要单独设置。

并且 git 不占用 c 盘多大空间

保持默认

继续

保持默认

下一步

下一步

下一步

下一步

下一步

下一步

下一步

下一步

安装

等待完成安装

完成就行

然后就会弹出如下界面，就表示已经安装成功了。

安装 Node.JS 环境

Q：为什么需要安装 Node.JS

A：

1. 前端复杂项目开发（网页/H5）等在浏览器可以打开的网页形式的开发环境依赖于 Node.JS，比如需要用到 ReactJS、nextjs 框架的时候

Windows 版本

第一步：下载安装包

官网地址：https://nodejs.org/

1、直接下载

选择安装程序

下载后的大概差不多如下：

也可以直接下载这里提供好的

你现在下载的版本可能会跟我这里的不一样，版本会一直更新的。

直接双击打开安装就可以

第二步：安装

2、直接打开

下一步

勾选同意

修改安装目录

下一步

下一步

安装

如果弹出来是否对设备更改的通知，点击「是」就可以了

等待完成安装

完成就可以

第三步：验证

3、打开 Warp

打开命令提示符

然后输入下面的命令

1

node -v

1

npm -v

看到下面的输出正常的版本好，就表示可以用了。

截图安装的时间，2025-06-13号，你可能的版本号比这个大，或者版本好可能跟我的不太一样，关系不大，能出来版本好就表示可以用的。

如果有下面的报错，可以执行下面的语句

1

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

选择 Y 就行

再次执行 npm -v 的时候就可以了

Mac 版本

第一步：安装

教程地址：https://gitee.com/iamzhihuix/nvm-install-cn

直接拷贝安装命令，进行安装

1

/bin/bash -c "$(curl -fsSL https://gitee.com/iamzhihuix/nvm-install-cn/raw/main/install.sh)"

等待下载完成

看到下面的提示就表示已经安装成功了

第二步：验证

分别执行如下命令

1

node -v

1

npm -v 

可以看到版本号就表示安装成功了

安装 VS Code 环境

VS Code 是一款轻量、免费的代码编辑器。它的优势是“既简单又强大”：界面清晰，启动快，还能直接调试、预览、运行代码。Claude Code 生成的代码你都可以在 VS Code 里查看、修改、运行。

Q：为什么需要安装 VS Code

A：就像你写文档的时候在 word 里，那么我们 AI 编程也需要个编辑器环境，我们也叫 IDE，那么 VSCode 是首选

PS：如果你已经具备一定的编程基础，可以自行安装Cursor 工具，Cursor编辑器只不过加了 AI 编程功能

Windows 版本

打开下载地址：https://code.visualstudio.com

第一步：下载

地址：https://code.visualstudio.com/

点击下载即可

第二步：安装

我同意

选择安装目录

默认

全部勾选

安装即可

完成就可以

可以右击直接通过 VSCode 打开项目

Mac 版本

第一步：下载

打开网站（https://code.visualstudio.com/download）地址后

选择 mac 的图标就开始下载了

就会跳针到这个页面，打开下载已经开始下载了。

默认下载的是一个 zip 的压缩包

第二步：解压缩

第三步：安装

安装很简单

直接讲解压缩完后的文件，直接拖拽到左侧栏目的「应用程序」里面就可以。

打开应用程序，就可以看到 Visual Studio Code 的软件了

就是表示已经安装成功了。

二、Claude Code 安装

2.1 windows 安装

我们在开始中搜索「powershell」

以管理员身份运行

执行下面的命令

1

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

验证：

1

Get-ExecutionPolicy -List

终端输入如下命令：

执行安装的命令

1

npm install -g @anthropic-ai/claude-code  --registry=https://registry.npmmirror.com

验证

1

claude --version

打印版本就表示已经安装成功了

2.2 mac 安装

第一步：安装

复制下面的命令，直接粘贴到终端

1

npm install -g @anthropic-ai/claude-code  --registry=https://registry.npmmirror.com

第二步：验证是否安装成功

1

claude -v

截图如下（苹果电脑）：

2.3 安装时可能出现的问题

2.3.1 问题一：执行 npm -v 或者 claude 命令时候报错

windows 如果有下面的错误

执行命令：

执行命令：Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

2.3.2 问题二：出现 git 相关字样报错

解决办法：

1、重新安装 git，使用默认路径

2、设置 CLAUDE_CODE_GIT_BASH_PATH 变量的值，值就是 git 的安装路径（windows 环境变量设置的地方）

三、配置模型

3.1 使用国产模型GLM4.7 驱动 Claude Code

来一段科普解释，大家先听个响。也是下面我们经常会说到的几个词

1、cc-switch 是一个用来快速切换 Claude Code 工具中不同模型 API 配置的工具。

2、GLM4.7 是模型 ，由智谱公司训练而来

3、Claude Code 是个编程工具，平常大家说的官方使用，或者封号，需要网络环境，其实是用的 Claude 模型（公司是 Anthropic，不仅出模型 Claude 模型，还出编程工具 Claude Code）

在后面的实操中会让大家看到他们之间的关系

2 如何配置 GLM4.7 （使用cc-switch来配置）

地址整理：

套餐购买地址：https://www.bigmodel.cn/invite?icode=wOyrcecqWMwUhj3FOvp1Tn3uFJ1nZ0jLLgipQkYjpcA%3D

API-KEY 设置地址：https://bigmodel.cn/usercenter/proj-mgmt/apikeys

GLM4.7 官方配置文档参考：https://docs.bigmodel.cn/cn/coding-plan/tool/claude

3.2.1 购买模型套餐

GLM4.7 是 智谱 AI（一家中国的 AI 模型公司）提供的商用大语言模型，使用这种模型时：模型的运行需要计算资源（GPU、显存等），智谱提供这些算力服务，需要收费，所以用户要先“购买套餐”，获得调用额度

点击链接打开大模型官网

https://www.bigmodel.cn/invite?icode=wOyrcecqWMwUhj3FOvp1Tn3uFJ1nZ0jLLgipQkYjpcA%3D

选择第三个：GLM Coding Plan

选择自己合适的套餐就可以

3.2.2 获取 API KEY

API Key 是一串独一无二的“身份凭证”，是工具自动帮你登录智谱系统的“钥匙”，系统用它来识别“你是谁、你买了什么套餐、你有多少额度”。每次你调用 GLM 模型（比如让它写代码、回答问题），你的电脑或工具（如 cc-switch）都会把这个 Key 一起发送给服务器。

打开 https://bigmodel.cn/usercenter/proj-mgmt/apikeys 这个地址，就可以看到如下界面

首先我们添加一个 claude code 使用的 key

复制API key

3.2.3 用cc-swith 来配置 api-key

因为模型本身不带界面，也不会自动出现一个“对话框”；你需要一个软件（例如 cc-switch）来：存放你的 API Key+选择你要用哪个模型+把请求（你的问题）发给模型+把模型的回答展示给你

cc-switch 的优势是：支持多个模型（ChatGPT、Claude、GLM…）；可一键切换；图形界面操作简单

这次使用 cc-swith 来配置 api-key，使用 GLM 4.6 的模型，界面化流程，上手程度会更好。

第一步：下载 cc-switch

这里我们使用一个简单的模型切换工具，cc-switch，这是 github 的开源项目，可以帮助我们更快地切换不同的模型驱动 Claude Code，原地址是：https://github.com/farion1231/cc-switch

推荐去 cc-switch 的 github 页面下载最新的稳定版本使用

cc-switch 更新比较频繁

也可以直接在这里下载：https://github.com/farion1231/cc-switch/releases

下面是 windows 版本的和 Mac 版的软件，开箱即用。

Windows 版本：

CC-Switch-v3.8.3-Windows.msi

Mac 版本：

CC-Switch-v3.8.3-macOS.zip

windows安装包如下：

mac 的安装包如下，下载完后是个压缩包

安装方法，直接双击就会解压缩，然后拖拽到「应用程序」就可以

⚠️注意：如果是 mac 打不开，有提示你「移除到垃圾篓」或者「文件损坏」之类的，看3.3常见问题解决

第二步：安装 cc-switch

windows 的安装步骤：

直接双击打开

选择安装路径

安装，等待完成即可

3.2.4 配置 GLM4.7

使用 GLM4.7 接口 等于真正让你的工具和模型开始对话，让指令能发给模型、拿到回应

安装完成 cc-switch，打开后如图所示：

选择「添加供应商」

把上面智谱页面复制的 API-key，粘贴到下面的框里就行

如果你已经不记得了在哪里，那么这里再给你看下截图

再给你个链接：https://bigmodel.cn/usercenter/proj-mgmt/apikeys 

最后点击添加就行

最后记得别忘记点击「启用」

3 安装 cc-swtich 常见问题

Q1：VSCode 插件如何使用自定义 API key

A：打开 CC-switch 的设置

勾选上，保存就可以

Q2：套餐余额不够

A：冲套餐就行

Q3：在Mac上安装cc-switch 的安全问题

苹果电脑上打开 cc-switch 会有如下提示：

莫慌，打开设置，找到「隐私与安全性」的设置项

翻到最下面，选择「仍要打开」

再弹出这个框，一定要选择「仍要打开」

不要选择错了，然后弹出输入密码的框

下面就可以正常打开了

至此开发环境配置完毕。接下来，我们将了解Claude code的界面

Q4：终端启动还是连接官方接口，网络错误

推荐大家先看下视频教程

因为修改的配置文件和修改的配置都是一样

只不过由于系统的差异，会导致目录位置可能稍微不同

如果配置了 CC Switch 还出现下图的类似的错误。

那么首先确认如果在 settings.json 配置了 KEY 和 URL

windows 的进入目录：C:\Users\用户名\.claude

注意， 需要打开 Windows 的隐藏目录。

确保有下面的 settings.json 文件，使用记事本编辑打开

至少确认有 ANTHROPIC_AUTH_TOKEN 和 ANTHROPIC_BASE_URL 两个配置，否则去 cc-swith 重新配置

如果确认有了上面的配置以后， 还是不能进入 Claude 的终端， 那么需要修改 .claude.json 文件的配置。

文件位置：用户目录下，如下图所示

使用记事本编辑打开。

找下关键词 hasCompletedOnboarding 有没有这个配置

其他的配置不用管，不一样没关系

如果没有搜到这个配置， 那么需要在这个 json 文件里面添加这个配置， 注意后面的英文逗号。

所有都是英文字符，不能出现中文字符

这是一个完整的 JSON 配置文件，修改后仍需符合 JSON 语法。如果存在错误，该配置文件将无法生效。因此，请确保修改后的 JSON 仍然是合法的。可以去 https://www.json.cn/ 类似的网站格式化下，可以验证json格式是否有问题

1
2
3
4
5

{
  // ... 其他配置
  "hasCompletedOnboarding": true,
}

四.Claude code 界面导览与常见操作

几种方法都可以，大家随意选择，新手就建议选择方式一或者方式二

新手就建议选择方法一或方法二

1.1 方式一： VSCode 使用 Claude Code 插件形式

官方对这个插件在 2.0 版本后进行了大升级

native 方式的插件支持

体验更友好

需要先安装插件

如下图：

1、需要打开 VSCode 的插件市场

2、搜索 Claude Code

3、认准是 Anthropic 公司的插件

4、 点击安装就可以

会有弹框提示，选择相信就可以

可以看到在编辑器的右上部分，可以看到一个 Claude Code 的图标

就表示已经安装成功了。

点击那个图标就可以使用了

下面是使用的几个截图

插件安装问题

Q：不能使用自定义 API KEY 的方式，提示官方登录

打开 cc-switch，进入设置页面（左上角有个齿轮，就是设置按钮），勾选如下选项

1.2 方式二：VSCode 终端使用 claude code

打开 VSCode，点击右上角的类似的图标

中间这个

点开后，就可以看到下面的绿色的区域

默认就是打开的终端

下班就可以在终端里面使用 Claude Code 了

直接输入 claude 这个命令就可以

下面就可以愉快的和 Claude Code 沟通交流了

如果在 settings.json 配置了 KEY 和 URL，进入 claude 还是连接 claude 官方网络

可以在 claude.json 文件下加入下面的配置

1
2
3
4
5

{
  // ... 其他配置
  "hasCompletedOnboarding": true
}

1.3 方式三：Jetbrains 系列使用

如果你以前习惯了 JetBrains 系列的 idea，也是可以用 Claude Code 的

打开 IDEA/Pycharm 这些工具的「Terminal」就可以照常使用

1.4 方法四：纯终端

直接终端方式进入 claude，不要提前用 VS Code 打开项目

第一步：新建项目

项目目录的名称：使用英文字母开头，就可以

1、目录名称不要用空格

2、目录名称不要有中文

3、英文字母开头

第二步：右键终端 Warp 打开

进入到项目里面

第三步：进入终端

输入 claude 就可以进入 claude code

手机使用 Claude Code

手机使用方式很多

1. ssh 连接机器

2. 使用 tailscal，vibetunnel

3. 使用 happy 方式（本小结介绍）

手机上使用 Claude Code 很简单哈

网站链接：https://happy.engineering

第一步：电脑安装服务

下面一行命令就搞定

1

npm i -g happy-coder

第二步：手机下载 App

第三步：手机扫码验证

第四步：启动电脑的 Claude Code

第五步：手机操作

Claude Code 技巧与进阶

14 个技巧快速掌握Claude Code

讲解常用技巧。其实ClaudeCode需要什么技巧，只要你有需求，正常跟它聊天，大部分的问题就可以解决。

戒掉Cursor 的使用思路。

ClaudeCode是大道至简的思路。就是干就行。

1、提示词技巧

2、命令/快捷键技巧

3、记忆文件（规则文件）

4、工具

0、开始

帮助命令

1

claude --help

可以看到如何如何使用

比如经常使用的如下：

claude version

claude doctor

1

claude doctor

claude mcp

1

claude mcp list

1

claude mcp --help

claude config

1

claude config --help

查看列表

1

Claude config list

–dangerously-skip-permissions

俗称的 yolo 模式，我叫他狂飙模式。

1

claude --dangerously-skip-permissions

详细的这个后面也会讲。

全局设置

由于新版的不显示token，可以设置 verbose 为 true，就可以显示token 和计时

1

claude config set -g verbose true

1、和 IDE 的结合

步骤一：首先需要安装插件

如下图，搜索 Claude Code，注意要认准是 Anthropic 公司，这个是官方的。

步骤二：打开 Claude Code

方法一：使用快捷键，Cmd+Escape，不过我的不好使，大家可以试一试

方法二：直接使用 Cursor 界面的如下图所示的图标，鼠标单击就行

可以看到右侧的就是 ClaudeCode 的工作区域了

Mac:

Windows: 上一节，wsl 环境，Cursor：windows，wsl 插件。

2、自动编辑模式

使用场景：不需要每次创建文件都需要你的确认。

使用方式：shift+tab 按一次，就可以进入该模式。

1

帮我创建一个酷炫的 todolist 应用，使用

3、指定文件

使用场景：具体需要对某个文件操作的时候

使用方式：直接使用 @ 符号就可以指定文件。这个跟 Cursor 的是保持一致的。

3、深度思考

使用场景：遇到疑难杂症，或者是规划方案的时候，重构代码，解决复杂 bug

使用方式：提示词里面使用 “ultrathink”，或者“深度思考”等关键词

4、plan 模式

roocode，cline，Cursor（ask）

使用场景：前期需要规划项目的时候，或者是解决疑难杂症的时候。

使用方式：shift+tab 按两次就可以看见

举例：

1

我想写一个像素风格的todolist，我需要移动端也可以使用，帮我规划下方案

开始思考方案：

最后的结果如下：

它会让你是否继续，如果你觉得不满意，可以选择 No，然后继续跟他说你的需求

如果你觉得还行就可以选择 yes，它就开始猛猛干活了。

5、粘贴图片

使用场景：需要调整页面结构，或者是排查错误

mac

使用方式：mac 上直接使用 ctrl+v 就可以粘贴图片；也可以直接拖拽图片文件到终端

mac上的终端粘贴完图片是这样的。

如果你想看 windows 的截图，请看到最后的彩蛋哦。

windows

最新的 1.0.93 版本以上可以直接支持粘贴图片了。快捷键：alt + v

下面的方法就不需要了。

方法一：保存截图图片文件，然后拷贝文件路径，直接粘贴到终端。

这个所有平台都可以这样，就是步骤多保存一步。

方法二：使用插件。

那有的不希望保存图片，那么就只能使用插件的方式来搞定

插件地址：https://marketplace.visualstudio.com/items?itemName=agg4code.claude-image-paste

也可以使用离线安装包然后再去Cursor 中离线安装。（使用 ctrl+shifp+p，然后 install vsix 选择即可）

下一步选择：

想要离线安装包的老办法，可以直接 wx：zhihui10110，备注：安装包，我给你发包。

确认已经安装成功

步骤一：截图

步骤二：Cursor 中执行 ctrl+shift+p，搜索 paste Image

注意看选择下面红框的哦。

步骤三：会有一张图片弹出来，回车就行。

步骤四：终端就可以看到图片了。

如果你觉得可以看视频的 47 分钟时刻： https://b23.tv/5AFobyG

问题：无法复制的错误

解决办法：需要先打开 Cursor 的终端

6、常用命令

7、yolo 模式

使用场景：重构代码，或者是新项目，或者是修复 bug等场景

使用方式：

1

claude --dangerously-skip-permissions

进来以后会发现如下

当然你在进入这个模式后，还是可以调整的，快捷键 shift+tab 就可以调整

8、记忆文件

全局记忆文件

目录：~/.claude/CLAUDE.md

下面是我的文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 所有交互回答都使用中文

# 启动并行的代理执行任务

# 搜索约定
- 如需简单字符串匹配 → Grep
- 如需结构化/跨语言模式匹配 → 请优先使用 Bash(ast-grep …)，示例：
  Bash(ast-grep -p '$FUNC($ARG)' src/)

# 环境约定
- python环境：python3 pip3
- nodejs环境：node npm
- docker环境：docker%

项目记忆文件

目录：项目目录下的 CLAUDE.md 文件

如果是已经有代码的项目，建议使用 /init 命令自动生成

9、使用前面的消息提示词

使用场景：想恢复到前面的对话

使用方式：两次 esc 按键。

选择第 3 项就会回到之前的对话框。这样如果你觉得不合适你的提示词，可以在原来的基础之上继续修改。

10、如何恢复代码

类似 Cursor checkpoint 功能。

使用场景：后悔他写的代码了，想恢复到前面的

使用方式：

简单方式：直接提示词

1

回滚到上次的代码

高级方式：使用 git

待完善。

涉及到 git 的概念

使用 git 提交每次的记录，结合自定义 commands 命令。

就可以使用 git 精确回滚代码。

11、恢复对话/查看聊天记录

使用场景：

使用方法：/resume 命令，或者使用 cladue -c claude -r

12、执行终端命令

使用场景：查看当前目录，或者一些特殊的命令的时候

使用方式：! 英文的感叹号，就会进入命令行模式

查看当前目录

查看当前文件列表

13、监控使用量

1
2
3
4

```

```shell
npx ccusage@latest

实时采集量命令：

1

npx ccusage@latest  blocks --live

总结：

1、就是干，

2、粘贴图片，mac：ctrl+v，windows：

3、plan，深度思考

4、命令

5、记忆文件，/init，CLAUDE.md

14、自选题：MCP

使用场景：很多场景都适合

使用方法：先安装 MCP

MCP 全称 Model Context Protocol，它就是给 AI 装“插件”的通用插座——把各种外部工具（爬虫、数据库、API……）接进来，让像 Cursor、Claude 之类的 AI 助手瞬间拥有新技能。

所以你可以把 MCP 想成“用 USB 让不同设备秒连电脑”的那套逻辑，只不过这里的“电脑”换成了 LLM。

1

claude mcp add playwright -s user -- npx @playwright/mcp@latest

这里以打开小红书的例子来看一下

1

在浏览器里打开小红书,搜索“Claude Code”,按照浏览量多的前面排序，将前10的结果总结给我

搜索结果：

15、后台运行服务

使用场景：完成功能的时候，最后 claude code 一般会启动服务，然后访问接口或者界面功能。

不过如果没有后台运行服务的功能的时候，claude code 会一直工作在这个启动服务的界面，并且其他的对话需求也无法开展。

所以claude code 建议是在后台运行，并且 Claude Code 有提示让你使用 ctrl + b 来后台运行服务

我们使用 ctrl+b 就可以看到会到下一个界面

并且提示你使用下箭头可以选择这个进程查看详情。

进来后就可以看到运行的命令，选择要进去的命令

就可以看见这个命令的输出详情。

总结：

图形化界面 Claudia

当前不稳定，可以尝鲜使用下

参考地址：https://gist.github.com/Kirchlive/184cdd96a56bfd7a6c67997836495f3c

先来说下这个项目有哪些特点。

有哪些特性，先来一波

1、展示每日花销

有每日花费展示，看来 21 号干的很猛呀，单日就干了快 300 刀的花费，一天就把一个月的钱赚回来了。

2、可视化编辑全局规则文件

3、还能可视化安装 MCP

3、checkpoint 回滚备份

最重要的是还能创建备份，我俗称时光机，就像打游戏一样，可以创建备份。

有时候如果效果不好，那就可以从存档回复

4、智能体

也可以创造智能体，对，你没听错，ClaudeCode 也可以创建智能体

如何使用

那接下来就是看如何使用，由于项目前期还在开发中，目前官方还不提供安装包，就需要自己编译。

如果需要自己编译的朋友可以按照下面的流程开始，

如果你不想编译，后台加我给你安装包，直接使用。

1、安装步骤

windows

• 安装 rust 环境

下载地址：https://www.rust-lang.org/zh-CN/tools/install

• 安装 bun

安装地址：https://bun.sh/docs/installation

1

npm install -g bun

• 其他

下载地址：https://visualstudio.microsoft.com/visual-cpp-build-tools/

下载地址：https://developer.microsoft.com/en-us/microsoft-edge/webview2/

下载完后，按照步骤一步一步完成既可以。

• 编译

下载代码

1
2

git clone https://github.com/getAsterisk/claudia.git
cd claudia

编译

1
2

bun install
bun run tauri build

安装包所在位置

1
2

# Windows
./src-tauri/target/release/claudia.exe

mac

基本环境

1
2
3
4

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
curl -fsSL https://bun.sh/install | bash

brew install pkg-config

编译安装

1
2

git clone https://github.com/getAsterisk/claudia.git
cd claudia

编译命令

1
2

bun install
bun run tauri build

安装完成后，直接会弹出安装的框，直接安装就可以了。

如果你不想编译，联系：zhihui10110，可以发送给你哦

2、界面

打开界面，印入眼帘的就是如下图所示的。

整体大概功能就是主界面的智能体和项目

• 项目：主要就是你的工作区域

• 智能体：主要就是智能体相关功能

• 使用展示：会展示相关的使用信息，按照项目、时间粒度

• 规则文件：就是 CLAUDE.md 文件，可以直接界面配置修改。

• MCP 配置：主要就是 MCP 的配置，图形化界面配置

• Claudia 的设置：这个产品的配置信息

3、项目使用

点击项目进来，就可以看见以前的项目，这个是读取了

点击中间的「New Claude Code session」的就可以创建项目了。

下一步就是输入提示词了，但是输入提示词之前，可以选择模型

还可以选择思考的深度，每个意思大概就是在面，思考的深度逐渐加深。

我记得之前在命令行默认如果没有提示词的话，是不思考的。

Auto

Think：思考下

Think Hard：努力思考下

Think Harder：深度思考

Ultrathink：洪荒之力思考

其实到上面的使用还是很简单的吧，如果大家用过 Cursor 等产品的话，这些是差不多的。

有个小细节，每次对话玩，都会给你显示花费了多少钱、耗费多长时间、总共的 token 多少。

这类有几个亮点我们可以来看看

第一：拖拽图片到对话框

直接把图片拖拽到对话框就可以了。

然后输入提示词就可以了

比如，你有错误信息，或者是你想调试的，都可以截图拖拽到这个框里，让 AI 帮你搞定。

第二：预览窗口

右侧就有预览窗口，输入地址就可以访问了。

最主要是看右上角的 Send to Claude，可以很轻松的直接截图发到对话框。

这样就不需要切换浏览期，截图然后保存到本地，然后复制路径，粘贴到终端。这样的路径太长。

而现在一个按钮操作就完成了。

可能还有 bug，我这个截图弄的是官方的。看来目前还不是太稳定。

4、智能体使用

主页面就是 agent 的列表。

没有的话，可以创建一个，步骤就如下图。

这里大家看到有个 Sandbox，也就是沙箱，执行的时候是在单独的一个环境里执行的。不会影响到宿主机的环境。

回到智能体页面，就可以运行这个智能体。

然后就到下一步：进行一些设置后。就可以点击运行按钮。

初始化后，就开始运行了。

5、规则使用

直接打开 CLAUDE.md 文件，直接就是图形化界面编辑框。输入你的规则文字就可以。

6、MCP

这里说的就是可以直接界面话添加 MCP

最重要的就是 SSE，这个也是最近添加的新功能，可以直接添加可用的服务器，避免以前需要在本地启动服务端，要一堆的配置信息。

7、数据统计

数据统计的这个面板还是蛮好看的

看到没，已经使用 800 多刀的 token 的价值，使劲跑起来，必须物超所值

可以按照不同的维度看

初相识

启动，选择主题模式

登录

登录

授权

复制code

粘贴到终端上

提示你登录成功

继续

继续

进入到界面

第一个应用

1

创建一个极其漂亮的todolist应用，极致炫酷，创建完后帮我启动

命令行输入提示词

下面就会有提示你需要操作。如果你还不知道怎么选择，就默认第一个

第一个：每次操作都会有提示

第二个：默认mkdir npm init 操作就不会确认

第三个：直接取消本地任务

创建任务过程中，还有很多需要你操作的

Claude Code 小技巧

换行

Claude code 里面使用 ctrl+j （mac+windows 都可以）可以换行，终于不用反斜杠 \ 换行了

粘贴图片

ctrl+v，mac 适用

windows：

用软件：https://github.com/jeejeeguan/windows-to-wsl2-screenshots/tree/master

用 vscode（cursor） 插件

#符号添加CLAUDE.md 文件内容

/memory 可以编辑 CLAUDE.md 文件，项目和全局的都可以

CLAUDE.md 文件

待补充。。。

高级功能

SlashCommands

1
2
3
4

占用 primary agent 的上下文

subagent：和你的 primary agent 隔离，幻觉存在，独立的工作，不依赖过多的上下文信息

两种类型的命令

先说下命令的类型，有两种

1、项目级命令 (/project:)

• 存储在项目的 .claude/commands/ 目录中

• 仅在当前项目中可用

2、用户级命令 (/user:)

• 存储在用户主目录的 ~/.claude/commands/ 文件夹

• 在所有项目中都可用

如何创建自定义命令

步骤很简单

1、在相应目录创建一个 Markdown 文件

2、文件名就是命令名（如 code-review.md 对应 /project:code-review）

3、文件内容就是命令执行的指令

比如我在 commands 目录下创建了一个 code-review.md 的文件，内容如下：

1
2
3
4

请对以下代码进行全面的代码审查：$ARGUMENTS
1. 检查代码质量和最佳实践
2. 识别潜在的 bug 和安全问题
3. 提供改进建议

这里注意 $ARGUMENTS 关键字的使用，就是来传递参数的。

/code-review 上面的代码内容

常用内置命令

重点特性

第一个：Arguments 参数

用 $ARGUMENTS `占位符，给命令传递动态的值。

1
2
3
4
5

# 定义
echo '根据代码规范解决问题： #$ARGUMENTS ' > .claude/commands/fix-issue.md

# 使用
> /project:fix-issue 123

第二个：执行 Bash 命令

在命令前面加上 ! 符号就可以执行 bash 命令，并且执行结果会自动包含在上下文中。

比如提交代码使用的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14

---
allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git commit:*)
description: Create a git commit
---

## 上下文

- Current git status: !`git status`
- Current git diff (staged and unstaged changes): !`git diff HEAD`
- Current branch: !`git branch --show-current`
- Recent commits: !`git log --oneline -10`

## 任务
根据以上的变化内容，创建一个 git commit。

第三个：文件引用

直接就在文件里包含 @ 内容就可以指定文件

1
2
3
4
5

# 参考文件
Review the implementation in @src/utils/helpers.js

# 参考多个文件
Compare @src/old-version.js with @src/new-version.js

看到这里肯定枯燥了吧，接下来还有更多案例等着你。

Hooks

https://github.com/disler/claude-code-hooks-mastery

参考的 hooks

简单来说，Hooks 就是在 Claude Code 特定时刻自动执行的命令。就像给你的 AI 助手装上了”自动驾驶”系统！

Claude Code 提供了 4 种 Hook 类型：

• PreToolUse：在工具调用前执行（可以阻止执行）

• PostToolUse：在工具完成后执行

• Notification：当 Claude Code 发送通知时触发

• Stop：当 Claude Code 完成响应时执行

看到没？这不就是咱们梦寐以求的自动化吗！废话少说，先干起来再说。

第一步：了解 Hooks

1、基本的配置结构

先来看看 Hooks 的基本配置结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "hooks": {
    "EventName": [
      {
        "matcher": "ToolPattern",
        "hooks": [
          {
            "type": "command",
            "command": "your-command-here"
          }
        ]
      }
    ]
  }
}

小贴士：这个配置通常放在 ~/.claude/ 目录下的配置文件中哦！

主要是有不同级别的配置，你想针对哪个粒度的都可以。

• ~/.claude/settings.json - User settings ~/.claude/settings.json - 用户设置

• .claude/settings.json - Project settings .claude/settings.json - 项目设置

• .claude/settings.local.json - Local project settings (not committed)
  .claude/settings.local.json - 本地项目设置 (没提交的那种)

2、四个时机

相当于在不同的阶段放入回调，当这个步骤执行完后，就可以执行你配置的命令了。

• PreToolUse：工具调用前运行，可阻止调用并反馈原因。

• PostToolUse：工具调用后运行。

• Notification：Claude Code 发送通知时运行。

• Stop：Claude Code 响应结束时运行。

PreToolUse

Common matchers: 常见的匹配器：

• Task - Agent 任务

• Bash - Shell 命令

• Glob - 文件匹配

• Grep - 内容搜索

• Read - 文件读取

• Edit, MultiEdit - 文件编辑这一块儿

• Write - 文件写入

• WebFetch, WebSearch - 网页搜索

PostToolUse

这个就是工具成功运行后，会启动这个任务，匹配的模式跟PreToolUse一样。

Notification

当 Claude Code 发送通知时，它就会运行。

不过我没有测试出来，哪位朋友测出来的可以来通知我呀

Stop

当 Claude Code 完成任务后运行。

第二步：实战案例 - 自动记录命令日志

1、打开 hooks 配置

1

/hooks

2、选择时机（4 种）

有四个时机的选项可以选择，这里我们选择第一个

3、输入 matcher

输入 matcher，这里我们记录命令，所以选择的是 Bash

1

Bash

4、添加 hook

输入你的命令，这里使用 jq 命令从输入的 json 结构里面来过滤命令行

1

jq -r '[.tool_input.command, .tool_input.description // "No description"] | join(" - ")' >> ~/.claude/bash-command-log.txt

5、保存

选择保存的配置的级别，这里我就选择用户级别了。

6、测试

让 Claude Code 帮我们执行 ls -ltr 命令，测试下是否可以行。

最后我们查看之前配置好的命令里面的文件，发现已经有记录了。

这样一个 hooks 就配置好了。这个 hooks 每次都会记录所有的执行命令。

第三步：更多实用场景

场景1：代码自动格式化

每次不用手动运行命令了，改完的代码就符合规则。减少后期的维护和错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | select(endswith(\".js\") or endswith(\".ts\") or endswith(\".jsx\") or endswith(\".tsx\")) | xargs -r npx prettier --write"
          }
        ]
      }
    ]
  }
}

场景2：任务完成通知

可以看到这里我配置了有 3 个通知，其实就是测试了各种场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

"hooks": {
   "Stop": [
     {
       "matcher": "",
       "hooks": [
         {
           "type": "command",
           "command": "echo 'stop======完成工作，当前时间：'$(date '+%Y年%m月%d日(%a)%H:%M')"
         },
         {
           "type": "command",
           "command": "afplay /System/Library/Sounds/Glass.aiff && osascript -e 'display notification \"任务完成啦\" with title \"系统提示\"'
         },
         {
           "type": "command",
           "command": "curl -H \"Title：ClaudeCode\" -d \"任务完成通知\" ntfy.sh/ccnotifications"
         }
       ]
     }
   ]    
 }

第一种场景：普通打印日志

就是纯粹的打印。在终端使用 ctrl+r 可以看到。

第二种场景：电脑

不仅有提示音，还有提醒

第二种场景：手机

这个还是不错的，可以直接在手机上收到通知。

场景3：每次都记录代码

这个是什么功能了，相当于可以自动存档了，不需要手扶了（每次自己提交 git 记录，或者每次对话 CC 让他帮你提提交）

1
2
3
4
5
6
7
8
9

"hooks":{
    "Stop": {
        "matcher": "",
        "hooks": [
            "type": "command",
            "command":"jj show"
        ]
    }
}

如果有错误，你想恢复到之前的版本，直接用 jj op log 和 jj op restore 就搞定了。

这个可能跟你平常的提交 commit 不太一样，但是这个历史记录会很干净。

下面就详细说下 hookd 的输入和输出。

输入很简单就是 Claude Code 给你的参数，你可以通过这些参数来进行一定你的逻辑。

输出就是，你的逻辑执行完后，你可以用输出来控制 Claude Code 下一步操作

子代理

方式一：直接提示词

这个是直接使用提示词，并且是 subagents 配置功能么有推出来之前，并行化任务的利器。

优点：独占上下文，子代理和主代理交互

缺点：只能使用提示词控制，比如：多个并行子代理，等关键词执行

一般比如搜索资料等场景还是可以建议使用。

1

启动尽量多的并行子代理阅读这个项目的代码，输出整体项目情况

下面会启动多个子代理进行任务

方式二：/agents 配置

agents集合地址：https://github.com/contains-studio/agents

创建子代理非常简单，只需要三步：

第0步：打开子代理界面

https://github.com/contains-studio/agents

https://github.com/wshobson/agents

https://github.com/disler/claude-code-hooks-mastery

1、搜索资料

2、探索方案

3、CR

4、架构的审核

1

/agents

第1步：选择创建选项

• 选择”Create New Agent”

可以看到，这里的 sub-agent 有自己的上下文，有自己的系统提示词，还可以能使用的工具。

细粒度非常强了。

• 决定创建项目级还是用户级子代理

  • 项目级：存储在 .claude/agents/ 目录，只在当前项目下可以用。

    • 场景：如果你是团队项目，那么这种就合适，别人拿到你的项目就可以直接使用

  • 用户级：存储在 ~/.claude/agents/ 目录

    • 个人项目，又不想每个项目都配置

第2步： 创建子代理的方式

• 建议：先让Claude生成初始版本，然后根据需求自定义

很贴心，给了两种方式

第3步：详细描述子代理的用途

我先选择方式一：让他根据我的描述给我自动生成

第4步：选择要授予的工具权限

回车选择和反选，比如前面的变成了空的格子，就是不选。

第5步：选择背景颜色

这个倒是好奇，应该是执行的时候，可以通过颜色就可以判断什么 agent 在执行了。

后面验证，果然是。这个倒是另外比较小惊喜，喜欢这种小设计

最后：预览

给你展示这个子代理的信息

名称、位置，以及使用的工具。

最重要的就是系统提示词。

最后回车就可以保存了。退出来的时候，会告诉你已经创建了的 sub-agent。

自定义agent 方式

1、选择自定义配置

2、选择 agent 类型

可惜的是不支持中文，空格也不能有。只能写英文、数字。

可以按照他的提示，就用英文和横线来指定吧。

3、写提示词

粘贴提示词：

4、描述信息

后面的配置就和前面的一样了。

如何使用

很简单，直接提示词里说就行。

1

使用 code-reviewer 帮我排查这个项目可能存在的问题

哈哈哈，我觉得这个颜色的设计确实很不错，显眼包。

其他操作

同样通过 /agents 进来后，可以看见你创建的 agents，选择某一个进去就可以

进入后可以看到操作

比如查看、编辑、删除等。

深入配置细节

文件目录

可以看到在 ~/.claude 的目录下，有 agents 目录，是我刚配置好的两个 agent，一个是架构师，一个是 CR 代码的。

文件格式

每个子代理都是一个Markdown文件。

具体的文件给是如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---
name: code-reviewer
description: 专门进行代码质量审查，检查代码规范、潜在bug和性能问题。使用时请主动调用。
tools: read_file, str_replace_editor, run_command
---

# 代码审查专家

你是一个经验丰富的代码审查专家，专注于：

1. **代码质量检查**
   - 遵循项目的编码规范
   - 识别潜在的bug和安全问题
   - 提出性能优化建议

2. **最佳实践**
   - 确保代码可读性和可维护性
   - 检查错误处理是否完善
   - 验证测试覆盖率

3. **审查流程**
   - 首先理解代码的整体结构
   - 逐个检查每个函数和模块
   - 提供具体的改进建议

工具配置选项

子代理可以访问Claude Code的所有内部工具，包括：

• 文件操作：read_file, write_file, str_replace_editor

• 命令执行：run_command, terminal

• 开发工具：python, node, npm

• MCP工具：来自配置的MCP服务器的任何工具

如果省略tools字段，子代理将继承主线程的所有工具权限。

实战案例展示

调试大师

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---
name: debugger
description: 专门处理错误、测试失败和异常行为的调试专家。遇到任何问题时主动使用。
tools: Read, Edit, Bash, Grep, Glob
---

# 调试专家

你是一个专精于根因分析的调试专家。

被调用时的工作流程：
1. 捕获错误信息和堆栈跟踪
2. 识别复现步骤
3. 定位故障位置
4. 实施最小化修复
5. 验证解决方案有效性

调试过程：
- 分析错误信息和日志
- 检查最近的代码变更
- 形成并测试假设
- 添加策略性调试日志
- 检查变量状态

对于每个问题，需要提供：
- 根本原因解释
- 支持诊断的证据
- 具体的代码修复方案
- 测试方法
- 预防建议

专注于修复根本问题，而不仅仅是处理表面症状。

数据科学家

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---
name: data-scientist
description: 数据分析专家，专精于SQL查询、BigQuery操作和数据洞察。处理数据分析任务和查询时主动使用。
tools: Bash, Read, Write
---

# 数据科学家

你是一个专精于SQL和BigQuery分析的数据科学家。

被调用时的工作流程：
1. 理解数据分析需求
2. 编写高效的SQL查询
3. 适时使用BigQuery命令行工具（bq）
4. 分析并总结结果
5. 清晰地呈现发现

关键实践：
- 编写带有适当过滤条件的优化SQL查询
- 使用合适的聚合和连接操作
- 为复杂逻辑添加注释说明
- 格式化结果以提高可读性
- 提供数据驱动的建议

对于每项分析：
- 解释查询方法
- 记录所有假设
- 突出关键发现
- 基于数据提出后续步骤建议

始终确保查询高效且成本可控。

代码审查员

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---
name: code-reviewer
description: 代码审查专家。主动审查代码质量、安全性和可维护性。在编写或修改代码后立即使用。
tools: Read, Grep, Glob, Bash
---

# 代码审查专家

你是一个资深代码审查专家，确保代码质量和安全性达到高标准。

被调用时的工作流程：
1. 运行 git diff 查看最近的更改
2. 聚焦于修改过的文件
3. 立即开始审查

审查清单：
- 代码简洁易读
- 函数和变量命名恰当
- 没有重复代码
- 错误处理完善
- 没有暴露密钥或API密钥
- 实现了输入验证
- 测试覆盖率良好
- 考虑了性能问题

按优先级组织反馈：
- 严重问题（必须修复）
- 警告问题（应该修复）
- 建议改进（考虑优化）

提供具体的问题修复示例。

更多agents集合地址：

https://github.com/contains-studio/agents

1、子代理链式调用

官方文档提到，可以通过复杂的工作流链接多个子代理：

1
2
3

首先让code-reviewer检查代码，
然后让performance-optimizer优化性能，
最后让doc-writer更新相关文档

下面的图就是两个 agent 在干活。

五颜六色，我喜欢这种设计。

2、动态子代理选择

Claude Code会根据上下文智能选择子代理。通过在description字段中使用”PROACTIVELY”或”MUST BE USED”等关键词，可以增加子代理被自动调用的概率。

3、显式调用

也可以在命令中明确要求使用特定子代理：

1

使用debugger子代理来分析这个错误

Github 相关操作

方式一：github 网页艾特直接解决 pr 问题

第一步：/install-github-app 执行这个命令

第二步：选择安装的目录，默认就是当前这个项目目录

第三步：配置授权

会弹出网页

点击安装就可以了。

继续安装

第四步：安装 Github 工作流

下一步就是看到有两个工作流

上下按键，然后空格可以选择

我这里就都选择了。

第五步：创建 Token

有两种方式，我选择了第一种

就会弹出网页如下：

授权完成后，就看到终端界面开始安装了

安装完成后如下：

按回车继续就推出安装流程，并提示已经安装成功。

并且网页会弹出一个 github 的 PR 请求。

这个 PR 请求就是创建 Claude Code 的工作流的。

点击下方的「Create pull request」就可以了。

可以看看其实就是在项目目录下添加了 .github/workflows 的文件夹

并且添加了两个 yml 的配置文件

最后别忘记了合并这个 PR 到主分支上去，不然后面的 @claude 功能会没有感知到，也会没有任何反应。

第六步：使用：Github Actions 工作流

结合看 Github Actions 的工作流，这个才是今天的重头戏。

可以看到在 Github 上有个 issue 的记录

那么我们如何完成他了？

很简单：直接 issue 的对话框挨 @claude 完成功能就可以

等一会儿就可以看到下面就显示任务列表了。

这个时候 claude code 其实已经就在给我们干活了。

到这里基本就完事了。

下面就可以创建 PR 操作。

因为我们之前还配置了 Code Review 的工作流

当提交 PR 后，这个工艺流就开始工作了。

最重要的就是我突然想到，如果只是评论区回复，那么我也可以在手机上使用

第七步：使用：手机 Github 工作流上使用

注意国区的苹果现在不能下载 Github App 了，建议使用港区或者美区的下载。

1：进入仓库页面，选择「议题」进入

2：没有议题，可以创建一个议题

如果有议题，可以直接进入下一步

3：评论区

直接评论里面 @claude 回复提示词实现这个功能

4：等待完成

在发完提示词后，我就开始来写文章。

如果你是在路上，或者其他地方，完全可以实现移动办公

这个比我之前发的 VibeTunne 手机使用 cc 还更方便

有了 Github 工作流的加持，随时随地卷起来。

那么怎么配置这个流程了，下面来手摸手的教你

跟着我一起做就行了。

方式二：自定义命令-解决 Github ISSUE

前提条件：安装 gh 客户端

地址：https://github.com/cli/cli/tree/v2.76.2

1
2

## mac安装
brew install gh

Github 创建 issue

/fix-issue 解决问题

直接使用 /fix-issue 的自定义命令就可以，后面接上 issue 的序号就可以。

1

/fix-issue 1

Git WorkTree 多开项目

官方推荐

要求：人对项目的掌控力度，对并发要执行工作的需求粒度

以前的工作方式：你 + 1个Claude Code = 单线程工作

• 效率有限，任务排队

• 频繁的上下文切换

• 复杂项目需要分多次处理

现在有了Conductor：你 + 5个Claude Code = 并行作战！

• 多个任务同时进行

• 每个代理专注自己的事情

• 效率提升不是1+1=2，而是1×5的倍增！

那么接下来，我来手把手教你怎么用这个神器！

第一步：下载安装Conductor

首先访问官网：https://conductor.build

当然现在优先支持的是mac平台。windows 平台应该也是在开发了。

如果你是 Intel 的 mac，请点击下面的那个链接下载

第二步：添加你的代码仓库

打开软件，映入的就是首页。

现在最新版本的是可以支持本地项目了，我上次还只能是支持 Github 上远端仓库的项目。

可以看到我打开了我的一个项目。

并且开了四个工作空间。

重点来了：Conductor会自动使用Git Worktrees技术，为每个Claude Code代理创建独立的工作空间！

你不需要：

• ❌ 手动配置Git工作树

• ❌ 重新安装依赖包

• ❌ 担心不同代理之间的冲突

Conductor全自动帮你搞定！

细心的朋友们不知道看见没，每个工作空间的名称是 conductor 自动置顶的，而且是城市名称。

Dallas、Beijing、Conakry、Kiev

第三步：添加工作空间

这里的工作空间其实就是对于先添加的一个新的 git worktrees。

这里要说的也是，这个git worktrees 是官方的最佳实践里面推荐的针对一个项目并行任务的流程。

点击「New workspace」或者使用快捷键「Command + N」创建一个新的工作空间

会自动创建 git worktrees 目录，然后你入到一个新的工作空间。

不得不说这个产品的考究做的还是不错。

主要就是分为上面截图的区域。

还很亲切的也做了终端区域，如果你需要一些终端操作，可以很方便的。

第四步：指挥你的AI团队

这个时候，你就像一个项目经理一样，可以：

• 实时监控：看到每个代理在干什么

• 状态跟踪：哪个代理完成了，哪个遇到问题

• 代码审查：查看所有代理的工作成果

• 统一管理：所有变更都能看到

小贴士：记住，你现在不是程序员，你是AI团队的指挥官！

并且很贴心做了快捷键，Command+1、2、3、4 就可以跨速切换各个小团队

快速切换。

然后迅速指导工作干活。

右侧的 git 区域也是最近添加的

打开以后，很亲切的可以看到代码的对比

左侧就是修改的文件列表。

这样之前喜欢看修改了哪些代码的福音呀。

第五步：提交 PR

这个工作空间的代码改的还可以的话

那么就可以进行 PR 提交

但就是有个小问题，怎么没有识别到我的 gh 客户端了

我在本地的终端执行是没有问题的。

之前加载 node 也是，看来的他的环境变量的加载还需要再优化下。

有跑通的可以评论区吼一声，看下怎么弄好。

一些小技巧

设置自定义模型

如果你想使用智谱 GLM4.5、Kimi K2、Qwen Coder

现在不用配置文件，不用设置环境变量。

直接就可以设置自定义的 API 模型使用。

轻松管理 MCP

轻松管理 MCP。

不过现在还只有 Linear，Figma 这几个

后面相信会更多。

Slash Commands 管理

对话框里也是可以直接提示

Sub Agents 管理

还有很贴切的 Sub Agents 管理

这个版本添加了编辑、新增的功能

之前我用的时候，还只能查看。

也是通过 @ 符号就可以直接弹出来

小细节

有通知

还有自动 compact 选项的比例

StatusLine

第一步：最快速上手（30秒搞定）

最简单的方法，直接在 Claude Code 里输入：

1

/statusline 显示模型名称、当前目录和git分支

对，就这么简单！Claude 会自动帮你配置好。

可以看到是调用了内置的 statusline-setup 的 subagent 来帮你处理的。

可以看到官方也在使用 subagent 的案例来写更多的功能。详细可以见我之前的文章：

退出 claude code 后，重新进入，就可以看到如下显示

第二步：进阶自定义（打造专属界面）

如果你想要更炫酷的效果，那就得手动配置了。

步骤一：创建配置文件

打开终端，编辑配置文件：

1

vim ~/.claude/settings.json

步骤二： 添加状态栏配置

1
2
3
4
5
6

{
  "statusLine": {
    "type": "command",
    "command": "~/.claude/statusline.sh"
  }
}

步骤三：创建你的专属脚本

创建 ~/.claude/statusline.sh 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#!/bin/bash
input=$(cat)

# 获取各种信息
model=$(echo "$input" | jq -r '.model.display_name')
dir=$(echo "$input" | jq -r '.workspace.current_dir' | xargs basename)

# Git分支信息
git_branch=""
if git rev-parse --is-inside-work-tree >/dev/null 2>&1; then
    branch=$(git branch --show-current)
    git_branch=" | 🌿 $branch"
fi

# 组装输出
echo "🤖 $model | 📁 $dir$git_branch | ⏰ $(date +%H:%M)"

别忘了给脚本加执行权限：

1

chmod +x ~/.claude/statusline.sh

看到没？现在你的状态栏已经焕然一新了！

第三步：玩出花样（高级技巧）

📊 显示使用统计

如果你想看自己花了多少钱（哈哈哈），可以集成 ccusage 工具：

1
2
3
4
5
6
7

# 显示当前会话成本
{
  "statusLine": {
    "type": "command",
    "command": "npx -y ccusage statusline",
  }
}

🌿Git 大师（团队协作神器）

适合人群：频繁使用 Git 的团队开发者

创建 ~/.claude/statusline-git.sh：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

#!/bin/bash
read INPUT

# 解析输入
MODEL=$(echo "$INPUT" | jq -r '.model.display_name')
DIR=$(echo "$INPUT" | jq -r '.workspace.current_dir' | sed "s|$HOME|~|")

# Git 信息（全网首发的完整版）
BRANCH=$(git branch --show-current 2>/dev/null || echo "")
if [ -n "$BRANCH" ]; then
    # 获取状态
    MODIFIED=$(git status --porcelain 2>/dev/null | grep -c "^ M")
    UNTRACKED=$(git status --porcelain 2>/dev/null | grep -c "^??")
    STAGED=$(git status --porcelain 2>/dev/null | grep -c "^[AM]")
    
    # 获取远程状态
    AHEAD=$(git rev-list --count HEAD @{u} 2>/dev/null | cut -f1)
    BEHIND=$(git rev-list --count @{u} HEAD 2>/dev/null | cut -f1)
    
    # 构建 Git 状态字符串
    GIT_STATUS="🌿 $BRANCH"
    [ "$STAGED" -gt 0 ] && GIT_STATUS="$GIT_STATUS +$STAGED"
    [ "$MODIFIED" -gt 0 ] && GIT_STATUS="$GIT_STATUS ~$MODIFIED"
    [ "$UNTRACKED" -gt 0 ] && GIT_STATUS="$GIT_STATUS ?$UNTRACKED"
    [ "$AHEAD" -gt 0 ] && GIT_STATUS="$GIT_STATUS ↑$AHEAD"
    [ "$BEHIND" -gt 0 ] && GIT_STATUS="$GIT_STATUS ↓$BEHIND"
else
    GIT_STATUS="📁 no-git"
fi

# 输出带颜色
echo -e "\033[1;36m🤖 $MODEL\033[0m │ \033[1;33m📂 $DIR\033[0m │ \033[1;32m$GIT_STATUS\033[0m"

更牛的是这些

实时监控资源

1
2
3

# 显示内存使用
mem=$(free -h | awk '/^Mem:/ {print $3"/"$2}')
echo "💾 $mem | $model | $dir"

自定义表情包

你甚至可以根据时间显示不同表情：

1
2
3
4
5
6
7
8
9
10

hour=$(date +%H)
if [ $hour -lt 12 ]; then
    emoji="☀️"
elif [ $hour -lt 18 ]; then
    emoji="🌤️"
else
    emoji="🌙"
fi

echo "$emoji $(date +%H:%M) | $model | $dir"

一些小技巧

1. 性能优化：避免在脚本里执行耗时命令，不然会卡

2. 测试脚本：可以这样测试你的脚本：

1

echo '{"model":{"display_name":"Test"}}' | ./statusline.sh

• 即时生效：修改后立即生效，不用重启 Claude Code！

实战案例

案例一：显示 token 用量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

#!/bin/bash

# 读取输入
input=$(cat)

# 解析基础信息
model=$(echo "$input" | jq -r '.model.display_name')
current_dir=$(echo "$input" | jq -r '.workspace.current_dir')
dir_name=$(basename "$current_dir")
session_id=$(echo "$input" | jq -r '.session.id // empty' | cut -c1-6)
if [ -z "$session_id" ]; then
    # 如果没有session_id，使用目录名作为fallback
    session_id=$(echo "$current_dir" | sed 's/\//_/g')
fi

# 时间表情
hour=$(date +%H)
if [ $hour -lt 6 ]; then
    time_emoji="🌙"
elif [ $hour -lt 12 ]; then
    time_emoji="☀️"
elif [ $hour -lt 18 ]; then
    time_emoji="🌤️"
elif [ $hour -lt 22 ]; then
    time_emoji="🌆"
else
    time_emoji="🌙"
fi

# 时间追踪
START_FILE="/tmp/claude_session_${session_id}"
if [ ! -f "$START_FILE" ]; then
    date +%s > "$START_FILE"
fi
START_TIME=$(cat "$START_FILE")
CURRENT_TIME=$(date +%s)
ELAPSED=$((CURRENT_TIME - START_TIME))
HOURS=$((ELAPSED / 3600))
MINUTES=$(((ELAPSED % 3600) / 60))
TIME_TRACK=$(printf "%02d:%02d" $HOURS $MINUTES)

# 获取 ccusage 费用信息
# 将输入传递给 ccusage statusline 并解析输出
ccusage_output=""
if command -v ccusage &> /dev/null; then
    ccusage_output=$(echo "$input" | ccusage statusline 2>/dev/null || echo "")
elif command -v npx &> /dev/null; then
    ccusage_output=$(echo "$input" | npx -y ccusage statusline 2>/dev/null || echo "")
elif command -v bun &> /dev/null; then
    ccusage_output=$(echo "$input" | bun x ccusage statusline 2>/dev/null || echo "")
fi

# 从 ccusage 输出中提取费用信息
if [ -n "$ccusage_output" ]; then
    # 提取 session 费用（例如：$0.23 session）
    session_cost=$(echo "$ccusage_output" | grep -oE '\$[0-9]+\.[0-9]+ session' | head -1)
    # 提取今日费用（例如：$1.23 today）
    daily_cost=$(echo "$ccusage_output" | grep -oE '\$[0-9]+\.[0-9]+ today' | head -1)
    # 提取燃烧率（例如：$0.12/hr）
    burn_rate=$(echo "$ccusage_output" | grep -oE '\$[0-9]+\.[0-9]+/hr' | head -1)
fi

# Git 信息
cd "$current_dir" 2>/dev/null
git_branch=$(git branch --show-current 2>/dev/null || echo "")
git_status=""
if [ -n "$git_branch" ]; then
    # 检查是否有未提交的更改
    if [ -n "$(git status --porcelain 2>/dev/null)" ]; then
        git_status="*"
    fi
    # 截断分支名（最多15个字符）
    git_branch=$(echo "$git_branch" | cut -c1-15)
fi

# 模型图标
case "$model" in
    *"Opus"*)
        model_emoji="🎭"
        ;;
    *"Sonnet"*)
        model_emoji="🎼"
        ;;
    *"Haiku"*)
        model_emoji="🍃"
        ;;
    *)
        model_emoji="🤖"
        ;;
esac

# 组装输出
output=""

# 时间和表情
output+="$time_emoji $(date +%H:%M)"

# 模型
output+=" | $model_emoji $model"

# 目录
output+=" | 📁 $dir_name"

# Git 分支和状态
if [ -n "$git_branch" ]; then
    output+=" | 🌿 $git_branch$git_status"
fi

# 时间追踪
output+=" | ⏱️ $TIME_TRACK"

# 费用信息（如果可用）
if [ -n "$session_cost" ] || [ -n "$daily_cost" ] || [ -n "$burn_rate" ]; then
    output+=" | 💰"
    [ -n "$session_cost" ] && output+=" $session_cost"
    [ -n "$daily_cost" ] && output+=" / $daily_cost"
    [ -n "$burn_rate" ] && output+=" | 🔥 $burn_rate"
fi

# 输出最终结果
echo "$output"

效果就是：

再来个文字版的：

☀️ 08:16 | 🎭 Opus 4.1 | 📁 cc-demo | 🌿 master* | ⏱️ 00:03 | 💰 / $14.76 today | 🔥 $6.45/hr

是不是很贴心？一眼就能看到所有信息！

案例二：股票显示

今天的整体，其实很简单，写好脚本就行。

并且也是 Claude Code 帮我写的。

不过需要注册下下面三个网站，获取下 key 就行：

https://fixer.io

https://marketstack.com

https://www.alphavantage.co

然后把代码里的替换下就行

your_api_key的地方有三处，都需要换掉。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

#!/bin/bash

# Function to fetch stock price from Yahoo Finance API alternative
fetch_stock_price() {
    local symbol=$1
    local temp_file=$(mktemp)
    
    # Try Yahoo Finance first with proper headers and timeout
    curl -s --max-time 5 \
        -H "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36" \
        "https://query1.finance.yahoo.com/v8/finance/chart/${symbol}" \
        -o "$temp_file" 2>/dev/null
    
    if [ $? -eq 0 ] && [ -s "$temp_file" ]; then
        local price=$(cat "$temp_file" | jq -r '.chart.result[0].meta.regularMarketPrice // empty' 2>/dev/null)
        
        if [ -n "$price" ] && [ "$price" != "null" ]; then
            printf "%.2f" "$price"
            rm -f "$temp_file"
            return
        fi
    fi
    
    # Fallback to Alpha Vantage API
    rm -f "$temp_file"
    temp_file=$(mktemp)
    curl -s --max-time 5 \
        "https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=your_api_key" \
        -o "$temp_file" 2>/dev/null
    
    if [ $? -eq 0 ] && [ -s "$temp_file" ]; then
        local price=$(cat "$temp_file" | jq -r '."Global Quote"."05. price" // empty' 2>/dev/null)
        if [ -n "$price" ] && [ "$price" != "null" ]; then
            printf "%.2f" "$price"
            rm -f "$temp_file"
            return
        fi
    fi
    
    # Final fallback to a simple financial API
    rm -f "$temp_file"
    temp_file=$(mktemp)
    curl -s --max-time 5 \
        "https://api.marketstack.com/v1/eod/latest?access_key=your_api_key&symbols=${symbol}" \
        -o "$temp_file" 2>/dev/null
    
    if [ $? -eq 0 ] && [ -s "$temp_file" ]; then
        local price=$(cat "$temp_file" | jq -r '.data[0].close // empty' 2>/dev/null)
        if [ -n "$price" ] && [ "$price" != "null" ]; then
            printf "%.2f" "$price"
            rm -f "$temp_file"
            return
        fi
    fi
    
    rm -f "$temp_file"
    echo "N/A"
}

# Function to format stock display
format_stock() {
    local symbol=$1
    local price=$2
    local icon=$3
    
    if [ "$price" = "N/A" ]; then
        echo "${icon} ${symbol}: N/A"
    else
        echo "${icon} ${symbol}: \$${price}"
    fi
}

# Function to fetch exchange rate
fetch_exchange_rate() {
    local from=$1
    local to=$2
    local temp_file=$(mktemp)
    
    # Try to fetch exchange rate
    curl -s --max-time 5 \
        "https://api.exchangerate-api.com/v4/latest/${from}" \
        -o "$temp_file" 2>/dev/null
    
    if [ $? -eq 0 ] && [ -s "$temp_file" ]; then
        local rate=$(cat "$temp_file" | jq -r ".rates.${to} // empty" 2>/dev/null)
        if [ -n "$rate" ] && [ "$rate" != "null" ]; then
            printf "%.3f" "$rate"
            rm -f "$temp_file"
            return
        fi
    fi
    
    # Fallback API
    rm -f "$temp_file"
    temp_file=$(mktemp)
    curl -s --max-time 5 \
        "https://api.fixer.io/latest?base=${from}&symbols=${to}&access_key=your_api_key" \
        -o "$temp_file" 2>/dev/null
    
    if [ $? -eq 0 ] && [ -s "$temp_file" ]; then
        local rate=$(cat "$temp_file" | jq -r ".rates.${to} // empty" 2>/dev/null)
        if [ -n "$rate" ] && [ "$rate" != "null" ]; then
            printf "%.3f" "$rate"
            rm -f "$temp_file"
            return
        fi
    fi
    
    rm -f "$temp_file"
    echo "N/A"
}

# Main function to generate statusline
generate_statusline() {
    # Build statusline components
    local statusline=""
    
    # Add model and project info (customize as needed)
    statusline="🤖 Sonnet 4 | 📂 Sharptooth | 🌿 main"
    
    # Fetch AAPL stock price
    local aapl_price=$(fetch_stock_price "AAPL")
    local aapl_formatted=$(format_stock "AAPL" "$aapl_price" "🍎")
    statusline="${statusline} | ${aapl_formatted}"
    
    # Fetch TSLA stock price
    local tsla_price=$(fetch_stock_price "TSLA")
    local tsla_formatted=$(format_stock "TSLA" "$tsla_price" "🚗")
    statusline="${statusline} | ${tsla_formatted}"
    
    # Fetch currency exchange rate
    local exchange_rate=$(fetch_exchange_rate "AUD" "CNY")
    if [ "$exchange_rate" != "N/A" ]; then
        statusline="${statusline} | 💰 AUD/CNY: ${exchange_rate}"
    else
        statusline="${statusline} | 💰 AUD/CNY: N/A"
    fi
    
    echo "$statusline"
}

# Function to update statusline continuously
run_statusline() {
    while true; do
        clear
        generate_statusline
        sleep 60  # Update every minute
    done
}

# Check if running interactively or as a one-shot
if [ "$1" = "--loop" ]; then
    run_statusline
else
    generate_statusline
fi

 🤖 Sonnet 4 | 📂 Sharptooth | 🌿 main | 🍎 AAPL: $227.18 | 🚗 TSLA: $339.03 | 💰 AUD/CNY: 4.686

MCP命令 - 让Claude Code开挂

MCP 是什么？

官网：https://modelcontextprotocol.io/introduction

入门

MCP，英文全称：Model Context Protocol

官方解释：旨在让应用程序以统一的方式为大语言模型（LLM）提供上下文信息。（不懂在哔哔啥）

通俗的讲解：你可以把它理解为AI领域的“USB-C接口”——它让不同的数据源、工具和AI模型之间的连接变得简单、标准化。

想象一下你有很多电子设备：笔记本电脑、手机、相机、移动硬盘。在过去，它们可能需要各种不同的接口（USB-A, HDMI, Micro-USB 等），非常混乱。而现在，USB-C 正在统一这一切。

来个实际的场景举例：

🎯 实际效果对比

没有MCP时：

你：帮我查一下数据库里今天的订单

Claude：我无法直接访问数据库，你需要手动查询后告诉我结果

你：😫 (打开数据库工具，写SQL，复制结果…)

有了MCP后：

你：@database 查询今天的订单

Claude：已查询完成，今天共有156个订单，总金额…

[直接显示结果]

你：😊 爽！

这下理解了吗？MCP就是让AI从”参谋”变成”执行者”的桥梁！

MCP就是让AI”长出手脚”的协议 —— 让原本只能”动嘴”的AI，变成能实际”动手”操作各种工具的超级助手。

为什么需要 MCP

在大模型发展越来越快速的时候，怎么和周边的应用更好的结合对接使用，是面临的一个挑战。

之前最开始的形态是 function callling，但是这种方式使用起来比较复杂。

并且下面提到的这些点也是需要考虑的。

• 上下文提供方式混乱：每个应用都用自己独特的方式向 LLM 发送上下文。这导致了大量的重复开发和不兼容。

• 模型切换成本高：想从 OpenAI 的 GPT-4 切换到 Google 的 Gemini？你可能需要重写大量与模型交互的代码。

• 安全性与隐私：如何确保只有特定的、经过授权的上下文（例如当前打开的文件）被发送给 LLM，而不是整个文件系统？

• 工具集成的复杂性：如何让 LLM 安全、可靠地使用你本地的工具（如代码编译器、Linter、API 客户端）？

那么 MCP 的诞生就是为了解决这些问题。它提供了一个标准化的中间层，解耦了“应用本身”和“AI 模型”。

MCP (Model Context Protocol) 是Claude Code的杀手锏，能连接各种外部工具。

安装MCP

其实 mcp 的安装方式安装有很多种，今天就给大家全部介绍完

方式一：直接使用命令安装

-s 参数：表示执行配置文件的存储位置

user：全局粒度

local：项目粒度

-e 参数：设置环境变量

playwright（推荐）

自动化流程好帮手，很多场景都可以用的上，发挥你的想象你就可以。

场景：自动化测试、小红书自动发文、自动化部署应用

1
2
3

claude mcp add playwright -s user -- npx @playwright/mcp@latest

claude mcp add playwright -s user -- cmd /c npx @playwright/mcp@latest

firecrawl（推荐）

这个是超强的爬虫工具，当然还需要你注册API KEY 的。

1
2

# 需要把 fc-YOUR_API_KEY 替换为你实际的 Firecrawl API key
claude mcp add firecrawl -s user -e FIRECRAWL_API_KEY=fc-YOUR_API_KEY -- npx -y firecrawl-mcp

brave-search（推荐）

借助 brave 的强大搜索能力

参考链接：https://brave.com/search/api/guides/use-with-claude-desktop-with-mcp/

1

claude mcp add brave-search -s user -e BRAVE_API_KEY=YOUR_API_KEY -- npx -y @modelcontextprotocol/server-brave-search

Duckduckgo

Exa

Perplexity mcp

Github（推荐）

这给就可以做很多事情了，连接上了你的 Github，对你的所有项目都了如指掌

1

claude mcp add github-server -e GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_TOKEN -- npx "@modelcontextprotocol/server-github"

飞书（推荐）

不过需要提前注册好飞书的应用，并开通相关权限

链接：https://open.feishu.cn/document/uAjLw4CM/ukTMukTMukTM/mcp\_integration/mcp\_introduction

获取 user_access_token https://open.feishu.cn/api-explorer/cli\_a77de32197e5d00e?apiName=get\&from=op\_doc\_tab\&project=authen\&resource=user\_info\&version=v1

1

claude mcp add feishu-mcp -- npx -y @larksuiteoapi/lark-mcp mcp -a <your_app_id> -s <your_app_secret> -u <your_user_token>

其中：

• <your_app_id>需要替换为你的应用的 App ID。

• <your_app_secret>需要替换为你的应用的 App Secret。

• <your_user_token> 需要替换为用户访问凭证（user_access_token），获取方式参见 常见问题 中的 如何快速获取应用对应的用户访问凭证（user_access_token）。

如果你的业务所要调用的 OpenAPI 无需使用用户访问凭证（user_access_token），则配置文件中的"-u", "<your_user_token>"两行可以直接删掉，无需配置。

context7（推荐）

这个相信大家都知道了。

能够从源头获取最新的、特定版本的文档和代码示例

react19

1

claude mcp add context7 -s user -- cmd /c npx -y @upstash/context7-mcp@latest

Windows:

claude mcp add context7 -s user – cmd /c npx -y @upstash/context7-mcp@latest

sequential-thinking

分步骤思考，这个可能在 Cursor 中使用的比较多

现在 Claude Code 能力很强，就不怎么需要了。

1

claude mcp add sequential-thinking -s user -- npx -y @modelcontextprotocol/server-sequential-thinking

filesystem

可以操作本地文件

1

claude mcp add filesystem -s user -- npx -y @modelcontextprotocol/server-filesystem ~/Documents ~/Desktop ~/Downloads

Claude Code 的工具（15 个）：

puppeteer

爬虫工具

1
2

claude mcp add puppeteer -s user -- npx -y 
@modelcontextprotocol/server-puppeteer

方式二：使用 SSE 方式安装

目前官方支持 SSE 的方式，也就是 HTTP stream 的方式（不知道没关系，能用不就行了，后面再慢慢了解）

SSE 表示服务器在远程，别人已经帮你配置好，你通过客户端直接连接就行。

前面之前配置的有 command 的参数，都是会在本地配置的电脑启动服务的

官网支持：https://www.anthropic.com/partners/mcp

看了下，都不是大家很经常用的，有些比如 Cloudflare、Sentry、Atlassian 知道些，其他真是不怎么用。

那还是回到大家可以用得上的，这里拿的就是高德地图举例。

刚好他是可以支持 SSE 模式的。

高德地图（SSE）

地址：https://lbs.amap.com/

命令如下：

1

claude mcp add --transport sse mcp_server_amap https://mcp.amap.com/sse?key=f810f66767857fde0473e724de274445

举例：

1

帮我看下深圳的天气怎么样？

Exa mcp（HTTP）

1
2

#格式
claude mcp add --transport http <name> <url>

AI 搜索工具

地址：https://docs.exa.ai/examples/exa-mcp

1
2
3

claude mcp add --transport http mcp_exa_1 https://mcp.exa.ai/mcp?exaApiKey=your-exa-api-key

claude mcp add --transport http mcp_exa_1 https://mcp.exa.ai/mcp?exaApiKey=78cb27a6-f78f-4377-9082-769d4675c520

Figma MCP（SSE）

官方的

1

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/mcp

不过这个官方的当前功能需要 Professional 订阅

方式三： json 文件

像比如 zen mcp 就推荐在项目文件下创建

zen-mcp

功能：这个就比较牛了，可以在 Claude Code 里面调用不同的大模型，就是需要你的 API-KEY。

具体操作：项目录下新建一个 .mcp.json 文件

当然这个 MCP 的作用域范围就是项目粒度的。

在 ~/.claude/.mcp.json 整个用户级别下的配置不生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "mcpServers": {
    "zen": {
      "command": "sh",
      "args": [
        "-c",
        "exec $(which uvx || echo uvx) --from git+https://github.com/BeehiveInnovations/zen-mcp-server.git zen-mcp-server"
      ],
      "env": {
        "PATH": "/usr/local/bin:/usr/bin:/bin:/opt/homebrew/bin:~/.local/bin",
        "GEMINI_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}

Gemini API KEY 设置页面

https://aistudio.google.com/app/apikey

当你再从 claude 进入的时候，就会提示你是否安装项目级别的 MCP

如果有错误，可以使用 –debug 进入，就可以看到错误信息

然后不懂没关系，扔给 Claude Code 就行，让他看看怎么解决。

方式四：从 Claude Desktop 导入

命令如下：

1

claude mcp add-from-claude-desktop

执行的时候，就会让你选择哪些从 Claude Desktop 导入

只用空格来选择哪些需要导入的。

注意：windows 用户一样可以配置，Claude Desktop 安装在 windows，Claude Code 安装在 WSL 环境下。

不过，尴尬，启动的时候，会报错。

只能尝试下在 WSL 环境下安装 Claude Desktop，但是没有官方支持，只有第三方的

地址：https://github.com/aaddrick/claude-desktop-debian

有兴趣的用户可以看看尝试不同办法

另外，如何找到 Windows 上的 MCP 配置，从左上角的菜单进入设置。（一直从左下角人头像那里进入，找不到）

MCP 常用命令

查看MCP列表

1

claude mcp list

查看某个 MCP 的详细配置

1

claude mcp get playwright

删除某个 MCP

1

claude mcp remove "playwright" -s user

查看 mcp 状态

命令如下：

1

/mcp

就会显示 mcp 的状态

总结：

实战一：连接GitHub

1. 安装GitHub MCP

1

claude mcp add github-server -e GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_TOKEN -- npx "@modelcontextprotocol/server-github"

不过要记得分配分配 token 的时候，给一点权限。

不然就会报错如下了：

2. 使用

1

我的github仓库有哪些项目

很精准的列举了我的仓库里的项目，并未还有中文解释，以及一些备注

1

githbub的gi-food-friend这个项目最近的提交有哪些

最近的提交都列举出来了，一目了然，似乎我不用去浏览器登录，然后各种点击才能看得见了。

实战二：小红书

这里以打开小红书的例子来看一下，使用的就是前面提到的 playwright 的 MCP 工具

1

在浏览器里打开小红书,搜索“Claude Code”,按照浏览量多的前面排序，将前10的结果总结给我

这里就没有视频了，他是会打开浏览器，然后进行浏览器操作的。

可以击原文链接查看视频里有案例介绍，这里也贴下地址： https://b23.tv/5AFobyG

搜索结果：

Claude Code 高级玩法

玩法一：claude code mcp 服务器

玩法二：mcp 自定义

mcp 去支持

MCP网站

现在其实很多 MCP 的网站。

剩下的基本都是去官方页面，或者 Github 上去找。一般都会找官方支持的，会比较靠谱。

Plan 模式

Skills

下面有很多的扩展资料

都是官方的，如果想学习的更深入和更系统

这就是最好的学习资料。

当然也不是让大家都必须看完，有更多精力的船员们可以看

参考资料，大家可以作为更深入的阅读材料

官方新闻：https://www.anthropic.com/news/skills

官方博客：https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills

skills 文档：https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview

ClaudeCode Skills：https://docs.claude.com/en/docs/claude-code/skills

skills 案例：https://github.com/anthropics/skills

如何创建自定义 skills：https://support.claude.com/en/articles/12512198-how-to-create-custom-skills

skills 的介绍：https://support.claude.com/en/articles/12512176-what-are-skills

1.skills的基本概念

skills 是 Claude Code 在 2.0.20 版本新加入的功能，与其说是 Claude Code 拥有，不如说是 Claude 体系拥有。

因为 Anthropic 家的产品都支持，比如 Claude Desktop 也可以。

对于 skills 的理解，我觉得大家用起来，多用，就可以感受到它的作用

简单理解起来是高级功能的sub agent，但跟子代理还是有很大的区别。

另外也有人跟 MCP 来对比的，我觉得这就是两个完全重点不一样的功能（后续来个小结对比下）。

总结：skills 是个综合高级功能抽象的单元，可以有指令、资源、代码脚本，所以他可以完成的功能是可以比较复杂的。

一句话：很多功能还是可以用代码解决，那么你不会写代码，我封装好一个功能库，你就可以直接用

3.skills的安装与使用步骤

3.1 安装 skills 插件

最好的就是官方给我们提供了 skills 的样例，那么我们学习官方的就可以了

官方案例的地址：https://github.com/anthropics/skills

进入 Claude Code

输入如下命令：（以插件形式存在）

1

/plugin marketplace add anthropics/skills

拉取中

可能会出现无法下载插件的问题，原因：默认的这个插件是放到 Github 上的，有时候网络访问会有问题

解决办法：请打开 clash verge 软件的虚拟机/tun 模式

添加成功

3.2 安装 skills 功能

下一步需要安装 skills

执行 /plugin 命令

选择第一个：Browse and install plugins

回车选择

可以看到有两个 skills，使用空格按键就可以选择

我们两个都选择，如下，然后按下键盘的 i 键进行安装

提示你重启 Claude Code 加载插件

验证下是否可以用。可以直接提示词有哪些 skills

1

列举所有可用的 skills

看到上图中列觉了当前可用的 skills 列表

后面就可以直接使用skills了

4.skills的实操案例

4.1 案例一：用skills创建 PPT

案例说明：这里的案例就是创建一个 ppt，以前肯定是需要写代码，或者借助插件才能创建 PPT。现在轻松借助 pptx skills 这个技能就可以轻松搞定

大概思路：实际流程很简单，就是写好你的提示词，你的具体要求，带上关键词，使用「使用 ppt 的 skills 实现」，就算不写这句话，Claude Code 也是可以感知到使用技能的。

需补充

1
2
3
4
5
6

创建一个关于Claude最近发布的skills功能的ppt，要求：
1. 大概 10 页
2. 需要 skills 背景以及常见使用场景
3. Claude Code 怎么使用官方的 skills 案例
4. 如何创建一个自定义的 skills
5. skills 的未来趋势解读

可以看到已经使用 pptx 的 skills 功能来创建我们需要的 ppt

选择 yes 就可以

其实实际也是先生成 html 代码，然后转为 ppt 格式。

开始使用 skills

可以看见生成的 PPT 是现成 html 然后，写代码生成 pptx 的格式的文件

最后生成的 PPT：

打开看一下：看起来还是有模有样的，虽然样式可能不太好看，但是胜在流程稳定

4.2 案例二：用skills分析推特的数据

案例说明：我们有一份推特（Twitter）的数据表，是 Excel 文件（后缀 .xlsx）。以前 Claude Code 不能直接读这种表格；现在只要开启 xlsx 技能（skills），它就能看懂并帮你做基础的数据清洗和分析。

大概思路：直接把需要处理的 excel 文件放入到项目里面，直接 @ 文件后，进行需求提问就可以

1

@twitter_classification_dataset.xlsx 分析这份推特关注列表数据

可以看到自然会用到 xlsx 的 skills 功能

分析后的结果如下：

skills 的案例技能还有很多，大家可以跟 Claude Code 一起学习怎么使用

另外这里还有一个 skills-creator 的技能，可以创建属于自己的 skills

还有 mcp-skills，可以轻松创建一个 mcp 工具

有更多精力的船员们可以进行探索

5.skills 高级操作案例：复刻 word 排版样式

高级操作

有额外的经历船员们可以操作

并且每步的操作不一定与步骤的里面一模一样

需要根据反馈的结果调整

创建属于一个自己的 skills 。

其实有很多类似的功能都可以打包成 skills 的

这样可以复用、分享。

能够抽象成 skills 的点：功能稍微复杂，独立的个小单元，功能不能汇聚太多，有难点。

比如这里演示的一个案例：复刻 word 排版样式

长话短说，那么就开始

5.1 项目准备

把你的 word 样本的文件，放入到目录中

下一步就是进入 Claude Code

使用 claude 在终端进入

或者使用 vscode 进入都可以

选择你喜欢的方式

注意后面的步骤可能会与你实际的不太一样，需要根据实际情况来调试

由于原始文件敏感，就只提供最后生成案例的文件了

5.2 抽取项目需要的信息

先让 Claude Code 熟悉下我们的原始 docx 样式

1

@HY研制任务书.docx 我现在的需求是需要一些资料，并且生成的 Word 文档格式要类似这个文档。

按照我的理解，肯定是要调去 skills 的功能来识别的，不然普通办法是没法识别微软的 word 格式的。

果不其然，开始加载 docx 的 skills 功能

等分析完，我们根据返回的结果进行下一步操作

1

我现在需要记录这些格式，然后可能需要另外一个主题，然后根据格式，填充内容

下面就给我抽取了好的样式

5.3 抽取 skills 技能

下面的步骤就是让 Claude Code 给我们提取出 skills

1

看如果抽取为 skills 是否可行

下图就是关键的一步

可以看到加载了 skill-creator 来创建我们需要的 skills

详细的plan 如下：

后面就开始漫长的过程创建这个我们需要的 skills 功能

等待执行完成后，就可以看到下面的结论了。

看这个工程目录下，也有生成的 skills

5.4 测试效果

生成玩成后的总结

并且这个是最后生成的 word 文档文件

好了，这个创建自定义的 skills 的流程就是这样

其实很简单

因为官方给我们提供了 creator-skills 的这个技能

让我们创建属于自己的 skills 变的很简单。

6. 扩展阅读（选修）

ClaudeCode 功能各项对比

总览对比

案例：比如Git Worktrees 管理

如果是针对单次任务，那么就选择：Slash Command

执行命令： /create_worktree feature-branch

- 创建一个 worktree

- 一次性操作

- 手动触发

那比如是要并行任务，那么就选择：Sub-agent

Create worktrees for: feature-a, feature-b, feature-c

- 同时创建多个 worktrees

- 不需要保留每个创建过程的上下文

那比如是：管理问题域 ，就需要：Skills

1
2
3
4

Manage git worktrees:
  - Remove red-tree
  - Create purple-tree with offset 4
  - List all trees

- **完整生命周期管理**：创建、列出、删除

- Agent 自动识别需要哪些操作

- 可重复使用的解决方案

那么到底怎么选择功能了，有个决策流程图可以参考下

1
2
3
4
5
6
7
8
9
10
11

开始新任务
    ↓
是否需要外部集成？
    ├─ 是 → MCP Server
    └─ 否 ↓
是否需要并行处理？
    ├─ 是 → Sub-agent
    └─ 否 ↓
是否需要管理整个问题域？
    ├─ 是 → Skill (包含多个 Slash Commands)
    └─ 否 → Slash Command (单一 Prompt)

7：常见问题

问题 1：无法下载插件

看到如下错误截图

请打开 clash verge 软件的虚拟机/tun 模式

项目集合

7.3 【浏览器插件篇】开发浏览器插件——飞书收藏插件

这个插件的产生的背景：浏览器的收藏栏只能收藏网址的中文名称和英文地址，我想加注释和备注信息很难，所以有想法才开发了这个插件。

目的：采集到飞书多维表格，可以随时随地访问，后续还可以自己处理数据，可以添加 tag，还可以添加备注

先看看插件的样式：

开发流程

找了下最初的最的需求找不见了，每次开发，你跟 ClaudeCode 聊清楚你的需求点就可以

付上我的第一版的 CLAUDE.md 记忆文件，可以作为需求的参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## 项目概述

这是一个Chrome浏览器扩展，用于将网页URL快速保存到飞书多维表格。扩展使用Manifest V3规范，通过飞书开放API与多维表格交互。

## 架构说明

### 核心组件
- **background.js**: Service Worker，处理所有飞书API调用，包括获取访问令牌和添加记录到多维表格
- **popup.html/js**: 用户交互界面，收集网页信息和用户输入
- **options.html/js**: 配置页面，用于设置飞书应用凭据和表格URL

### 数据流
1. 用户在popup中填写信息并点击保存
2. popup.js发送消息到background.js
3. background.js调用飞书API获取访问令牌
4. 使用令牌将数据写入指定的多维表格

### 飞书API集成
- 使用tenant_access_token内部应用认证方式
- API基础URL: `https://open.feishu.cn/open-apis`
- 主要接口：
  - `/auth/v3/tenant_access_token/internal` - 获取访问令牌
  - `/bitable/v1/apps/{appToken}/tables` - 获取表格列表
  - `/bitable/v1/apps/{appToken}/tables/{tableId}/fields?view_id={viewId}` - 获取字段信息
  - `/bitable/v1/apps/{appToken}/tables/{tableId}/records` - 添加记录
  - `/bitable/v1/apps/{appToken}/tables/{tableId}/fields/{fieldId}?view_id={viewId}` - 更新字段选项

### 重要更新（API调用修复）
- 飞书多维表格需要区分app token、table ID和view ID
- 用户现在需要输入完整的表格URL（如：https://xxx.feishu.cn/base/B3cibQKgVaqBcTsxj10cMoSMnXS?table=tblRlS0ozOVJTcKR&view=vewkJwjXGm）
- background.js中的`parseTableUrl`函数会解析URL提取app token、table ID和view ID
- view ID用于获取字段信息时的正确配置
- 如果URL中没有table参数，会自动获取第一个表格

### 权限配置要点
1. **应用权限**：必须添加"查看、评论、编辑和管理多维表格"权限
2. **应用发布**：自建应用需要发布到企业内才能使用
3. **表格权限**：必须将多维表格分享给应用，并设置"可编辑"权限

### 错误代码处理
- **91402 (NOTEXIST)**：表格不存在或无权限访问
- **91403 (Forbidden)**：权限不足，需要检查应用权限和表格分享设置
- **1254043**：字段名称不匹配
- **1254060 (TextFieldConvFail)**：文本字段转换失败
- **1254061 (HyperlinkFieldConvFail)**：超链接字段转换失败
- **1254062 (SingleSelectFieldConvFail)**：单选字段转换失败
- **1254064 (DatetimeFieldConvFail)**：日期时间字段转换失败

### 存储结构
使用Chrome Storage API存储配置：
- appId: 飞书应用ID
- appSecret: 飞书应用密钥
- tableUrl: 多维表格完整URL（替代原来的tableId）

### 多维表格字段映射
- 网站地址 → URL（超链接格式：{text: url, link: url}）
- 网站的中文说明 → 用户输入的描述（文本格式）
- 网站的备注 → 用户输入的备注（多行文本格式）
- 网站的标签 → 用户输入的标签（单选格式：直接使用选项名称字符串）
- 创建时间 → 时间戳（日期时间格式）

**注意**: 所有字段名称与多维表格中的实际字段名称保持完全一致。

## 开发说明

### 调试扩展
1. 在Chrome中打开 `chrome://extensions/`
2. 开启开发者模式
3. 点击"加载已解压的扩展程序"选择项目目录
4. 使用Chrome开发者工具调试：
   - Service Worker: 在扩展管理页面点击"检查视图"下的"Service Worker"
   - Popup: 右键点击扩展图标选择"检查弹出式窗口"

### 测试API连接
options.js中包含测试连接功能，会验证：
1. App ID和App Secret是否正确（能否获取访问令牌）
2. 表格URL是否有效（能否访问表格）

### 调试日志
background.js中添加了详细的日志输出，包括：
- App ID和Token信息
- URL解析结果
- API请求和响应
- 错误详情

### 新功能：URL唯一性检查和覆盖更新 (2024-06-16)

#### 功能概述
实现了"网站地址"作为唯一键的功能，在保存URL前会检查是否已存在相同的网址：
- 如果URL不存在，直接保存
- 如果URL已存在，显示确认对话框让用户选择：
  - 覆盖更新现有记录
  - 取消操作

#### 实现细节

**后端API扩展：**
- `record-manager.js`：增加了`updateUrlRecord`方法用于更新现有记录
- `record-manager.js`：改进了`checkUrlExists`方法，返回更详细的记录信息
- `background-new.js`：增加了`handleUpdateUrl`方法处理UPDATE_URL消息
- `common.js`：增加了`UPDATE_URL`消息类型

**前端UI改进：**
- `popup-new.html`：增加了确认对话框HTML结构
- `popup-new.css`：增加了确认对话框样式（包含暗色模式支持）
- `popup-new.js`：增加了URL存在性检查逻辑和确认对话框处理

**用户体验：**
- 在确认对话框中显示现有记录的详细信息（网站地址、网站的中文说明、网站的备注、网站的标签、创建时间）
- 提供清晰的"覆盖更新"和"取消"按钮
- 保持与原有UI风格一致的设计
- 所有字段名称与多维表格中的实际字段名称完全一致

#### 测试建议
1. 尝试保存一个新的URL，应该直接保存成功
2. 尝试保存相同的URL，应该弹出确认对话框
3. 在确认对话框中选择"覆盖更新"，应该更新现有记录
4. 在确认对话框中选择"取消"，应该返回编辑页面
5. 确认对话框应该显示现有记录的完整信息

### 注意事项
- Manifest V3中background script改为service worker，不能使用持久连接
- 所有飞书API调用都需要在manifest.json的host_permissions中声明
- 异步消息响应需要返回true以保持消息通道开放
- 确保Authorization header格式正确：`Bearer ${accessToken}`
- URL检查使用"网站地址"字段名进行查询，确保与表格字段名称一致