请提供原始标题。

上期我们从截图聊到企业级前端页面的落地实践，页面视觉与交互流程搞定后，下一步便是对接后端接口，串联起完整的业务逻辑。坦白说，直接用通用模型也能做，但实际体验过的人都清楚——生成结果飘忽不定、提示词需要反复调整、团队不同成员产出的代码风格各行其道。因此，我们专门封装了一个Skill来收敛这些变量。

这个Skill的核心逻辑很清晰：后端接口设计一旦定型，它就能一站式完成类型定义、接口调用、Mock与调试、网关配置，确保团队产出的代码风格高度一致。还有一个容易被低估但价值极高的点——Skill生成的完备TS类型定义与Mock数据，实际上为后续功能实现提供了精确的约束条件。这意味着，Agent只需少量功能描述，就能精准调用接口和字段，完成功能逻辑的自动化生成。

这个Skill到底解决了什么问题？

简而言之，它为Vue前端项目提供了一套开箱即用的API集成解决方案。拿到后端接口定义文档后，自动生成类型安全的调用代码与配套开发资源，具体产出如下：

关键点在于：生成的代码风格统一、类型完备，拿过来就能直接使用，几乎不需要人工二次调整。

什么时候该用这个Skill？

遇到以下任一场景，直接使用：

• 需要基于Swagger或OpenAPI接口文档，生成前端调用代码
• 需要自动生成TypeScript类型定义与API调用函数
• 前端想独立开发，但后端接口尚未就绪，需要Mock数据
• 需要配置接口网关的映射关系
• 需要对OpenAPI/Swagger接口定义进行解析或转换
• 新增或修改接口定义时，拒绝重复的体力劳动

4.4 怎么用？

安装好Skill后，触发方式非常直接：

/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 规范执行（此处会主动确认用户是否需要生成）

Skill的核心提示词模板如下：

---
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白名单列表”接口，定义如下：

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类型定义

// 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调用函数

// 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数据

// 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. 网关配置（可选）

{
   "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、DevUI Skill组合使用，实现企业级前端页面的端到端快速开发。

总结

真正好用的工具，不在于功能花哨，而在于能否消灭那些重复、无脑却不得不做的工作。这个Skill的定位正是如此。

接口定义即代码——这不只是一个口号，而是前端开发应该追求的工作流。如果你仍在为接口联调、类型安全、Mock数据这些事头疼，值得一试。通过实际使用和反馈，一起让这套方案变得更完善。