Figma Bridge 是 Designpowers 工作流中的一个桥接技能，解决“规格是文字、设计师却需要看图”的落差。它把团队的设计决策变成设计师能看见、能操作的视觉产物，同时也能把已有的视觉工作拉回工作流。
用途
它支持两个方向：
代码/规格 → 设计（“让它成真”）：把 design-lead 的视觉决策、设计系统或已构建的代码推入真实的 Figma 画板。
设计 → 代码/规格（“读进来”）：把已有的 Figma 文件拉进来，作为 design-review 的评审产物，或作为 token-architecture / design-system-alignment 的来源。
当 Figma 不可用时，它会优雅降级为一个可点击的 HTML 原型，确保设计师仍有东西可看。
何时使用
在截图检查点（design-builder 之后）——给设计师一个可操作的产物，而不只是代码截图。
在交接时——把最终设计同步到 Figma，让工程和设计共享同一来源。
在设计评审中——当评审产物是 Figma 文件或链接时，在这里拉取。
作为设计系统来源——当用户有 Figma 库时，提取其令牌/组件，用于初始化 token-architecture 和 design-system-alignment。
按需触发——“show me”“put this in Figma”“can I see it”“make it real”。
前置条件：检测 Figma 可用性
检查当前环境是否提供 Figma MCP 工具（如 get_design_context、get_screenshot、use_figma、create_new_file、generate_figma_design 等）。
如果可用：使用下面的 Figma 方向。
如果不可用：跳到 HTML 原型降级方案。不要因为等待 Figma 而阻塞工作流。
⚠️ 任何 Figma 写入之前必须：先加载 Figma 自身的使用指南——如果存在 /figma-use 技能就调用它，否则读取 skill://figma/figma-use/SKILL.md MCP 资源。在没有它的情况下通过 use_figma 写入 Figma 会导致常见且难以调试的失败。同样适用于 /figma-generate-design（捕获网页视图）、/figma-generate-library（在 Figma 中构建设计系统）和 /figma-code-connect（映射组件）。本技能负责编排何时桥接；那些 Figma 技能负责如何写入。
方向 A：规格/代码 → Figma（让它成真）
把团队设计的内容变成设计师可操作的画板。
A1. 汇集视觉事实来源
从 design-state.md 和构建产物中收集：
design-lead 的布局、颜色、排版和组件决策
令牌系统（来自 token-architecture / design-system-alignment）——它们会成为 Figma 变量/样式
content-writer 的确切字符串——逐字使用，绝不用 lorem ipsum 或改写
如果 design-builder 已运行，则使用已构建的代码
A2. 选择正确的工具
情况 | 工具 | 说明
从零/从规格/从意图构建屏幕 | use_figma | 所有 Figma 写入的默认工具。在存在设计系统组件时基于它们构建
首次把运行中的网页视图捕获到 Figma | generate_figma_design + use_figma 并行 | generate_figma_design 抓取像素级截图；use_figma 用真实组件重建；再对照截图细化
需要全新文件 | create_new_file | 然后用 use_figma 填充
把令牌系统推入 Figma | use_figma | 先创建变量/样式，再构建引用它们的组件——这样设计师可以重新换肤
当设计系统的令牌和组件存在时，始终基于它们构建，使结果可编辑且符合系统——而不是一张扁平图片。
A3. 重新连接（可选但推荐）
如果项目有真实的代码组件，通过 Code Connect（/figma-code-connect、add_code_connect_map）把它们映射到 Figma 组件，让设计和代码在下一轮保持关联。
A4. 展示并交回
对结果截图（get_screenshot），展示给设计师，并把 Figma 文件 key/URL 记录到 design-state.md。设计师现在可以直接操作它——他们所做的任何更改都可以通过方向 B 拉回来。
方向 B：Figma → 规格/代码（读进来）
把已有的 Figma 工作拉入工作流。
B1. 获取节点级 URL
设计到代码的工具需要节点 id。如果用户给的是裸文件 URL，请索取带 ?node-id=… 的 URL（或指定画板选择）。从 URL 中提取 fileKey 和 nodeId。
B2. 拉取上下文
get_design_context——节点的参考代码 + 截图 + 元数据（主要的设计到代码调用）
get_screenshot——仅视觉，当你只需要看它时（例如喂给 design-review）
get_metadata——大文件的结构/图层树
get_variable_defs / get_libraries——在初始化设计系统时提取令牌和库结构
B3. 路由结果
用于评审：把截图 + 上下文交给 design-review 作为产物
用于设计系统来源：把变量和组件喂给 token-architecture 和 design-system-alignment
用于构建：通过 design-builder 把参考代码适配到项目技术栈——适配，不要粘贴；返回的代码是参考，不是生产代码
HTML 原型降级方案（无 Figma）
当 Figma 工具不可用时，生成一个自包含、可点击的 HTML 原型，让设计师仍有真实的东西可看、可点击：
用团队的令牌（作为 CSS 自定义属性）、content-writer 的确切文案和 design-lead 的布局决策构建一个 HTML 文件
让简报中的关键任务真正可点击——真实状态，而不是扁平模型
从构造上保持无障碍——语义 HTML、可见焦点、满足 AA 的对比度、尊重 prefers-reduced-motion（这是 Designpowers；原型也不例外）
打开/截图并展示给设计师；与 design-state.md 一起保存
这是查看和反馈的产物，不是发布构建——但它足够真实，可以让人做出反应，这正是重点。
规则
绝不编造内容。使用 content-writer 的字符串。如果没有，请清楚标记占位符以供内容评审。
基于系统构建。使用令牌和组件，使产物可编辑，而不是扁平图片。
无障碍延续。无论你产出什么——Figma 画板或 HTML——都满足与流水线其余部分相同的包容性标准。视觉产物不是放弃 AA 的借口。
记录链接。始终把 Figma 文件 key/URL 或原型路径写入 design-state.md，以便团队和下一次会话能找到它。
适配，不要粘贴。从 get_design_context 返回的代码是参考；把它适配到项目的技术栈和标准。
集成
调用位置：using-designpowers 中的截图检查点和交接；来自 design-review（Figma 产物）；按用户请求
读取自：design-state.md、design-lead 决策、token-architecture、content-writer 输出、design-builder 代码
使用：Figma MCP 工具（在可用时受 /figma-use 和其他 Figma 技能约束）；否则 HTML 降级方案
输出给：design-review（产物）、design-system-alignment / token-architecture（提取的令牌）、design-builder（参考代码）
记录到：design-state.md（产物链接/路径）