Coinbase가 Figma Code Connect로 AI 코딩 비용 22.5% 줄인 방법 — 핵심은 ‘검색 제거’였습니다 대표 이미지

cdn.sanity.io

Coinbase 三次评估：Code Connect 让 AI 编程成本平均降低 22.5%

figma code connect AI 编程 token 成本节省测量方法设计

How Coinbase used Code Connect to guide agents and shrink token costs

Better code, fewer tokens: The benefits of Code Connect in MCP

Getting started with Code Connect CLI

明明有设计系统，AI 为什么还要重新做按钮？

把 Figma 页面交给编程代理后，它有时不会使用已有组件，而是重新创建相似的 React 和 CSS。页面看起来可能大致正确，但开发者仍要重新修改代码，寻找正确的 import 路径和 prop。设计系统虽然存在，代理却不知道它在哪里。

Coinbase 使用相同的设计、刻意模糊的提示词、Sonnet 4.6 模型，以及每次运行都重置的空代码库，按条件对是否使用 Code Connect 进行了三次比较。其报告称，在使用 Code Connect 的条件下，平均 token 减少 11.5%，实现时间减少 22.3%，成本减少 22.5%，且三次运行中三项指标均有改善。

不过，这是一项针对单个设计的小型内部评估，未公开每次运行的原始数据、方差和统计检验。这并不意味着所有团队都能节省 22.5%。值得借鉴的是其工作原理：将生产环境组件放在起点，可以减少代理的搜索、猜测和重写。

Code Connect 会告诉代理正确代码的位置

Code Connect 将 Figma 组件与代码库中的实际组件连接起来。当 Figma MCP 服务器读取这些连接时，可以向代理提供反映真实 import、组件名称和当前设计属性值的代码片段。

实现过程	没有连接信息时	有 Code Connect 时
组件选择	搜索仓库或重新编写相似 UI	从已映射的生产组件开始参考
属性转换	查看 Figma 属性并猜测代码 API	使用已定义的 prop 转换
样式处理	可能创建新的 CSS 或近似值	更容易复用现有组件和 token
修改工作	可能持续进行搜索、调试和替换	初始候选范围更小，减少不必要的探索

Coinbase 的公开设计系统仓库中，Web React、React Native、Android Compose 和 iOS SwiftUI 实现分别位于不同包中。即使按钮名称相同，不同平台的 import 路径和 API 也可能不同，因此，指向实际实现的连接比组件名称列表更有用。

第一次成功，是让一个组件出现在 Inspect 中

不必一开始就模仿 Coinbase 的 Stepper，或连接整个组件库。从一个可以直接核对 Figma 属性和生产 API 的 Button 开始即可。以下步骤中的模板是基于官方结构编写的输入示例，并非 Coinbase 使用的实际映射。

目前，Code Connect 面向 Figma Organization 或 Enterprise 方案中的 Full 和 Dev seat 提供。开始前，需要准备含根组件的 Figma 库、实际组件仓库、Node.js 18 或更高版本，以及配置了 Code Connect Write 和 File content Read 范围的个人访问令牌。

安装 CLI。 确认仓库使用的 Node.js 版本后，运行 npm install --global @figma/code-connect@latest。
创建配置文件。 在仓库根目录的 figma.config.json 中加入以下最小配置。如果将模板放在其他位置，请将 include 模式改为对应路径。

{
  "codeConnect": {
    "include": ["**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

复制根组件 URL。 在 Figma 中右键单击要连接的 Button 根组件，然后选择 Copy link to selection。
编写 Button.figma.ts。 将下例中的 URL、名为 Label、Disabled、Size 的 Figma 属性、enum 值、Button API 和 import 路径替换为团队实际使用的值。还应将 id 设为仓库内不重复的值。

// url=<通过 Copy link to selection 复制的根组件 URL>
import figma from 'figma'

const instance = figma.selectedInstance
const label = instance.getString('Label')
const disabled = instance.getBoolean('Disabled')
const size = instance.getEnum('Size', {
  Large: 'large',
  Medium: 'medium',
  Small: 'small',
})

export default {
  example: figma.code`
    <Button size={${size}} disabled={${disabled}}>
      ${label}
    </Button>
  `,
  imports: ['import { Button } from "components/Button"'],
  id: 'button',
}

与源代码对照。 确认 Figma 属性名准确无误、enum 的每个选项都会转换为真实 prop 值，并且 import 路径和默认值与当前生产代码一致。错误的连接会更快地传递错误答案。
认证并发布。 不要将个人访问令牌直接写入仓库或命令历史，应通过组织的密钥管理方式将其加载到 FIGMA_ACCESS_TOKEN。在仓库根目录运行 npx figma connect publish。
检查渲染出的代码片段。 打开 CLI 返回的组件 URL，切换到 Dev Mode 后检查 Inspect 面板。首次成功的标准是显示了反映所定义 import 和当前 Figma 属性值的代码片段。

Inspect 不是编辑映射定义的界面。

请将 Inspect 中显示的结果代码片段与 Button.figma.ts 源文件并排对照。如果 import 或 prop 值不符合预期，请修改模板的属性名、enum 转换或代码 API 后重新发布。即使做到这一步，也不能据此判断 AI 编程成本已经下降。

成本比较是发布成功后的可选步骤

发布 Code Connect 与比较 AI 编程是两项不同的工作。要进行比较，还必须将 Figma MCP 远程服务器单独连接到受支持的编程客户端，并使用 Figma 账户认证。可在官方远程服务器安装文档中选择按客户端划分的设置方法。

请先在未发布 Code Connect 的隔离评估节点上记录基线。不要解除生产组件库中的连接；应使用复制文件或单独的评估节点。连接前后应保持相同的设计链接、提示词、模型、仓库初始状态和缓存条件。

请在当前仓库中实现这个 Figma 设计：<相同的 Figma 设计链接>。优先使用仓库中已有的设计系统组件，并在实现后告知构建和测试结果。

这段请求是比较输入的示例。不要在两个条件之间改变措辞，并为每次运行记录输入、输出、缓存创建、缓存读取 token、实际账单金额、完成时间和工具调用次数。token 与成本的查看位置取决于所用客户端和计费路径，因此在比较前应确定团队可访问的日志或计费记录。

成功标准还应包括是否使用了正确的现有组件和设计 token，以及是否通过构建和测试。如果成本下降了，但 UI 是用原始 CSS 重新构建的，就很难称之为降低搜索成本的成功。

22.5% 不是目标值，而是比较假设

11.5%

Coinbase 评估中的平均 token 降幅

22.3%

Coinbase 评估中的平均实现时间降幅

22.5%

Coinbase 评估中的平均成本降幅

3次

每个条件的运行次数

token 降幅与成本降幅不必相同。Claude 对基础输入、缓存写入、缓存读取和输出 token 采用不同价格，并分别记录用量。由于 Coinbase 未公开每次运行的 token 类型和成本计算公式，外部无法重新计算 11.5% 与 22.5% 之间的差异。

Figma 的另一项评估也发现了同方向的改善。在两个基于 React 的设计系统的 27 个测试案例中，使用 Code Connect 后，token 使用量中位数减少 29.5%，任务时间减少 19.6%，代码质量中位数则在 1 至 4 分量表中从 2 分升至 3 分。 Coinbase 评估与其模型、任务和汇总方式不同，因此不应将两项结果合并为单一的平均节省率。

值得关注的变量是连接覆盖率。在 Figma 评估中，MCP 响应中 Code Connect 片段平均占比为 20% 的示例系统，其改善幅度大于平均占比约为 6% 的内部系统。这两个比例不是建议目标值，而是不同系统的观察值。评估自身结果时，也不应只看总体平均值，而应按页面中包含的设计系统组件及实际连接占比分组查看。