用途：将 Figma 设计翻译为用户仓库中的生产级代码，追求像素级视觉一致，并保证与 Figma MCP 服务器、设计令牌正确集成。仅当交付物是代码时使用；若需在 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 的 Figma URL（:fileKey 为文件键，1-2 为节点 ID），或在使用 figma-desktop MCP 时直接在桌面应用中选中节点（无需 URL）；项目最好已有设计系统或组件库。
必要工作流（按序不可跳过）：1）获取节点 ID——从 URL 解析 fileKey 与 nodeId，或使用桌面当前选中节点；2）用 get_design_context(fileKey=":fileKey", nodeId="1-2") 拉取设计上下文，内容过大时先用 get_metadata(fileKey=":fileKey", nodeId="1-2") 取得节点结构，再按子节点逐个拉取；3）用 get_screenshot(fileKey=":fileKey", nodeId="1-2") 截图作为视觉基准；4）下载服务器返回的图片、图标、SVG 等资源，若返回 localhost 源则直接使用，不要引入新图标包或占位符；5）按项目框架、样式与约定转换，复用既有组件与设计令牌；6）实现 1:1 视觉一致，优先使用设计令牌，避免硬编码；7）对照截图校验布局、字体、颜色、交互状态、响应式与可访问性。
实现规则：组件放入项目设计系统目录并遵循命名约定；尽量复用现有组件，存在匹配组件时扩展而非新建；避免内联样式；提取常量和令牌；提供 TypeScript 类型与 JSDoc。常见问题：输出被截断可用 get_metadata 分节点获取；视觉不符可对照截图检查间距、颜色、字体；资源不加载需确认 assets 端点可访问且 URL 未被修改；令牌值有差异时优先项目令牌并微调间距尺寸。注意事项：该技能不涉及收费、价格与平台支持的说明，相关资料暂未提供。