用途：把 Figma 设计稿转换为用户仓库中的生产级代码，保证与设计稿 1:1 的视觉一致性。仅当交付物是代码时使用；若需在 Figma 内创建/编辑节点、从代码或描述生成整页设计、仅做 Code Connect 映射或编写可复用智能体规则，应改用其他对应技能。
前提：需连接并可访问 Figma MCP 服务器；用户提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的链接，其中 :fileKey 为文件键、1-2 为节点 ID；使用 figma-desktop MCP 时可直接在桌面应用选中节点而无需 URL。项目最好已有设计系统或组件库。
主要流程：1) 从 URL 解析 fileKey 与 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 资源端点可访问且不修改 localhost URL；项目令牌与 Figma 值冲突时优先项目令牌，仅微调间距尺寸以保持视觉一致。
限制：资料未提供具体收费、价格、平台支持范围与效果数据。