figma-implement-design

# 实现设计 ## 概述 此技能提供了一个结构化的工作流，用于将 Figma 设计转换为具有像素级精度的生产级代码。它确保与 Figma MCP 服务器的稳定集成、设计令牌的正确使用以及与设计 1:1 的视觉对齐。 ## 前置条件 - 必须连接并访问 Figma MCP 服务器 - 用户必须提供格式为 `https://figma.com/design/:fileKey/:fileName?node-id=1-2` 的 Figma URL - `:fileKey` 是文件密钥 - `1-2` 是节点 ID（要实现的特定组件或框架） - **或者**在使用 `figma-desktop` MCP 时：用户可以直接在 Figma 桌面应用中选择节点（无需 URL） - 项目应拥有已建立的设计系统或组件库（首选） ## 必需工作流 **按顺序执行以下步骤。请勿跳过步骤。** ### 第 0 步: 设置 Figma MCP (如果尚未配置) 如果因 Figma MCP 未连接导致任何 MCP 调用失败，请暂停并进行设置: 1. 添加 Figma MCP: - `codex mcp add figma --url https://mcp.figma.com/mcp` 2. 启用远程 MCP 客户端: - 在 `config.toml` 中设置 `[features].rmcp_client = true` **或** 运行 `codex --enable rmcp_client` 3. 使用 OAuth 登录: - `codex mcp login figma` 登录成功后，用户需要重启 codex。你应该完成回答并告知用户，以便他们重试时可以继续第 1 步。 ### 第 1 步: 获取节点 ID #### 选项 A: 从 Figma URL 解析 当用户提供 Figma URL 时，提取文件密钥和节点 ID 以作为参数传递给 MCP 工具。 **URL 格式:** `https://figma.com/design/:fileKey/:fileName?node-id=1-2` **提取:** - **文件密钥:** `:fileKey` (`/design/` 后的部分) - **节点 ID:** `1-2` (`node-id` 查询参数的值) **注意:** 使用本地桌面 MCP (`figma-desktop`) 时，`fileKey` 不作为工具调用的参数传递。服务器会自动使用当前打开的文件，因此只需要 `nodeId`。 **示例:** - URL: `https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15` - 文件密钥: `kL9xQn2VwM8pYrTb4ZcHjF` - 节点 ID: `42-15` #### 选项 B: 使用 Figma 桌面应用中的当前选择 (仅限 figma-desktop MCP) 当使用 `figma-desktop` MCP 且用户未提供 URL 时，工具会自动使用 Figma 桌面应用中当前打开文件里选中的节点。 **注意:** 基于选择的提示词仅适用于 `figma-desktop` MCP 服务器。远程服务器重新