要降低 AI 编程成本，并不需要先把提示词变短。Coinbase 将成本降低 22.5% 的关键，不在于指令长度，而在于智能体为寻找正确组件所花费的时间。
带来 22.5% 的不是更短的提示词，而是准确的起点
Code Connect 的作用是在设计组件与生产代码组件之间建立一张对照表。只使用 Figma MCP 服务器时，智能体可以以 React 形式接收画布的结构和视觉信息，但它未必知道这些信息对应公司代码库中的哪个组件。准备好 Code Connect 模板后，MCP 响应的一部分会变成包含真实 import 语句、组件名称和属性值的代码片段。
例如，即使设计中有步骤指示器，如果没有连接信息，智能体也可能组合进度条和标签，从头创建一个相似的 UI。反之，如果连接信息中包含 CDS 的 Stepper 和属性映射，它就会直接导入现有组件。节省 Token 的关键不是给模型更少的信息，而是告诉它正确答案在哪里，使其无需探索错误候选项。
Coinbase Design System 管理涵盖 Web 和移动端等多个平台的组件与设计 Token。在公开仓库中，也可以看到 React、React Native、Android Compose 和 iOS SwiftUI 的软件包。 在这样的多平台系统中，仅有组件名称列表并不够，因为即使同样是“按钮”，不同框架的 import 路径和 API 也不同。Code Connect 可以将一个设计组件分别连接到不同语言和框架中的代码实现。
| 智能体需要完成的工作 | 没有 Code Connect | 有 Code Connect |
|---|---|---|
| 选择组件 | 搜索代码库或创建新 UI | 使用已映射的生产组件 |
| 转换属性 | 查看 Figma 属性并猜测 API | 使用设计属性与代码 prop 的显式映射 |
| 处理样式 | 可能生成任意 CSS 或相近颜色 | 参考真实 Token 和使用示例 |
| 失败成本 | 搜索、调试和重写会拉长对话 | 初始路径更窄，减少探索性调用 |
Coinbase 团队起步时，已有的 Code Connect 映射已经过时，新组件也没有模板。他们使用 Claude Code 和 Figma 的 figma-code-connect 技能并行处理组件列表；按团队的说法，约 4 小时内便将数百个组件的映射范围扩展到整个设计系统。 官方 CLI 文档也说明，该技能会在 Figma 选区中查找未连接的组件，检查仓库中的对应代码，并生成 .figma.ts 模板。不过，文档明确要求在发布前审查并修改生成结果。
22.5% 不是可以照搬的目标值，而是需要验证的假设
Coinbase 的结果很有前景，但样本较小。团队使用相同设计、相同的模糊提示词和相同的 Sonnet 4.6 模型，并在每次运行时初始化一个空代码库，共进行了三次运行。他们控制了提示词缓存，避免其使结果偏向有利一方，并报告平均 Token 使用量减少 11.5%、实现时间减少 22.3%、成本减少 22.5%。
这里不能把这三个数字理解为同一件事。Token 数量和账单成本可能对输入、输出、缓存读取和缓存写入采用不同费率。根据 Anthropic 的文档，缓存读取和写入的定价结构也不同于基础输入 Token，并且是否命中缓存取决于是否保留相同的提示词前缀。 因此，在自己的实验中，不要只记录一个总 Token 数；应分别记录输入、输出、缓存读取、缓存创建和实际账单金额。
Figma 另行开展的一项更广泛评估，为 Coinbase 数据的方向提供了支持。在两个基于 React 的设计系统的 27 个测试案例中，使用 Code Connect 后，Token 使用量中位数减少 29.5%，任务时间减少 19.6%，代码质量则在 1 至 4 分量表上从 2 分升至 3 分。 不过，这一结果同样不是能原样套用到所有组织的通用节省比例。
实际上，在 Figma 的评估中，显著影响效果的变量是 Code Connect 覆盖率。在示例设计系统中，Code Connect 片段平均占 MCP 响应的 20%，其改善幅度大于内部系统约 6% 的情况。连接覆盖范围越高，智能体翻找 node_modules、大范围搜索图标名称，以及用 CSS 重建现有组件的情况就越少。
不要将 22.5% 写成引入方案中的确定 ROI
Coinbase 的数字是其内部评估的平均值：同一设计在每个条件下运行三次。模型、仓库规模、设计难度、组件复用率和缓存状态发生变化，结果也会不同。更稳妥的做法是先用团队经常实现的几张页面建立基线，同时衡量覆盖率和质量。
质量也不能只凭页面相似度来判断。Coinbase 检查了是否使用正确的组件和设计 Token；Figma 的评估则同时评估了包括正确性、代码质量、可维护性、完整性以及可访问性和安全性在内的最佳实践。 即使页面看起来相似，如果标签页实际上不能切换，或者原有组件被数百行 CSS 取代，也不应算作成功。
在团队中复现的四个步骤
先列出重复使用量高的组件
选择最近实现的 10 个页面，统计 Button、Input、ListCell、Modal 等出现频率高的组件。为每一项记录 Figma 节点、代码 import 路径、支持的平台以及是否已弃用。与其一开始就连接整个组件库，不如优先处理前 20 个组件，以及智能体经常出错的图标和复杂表单，这样可以更快确认初期效果。
根据团队结构选择 UI 或 CLI 的连接方式
如果想快速连接路径和组件名称，Figma 内的 Code Connect UI 很方便。如果需要将设计属性动态映射到真实 prop，并提供精确的代码示例，那么在仓库中运行的 CLI 更合适。两种方式可以同时使用，但当前 Code Connect 需要 Organization 或 Enterprise 计划的 Full 或 Dev seat。
创建映射文件，并审核真实的 import
如果使用 CLI，请准备 Node.js 18 或更高版本，以及拥有 Code Connect 权限的 Figma 个人访问 Token，然后通过 npm install --global @figma/code-connect@latest 安装工具。在项目根目录创建 figma.config.json，然后在 .figma.ts 文件中将 Figma 的字符串、布尔值和枚举属性连接到代码 prop。由人工审核生成模板的 import 路径、默认值、variant 和已弃用组件后，再用 npx figma connect publish 发布。
以 A/B 方式重复相同任务，并按覆盖率分组
从实际工作中选取 5 个中等难度的页面，分别在“没有 Code Connect”和“有 Code Connect”的条件下至少运行 5 次。固定模型、提示词、仓库提交、权限和缓存条件。每次运行记录输入、输出和缓存 Token、成本、完成时间和工具调用次数，并评估构建和测试是否通过，以及是否使用了正确的组件和 Token。最后不要只看整体平均值，还要按页面中设计系统组件的占比和连接覆盖率区间划分结果。
在运营阶段，重要的是将新组件发布与 Code Connect 更新纳入同一完成条件。Coinbase 也表示，现在创建或修改组件时会同步更新对应模板。 否则，过时的映射会让智能体自信地拿到旧答案，而非正确答案。
如果想进一步深入了解
How Coinbase used Code Connect to guide agents and shrink token costs — 这是介绍 Coinbase 三次评估条件、结果和设计系统应用过程的起始案例。 figma.com
Better code, fewer tokens: The benefits of Code Connect in MCP — 可以查看 27 个测试案例的评估标准，以及覆盖率带来的结果差异。 figma.com
Getting started with Code Connect CLI — 可跟随安装、配置文件、模板编写和发布命令操作的官方开发者文档。 developers.figma.com
Code Connect — 介绍 UI 与 CLI 的区别、支持的计划，以及通过 MCP 传递的连接信息。 help.figma.com
Coinbase has open sourced its design system — 介绍 Coinbase 公开设计系统的构成、超过 100 个组件、Token 和可访问性原则。 coinbase.com
GitHub - coinbase/cds: Coinbase Design System · GitHub — 可以查看 CDS 实际的各平台软件包和公开仓库结构。 github.com
