SuperAPI AI 工具集

figma-code-workflows

设计与创作

查看项目

更新于 10-16 14:19

技能介绍

用途

Figma Code Workflows 用于将本地 HTML 或项目文件导入或上传到 Figma,并生成用户指定的输出形式:可编辑的 Design 图层(editable Design frames)、可运行的 Code Layer,或者独立的 Code(也称 Make)。该技能仅在用户明确要求 Figma 输出(独立 Code/Make、可运行 Code Layer、可编辑 Design 图层),或提供了作为目标的 Figma 文件 key/链接时使用。泛泛的“做一个代码项目”或“创建一个代码组件”请求,以及仅出现 Figma Code/Make 名称,都不构成明确的输出意图。若输出意图不清晰,应先询问用户想要本地代码还是 Figma 输出,然后等待答复再开始。

主要能力

  • 根据用户请求的输出类型,选择并加载对应的技能。
  • 支持可编辑 Design 图层输出:运行中的应用使用 figma-generate-design,静态 HTML 使用 html_to_figma。
  • 支持可运行输出:调用 send_code_to_figma 处理运行应用或静态 HTML。
  • 通过 whoami 检查 code_layers_enabled,决定是否可用 Design Code Layer。
  • 在无明确目标时,依据屏幕数量启发式选择:少于 10 或未知使用 Code Layer;10 及以上使用 standalone。
  • 使用 create_new_file 按所选目标类型和方案创建新文件。
  • 遵循导入响应中的准备、验证、上传、待处理导入与恢复步骤。

使用方式

  1. 选择输出和目标:识别用户意图的输出,按表格加载相应技能;若输出不清晰先询问。对于可运行目标,先调用 whoami,仅当 whoami.code_layers_enabled 为 true 时选择或导入 Design Code Layer,否则使用 standalone Code/Make,或说明限制并在更改明确给定的 Design 目标前询问。明确指定的 code-layer 或 standalone 请求优先于屏幕数量启发式。对于可运行代码并带 Design 链接,使用 Code Layer;带 standalone Code 链接,使用 standalone;无目标或明确选择时按屏幕数估算。不要询问 Code Layer 与 standalone 的取舍,也不要让用户数屏幕。使用提供的文件 URL;若需新文件,使用 create_new_file。为请求的 code layer 创建 Design 文件(无目标时)。确认输出选择后保持不变,创建文件后不再询问。
  2. 遵循导入响应:用当前 schema 调用 send_code_to_figma,按返回的准备与压缩包指令操作,必要时在本地保留应用并验证后再上传。严格按每个响应的指令与 nextStep 完成准备、验证、上传、待处理导入和设置恢复,完成前置条件后再推进,传递 continuation 参数时保持不变,不要自创恢复步骤。无 nextStep 时,按响应说明和工具当前描述执行。

适用场景

适用于用户明确要求将本地 HTML 或项目文件导入 Figma,并指定输出为可编辑 Design 图层、可运行 Code Layer 或独立 Code/Make 的情况。也可用于用户提供了明确 Figma 文件 key 或链接作为目标的情形。不适用于仅泛泛要求代码项目或代码组件、输出意图不清、或仅提及 Figma Code/Make 名称的请求。

限制

  • 仅用于明确请求的 Figma 输出。
  • 输出意图不清时必须先询问并等待。
  • 选择可运行目标前必须通过 whoami 确认 code_layers_enabled。
  • 不得让用户选择 Code Layer 与 standalone,也不得让用户数屏幕。
  • 不得自创缺失的恢复步骤。
  • 必须保持用户项目不变。
  • 各工具的前置条件与参数以其当前描述和 schema 为准。
  • 需在主要阶段向用户同步进度,报告待处理导入、恢复工作与阻塞,不得将未确认阶段描述为已完成。
  • 最终只报告由结果确定的导入和预览结果。