用途：把 Figma 设计稿转换为仓库中的生产级 UI 代码，强调与设计稿的像素级一致。适用场景是交付物为用户仓库里的代码。若需在 Figma 内创建/编辑/删除节点，应改用 figma-use；若要从代码或描述生成整页 Figma 界面，改用 figma-generate-design；仅需 Code Connect 映射用 figma-code-connect-components；编写可复用代理规则（CLAUDE.md/AGENTS.md）用 figma-create-design-system-rules。
前提：已连接并可访问 Figma MCP 服务器；用户提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的链接，其中 :fileKey 为文件键、1-2 为节点 ID；或使用 figma-desktop MCP 时直接在桌面端选中节点（无需链接，但仅桌面 MCP 支持选区提示，远程服务器需要帧或图层链接）。项目宜已有设计系统或组件库。
工作流：先获取节点 ID（解析链接或使用桌面选中），再执行 get_design_context(fileKey=":fileKey", nodeId="1-2") 获取布局、字体、颜色与设计令牌、组件结构与变体、间距等；若返回过大或被截断，先用 get_metadata 获取节点结构，再逐个取子节点。随后用 get_screenshot 获取截图作为视觉基准，下载 Figma MCP 返回的图片、图标、SVG 等资源（若返回 localhost 源则直接使用，不要引入新图标包或自造占位符）。接着把输出（通常为 React + Tailwind）转换为项目框架与约定，复用现有组件与设计令牌。最后与截图逐项校验布局、字体、颜色、交互态、响应式与可访问性。
规则与限制：不要基于假设实现；避免硬编码，优先使用设计令牌；设计系统令牌与 Figma 值冲突时优先项目令牌，并做最小间距/尺寸调整以保持视觉一致；新增组件需记录；需满足 WCAG。常见问题包括输出截断、实现与设计不符、资源无法加载、令牌值不一致，对应解决方式分别为拆分节点获取、对照截图排查、检查资源端点、优先项目令牌。文档另附 Figma MCP 服务器文档、工具与提示、变量与设计令牌等资源，具体链接与收费信息暂未提供。