figma-design-handoff

用途：该技能定义 Figma 到代码的设计交付（design handoff）工作流，目标是消除设计师产出与开发者实现之间的设计漂移。\n\n主要能力：包含五类规则，按需从 rules/ 目录加载——Figma Variables 与令牌（转为 W3C DTCG JSON）、组件规格提取（props、变体、状态）、Dev Mode 检查（尺寸、间距、字体、资源导出）、Auto Layout 到 CSS 的映射、视觉回归对比。同时介绍 Figma Dev Mode MCP Server 的连接方式与工具，例如 get_design_context、get_variable_defs、get_code_connect_map、get_screenshot、search_design_system，以及测试版的 use_figma、generate_figma_design。\n\n使用方式：可通过 Figma REST API 导出变量，命令为 curl -s -H "X-Figma-Token: $FIGMA_TOKEN" "https://api.figma.com/v1/files/$FILE_KEY/variables/local" > tokens/figma-local.json；再用 Style Dictionary 构建，命令为 npx style-dictionary build --config sd.config.js。Dev Mode MCP Server 可在 Figma 桌面端偏好设置中启用，或使用远程 MCP 端点。令牌输出为 CSS 自定义属性与 Tailwind 主题。视觉 QA 示例使用 Applitools Eyes 配合 Figma 插件。\n\n适用场景：产品团队在 Figma 中维护设计系统并需要与代码对齐时，用于令牌同步、组件实现和视觉回归检查。\n\n限制：本技能不附带 Figma 变量的转换脚本，具体映射需依据规则文件按集合与模式自行实现；工具中部分（use_figma、generate_figma_design）标注为测试版。其余环境要求、版本细节及价格信息暂未提供。