用途：把 Figma 设计稿转换为生产可用代码，追求与设计稿 1:1 的视觉一致性，适合从 Figma 文件实现 UI 时使用。
前提条件：需已连接并可访问 Figma MCP 服务器，可通过检查 get_design_context 等工具是否可用确认；若不可用需引导用户启用插件自带的 Figma MCP 服务器，可能需重启 MCP 客户端。用户须提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的 Figma URL，其中 :fileKey 为文件键，1-2 为节点 ID。项目最好已有设计系统或组件库。
主要能力与工作流：按顺序执行以下步骤，不得跳过。1）从 URL 解析文件键与节点 ID；2）运行 get_design_context(fileKey=":fileKey", nodeId="1-2") 获取布局、排版、颜色与设计令牌、组件结构、间距等；若响应过大或被截断，先用 get_metadata 获取节点结构，再逐个获取子节点；3）运行 get_screenshot 获取视觉参考，作为校验依据；4）下载 Figma MCP 返回的图片、图标、SVG 等资源，若返回 localhost 源则直接使用，不要引入新图标包或使用占位符；5）将输出（通常为 React + Tailwind）翻译为项目框架、样式与约定，替换为项目设计令牌，复用已有组件；6）实现 1:1 视觉还原，避免硬编码，遵循 WCAG；7）对照截图校验布局、排版、颜色、交互状态、响应式与资源渲染。
实现规则：组件放入项目设计系统目录并遵循命名约定；尽量使用设计系统组件，映射设计令牌，优先扩展现有组件；避免硬编码，保持组件可组合复用，为 props 添加 TypeScript 类型，为导出组件添加 JSDoc。
常见问题：输出截断时用 get_metadata 拆分获取；实现不匹配时与截图逐项比对；资源无法加载时确认 assets 端点可访问且 URL 未被修改；令牌值不一致时优先项目令牌并微调间距尺寸以保持视觉一致。
限制：资料未提供具体收费、价格、平台支持范围与效果保证等信息。