在开发中应该都经历过后端发来一个Swagger 链接于是我们打开文档一个个的去将接口cv到我们项目中即重复又枯燥但还不得不做本文的由来就此诞生意在通过Claude Code输入命令打开 Swagger 文档、提取接口信息、并勾选需要的接口写入到项目中详细步骤1、添加chrome-devtools MCP打开claude code对话框执行命令claude mcp add chrome-devtools -- npx chrome-devtools-mcplatest配置好后创建mcp文件可直接让claude code生成例就生成好了2、创建api生成skill万能的claude 又来了 直接根据自己的项目输入需求生成skillclaude就会帮你自动生成一个api接口文件生成器的skill文件部分生成的skill,如下图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浏览器全部关闭可打开任务管理器**CtrlShiftEsc查看并结束chrome.exe**进程2)、打开 cmd运行(路径需要根据自己安装的位置进行调整)C:\Program Files\Google\Chrome\Application\chrome.exe --remote-debugging-port9222此时Chrome 浏览器打开并启用了远程调试端口就可以正常的页面链接了。