用途：把 Figma 设计稿转换为用户仓库中的生产级代码，保证与设计稿 1:1 的视觉一致性。仅当交付物是代码时使用；若需在 Figma 内创建/编辑节点应改用 figma-use，若需从代码或描述生成整页设计稿应改用 figma-generate-design，仅需 Code Connect 映射用 figma-code-connect，编写可复用智能体规则用 figma-create-design-system-rules。
前提：Figma MCP 服务器已连接可访问；用户提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的 URL（:fileKey 为文件键，1-2 为节点 ID），或使用 figma-desktop MCP 时直接在桌面应用选中节点（无需 URL）；项目最好已有设计系统或组件库。
工作流：1) 从 URL 解析 fileKey 与 nodeId（桌面端 MCP 只需 nodeId）；2) 调用 get_design_context(fileKey=":fileKey", nodeId="1-2") 获取布局、字体、颜色与设计令牌、组件结构与变体、间距；若响应过大或截断，先用 get_metadata 获取节点结构，再逐个获取子节点；3) 用 get_screenshot 获取视觉参考作为验证基准；4) 下载 MCP 返回的图片、图标、SVG 等资源，若返回 localhost 源则直接使用，不要引入新图标包或使用占位符；5) 将输出（通常为 React + Tailwind）按项目框架、样式与约定改写，复用已有组件与设计令牌；6) 追求像素级一致，避免硬编码，遵循 WCAG；7) 完成后对照截图校验布局、字体、颜色、交互状态、响应式与资源渲染。
实现规则：组件放入项目设计系统目录并遵循命名约定；优先复用与扩展现有组件；避免内联样式；为 props 添加 TypeScript 类型与 JSDoc。
常见问题：输出截断用 get_metadata 拆分获取；实现不匹配时与截图逐项比对；资源不加载时确认 MCP 资源端点可访问且不改动 URL；项目令牌与 Figma 值冲突时优先项目令牌，仅微调间距尺寸以保持视觉一致。
限制：需 Figma MCP 服务器与有效节点信息；具体收费、价格与平台支持范围暂未提供。