ARTICLE · 1022231
AI 实操:把接口文档喂给 AI,一键生成前端 API 层
后端丢过来一份接口文档，20 个接口。你打开一看，要么是几千行 JSON，要么是一张密密麻麻的表格。
然后你要做的事是：把这 20 个接口，一条条抄成前端的 api 函数。
抄的时候要盯着这些细节——url 前缀对不对、method 是 get 还是 post、参数该放 params 还是 data、字段名有没有大小写差异、哪些是必填。
抄完 20 个，半天过去了。联调时发现某个接口把 createTime 写成了 creatTime，排查两小时。
这篇给一套可以直接抄的流程：把接口文档交给 AI，让它生成整个 API 层。20 个接口从 3 小时压到 25 分钟左右。
文末有一份《AI 实操配置包》，这篇的提示词模板也收进去了，需要的话可以直接翻到最后。
· · ·
先看结论：一张表说清全流程
如果你只想拿结论走，这张表就够：
下面展开说。
· · ·
为什么这件事 AI 干得特别好
不是所有活都适合交给 AI。接口文档 → API 层这个场景，恰好踩中了三个"AI 友好"的条件：
① 输入是结构化的。每个接口都有明确的 url、method、参数，没有歧义。不像"帮我写个业务逻辑"，需求本身就模糊。
② 工作模式高度重复。20 个接口就是同一个模板套 20 遍。这种活人写会烦、会出错，AI 不会。
③ 对错是可验证的。url 对不对、method 对不对，打开 Network 面板一看就知道。不需要你懂多少业务，就能判断 AI 干得对不对。
反过来，像"帮我重构这段老旧代码"这种活，上下文缺失、目标不明确，AI 就容易跑偏。先挑结构规整的活交给 AI，是效率最高的一步。
· · ·
Step 1：把文档转成 AI 好读的格式
这一步最关键，也最容易被跳过。
很多人直接把几千行 JSON 粘给 AI，结果它读到一半就开始丢字段——上下文被塞满，后面的内容它根本没仔细看。
正确做法是先转成一张表：
| 接口名 | 方法 | 路径 | 请求参数 | 响应字段 |
|---|---|---|---|---|
| 用户列表 | GET | /user/list | pageNum, pageSize, keyword | id, name, phone, status |
| 用户详情 | GET | /user/{id} | id | id, name, phone, email, createTime |
| 新增用户 | POST | /user | name, phone, roleId | id |
| 编辑用户 | PUT | /user | id, name, phone, roleId | — |
| 删除用户 | DELETE | /user/{id} | id | — |
这张表本身也可以让 AI 帮你转——把 JSON 丢过去，说一句：
把下面的接口文档整理成 Markdown 表格，列固定为：接口名、方法、路径、请求参数、响应字段。不要补充任何文档里没有的信息。
最后加粗那句话很重要。这一步只做格式转换，不让它做任何推断。如果这里让它自由发挥，后面生成的代码可能就是照着它编的参数写的。
· · ·
Step 2：提示词（可直接复制）
这是整套流程的核心。照着改项目相关的部分就能用：
你是一个资深前端工程师。请根据我提供的接口清单，生成 Vue 项目的 API 层代码。
【项目约定】
1. 请求库统一从 `@/utils/request` 导入，默认导出名为 request
2. 请求成功判断在拦截器里已处理（code === 200），函数内不要写 try/catch
3. 每个接口导出为一个具名函数，函数名用 camelCase
4. 函数参数统一定义为对象参数，不要用多个位置参数
【输出格式】
每个接口按下面这个模板输出，不要添加多余注释和 console.log：
export function getUserList(params) {
return request({ url: '/user/list', method: 'get', params })
}
export function createUser(data) {
return request({ url: '/user', method: 'post', data })
}
【转换规则】
1. GET 请求的参数放在 params 字段，POST/PUT/DELETE 的请求体放在 data 字段
2. 后端字段是 snake_case 的，转成 camelCase（如 create_time → createTime）
3. 路径中的占位符用模板字符串拼接，如 `/user/${id}`
4. 接口清单里没有的信息，不要自行补充
【执行步骤】
第一步：先输出一份接口清单确认表，包含「接口名 / 函数名 / 方法 / 路径」，共 N 条，等我确认。
第二步：我确认后再输出完整代码。
下面是接口清单：
<粘贴 Step 1 生成的 Markdown 表格>
这套提示词里，真正起作用的是这四处：
· · ·
Step 3：接进项目、校验、替换
生成的文件放到 src/api/ 下，按模块拆（user.js / order.js / goods.js）。
然后必须做一件事：抽查 3 个接口的真实请求。
打开浏览器 → Network 面板 → 触发对应页面 → 对比生成代码里的 url、method、参数名。
这一步花 3 分钟，能挡住 90% 的低级错误。重点是看这三样：
url 前缀：文档写的是 /api/user/list 还是 /user/list？很多项目在 request 封装里已经拼了 baseURL，生成时容易重复拼一次。
params / data 放错：GET 用 params，POST 用 data，这是最常见的错误。
参数名大小写：pageNum 和 page_num，肉眼很难发现，跑起来才发现是 undefined。
· · ·
进阶三招
基础流程跑通后，这三件事可以让 AI 顺带一起做：
① 顺带生成 TypeScript 类型定义
在提示词里加一句：
同时为每个接口的请求参数和响应数据生成 TypeScript interface，命名规则为 {接口名}Params / {接口名}Result。
② 顺带生成 mock 数据
根据响应字段，为每个接口生成一份符合字段类型的 mock 数据，放在 src/mock/ 下。
前端不用等后端联调就能先把页面跑起来，这是最省时间的一招。
③ 顺带生成字段映射表
后端字段和前端展示名往往对不上（userStatus 是 1/2/3 还是 "正常"/"停用"？）。让 AI 把文档里的枚举字段单独抽一张表出来：
把所有字段中取值是枚举的（如 status、type），单独整理成一张对照表，标注文档里说明的含义。
这张表在写页面时能省掉反复翻文档的时间。
· · ·
四个必踩的坑
坑一：一次喂太多。超过 20 个接口还一次性丢过去，AI 后半段就开始糊弄——字段少几个、路径拼错。10~15 个一批，宁可分三次。
坑二：必填/可选没确认。文档里没标注的，AI 会默认全必填或全可选。生成完要人工过一遍，把真正必填的字段标出来。
坑三：命名转换没显式说明。不说的话，它可能照抄后端的 snake_case。一定要在提示词里写明转换规则。
坑四：生成完直接提交。AI 生成的 API 层看起来"很整齐"，很容易让人放松警惕。但字段名错一个，联调时就是两小时的排查。抽查 3 个，永远别跳。
· · ·
小结
一句话记住这套流程：
先转表格，再喂模板，生成前对齐清单，交付前抽查三个。
接口文档这类"结构规整、模式重复、对错可验"的活，是 AI 最该接手的第一批工作。别一上来就让它写复杂业务逻辑——那样只会让你觉得"AI 也不过如此"。
从这种确定性高的活开始，你会很快建立起对它的正确预期。
· · ·
🧰 文末福利 · 领《AI 实操配置包》
关注本号，回复「实操」，领取一份持续更新的 AI 实操配置包。目前已收录：
接口文档转 API 层的完整提示词模板（就是本文 Step 2 那套） 扣子 Bot 人设模板 客服 FAQ 知识库模板 5 个前端提效 Agent 提示词
每新增一个模板都会在公众号同步，回复一次，长期获取最新版。