用途：将 Figma 设计节点按像素级精度转换为生产可用代码，并遵循项目既有设计系统与规范。
前提条件：需连接可访问的 Figma MCP 服务器；用户需提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的 Figma URL，其中 :fileKey 为文件键，1-2 为节点 ID；使用 figma-desktop MCP 时可在桌面应用中直接选中节点（无需 URL）。项目最好已有设计系统或组件库。
必要工作流（需按顺序执行）： 0. 若 Figma MCP 未配置，向 agent 的 MCP 配置加入服务器 URL https://mcp.figma.com/mcp，按需启用远程 MCP 客户端，按认证流程用 OAuth 登录，登录后需重启 agent 再继续。
- 获取节点 ID：从 URL 解析 fileKey 与 nodeId；使用本地桌面 MCP 时不传 fileKey，仅需 nodeId。
- 获取设计上下文：get_design_context(fileKey=":fileKey", nodeId="1-2")，返回布局、字体、颜色与设计令牌、组件结构、间距等；若响应过大或截断，先用 get_metadata 获取节点结构，再逐个拉取子节点。
- 截图参考：get_screenshot(fileKey=":fileKey", nodeId="1-2")，作为视觉校验依据。
- 下载资源：下载服务器返回的图片、图标、SVG；若返回 localhost 源则直接使用，不要新增图标包或使用占位符。
- 转换为项目约定：将 MCP 输出（通常为 React + Tailwind）视为设计与行为表示，替换为项目工具类与设计令牌，复用已有组件，遵循路由、状态与数据获取模式。
- 实现 1:1 视觉一致：优先还原设计，避免硬编码，使用设计令牌；设计系统令牌与 Figma 规格冲突时优先令牌并最小调整间距尺寸，遵循 WCAG。
- 对照 Figma 截图验证：检查布局、字体、颜色、交互状态、响应式行为、资源渲染与无障碍标准。
实现规则：组件放入项目设计系统目录并遵循命名约定，少用内联样式；优先复用扩展已有组件；避免硬编码，提供 TypeScript 类型与 JSDoc。常见问题：输出截断用 get_metadata 分步获取；实现不匹配对照截图与上下文数据检查；资源加载失败需确认资源端点可达且不改动 localhost URL；令牌值不一致时优先项目令牌。
适用场景：按 Figma 设计实现按钮、仪表盘布局等组件与页面。限制：不提供安装包管理命令；具体框架、版本与项目结构需按实际项目确定。