xiaoniuge36/codegen-engine

AI CodeGen Engine MCP Skill

使用 codegen-engine MCP服务器进行智能前端代码生成，支持React/Vue2/Vue3技术栈。

核心能力

| 能力 | 说明 | |------|------| | 🎯 智能模板匹配 | 16个内置模板，自动识别需求匹配最佳模板 | | 📚 组件库知识 | Ant Design Pro、Element Plus、Element UI、Vant等 | | 📝 示例代码 | 每个模板都有完整示例（hooks + 组件 + 样式） | | ✅ 规范内置 | ai-fe-code-std.md 已集成，无需手动添加 | | 🔍 项目分析 | 自动检测技术栈、全局类型、代码风格 |

---

Skill 与 MCP 的关系

什么是 Skill？

Skill 是一个指导文档，用于告诉 AI 如何完成特定类型的任务。Skill 本身不直接调用 MCP，而是指导 AI 如何调用 MCP 工具。

工作流程

用户输入 → AI 匹配 Skill description → 自动读取 SKILL.md → 按照指导调用 MCP 工具

触发机制

Skill 的 description 字段定义了何时被触发：

---
name: codegen-engine
description: 使用AI代码生成引擎MCP工具进行智能前端代码生成。当用户需要生成页面代码、创建组件、做列表页/表单页/详情页时使用此skill。
---

当用户说 "做一个列表页" 或 "生成代码" 时，AI 会：

1. 识别关键词匹配 skill description
2. 自动读取此 SKILL.md 文件
3. 按照文档中的指导使用 CallMcpTool 调用 MCP 工具

MCP 调用方式

AI 读取 Skill 后，会使用以下方式调用 MCP：

CallMcpTool({
  server: "codegen-engine",    // MCP 服务器名称（需在 Cursor 中配置）
  toolName: "quick_generate",   // 工具名称
  arguments: {                  // 参数
    text: "做一个员工列表页",
    projectPath: "D:/project/src/App.tsx"
  }
})

前置条件

要让 Skill 正常触发 MCP 调用，需要：

| 条件 | 说明 | |------|------| | Skill 文件 | .cursor/skills/codegen-engine/SKILL.md 存在 | | MCP 服务器 | codegen-engine 已在 Cursor MCP 设置中配置 | | 服务运行 | MCP 服务已启动（npm run start 或 npm run start:stdio） | | 名称匹配 | CallMcpTool 中的 server 与 MCP 配置名称一致 |

MCP 服务器配置示例

在 Cursor 设置中配置 MCP 服务器：

STDIO 模式（推荐用于 AI IDE 集成）：

{
  "mcpServers": {
    "codegen-engine": {
      "command": "node",
      "args": ["D:/path/to/codegen-engine/src/server.js"],
      "env": {}
    }
  }
}

HTTP 模式（推荐用于调试）：

{
  "mcpServers": {
    "codegen-engine": {
      "url": "http://127.0.0.1:7331/mcp"
    }
  }
}

完整触发流程示例

用户: "帮我做一个员工管理列表页"
                ↓
AI 识别关键词 "列表页" 匹配 skill description
                ↓
AI 自动读取 .cursor/skills/codegen-engine/SKILL.md
                ↓
按照 SKILL.md 指导执行：
  1. 调用 quick_generate 获取代码生成上下文
  2. 根据返回的模板和示例生成代码（先 hooks 后组件）
  3. 调用 check_code_compliance 检查代码规范

---

核心工具列表

⭐ 必须掌握的工具（按调用顺序）

| 步骤 | 工具名 | 功能 | 关键参数 | |------|--------|------|----------| | 1️⃣ | quick_generate | 【首选入口】一键快速生成 | text, projectPath | | 2️⃣ | (根据返回结果生成代码) | - | - | | 3️⃣ | check_code_compliance | 【必须调用】检查代码规范 | generatedFiles |

📦 模板工具

| 工具名 | 功能 | 关键参数 | |--------|------|----------| | list_templates | 列出所有可用模板 | 无 | | get_template | 获取指定模板详情 | id | | match_template | 智能匹配模板 | text, topK | | smart_match_template | 智能匹配（含技术栈+兜底） | text, projectPath | | get_code_examples | 获取模板示例代码 | templateId |

🔍 项目分析工具

| 工具名 | 功能 | 关键参数 | |--------|------|----------| | detect_tech_stack | 检测项目技术栈 | projectPath | | analyze_project | 分析项目结构和代码风格 | projectPath, moduleName | | check_global_types | 检查全局类型声明 | projectPath | | find_similar_components | 查找项目中相似组件 | searchText, projectPath |

📚 知识库工具

| 工具名 | 功能 | 关键参数 | |--------|------|----------| | get_spec_content | 获取规范文档内容 | section, projectPath | | get_component_knowledge | 获取组件库知识图谱 | scope | | parse_api_types | 解析接口类型文件 | filePath |

✅ 验证工具

| 工具名 | 功能 | 关键参数 | |--------|------|----------| | check_code_compliance | 检查代码规范符合性 | generatedFiles | | validate_code | TSC + ESLint 一键检查 | projectPath, files |

---

关键工作流程

标准代码生成流程

1. quick_generate(text, projectPath)    → 获取完整上下文
2. 根据返回的模板和示例生成代码        → 严格遵守规则
3. check_code_compliance(generatedFiles) → 检查代码规范
4. (可选) validate_code(projectPath)    → TSC/ESLint验证

核心规则约束

生成代码时必须遵守：

| 规则 | 说明 | |------|------| | hooks优先 | 必须先生成 hooks/composables 文件，再生成组件文件 | | 接口为准 | 接口数据结构以文件为主，不要推测字段 | | 全局类型 | check_global_types 返回的类型【绝对不要 import】 | | 禁止mock | 禁止生成任何 mock 数据或假数据 |

技术栈适配

| 技术栈 | UI库 | 模板前缀 | |--------|------|----------| | React | Ant Design/Ant Design Pro | react-* | | Vue2 | Element UI | vue2-* | | Vue3 | Element Plus | vue3-* |

---

常用场景

场景1：生成标准列表页（CRUD）

// Step 1: 调用 quick_generate
CallMcpTool({
  server: "codegen-engine",
  toolName: "quick_generate",
  arguments: {
    text: "做一个员工列表页，支持姓名搜索、新增、编辑、删除",
    projectPath: "D:/project/src/App.tsx"
  }
})

// Step 2: 根据返回的 codeExamples 和 templateMatch 生成代码
// - 先生成 hooks/useTableData.ts
// - 再生成 index.tsx 组件
// - 可选生成 types.ts

// Step 3: 检查代码规范
CallMcpTool({
  server: "codegen-engine",
  toolName: "check_code_compliance",
  arguments: {
    generatedFiles: [
      "src/pages/employee/hooks/useTableData.ts",
      "src/pages/employee/index.tsx",
      "src/pages/employee/types.ts"
    ]
  }
})

场景2：生成弹窗表单

// Step 1: 调用 quick_generate
CallMcpTool({
  server: "codegen-engine",
  toolName: "quick_generate",
  arguments: {
    text: "做一个新增/编辑员工的弹窗表单",
    projectPath: "D:/project/src/pages/employee/index.tsx"
  }
})

// Step 2: 根据返回结果生成 EditModal 组件

// Step 3: 检查代码规范
CallMcpTool({
  server: "codegen-engine",
  toolName: "check_code_compliance",
  arguments: {
    generatedFiles: ["src/pages/employee/components/EditModal.tsx"]
  }
})

场景3：生成详情页

// Step 1: 明确指定模板
CallMcpTool({
  server: "codegen-engine",
  toolName: "quick_generate",
  arguments: {
    text: "react-nonstandard-detail 做一个出差申请单详情页",
    projectPath: "D:/project/src/App.tsx"
  }
})

// Step 2: 根据返回结果生成代码
// - 先生成 hooks/useDetailData.ts
// - 再生成 index.tsx
// - 生成 index.less 样式

// Step 3: 检查代码规范

场景4：生成文件上传组件

// Step 1: 调用 quick_generate
CallMcpTool({
  server: "codegen-engine",
  toolName: "quick_generate",
  arguments: {
    text: "做一个文件上传组件，支持图片预览和多文件上传",
    projectPath: "D:/project/src/App.tsx"
  }
})

// Step 2: 根据返回的 react-pc-file-upload 模板生成代码

场景5：大数据渲染（虚拟列表 + 分页下拉）

// Step 1: 调用 quick_generate
CallMcpTool({
  server: "codegen-engine",
  toolName: "quick_generate",
  arguments: {
    text: "做一个属性值管理页，8000+条数据虚拟滚动，上级分类用分页下拉选择",
    projectPath: "D:/project/src/App.tsx"
  }
})

// Step 2: 根据返回的模板生成代码
// - 虚拟列表表格（react-window / el-table-v2 / vue-virtual-scroller）
// - 分页下拉组件（远程搜索 + 编辑回显）
// - hooks/composables 数据处理

// Step 3: 检查代码规范
CallMcpTool({
  server: "codegen-engine",
  toolName: "check_code_compliance",
  arguments: {
    generatedFiles: [
      "src/pages/attribute/hooks/usePaginatedSelect.ts",
      "src/pages/attribute/components/VirtualTable.tsx",
      "src/pages/attribute/components/PaginatedSelect.tsx",
      "src/pages/attribute/index.tsx"
    ]
  }
})

大数据渲染关键点：

• 虚拟列表必须设置固定行高
• 分页下拉需实现选中项合并逻辑（编辑回显）
• 搜索必须防抖处理（300-500ms）

---

分步调用流程（高级用法）

当需要更精细控制时，可以分步调用：

1. detect_tech_stack(projectPath)           → 获取技术栈信息
2. check_global_types(projectPath)          → 获取全局类型列表
3. smart_match_template(text, projectPath)  → 智能匹配模板
4. get_code_examples(templateId)            → 获取示例代码
5. get_spec_content(section)                → 获取规范内容
6. 根据上下文生成代码
7. check_code_compliance(generatedFiles)    → 检查代码规范
8. validate_code(projectPath, files)        → TSC/ESLint验证

---

可用模板列表

React 模板

| 模板ID | 名称 | 适用场景 | |--------|------|----------| | react-standard-list-crud | 标准列表页 | 列表+搜索+CRUD弹窗 | | react-standard-modal-form | 标准弹窗表单 | 新增/编辑弹窗 | | react-standard-form-page | 标准表单页 | 独立表单页面 | | react-drawer-form | 抽屉表单 | 侧边抽屉表单 | | react-drawer-detail | 抽屉详情 | 侧边抽屉详情 | | react-nonstandard-detail | 非标详情页 | 复杂详情页面 | | react-import-list-modal | 导入列表弹窗 | 数据导入选择 | | react-pc-file-upload | PC文件上传 | 文件上传组件 | | react-batch-schema-form | 批量Schema表单 | 动态表单 | | react-virtual-paginated-select | 大数据渲染下拉 | 虚拟列表+分页下拉+编辑回显 |

Vue2 模板

| 模板ID | 名称 | 适用场景 | |--------|------|----------| | vue2-standard-list-crud | 标准列表页 | 列表+搜索+CRUD弹窗 | | vue2-pc-file-upload | PC文件上传 | 文件上传组件 | | vue2-h5-file-upload | H5文件上传 | 移动端文件上传 | | vue2-virtual-paginated-select | 大数据渲染下拉 | 虚拟列表+分页下拉+编辑回显 |

Vue3 模板

| 模板ID | 名称 | 适用场景 | |--------|------|----------| | vue3-standard-list-crud | 标准列表页 | 列表+搜索+CRUD弹窗 | | vue3-virtual-paginated-select | 大数据渲染下拉 | 虚拟列表+分页下拉+编辑回显 |

---

注意事项

关键约束

1. 必须先调用 quick_generate - 获取完整上下文后再生成代码
2. 必须调用 check_code_compliance - 生成代码后必须检查规范
3. 全局类型不要 import - check_global_types 返回的类型是全局声明的
4. hooks 优先生成 - 先生成数据处理逻辑，再生成 UI 组件
5. 禁止 mock 数据 - 不要生成任何假数据或示例数据

文件生成顺序

正确顺序：
1. hooks/useTableData.ts    ← 先生成数据处理
2. types.ts                 ← 再生成类型定义
3. index.tsx                ← 最后生成组件

错误顺序：
1. index.tsx                ← 不要先生成组件
2. hooks/useTableData.ts

projectPath 参数

• 传入 IDE 当前打开的文件路径
• 工具会自动向上查找项目根目录
• 支持任意深度的文件路径

---

工具调用示例

使用 CallMcpTool 调用

// 一键快速生成
CallMcpTool({
  server: "codegen-engine",
  toolName: "quick_generate",
  arguments: {
    text: "做一个用户管理列表页",
    projectPath: "D:/project/src/pages/user/index.tsx"
  }
})

// 检测技术栈
CallMcpTool({
  server: "codegen-engine",
  toolName: "detect_tech_stack",
  arguments: {
    projectPath: "D:/project/package.json"
  }
})

// 检查全局类型
CallMcpTool({
  server: "codegen-engine",
  toolName: "check_global_types",
  arguments: {
    projectPath: "D:/project"
  }
})

// 获取模板示例代码
CallMcpTool({
  server: "codegen-engine",
  toolName: "get_code_examples",
  arguments: {
    templateId: "react-standard-list-crud"
  }
})

// 检查代码规范
CallMcpTool({
  server: "codegen-engine",
  toolName: "check_code_compliance",
  arguments: {
    generatedFiles: [
      "src/pages/user/hooks/useTableData.ts",
      "src/pages/user/index.tsx"
    ]
  }
})

// 代码验证（TSC + ESLint）
CallMcpTool({
  server: "codegen-engine",
  toolName: "validate_code",
  arguments: {
    projectPath: "D:/project",
    files: ["src/pages/user/index.tsx"]
  }
})

---

完整代码生成模板

任务：生成[页面类型]

步骤：
1. [ ] 调用 quick_generate 获取上下文
2. [ ] 分析返回的 templateMatch 和 codeExamples
3. [ ] 检查 globalTypes.recommendation（避免重复import）
4. [ ] 生成 hooks/composables 文件
5. [ ] 生成 types.ts 类型文件（如需要）
6. [ ] 生成主组件文件 index.tsx/vue
7. [ ] 生成样式文件（如需要）
8. [ ] 调用 check_code_compliance 检查规范
9. [ ] (可选) 调用 validate_code 进行 TSC/ESLint 验证

---

返回数据结构说明

quick_generate 返回结构

{
  "techStack": {
    "detected": true,
    "techStack": "react",
    "framework": "umi",
    "uiLibrary": "antd",
    "isTypeScript": true
  },
  "globalTypes": {
    "found": true,
    "globalInterfaces": ["UserInfo", "TableItem"],
    "recommendation": "⚠️ 这些类型【绝对不要 import】"
  },
  "templateMatch": {
    "chosen": {
      "id": "react-standard-list-crud",
      "name": "React 标准列表页",
      "score": 18
    }
  },
  "codeExamples": {
    "hooks.example.ts": "...",
    "index.example.tsx": "...",
    "components/EditModal.example.tsx": "..."
  },
  "componentKnowledge": {
    "ant-design-pro": "..."
  },
  "criticalReminders": [
    "🚨 全局类型警告: UserInfo, TableItem 【绝对不要 import】",
    "📋 必须先生成 hooks 文件，再生成组件文件"
  ],
  "ruleEnforcement": {
    "coreRules": [
      "⭐ 【必须】先生成 hooks 文件，再生成组件文件",
      "⭐ 【禁止】生成任何 mock 数据"
    ]
  }
}

check_code_compliance 返回结构

{
  "summary": "✅ 所有检查通过",
  "passed": [
    { "rule": "hooks文件检查", "pass": true, "message": "✅ hooks文件已生成" },
    { "rule": "文件顺序检查", "pass": true, "message": "✅ 文件生成顺序正确" }
  ],
  "issues": [],
  "recommendation": "代码已准备就绪，可直接使用"
}

---

故障排查

| 问题 | 原因 | 解决方案 | |------|------|----------| | 模板匹配不准 | 技术栈未检测 | 确保传入正确的 projectPath | | 全局类型报错 | 重复 import | 调用 check_global_types 获取全局类型列表 | | hooks 缺失 | 生成顺序错误 | 先生成 hooks，再生成组件 | | 示例代码为空 | 模板ID错误 | 调用 list_templates 获取正确的模板ID | | 类型错误 | 接口字段推测 | 调用 parse_api_types 解析接口文件 |

---

触发关键词

当用户输入包含以下关键词时，直接调用 quick_generate：

| 类型 | 关键词示例 | |------|-----------| | 代码生成 | "生成代码"、"写代码"、"帮我写" | | 页面创建 | "做一个页面"、"创建页面"、"列表页"、"详情页" | | 组件开发 | "创建组件"、"做个组件"、"弹窗"、"表单" | | CRUD操作 | "增删改查"、"CRUD"、"新增编辑" | | 大数据渲染 | "虚拟列表"、"虚拟滚动"、"分页下拉"、"大数据量"、"8000条"、"万级" |

---

更多资源

• 需要完整工具参数，请参考 tools-reference.md
• 需要使用示例，请参考 examples.md
• 需要快速了解，请参考 README.md