SuperAPI AI 工具集

figma-ops

设计与创作

查看项目

更新于 10-15 12:35

技能介绍

Figma Operations 是 Figma 工作的“前门”。官方 Figma 插件自带十一个技能,负责 Plugin API 表面;社区另有五十多个技能处理 token、组件、无障碍与文档。本技能不复制其中任何一个,只做它们不做的三件事:路由、编排、守卫。

一、路由——哪个任务用哪个技能 本技能提供一张路由表,针对不同任务指明应加载的技能及其封装的工具。例如:任何修改或读取画布的脚本必须先加载 figma-use(强制前置),它封装 use_figma;设计到代码、实现屏幕使用 MCP 资源中的 design-to-code 指南与 get_design_context、get_screenshot;SwiftUI 与 Figma 双向转换使用 figma-swiftui;从应用代码构建页面使用 figma-generate-design + figma-use;token、变量、组件库使用 figma-generate-library + figma-use;组件到代码映射使用 figma-code-connect;新建空白文件使用 figma-create-new-file;FigJam 中的 Mermaid 类图表使用 figma-generate-diagram;FigJam 板内容使用 figma-use-figjam + figma-use;幻灯片使用 figma-use-slides + figma-use;动效使用 figma-use-motion、figma-implement-motion;图片或 SVG 入文件、情绪板与参考板编排由本技能负责;实时站点截图作为源图使用 shotcraft 再进入本技能;设计 token 导入导出、无障碍审计、变量 CRUD 使用社区技能。 两条表格无法表达的路由规则:只读检查永远优先,先看页面、现有框架、字体、命名约定,绝不先创建后查看;get_metadata 需要编辑权限而非查看权限,若浏览器可打开却提示无编辑权限,说明分享是只读的。

二、多账号路由 一个 Figma OAuth token 只绑定一个 Figma 账号。若用户属于多个组织,正确做法是每个账号一个 MCP 服务器,通常一个用插件服务器、另一个用 claude.ai 连接器,它们暴露不同的工具命名空间,按前缀选择账号。每次调用前用 whoami 确认身份。不要合并为单一服务器,否则每次切换账号都会变成交互式 OAuth 重新认证。持久事实是机制到账号的映射(插件 = X,连接器 = Y),连接器 UUID 在重新添加时会变化,不要以它作为记录键。仅查看的团队席位与仅查看分享一样会失败,whoami 会列出席位。

三、编排工作流——采集 → 筛选 → 编排 分为多个阶段,每阶段有退出闸门,阶段前发布简短清单、阶段后发布摘要。阶段包括:0 简报(来源列表、艺术方向、调色板、目标文件与页面,需用户确认来源列表);1 采集(截图、区块裁剪、用户提供的图片,按真实像素尺寸存盘);2 筛选(短名单,每张图一句话说明贡献,每张图必须被代理看过,未审核图片不得进入编排);3 上传(目标文件中的节点,按源文件命名,记录节点 ID);4 排布(按真实宽高比调整尺寸并按选定模式放置,审查截图,修复碰撞与缺陷后再加装饰);5 装饰(排版、细线、标记、标签,仅按简报词汇表所需);6 交付(渲染 PNG 发给用户,说明页面名称与未决事项)。硬性闸门:阶段 0 来源列表确认前不得进行 use_figma 变更;图片被打开看过之前不得放置;裸排布截图干净之前不得加装饰;在新页面构建,绝不原地重构用户现有页面,删除旧页面是单独且明确的请求。

四、采集到画布 来源分三类,对情绪板价值递增:整页截图(适合滚动条,不适合板面)、区块裁剪(有用单元,shotcraft 的 probe-sections.mjs 可结构化发现)、用户提供的设计稿(通常最强)。先用 scripts/stage-assets.mjs 暂存:接收文件夹或短名单,复制为有意义 slug 命名的副本,从文件头读取真实像素尺寸,输出规划器输入 JSON;在提供主题与分组前退出码为 10。上传使用 upload_assets,count: N,然后以 multipart/form-data 逐个 POST,记录返回的 placedOnNodeId。注意 400×300 陷阱:上传图片会以 400×300 框架、scaleMode: FILL 落地并裁剪,必须按规划器宽高 resize。上传落在上传工具的当前页面,需按 ID 查找并 appendChild 到正确位置。

五、排布模式 三种模式:列网格(参考表、等权项、对齐)、刚性加号(每组沿轴有含义,中心元素四臂,环尺寸约 0.72× 递减,轴为带端点细线)、松散加号(有机、围绕中心、松散加号,去掉轴,内环与中心重叠约 40px 并偏离轴,第二环塞入内环角落,字标漂浮)。跨模式规则:旋转需明确要求,默认零度;按图片共享属性分组并让轴有意义;尺寸向中心递增;重叠有预算(内环到中心 ≤ 40px,相邻角落 ≤ 250×80),规划器报告每次重叠并在超预算时退出 10;中心元素可以是排版元素,但被图片重叠后需去掉其装饰;词汇放在象限或角落,不放簇中。用脚本规划坐标并生成放置脚本,plan-layout 输出背景相对的 z 序放置、画布尺寸与重叠报告,emit-placement 生成精确 use_figma 脚本并拒绝 vetted: false 的图片。

六、画布工艺规则 每条都来自昂贵教训:深色图片加 1px SOFT 45–55% 描边、strokeAlign: OUTSIDE;z 序即追加顺序,重叠物必须后追加,轴线用 insertChild(0, …) 置底;字体样式名按字族不同,先用 listAvailableFontsAsync() 验证;任何文本属性前先加载字体;不要按尺寸过滤节点找标记,按名称或 ID 跟踪;删除标签只删文本,引线与点会留下,需删除整个三元组;先机械验证再截图,读回板面并运行 verify-board.mjs,再用 get_screenshot 在 maxDimension 1400–1800 判断程序无法判断的内容;渲染发给用户,curl 截图 URL 到 design/exports/ 并发送文件;页面删除需明确且最后执行,先切换 currentPage 到保留页,构建替代方案时克隆而非移动,并提醒用户版本历史保留已删页面。

七、长构建的状态台账 从阶段 3 起在磁盘保留台账,记录文件、页面、背景、图片、装饰、导出等,每轮开始重读,按名称重建,按节点名称幂等,绝不重复上传已存在的图片。

八、决策分叉——询问而非默认 当两种排布都合理且简报未决定时询问,并说明各自成本;来源决定的事(图片宽高比、深色图是否需要描边)不要问;被拒绝的工作不得在其上继续构建。

参考文件包括 moodboard-composition.md、capture-to-canvas.md、skill-map.md、lessons.md、place-and-verify.md,以及 scripts/stage-assets.mjs、plan-layout.mjs、emit-placement.mjs、verify-board.mjs、verify-freshness.mjs 和示例 fixture。完整流水线:shotcraft(或文件夹)→ stage-assets → 查看每张图并设置 vetted、caption、arm → plan-layout → emit-placement(背景)→ upload_assets → 填入 ID → emit-placement(放置)→ 读回 → verify-board → get_screenshot → 装饰 → 发送渲染。