SuperAPI AI 工具集

hyperframes-figma

设计与创作

查看项目

更新于 10-16 05:15

技能介绍

用途

HyperFrames Figma 技能用于把用户的 Figma 工作内容导入 HyperFrames 合成,按能力分为五个阶段(设计规范 §2):静态资源、品牌令牌/样式、组件→HTML、动效→GSAP、着色器。REST 接口在可用的地方优先使用(适合批量、无头运行);兼容的 Figma connector 对动效和着色器数据是可选的,没有时需请求原生导出。所有路径都会把资源本地冻结,确保渲染结果稳定可复现。

主要能力与使用方式

凭据预检:首次调用 CLI 前检查 FIGMA_TOKEN 是否存在(shell 环境变量或项目 .env 自动加载)。令牌只需只读权限:File content: Read-only + File metadata: Read-only;若在非企业版运行 tokens,还需 Library content: Read-only;品牌变量可选 Variables: Read-only(仅企业版)。不应要求用户把令牌粘贴到对话中。

阶段路由:解析 Figma 链接(parseFigmaRef,支持 URL、fileKey:nodeId、裸 fileKey),按意图路由:

  • 资源 → hyperframes figma asset '<url-or-fileKey:nodeId>',支持 --format、--scale、--description、--entity,可一次批量传多个同文件节点。
  • 令牌 → hyperframes figma tokens <fileKey>,导入为合成品牌变量、figma-tokens.json sidecar 和绑定索引。
  • 组件 → hyperframes figma component '<url-or-fileKey:nodeId>',节点树转可编辑 HTML,保持精确几何并从 Phase-1 自动栅格化向量。
  • 动效 → 需兼容 connector,将 MotionDocs 转为 GSAP 时间轴,并用 verify-motion.mjs 验证(低于 15dB 的 min motion-PSNR 判定失败)。
  • 着色器 → 多为手动路径,Figma connector 渲染不执行着色器,需用户原生导出。

Storyboard 重建:一节场景帧被当作关键帧而非幻灯片——对同一元素在不同帧的状态进行补间,而非逐帧播放静图。场景顺序按 x 坐标排序,相邻帧按名称优先、几何相似次之匹配为元素链,每链导出单个资源。导演注释为运动意图,映射为过渡动词。若帧描述的是一套产品 UI 的连续状态,则重建实时 DOM 而非元素链。

错误处理:BAD_TOKEN(401) 需重新生成令牌;FORBIDDEN(403) 消息会指出缺失的具体 scope;REQUIRES_ENTERPRISE(403) 非失败,样式回退已运行;RATE_LIMITED(429) 客户端已按 Retry-After 退避重试。

适用场景

将 Figma 设计资产、品牌令牌、组件、动效和 storyboard 帧导入 HyperFrames 合成,用于构建可复现的渲染和动画,尤其适合需要批量导出、品牌变量刷新传播、以及把分镜还原为真实元素时间轴的场景。

限制

动效与着色器阶段需要兼容的 Figma connector 及单独授权,否则需原生导出;变量为上游企业版限制,非企业版降级为已发布样式元数据;着色器无法通过 connector 像素捕获;批量导出大场景帧超过约 12 个 id 会渲染超时,需分块至约 4 个。部分细节(如具体收费、价格、平台信息)暂未提供。