接口即代码：一个Skill轻松搞定类型定义、接口调用、Mock与调试

DevUI团队2026-06-02 17:29

《AI前端效率提升实践》往期精彩推荐

上期我们分享了从截图到企业级前端页面的实践，完成页面的视觉和交互实现之后，无非就是对接后端接口，实现功能逻辑了。这一部分内容虽然不用Skill，直接使用通用模型能力也能实现，但是会存在一些问题：

  • 每次生成的效果不稳定
  • 提示词需要重复写
  • 团队协作多人生成的代码风格不统一等

因此我们也封装了一个Skill，根据后端提供的接口设计，一键搞定类型定义 、接口调用 、Mock与调试 、网关配置等功能逻辑实现，并保障团队生成代码风格统一。基于 Skill 生成的完备 TS 类型定义和 Mock 数据，还有一个​更强大的隐藏价值------为后续的功能实现提供精确的功能约束，仅需少量的功能描述，Agent便能正确使用接口和对应字段完成功能逻辑的生成。

这个skill做了什么

Skill 为 Vue 前端项目提供完整的 API 集成解决方案，通过解析后端接口定义文档，自动生成类型安全的调用代码和配套开发资源。

能力 说明 输出产物
类型定义生成 根据接口 Schema 生成 TS 类型 types/*.types.ts
API 函数生成 封装类型安全的 HTTP 调用方法 service/*.ts
Mock 数据生成 生成接口模拟数据，支持独立开发 mock/*.mock.ts
接口映射配置 生成网关路由配置文件 integration.json

​核心优势​：生成的代码风格统一、类型完备，无需人工修改即可直接使用。

适用场景

以下场景建议使用本 Skill：

  • 根据接口文档（Swagger/OpenAPI）生成前端代码
  • 生成 TypeScript 类型定义和 API 调用函数
  • 生成 Mock 数据用于前端独立开发
  • 配置接口网关映射关系
  • 处理或转换 OpenAPI/Swagger 接口定义
  • 新增或修改接口定义时

4.4 如何使用

安装 Skill 后，使用以下提示词触发：

json 复制代码 
/api-use-vue 根据xxx接口定义生成调用代码

Skill 会自动识别接口定义格式并生成完整的代码产物。

4.5 设计思路

Skill 的工作流程分为五个核心步骤：

  1. 识别接口定义 - 支持 Swagger/OpenAPI YAML、JSON Schema 等格式
  2. 生成类型定义 - 读取 references/type-generation.md 规范
  3. 生成 API 调用函数 - 读取 references/api-function.md 规范
  4. 生成 Mock 数据 - 读取 references/mock-generation.md 规范（如需配置 mock 机制，读取 mock-config.md）
  5. 生成接口映射配置 - 读取 references/integration-config.md 规范（询问用户是否需要）
flowchart TD A[接口定义输入] --> B[Step 1: 识别与解析] B --> C[Step 2: 生成类型定义] C --> D[Step 3: 生成 API 调用函数] D --> E[Step 4: 生成 Mock 数据] D --> F[Step 5: 生成接口映射配置] E --> G[支持项目配置 Mock 开关] F --> H[输出网关/代理配置] C --> I[输出 .d.ts 文件] D --> J[输出 api/*.ts] E --> K[输出 mock/*.ts] F --> L[输出 config/gateway.json]

skill.md核心提示词模板：

txt 复制代码 
---
name: api-use-vue
description: 基于接口描述文档, 自动生成Vue项目的TypeScript类型定义、API调用函数、Mock数据配置和接口映射配置。新增/修改接口调用、类型定义、mock数据、接口映射配置时调用
---

## api-use-vue

本技能为Vue前端项目提供完整的API集成解决方案,通过解析后端接口定义文档,自动生成类型安全的调用代码和配套的开发资源,显著提升前后端联调效率。

### 核心能力

| 能力 | 说明 | 输出产物 |
|------|------|----------|
| 类型定义生成 | 根据接口Schema生成TypeScript类型 | `types/*.types.ts` |
| API函数生成 | 封装类型安全的HTTP调用方法 | `service/*.ts` |
| Mock数据生成 | 生成接口模拟数据,支持独立开发 | `mock/*.mock.ts` |
| 接口映射配置 | 生成网关路由配置文件 | `integration.json` |

## 触发条件

当用户提出以下需求时,应主动使用此技能:

- 根据接口文档(Swagger/OpenAPI)生成前端代码
- 生成TypeScript类型定义和API调用函数
- 生成Mock数据用于前端独立开发
- 配置接口网关映射关系
- 处理或转换OpenAPI/Swagger接口定义
- 新增/修改接口定义时

## 使用流程

### 第一步: 识别并分析接口定义
...省略

### 第二步: 生成类型定义

根据接口定义生成TypeScript类型文件:

**详细规范**: 参考 [类型生成规范](references/type-generation.md)
**输出文件**: `types/{module}.types.ts`

...省略


### 第三步: 生成API调用函数

生成类型Api调用函数:

**详细规范**: 参考 [API函数规范](references/api-function.md)


...省略


### 第五步: 生成Mock数据

如果项目还没配置mock模块，先读取[Mock服务配置](references/mock-config.md)完成mock服务的配置。

读取Mock数据规范文件，生成接口模拟数据，参考 [Mock数据规范](references/mock-generation.md)


### 第六步: 生成接口映射配置

主动询问用户是否需要生成接口映射配置:

**选项**:
- ✅ 是 - 生成integration.json配置
- ❌ 否 - 跳过此步骤

**详细规范**: 参考 [接口映射规范](references/integration-config.md)

## 最佳实践

### 1. 接口定义优先

- 确保接口文档描述完整准确

### 2. 类型安全

- 所有接口都应生成对应的TypeScript类型
- 当接口定义过于复杂时，允许使用any

### 3. Mock数据管理

- Mock数据应接近真实数据结构
- 覆盖正常、异常、边界情况
- 定期同步接口变更

### 4. 代码组织

- 按业务模块组织API文件
- 公共类型放在`types/common.types.ts`
- 注意按模块拆分文件管理，不要全部耦合一堆
- 保持文件命名一致性
- 支持增量生成,避免覆盖手动代码

## 注意事项

1. **路径映射一致性**: `targetUri`与`uri`的映射规则需与后端网关配置保持一致
2. **HTTP库兼容性**: 生成的代码基于项目现有的HTTP请求库,需确认函数签名匹配
3. **文件覆盖**: 增量生成时注意避免覆盖手动编写的业务逻辑
4. **优先按照当前项目规范生成代码**
5. 步骤中提到的参考文档，你必须读取文件内容
6. 核心路径是生成接口映射配置、接口调用函数、类型定义、mock数据，skill的每个功能都可单独使用

## 参考文档

详细的生成规范和配置说明请参考:

- [类型生成规范](references/type-generation.md) - TypeScript类型定义规范
- [API函数规范](references/api-function.md) - HTTP调用函数规范
- [Mock数据规范](references/mock-generation.md) - Mock数据生成规范
- [Mock服务配置](references/mock-config.md)
- [接口映射规范](references/integration-config.md) - 网关配置规范

4.6 实践案例：生成接口并实现功能需求

后端新增"ip白名单列表"接口，定义如下：

json 复制代码 
Get /snap-manager/v1/ip-trustlist
query传参：
{
  search: string
  limit: 10
  offset: 0
}
响应：
{
    total: number,
    list: [{
        id: string,
        ip: string,
        type: string,
        description: string,
    }]
}

运行 Skill，5 秒后自动生成：

1. TypeScript 类型定义

typescript 复制代码 
// types/ip-whitelist.types.ts
/**
 * IP白名单查询请求参数
 */
export interface GetIpWhitelistReq {
  search?: string;                 // 搜索关键词(可选)
  limit: number;                   // 每页数量
  offset: number;                  // 偏移量
}

/**
 * IP白名单项
 */
export interface IpWhitelistItem {
  id: string;                      // 白名单ID
  ip: string;                      // IP地址
  type: string;                    // 类型(公网/内网)
  description: string;             // 描述
}

/**
 * IP白名单列表响应
 */
export interface GetIpWhitelistResp {
  total: number;                   // 总数量
  list: IpWhitelistItem[];         // 白名单列表
}

2. API 调用函数

typescript 复制代码 
// service/ip-whitelist.ts
import { Observable } from 'rxjs';
import { apiService } from '@/service/common/api';
import type { GetIpWhitelistReq, GetIpWhitelistResp } from '@/types/ip-whitelist.type';

/**
 * 获取IP白名单列表
 * @param params 查询参数
 * @returns IP白名单列表响应
 */
export const getIpWhitelist = (
  params: GetIpWhitelistReq
): Observable<GetIpWhitelistResp> => {
  return apiService.get({ url: '/snap-manager/v1/ip-trustlist', params });
};

3. Mock 数据

typescript 复制代码 
// mock/ip-whitelist.mock.ts
const mockConfigs: MockMethodWithDisable = [
  {
    url: `${API_PREFIX}/snap-manager/v1/ip-trustlist`,
    method: 'get',
    disable: false,
    response: (req: any) => {
      const { search = '', limit = 10, offset = 0 } = req.query;

      // 生成模拟数据
      const allData = Mock.mock({
        'list|50': [{
          'id': '@guid',
          'ip': '@ip',
          'type|1': ['公网', '内网'],
          'description': '@csentence(5, 20)'
        }]
      }).list;

      // 搜索过滤
      let filteredData = allData;
      if (search) {
        filteredData = allData.filter(item => 
          item.ip.includes(search) || 
          item.type.includes(search) || 
          item.description.includes(search)
        );
      }

      // 分页
      const start = parseInt(offset);
      const end = start + parseInt(limit);
      const paginatedData = filteredData.slice(start, end);

      return {
        total: filteredData.length,
        list: paginatedData
      };
    }
  }
];

4. 网关配置（可选）

json 复制代码 
{
   "mode": "FULL",
   "targetService": "snapManger",
   "method": "GET",
   "endpointId": "endpointId",
   "targetUri": "/snap-manager/v1/ip-trustlist",
   "readTimout": 30,
   "targetProtocol": "https",
   "uri": "/snap-manager/v1/ip-trustlist",
   "seqId": "",
   "tiDisabled": false
}

效率对比：手动编写需要 15-20 分钟，且容易在字段拼写上出错；使用 Skill 只需 10 秒，准确无误，并且风格一致。该Skill和图像识别SKill和DevUI Skill组合使用，可快速端到端企业级前端页面开发。

组合使用实践： 《从截图到企业级前端页面：2个Skill，1次对话，10X效率开发符合设计/编码规范的页面》

总结

真正的好工具不是功能有多强，而是能否消弭掉那些重复、无脑但必须完成的工作。这个 Skill 就是为此而生。

接口定义即代码，不只是一种口号，更是前端开发应该追求的工作流。

如果你也在为接口联调、类型安全、Mock 数据烦恼，不妨试试这个 Skill。欢迎一起使用、反馈、共同完善它。

📣 加入我们

MateChat 正在快速发展，我们欢迎更多开发者加入：

如果这篇文章对你有帮助，欢迎点赞、收藏，有疑问直接在评论区聊～

感谢贡献者 @liuguolin 提供的优质好文！

相关推荐
DevUI团队1 小时前
从截图到企业级前端页面：2个Skill，1次对话，10X效率开发符合设计/编码规范的页面
前端·agent·ai编程
xiaofeichaichai1 小时前
网络与跨域
前端·网络
七牛云行业应用1 小时前
别每次重复配置了！CLAUDE.md + Hooks 让 Claude Code 开箱就记住你的规则
前端
超人气王1 小时前
新手学前端 JavaScript 类型判断：一篇彻底搞懂 typeof、instanceof 和 Object.prototype.toString
前端·javascript
数据智能老司机1 小时前
使用 LlamaIndex 构建数据驱动型应用——使用 LlamaIndex 进行索引
agent
LucianaiB1 小时前
耗时30天，DocPilot Qwen正式开源：一个免费无广的开源文档 AI 助手
前端·后端
SelectDB1 小时前
从 Machine-Readable 到 Agent-Ready：面向智能体的数据库接口演进
大数据·数据库·agent
xiaoshuaishuai82 小时前
C# AvaloniaUI 资源找不到报错
java·服务器·前端·windows·c#
格桑阿sir2 小时前
09-大模型智能体开发工程师：结构化输出与JSON Schema
ai·大模型·llm·agent·json schema·智能体·结构化
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05Codex 下载安装指南：Windows 和 macOS 官方版下载06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08CC-Switch 下载、安装与使用配置指南【2026.5.29】09Codex 接入 DeepSeek API 完整配置文档10几个好用的ip纯净度检测网站