（3624期）implement-design – Figma 设计一键转生产代码

Figma 设计一键转生产代码 将 Figma 设计稿精准转换为生产级代码，实现像素级视觉还原，支持设计令牌映射、组件复用与无障碍标准。 使用说明 核心用法 implement-design 是一套结构化的 Figma 转码工作流，通过 MCP 服务器连接实现设计到代码的自动化转换。核心流程包括： 解析 Figma URL —— 提取 fileKey 和 nodeId 获取设计上下文 —— 调用 getdesigncontext 获取布局、排版、颜色、组件结构等元数据 捕获视觉参考 —— 通过 get_screenshot 获取截图作为验收基准 下载资源资产 —— 处理图标、图片等素材（优先使用 MCP 返回的 localhost 地址） 项目规范转换 —— 将 Figma 输出（通常为 React + Tailwind）映射到项目框架、设计系统令牌和组件库 实现像素级还原 —— 遵循 WCAG 标准，优先使用设计令牌，保持视觉一致性 验收验证 —— 对照截图检查布局、排版、颜色、交互状态、响应式行为及无障碍标准 显著优点 标准化流程：7 步严格工作流避免遗漏，降低设计与开发间的返工成本 设计系统优先：强制复用现有组件和令牌，维护代码一致性 自动化集成：直接对接 Figma MCP 服务器，减少手动测量和复制粘贴 可访问性内置：流程中嵌入 WCAG 合规检查 弹性处理：支持复杂设计的分块获取（metadata → 子节点逐个拉取） 潜在缺点与局限 依赖 MCP 服务器：必须预先配置并连接 Figma MCP，否则完全不可用 令牌冲突风险：项目设计令牌与 Figma 规格不一致时，需人工权衡 技术栈假设：默认输出为 React + Tailwind，其他框架需额外转换层 复杂设计性能：深层嵌套结构可能导致响应截断，需分步获取 动态数据缺失：纯视觉实现，不处理后端数据绑定逻辑 适合人群 前端工程师：需要快速、精准实现设计稿 设计系统维护者：确保代码与设计规范同步 全栈开发者：在原型验证阶段快速还原高保真界面 团队协作场景：设计师与开发者需要建立统一的交付标准 常规风险 资产服务依赖：localhost 资产地址仅在 MCP 会话期间有效 视觉回归：设计令牌覆盖时可能产生细微偏差 过度还原：追求 1:1 像素还原可能牺牲代码简洁性或性能 无障碍疏漏：复杂交互状态（focus、screen reader）仍需人工复核 MCP 稳定性：服务器连接中断将导致流程中断 原始说明 Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design...