面向人类开发者的设计交付问题，大约从 2016 年起就已经有了成熟的解决方案。Zeplin、InVision Inspect、Avocode、Figma 自己的 Dev Mode——它们做的都是同一件事：给开发者提供一个 Web 界面，让他们点击节点并读取其属性。

当"开发者"是 AI agent 时，这个工作流就彻底崩溃了。

本文解释原因、agent 真正需要什么，以及如何构建一个能生成正确代码而非近似代码的交付工作流。解决方案是 figmascope——一个直接从 Figma 文件导出结构化上下文 bundle 的浏览器工具。具体操作步骤请参阅 Figma 导出至 Claude Code 或 Figma 导出至 Cursor。

设计交付的隐含前提

2023 年之前构建的每个交付工具都有同一个隐含前提：另一端有人类，在点击浏览、读取数值、做判断。工具的职责是将信息呈现得足够清晰，让有经验的开发者不必频繁切换回设计师那里就能工作。

这个前提渗透进了这些工具的整个用户体验：

这些都没有错。对人类开发者工作流来说是正确的。只是对 agent 来说是错误的界面。

agent 真正需要从设计中获得什么

接到设计任务的 AI agent 需要：

  1. 一份在做任何事之前先读的规格文档 — 约束条件、范围、token 命名规范、版本备注。不是通过悬停面板暗示的，而是明确写出来的。
  2. 带类型的 token 字典 — 不是原始十六进制值和像素数字，而是命名的、带类型的、附有值的 token。agent 需要知道 #d96a3a 是 color.accent，这样它才能生成正确的 Tailwind 类名或 CSS 自定义属性。
  3. 全屏布局树 — 每个节点的层级、布局关系、尺寸、token 引用。不是按需逐一提供；而是全树在内存中。
  4. 整合的字符串 — 所有文本内容，标准化，带资源键。不是分散在各节点中。
  5. 视觉基准 — agent 可以用来对比输出的参考渲染图。2× 的设计截图。
  6. 组件名称 — 生成代码应使用的规范标识符，而非凭空捏造的名称。

传统交付工具没有一个能以 agent 可用的形式提供这些内容。figmascope 应用将它们全部打包在一个 zip 中——粘贴你的 Figma URL，获取 bundle。无需上传，无需后端。token 格式在 AI Agent 的设计 Token 导出 中有深度解析。

为什么截图会失败

人们尝试的最快变通方案：从 Figma 导出 PNG，连同"实现这个屏幕"的提示词一起传给 agent。agent 生成代码，有时看起来接近。但是：

这些错误每一个单独来看都很小。合在一起，它们累积成一个需要大量人工修正的组件——这基本上抵消了使用 agent 节省的大部分时间。

带有示例的详细分析请参阅 为什么截图对 AI 代码生成无效。

截图告诉 agent 设计看起来是什么样。结构化上下文告诉它设计是什么。

传统交付工具，逐一评估

Zeplin

Zeplin 的主要界面是一个 Web 应用，开发者可以逐节点检查设计。它有一个"Styleguide"功能，能从文件中聚合颜色和排版——最接近 token 导出的东西。它不导出机器可读的布局树。其"Connected Components"功能将 Storybook 组件链接到 Figma 帧，对文档记录有用，但无助于 agent 生成新代码。

Figma Dev Mode

Figma 对设计交付的原生答案。代码面板从选定节点生成 CSS，并在配置了 Variables 时显示变量名。为人类开发者设计得很好。不支持文件级导出，不生成布局树，其代码片段仅限 CSS（不是框架无关的 token）。需要 Dev Mode 席位。

Avocode

Avocode 被 Abstract 收购后于 2022 年停止服务。提及它是因为它仍然出现在"设计交付工具"的搜索结果中，并带来一些对比流量。它已不再可用。

Locofy、Builder.io、Anima

这些工具尝试直接从 Figma 设计生成真实的框架代码（React、Next.js、HTML）。它们更接近问题空间——它们理解输出需要是代码，而不仅仅是属性面板。但它们生成的是你部署的代码，而不是你喂给 agent 的上下文。这个区别至关重要：当工具自己在生成代码时，你无法说"实现 Settings 屏幕，复用我已经构建的 UserAvatar 组件"。但当你给了 Claude Code 或 Cursor 结构化上下文时，你可以这样说。

详细对比请参阅 figmascope vs Locofy 和 figmascope vs Builder.io。

agent 就绪交付的样貌

agent 就绪的交付有三个特性，使其区别于传统交付：

1. 它是文件工件，而非 UI

交付工件是一个版本化的文件（或一组文件），与代码一起存放在仓库中。不是需要登录的共享链接，不是 Web 应用中的面板。而是一个包含 JSON、PNG 和 Markdown 文件的 design/ 目录。

这带来几个结果：

2. 它使用带类型的数据，而非渲染文本

tokens.json 中的设计 token 带有类型——$type: "color"、$type: "dimension"——而不仅仅是 Markdown 表格中的字符串。screens/*.json 中的布局 IR 有明确的节点类型（stack、overlay、absolute、leaf）以及使用 $ref 符号的 token 引用。strings.json 中的字符串有点分隔键，不仅仅是人类可读的标签。

带类型的数据意味着 agent 可以以编程方式推理："所有 background.$ref == color.surface 的节点使用相同的背景色"，而不是"所有看起来背景相同的节点"。

3. 它包含一份 agent 先读的规格文档

CONTEXT.md 是设计师与 agent 之间的契约。它描述：

传统交付没有等效物。Dev Mode 有每帧的"开发者备注"字段，但那是设计师随意填写的，没有结构。CONTEXT.md 是从文件实际内容一致性生成的。

交付工作流分步说明

  1. 设计师标记帧为就绪 — 在 Figma 中，设计师标记已准备好实现的帧（命名约定、"ready"标签，或你们团队使用的任何方式）。
  2. 开发者运行 figmascope — 在 figmascope.dev 粘贴文件 URL 和 PAT，点击导出，下载 zip。
  3. 解压至 design/ — unzip figmascope-<fileKey>.zip -d design/
  4. 将 design/ 提交至仓库 — bundle 就是交付工件。PR 同时包含设计 bundle 和实现代码。
  5. agent 实现 — 将 Claude Code 或 Cursor 指向 design/CONTEXT.md 和相关屏幕 JSON。agent 生成使用 bundle 中 token 值、组件名称和字符串的代码。
  6. 审查与迭代 — 开发者对照 screens/*.png 审查，记录差距，细化提示词。

当设计变更时，从第 2 步重复。_meta.json 时间戳告诉你 bundle 上次生成的时间相对于 Figma 文件上次修改的时间——一个简单的时效性检查。

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

什么不会改变

agent 就绪的交付不取代设计审查。agent 从结构化上下文中实现；人类仍然验证输出。交互状态、动画、响应式行为、无障碍性——这些需要的判断力是 agent 仅凭静态设计数据只能近似而无法保证的。

结构化上下文也不取代设计师与开发者之间的对话。如果某个 token 命名有歧义，或者组件在断点之间的行为与静态帧所示不同，这需要沟通。CONTEXT.md 捕获文件中的内容；它不推断设计师对文件未涉及情况的意图。

改变的是：基于稳定设计实现静态屏幕布局，从耗时数小时的手动过程变成了提示-审查工作流。agent 处理机械化的翻译；开发者处理判断性工作。

清单：你的设计交付是否 agent 就绪？

如果大部分内容缺失，agent 生成的代码将需要比从头开始加上好的上下文更多的修正。figmascope 生成的 bundle 一次导出就能满足所有条件。访问 figmascope 博客获取案例研究和每个清单项目的深度解析，或参阅 Figma Inspector 替代方案与 Dev Mode 和插件的直接对比。