figma-design-to-code-bridge

Figma 设计转代码桥接

当目标是实现设计时，在 figma-context-reader 之后使用此技能。输出不是“根据截图写代码”，而是将设计意图、令牌和组件映射到现有代码库。

模式

• handoff-plan：根据 Figma 画板创建构建／重构计划。
• component-map：将 Figma 组件／变体映射到现有代码组件。
• code-connect：准备或审查 Figma Code Connect 工作。
• gap-report：找出设计与代码系统之间的差异。
• implementation-route：交接给 webapp-ui-skill 或 marketing-site-skill。

工作流

1. 通过 figma-context-reader 或提供的上下文概要获取 Figma 上下文。
2. 在推荐组件之前检查本地代码库。
3. 如果需要 Code Connect，在开展 Code Connect 专项工作前调用已安装的 figma:figma-code-connect 技能。
4. 将令牌、组件、变体、状态和响应式约束映射到本地实现基础。
5. 将复杂的产品／应用工作交给 webapp-ui-skill；将面向公众的落地页／产品页面交给 marketing-site-skill。
6. 实现后必须进行本地视觉验证。仅匹配 Figma 不足以作为验证。

输出格式

使用 assets/design-to-code-handoff.md。

决策规则

• 优先使用现有项目组件和设计令牌，而不是生成一次性 CSS。
• 当精确的视觉一致性与无障碍、响应式设计或代码库约定冲突时，应保留 UX 意图。
• 将 Figma 生成的代码或 MCP 生成的代码视为草稿，直至根据本地架构完成审查。
• 如果 Figma 文件未包含状态，请在实现计划中加入加载、空内容、错误、禁用、聚焦、悬停和移动端状态。

安全与隐私

• 将非公开的 Figma 文件、截图、变量、组件名称和源代码视为敏感信息。
• 未经明确批准且未说明数据传输情况，不要将私有代码或 Figma 上下文发送给外部工具。
• 不要仅为匹配 Figma 画板而覆盖本地组件；应先提出范围明确的实现计划。

验证与评估

• 确认交接内容包含 Figma 到代码的组件映射以及本地验证步骤。
• 对于已实现的工作，要求提供本地应用的浏览器或截图证据。
• 使用 evals/evals.json 测试应用画板路由、营销页面路由和 Code Connect 差异处理行为。

资源

• 当当前 Figma 工具相关时，阅读 $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md。