用途：将 Figma 设计稿翻译为仓库中的生产级代码，追求 1:1 视觉还原，适用于提供 Figma URL、节点 ID 或组件实现请求的场景。
前提条件：需已连接并可用 Figma MCP 服务器；用户提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的链接（fileKey 为文件 key，1-2 为节点 ID），或使用 figma-desktop MCP 时在桌面应用直接选中节点；项目最好已有设计系统或组件库。
工作流（按序执行）：一、从 URL 解析 file key 与 node ID（桌面 MCP 无需传 fileKey）；二、运行 get_design_context(fileKey=":fileKey", nodeId="1-2") 获取布局、排版、颜色与设计令牌、组件结构、间距等；若响应过大被截断，先用 get_metadata 获取节点结构，再逐个抓取子节点；三、运行 get_screenshot 获取视觉基准；四、下载 MCP 返回的图片、图标、SVG，若返回 localhost 资源则直接使用，不要引入新图标包或占位符；五、将输出（通常为 React + Tailwind）按项目框架、样式、组件与令牌改写；六、达到像素级一致，避免硬编码，优先用设计系统令牌；七、对照截图验证布局、排版、颜色、交互态、响应式与无障碍。
实现规则：组件放入项目设计系统目录，遵循命名规范；优先复用并扩展现有组件；必要时添加 TypeScript 类型与 JSDoc；偏离设计需在注释中说明原因。
常见问题：输出截断用 get_metadata 拆分；视觉不符则与截图逐项比对间距、颜色和排版；资源无法加载需确认 assets 端点可用且不修改 localhost URL；令牌取值不一致时优先项目令牌并微调间距以保持视觉还原。
跨客户端：可在 GitHub Copilot、Claude Code、Codex 使用；Codex 需将文件夹同步到 $CODEX_HOME/skills/figma-implement-design 并重启。无 MCP 时可退回使用用户提供的导出文件、截图和本地设计系统文件，但不得声称已抓取节点、截图或资源。
限制：未连接 MCP 或未提供链接/选中节点时无法完成完整流程；其他未提及事项暂未提供。