Chrome DevTools MCP + Claude Code 自定义skills生成接口代码生成器

在开发中应该都经历过：

后端发来一个Swagger 链接，于是我们打开文档，一个个的去将接口cv到我们项目中，即重复又枯燥但还不得不做

本文的由来就此诞生，意在通过Claude Code输入命令打开 Swagger 文档、提取接口信息、并勾选需要的接口，写入到项目中

详细步骤

1、添加 chrome-devtools MCP

打开claude code对话框，执行命令：

sql 复制代码

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

配置好后创建mcp文件（可直接让claude code生成）例：

就生成好了

2、创建api生成skill 万能的claude 又来了直接根据自己的项目输入需求生成skill

claude就会帮你自动生成一个api接口文件生成器的skill文件

部分生成的skill,如下图

markdown 复制代码

name: swagger-api-gen
description: 从 Swagger/OpenAPI 文档自动生成符合项目规范的 API 文件。当用户提到生成API、swagger生成、接口生成、api-gen、从swagger创建api时，使用此技能。

# Swagger/OpenAPI 接口文件生成器

从 Swagger JSON 文档自动生成符合本项目规范的 API 文件（`src/api/` 目录下的 `.js` 文件）。

## 输入

用户提供以下信息（可一次性提供，也可分步提供）：
- Swagger/OpenAPI 文档的 JSON 地址（必需）
- Tag 名称（可选，未提供时列出所有 tag 供选择）

## 一、项目 API 文件规范（必须严格遵守）

### 1.1 文件结构

每个 API 文件必须遵循以下固定模式：

import { get, post, put, del } from '@/utils/request'

// 中文注释（取自 swagger summary）
export const functionName = (data) => {
  return method({
    url: '/endpoint/path',
    baseUrl: '/api',
    data: data,
  })
}

规则：
- **import 语句**：仅从 `@/utils/request` 导入实际使用到的方法，可用方法为 `get`、`post`、`put`、`del`，按此顺序排列
- **函数声明**：`export const` + camelCase 函数名 + 箭头函数 + 大括号 + return
- **参数**：统一使用单参数 `data`
- **返回值**：`return get/post/put/del({ url, baseUrl, data: data })`
- **注释**：每个函数上方加一行中文注释，内容取自 swagger 的 `summary` 字段
- **文件命名**：camelCase 格式的 `.js` 文件
- **文件位置**：`src/api/` 或 `src/api/hr/`（HR 相关）或 `src/api/staffTrain/`（培训相关）

### 1.2 HTTP 方法映射

| Swagger 方法 | 项目方法 |
|-------------|---------|
| GET         | `get`   |
| POST        | `post`  |
| PUT         | `put`   |
| DELETE      | `del`   |
| PATCH       | `post`（降级，注释标注原始方法） |

### 1.3 baseUrl 常用值

- `/api` --- 主 HR 后端
- `/gw` --- 网关
- `/gw/hr` --- HR 网关
- `/gw/oms/api` --- OMS 子系统
- `/adminApi` --- 管理后台
- `/hrApi` --- HR 平台
- `/sso` --- 单点登录

整个配置就结束了！！！

使用案例

Step 1：触发 Skill

获取钉钉团队绩效下的全部接口

以下是api链接的具体参数

Step 2：读取文档，选择接口

图1：成功获取到钉钉团队下的所有接口，并提供了选择接口/文件路径/baseUrl供用户自定义选择

图2：选择需要放在文件中的接口

图3：选择文件路径（可自定义）

图4：选择接口前缀

Step 3：完成，收工

图5：指定需要放在接口文件的接口

图6：生成的接口文件

提示

1.claude code监听不到浏览器?

1)、将chrome浏览器全部关闭，可打开任务管理器**（Ctrl+Shift+Esc）查看，并结束 chrome.exe**进程

2)、打开 cmd，运行(路径需要根据自己安装的位置进行调整)：

ini 复制代码

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

此时Chrome 浏览器打开并启用了远程调试端口，就可以正常的页面链接了。