跳到主要内容

从已有代码自动生成 AI 技能

场景​

你手上有一个写了一半或已经上线的小程序，现在想给它加上 AI 能力。用 mp-skills create --mode agent 让 AI 扫描你的源码，自动分析业务逻辑并生成符合 wx.modelContext 规范的 SKILL 分包，无需从零手写。

与手写方式的区别：

对比自动生成（本文）手写（Recipe 2）
适用场景已有项目代码，快速接入从零开发，完全掌控
上手速度快 — 描述场景即可慢 — 需理解完整规范
代码控制力AI 生成，需人工 review逐行自己写
产物质量依赖 LLM + 模板由开发者经验决定

核心原则：AI 生成不代表免检 — 生成后必须做 validate 校验，代码需要人工过一遍。

前置条件​

  • 微信开发者工具 Nightly 版 已安装
  • 小程序 AppID 已获取且 AI 开发模式已开通
  • Node.js ≥ 18
  • 有一个带业务代码的小程序源码目录（pages/、api/ 目录结构完整）
  • npx mp-skills --version 可正常输出版本号
  • npx skills --version 可正常输出版本号
  • 已配置 LLM 凭证（create --mode agent 需要）：
export WXA_SKILL_EVAL_LLM_BASE_URL=<your-endpoint>
export WXA_SKILL_EVAL_LLM_API_KEY=<your-key>
export WXA_SKILL_EVAL_LLM_MODEL=<model-name>

凭证会写入项目 .env 文件。支持的提供方见 tools.md。

实现步骤​

第 1 步：安装工具 SKILL​

工具 SKILL 是 AI coding 工具的引导指令，让 AI 知道如何分析源码、生成 SKILL 代码。

# 在项目根目录执行
npx skills add TencentCloudBase/mp-skills -s wxa-skills-generate

预期输出：

* 添加 Skill <wxa-skills-generate> ...
[OK] 安装完成

验证安装：

npx skills list | grep wxa-skills-generate

第 2 步：在 AI IDE 中描述业务场景​

在 AI IDE（如 CodeBuddy、Cursor）中打开你的小程序项目，让 AI 读取已安装的工具 SKILL，然后直接描述需求。

示例指令：

帮我将小程序中的「商品检索」功能抽取为 AI SKILL。

业务描述：用户输入关键词搜索商品，按分类筛选，查看商品详情和库存状态。

关键页面：pages/search/、pages/product-detail/

关键接口：/api/product/search、/api/product/detail

AI 读取 wxa-skills-generate 的 SKILL.md 后会按照预定义的工作流执行：

  1. 阶段 1 — 项目扫描：读取 app.json、project.config.json，检查 AI 开发模式配置是否完备
  2. 阶段 2 — 鉴权扫描：对照 JSAPI 白名单，确认能力可迁移
  3. 阶段 3 — 源码分析：扫描 pages/search/、pages/product-detail/ 等目录，提取网络接口（wx.request URL、参数、响应结构）和 wx API 调用
  4. 阶段 4 — 原子接口设计：将业务逻辑拆解为独立的原子接口（searchProducts、getProductDetail、getCategories）
  5. 阶段 5 — 代码生成：生成 SKILL 分包完整代码
  6. 阶段 6 — 配置集成：更新 app.json、project.config.json

第 3 步：人工确认生成结果​

AI 生成完成后，检查产物结构：

miniprogram/skills/search-skill/
├── SKILL.md          # 技能描述 — AI 引擎读此文件了解功能
├── mcp.json          # 原子接口描述 — 声明可用接口和参数
├── index.js          # 入口 — 注册所有原子接口
├── apis/
│   ├── searchProducts.js    # 商品搜索
│   ├── getProductDetail.js  # 商品详情
│   └── getCategories.js     # 分类列表
├── utils/
│   └── util.js       # 共享工具（网络请求、登录态等）
└── components/
    ├── productList/  # 列表展示组件
    └── productCard/  # 商品卡片组件

重点检查项：

  • mcp.json 中的接口定义是否完整（参数、返回值类型）
  • index.js 的接口注册是否与 mcp.json 一一对应
  • 原子接口实现中的 wx.request URL 是否正确
  • utils/util.js 中 baseUrl、env 等配置是否硬编码正确

第 4 步：validate 校验​

AI 生成的代码需要 validate 做静态检测：

npx mp-skills validate

预期输出：

[OK] 项目配置检查通过
[OK] 接口定义与实现一致
[OK] 原子组件定义完整

如果校验失败：

  • 修复报错后重新运行 validate
  • 或者把错误信息反馈给 AI IDE，让 AI 迭代修复（使用 --query 参数或直接在对话中描述）

第 5 步：开发者工具中验证​

# macOS
/Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project /your/project/path

# Windows
"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "D:\...\project"

在开发者工具中：

  1. 基础库版本 ≥ 3.16.1
  2. 切换到「小程序 AI 编译」模式
  3. 在 SKILL 列表中找到生成的 skill，逐个测试原子接口

第 6 步（可选）：执行质量评估​

对生产环境级别的 SKILL，建议运行端到端评估：

npx mp-skills eval -s search-skill -c 5

这会生成 5 个测试用例，自动执行并给出质量报告。

验证清单​

  • miniprogram/skills/<name>/ 目录结构完整
  • npx mp-skills validate 全部通过
  • 开发者工具中原子接口可正常调用
  • mcp.json 接口定义与 apis/ 实现一一对应
  • 人工 review 确认代码无逻辑错误

常见问题​

create --mode agent 需要哪些 LLM 凭证？

需要配置 WXA_SKILL_EVAL_LLM_BASE_URL、WXA_SKILL_EVAL_LLM_API_KEY、WXA_SKILL_EVAL_LLM_MODEL 三个环境变量。详见 tools.md 的 LLM 凭证配置章节。

AI 生成的代码能用吗？

能，但有前提：

  • 源码结构清晰、命名规范时生成质量高
  • 压缩/混淆代码质量较差，建议先反混淆
  • 必须经过 validate 校验
  • 建议人工 review mcp.json 和 index.js 等核心文件

生成后发现少了一个接口怎么办？

两种方式：

  1. 重新在 AI IDE 中描述补充场景，让 AI 迭代生成
  2. 手动参考已有接口实现添加，参考 手写 SKILL 教程

安装工具 SKILL 报错？

确认 npx skills --version 正常。工具 SKILL 使用 skills CLI 安装，不是 mp-skills。

参考​