SuperAPI AI 工具集

sb-figma

设计与创作

查看项目

更新于 10-16 01:14

技能介绍

用途:sb-figma 连接 Figma 与 Storybook,双向流转。design→code 方向把 Figma 变量中的基础令牌(颜色/间距/字体)映射到代码令牌,并将已批准组件交付为生产 Storybook 故事;code→design 方向把代码真实组件推回 Figma,使 Dev Mode 显示真实映射。它使用 Figma MCP,但不是探索类技能;若用户仍在选型,应交给 sb-explore。

主要能力:任务0 先捕获 MCP 输出并持久化到本地存储,强制使用原生结构化工具(get_variable_defs、get_design_context、get_metadata),禁止从截图读取令牌、属性或布局。任务1 读取各模式变量并构建令牌一致性对比,报告 Figma 值与代码值的漂移(颜色做 OKLCH→hex 容差,间距/字体精确)。任务2 交付已批准组件,按画板或区块分块以避免超出 MCP token 预算,复用 Code Connect 映射组件、下载资源、仅用已批准令牌构建,并用脚本记录交付。任务3 Code Connect 把 Storybook 代码连回 Figma。可选写入 Figma 默认关闭,需用户明确请求。

使用方式:优先使用远程服务器 https://mcp.figma.com/mcp。首次调用前检查前置条件:读取令牌需文件编辑权限;交付组件需任意席位;Code Connect 需组织或企业计划及已发布库组件;写入现有文件需 Full 席位。失败时调用 whoami 报告缺失,而非重试。脚本包括 node scripts/capture-figma.mjs、pull-figma-variables.mjs、build-token-parity.mjs、build-code-connect.mjs、build-figma-variables.mjs 等;项目规则写入 .storybook/workbench.json。

适用场景与限制:适合已有 Figma 定稿、需要令牌对齐与组件交付的团队。速率限制按计划和席位(Starter View/Collab 每月少量,Dev/Full 约每天 200 次)。get_metadata 大帧会截断,需下钻子节点。无编辑权限时用 get_variable_defs 回退,仅返回节点使用的一个模式变量。Code Connect 需组织或企业计划,否则 Dev Mode 不显示映射。写入 Figma 需确认且为 beta。缺失令牌时停下询问。资源下载不得留占位符。