prototype-scan

name: prototype-scan description: 'Use when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec JSON for Vue 3 + Naive UI development. Triggers on: prototype analysis, axure scan, page inventory, 原型解析, 页面清单, axure转vue, 详设文档, design doc.'

Skill: 原型解析（prototype-scan）

将 Axure 导出的 HTML 原型包 或 详细设计文档（MD/Word/表格） 解析为结构化的 page-spec JSON 页面清单，作为后续接口约定和代码生成的输入。

两种输入，同一输出：输出格式完全相同（page-spec JSON），消费方（page-codegen）无需感知来源。

触发

• 模式 A（Axure）：提供 Axure HTML 文件包目录，AI 全量扫描 HTML
• 模式 B（详设文档）：提供 MD/Word/表格格式的详细设计文档，AI 解析结构化字段

步骤

1. 全量扫描 HTML（模式 A）

遍历所有 .html 文件，提取：

2. 解析详设文档（模式 B）

从 MD/Word/表格中提取：

• 每个页面的功能描述
• 字段列表（中文名 + 类型 + 必填 + 校验规则）
• 接口 URL 约定
• 按钮/操作定义
• 业务流程说明

3. 交互模式分类

4. 字段提取

对每个页面提取 3 类字段（字段名建议 camelCase）：

查询字段：

中文名 | 建议字段名(camelCase) | 组件类型 | 备注

组件类型对照（C_Form options 中使用）：

表格列：

列名(中文) | 字段名(camelCase) | 宽度建议 | 是否可排序 | 渲染方式(tag/text/custom)

表单字段（弹窗/独立页面）：

中文名 | 字段名(camelCase) | 类型 | 是否必填 | 校验规则 | 组件类型

5. 按钮提取

工具栏按钮（C_ActionBar）：

按钮标签 | 类型(primary/default/error/warning) | 图标 | 权限码(可选)

操作列按钮：

按钮标签 | 类型 | 条件显示(show函数描述) | 权限码(可选)

⚠️ 注意事项：

• Axure HTML DOM 顺序 ≠ 视觉顺序（绝对定位），以截图/实际渲染为准
• 按钮颜色必须看原型实际颜色：primary=蓝, error=红, warning=橙
• "新增"类按钮永远排 toolbarActions 第一个
• 操作列按钮严格与原型一一对应，不可自编

6. 组件匹配

对照 Robot Admin 已有组件：

输出格式：page-spec JSON

{
  "module": "模块中文名",
  "pages": [
    {
      "name": "kebab-case-页面名",
      "title": "页面中文标题",
      "path": "src/views/[domain]/[module]/[kebab-case-name]/",
      "mode": "LIST | MASTER_DETAIL | TREE_LIST | FORM_PAGE | FORM_MODAL | DETAIL_TABS | DASHBOARD | COMPOSITE",
      "routeMeta": {
        "title": "菜单中文名",
        "icon": "mdi:icon-name",
        "keepAlive": true
      },
      "query": [
        {
          "label": "字段中文名",
          "prop": "fieldName",
          "type": "input | select | date | daterange | ...",
          "options": "选项数据说明（如有）",
          "rules": "校验规则说明（如有）"
        }
      ],
      "columns": [
        {
          "title": "列标题",
          "key": "fieldName",
          "width": 120,
          "sortable": true,
          "render": "tag | text | custom",
          "tagMap": { "值": "success | warning | error | info" }
        }
      ],
      "toolbar": [
        {
          "label": "新增",
          "type": "primary",
          "icon": "mdi:plus",
          "permission": "sys:xxx:add"
        }
      ],
      "operations": [
        {
          "label": "编辑",
          "type": "primary",
          "show": "条件描述",
          "permission": "sys:xxx:edit"
        }
      ],
      "form": [
        {
          "label": "字段中文名",
          "prop": "fieldName",
          "type": "input | select | ...",
          "required": true,
          "rules": "PRESET_RULES.xxx"
        }
      ],
      "subTables": [
        {
          "title": "子表名称",
          "apiSuffix": "queryXxxList",
          "columns": []
        }
      ],
      "notes": "业务备注/特殊逻辑说明"
    }
  ]
}

输出后流转

page-spec JSON
  ├─→ api-contract SKILL → 生成 api.md
  ├─→ page-codegen SKILL → 生成 index.vue + data.ts + index.scss
  └─→ route-sync SKILL   → 注册到 dynamicRouter.json

注意：page-spec 是后续所有 Skill 的唯一输入源，确保数据准确完整。