---

name: prototype-interaction description: 定义和记录原型交互、过渡效果和热点区域 allowed-tools:

• Read
• Write
• Edit
• Bash
• Glob
• Grep

---

原型交互技能

目的

定义原型交互，映射点击/轻触操作，配置过渡动画，并为设计交接生成交互规范文档。

能力

• 将点击/轻触交互映射到目标页面
• 定义过渡动画类型和时序
• 设置交互式热点区域
• 生成交互规范文档
• 导出为Figma原型格式
• 创建交互矩阵

目标流程

• hifi-prototyping.js
• wireframing.js (interactivePrototypeTask)

集成点

• Figma Prototype API
• InVision API
• ProtoPie 规范

输入模式

{
  "type": "object",
  "properties": {
    "screens": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": { "type": "string" },
          "name": { "type": "string" },
          "imagePath": { "type": "string" }
        }
      }
    },
    "interactions": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "sourceScreen": { "type": "string" },
          "hotspot": {
            "type": "object",
            "properties": {
              "x": { "type": "number" },
              "y": { "type": "number" },
              "width": { "type": "number" },
              "height": { "type": "number" }
            }
          },
          "trigger": {
            "type": "string",
            "enum": ["tap", "click", "hover", "drag", "swipe"]
          },
          "targetScreen": { "type": "string" },
          "transition": {
            "type": "object",
            "properties": {
              "type": { "type": "string" },
              "duration": { "type": "number" },
              "easing": { "type": "string" }
            }
          }
        }
      }
    },
    "outputFormat": {
      "type": "string",
      "enum": ["json", "figma", "invision", "markdown"],
      "default": "json"
    }
  },
  "required": ["screens", "interactions"]
}

输出模式

{
  "type": "object",
  "properties": {
    "interactionSpec": {
      "type": "object",
      "description": "完整的交互规范"
    },
    "interactionMatrix": {
      "type": "array",
      "description": "页面到页面的交互矩阵"
    },
    "transitionGuide": {
      "type": "object",
      "description": "过渡动画时序和缓动效果指南"
    },
    "hotspotOverlays": {
      "type": "array",
      "description": "可视化热点区域叠加层数据"
    },
    "exportPath": {
      "type": "string",
      "description": "导出规范文件的路径"
    }
  }
}

使用示例

const result = await skill.execute({
  screens: [
    { id: 'home', name: '首页', imagePath: './screens/home.png' },
    { id: 'detail', name: '详情页', imagePath: './screens/detail.png' }
  ],
  interactions: [
    {
      sourceScreen: 'home',
      hotspot: { x: 100, y: 200, width: 150, height: 50 },
      trigger: 'tap',
      targetScreen: 'detail',
      transition: { type: 'slide-left', duration: 300, easing: 'ease-out' }
    }
  ],
  outputFormat: 'markdown'
});