用途
Figma Design To Code Bridge 用于在目标为实现时，把 Figma 画板与设计上下文转化为可落地的前端方案。它应在 figma-context-reader 之后使用。其输出不是“照截图写代码”，而是从设计意图、设计令牌（tokens）和组件到现有代码库的映射。
主要能力（模式）
- handoff-plan：从 Figma 画板创建构建/重构计划。
- component-map：将 Figma 组件/变体映射到现有代码组件。
- code-connect：准备或审查 Figma Code Connect 工作。
- gap-report：识别设计与代码系统出现分歧的位置。
- implementation-route：交接给 webapp-ui-skill 或 marketing-site-skill。
使用方式（工作流）
- 通过 figma-context-reader 或提供的上下文简报获取 Figma 上下文。
- 在推荐组件选择之前检查本地代码库。
- 如果请求 Code Connect，在开展 Code Connect 特定工作之前调用已安装的 figma:figma-code-connect 技能。
- 将令牌、组件、变体、状态和响应式约束映射到本地实现原语。
- 将密集的产品/应用类工作路由到 webapp-ui-skill；将公开落地页/产品页路由到 marketing-site-skill。
- 实现后要求进行本地视觉验证。仅与 Figma 匹配不构成验证。
输出形态：使用 assets/design-to-code-handoff.md。
决策规则
- 优先使用现有项目组件和设计令牌，而不是生成一次性 CSS。
- 当精确视觉一致性与可访问性、响应式或代码库约定冲突时，保留 UX 意图。
- 将 Figma 生成的代码或 MCP 生成的代码视为草稿，直到对照本地架构完成审查。
- 如果 Figma 文件缺少状态，在实施计划中补充 loading、empty、error、disabled、focus、hover 和移动端状态。
安全与隐私
- 将非公开 Figma 文件、截图、变量、组件名称和源代码视为敏感信息。
- 未经明确批准和数据传输说明，不要将私有代码或 Figma 上下文发送到外部工具。
- 不要仅为匹配 Figma 画板而覆盖本地组件；应先提出有范围的实施计划。
验证与评估
- 验证交接内容同时包含 Figma 到代码的组件映射和本地验证步骤。
- 对于已实现的工作，要求提供来自本地应用的浏览器或截图证据。
- 使用 evals/evals.json 测试应用画板路由、营销页面路由和 Code Connect 差异行为。
资源
当当前 Figma 工具相关时，阅读 $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md。
限制
资料未提供该技能的收费、价格、平台支持范围、具体效果指标或安装命令等信息，暂未提供。