用途:通过 MCP 集成从 Figma 文件提取设计规范,适用于提供 Figma URL 做设计提取、获取设计令牌、或将 Figma 转换为实现规格的场景。使用前建议激活 design-spec 技能以获取设计提取最佳实践。
参数:url 必填,为 Figma 设计链接;output 可选,默认 markdown,可选 markdown 或 json;depth 可选,默认 5,为 1-10 的层级深度;timeout 可选,默认 30 秒。
流程:解析 URL 提取 file key,若含 ?node-id=X:Y 则提取节点 ID,匹配模式 figma.com/(design|file)/([a-zA-Z0-9]+);校验 Figma MCP 工具是否可用,不可用则返回带配置说明的错误;通过 MCP 调用并应用超时与深度限制,优雅处理限流错误;转换响应,提取颜色(fills、strokes 转 hex/rgba 表)、字体(文本节点转字体/字号/字重表)、间距(auto-layout 转 padding/gap 表)、组件(节点树转层级文本);按 markdown 或 json 格式化;结果保存到 team-artifacts/designs/{YYMMDD}-figma-extract-{feature}.md。
URL 格式:https://www.figma.com/design/{fileKey}/{fileName}?node-id={nodeId}。
默认配置:最大组件深度 5 层,提取超时 30 秒,最多 20 种颜色,最多 10 种字体。
错误处理涵盖未配置 MCP、URL 无效、超时、限流、文件未找到或无权访问、层级过深被截断等情况,并给出对应提示。
示例:/figma-extract https://www.figma.com/design/ABC123/MyDesign?node-id=1:2。相关角色技能为 ux-designer,被 /design-spec 使用,依赖 figma MCP 工具。
限制:需要配置 Figma MCP 工具;受 API 限流、超时与深度上限影响;超出深度或数量上限时结果会被截断。