用途:当 PBI、design-spec 或用户提示中出现 Figma URL 时,从 Figma 设计中提取结构化设计上下文,供 design-spec 与规划类技能消费。
主要能力:解析 Figma URL,提取文件 key(figma.com/design/ 或 figma.com/file/ 后的 [a-zA-Z0-9]+ 段)与节点 ID(node-id=NNN-NNN,API 形式将 - 换成 :);按四级回退链提取设计令牌、组件清单、布局、响应式行为与排版;输出保存到 team-artifacts/design-specs/{YYMMDD}-figma-extract-{slug}.md,含设计令牌表、组件清单、ASCII 线框、响应式说明与 Clause Conformance 表。
提取回退链:Level 1 官方 Figma MCP(get_design_context、get_screenshot、get_code_connect_map);Level 2 GLips Figma-Context-MCP(只读,文件元数据、帧结构、组件列表);Level 3 Figma REST API(需 FIGMA_ACCESS_TOKEN,调用 GET /v1/files/{file_key}/nodes?ids={node_id});Level 4 截图加视觉分析(请用户截图后分析近似颜色、字体、间距、布局、组件)。有节点 ID 时优先只取该节点,目标每次设计低于 5K tokens,不要拉取整个文件。
使用方式:由 design-spec 在存在 Figma URL 时调用,或由 plan 技能在设计上下文提取步骤调用;URL 检测在本技能内联处理。执行前需按任务跟踪要求拆分任务;若提取结果将驱动新建或更新的界面,需先盘点现有相关 UI 并梳理关联流程。
适用场景:PBI、design-spec 或用户提示中出现 Figma URL。不适用:无 Figma URL(直接进入 design-spec);手绘线框(用 design-spec --mode=wireframe);现有应用截图(用 design --mode=screenshot)。
限制:Figma 是来源而非权威,提取结果需对照 UI/UX 设计原则检查,对比度须按提取的十六进制值计算而非目测;Figma 文件通常只提供填充状态,空、加载、错误状态与交互状态变体常缺失,需列为待确认问题;项目设计系统文档优先级高于这些条款,冲突须向用户呈现而非静默处理。MCP 服务器搭建指南见 references/figma-mcp-setup.md。