[research@ai4se] : ~ $ ▌
cd ../
[methodology] | | 14 min

# 设计开发 Handoff 精益策略：如何把 AI 代码生成的 Token 成本降一个数量级

传统设计开发 Handoff 依赖截图与自然语言，AI 每轮重复解析、翻译、生成冗余样式，Token 成本极高。本文从三大浪费根因出发，提出 Design-to-Code DSL 栈与 HCP 分层协议作为通用解法，并以 Figma Dev Mode + MCP + Code Connect 作为验证实例。

[agentic-engineering][context-engineering][dsl][handoff][mcp-protocol][cost]

开发者把设计稿截图丢进 Cursor，附一句「请用 @corp/ui 实现这个页面」——一轮下来 input 8K、output 5K，两轮纠错又烧 20K，生成的还是 <div> 套 <div>，人工重构后才接入企业组件库。

问题通常不在模型，而在 Handoff 链路没有「可复用的结构化语义」——设计侧产出的是一次性视觉信息，工程侧每次都要重新翻译，AI 每次都要重新生成样式与组件决策。沿用 LLM 成本基础 的公式：账单 = 模型单价 × Token 计量 × 工作流放大系数；Handoff 放大的正是重复劳动。

本文提出一套 工具无关 的设计开发 Handoff 精益策略：用 Design-to-Code DSL 栈 解决三大 Token 浪费根因，用 HCP（Handoff Context Pack） 把 DSL 分层供给 Agent。文首是抽象方案与实操路径；Figma 仅在文末作验证实例——Dev Mode + MCP + Code Connect 的商业实践，恰好印证了这套抽象思路为何能降 Token。

三大 Token 浪费根因

传统 Handoff（截图、标注、口头说明）之所以 Token 成本极高，根源是三类 不可复用：

浪费根因传统 Handoff 的表现Token 后果
① 设计层信息不可复用颜色、间距、字号以像素/hex 散落在图层里；设计 Token 未绑定代码语义每次 AI 都要视觉解析或重复解释「4px 对应哪个变量」
② 开发侧重复翻译设计组件与 @corp/ui 无稳定映射；每次 Handoff 重新对齐「这个按钮用哪个组件、props 是什么」每轮对话重复传输架构说明；output 先生成 div 再人工重构
③ 重复生成冗余样式无全局缓存；改一个按钮也要重发整页上下文，AI 重新输出已有 layout/CSSinput 全量重传；output 重复生成已存在的样式与结构

三类浪费相互叠加：① 让 input 膨胀，② 让 input 与 output 双膨胀，③ 让增量场景也退化为全量生成。第四类 后置校验（生成后 CR 才发现 props 不对）则是前三类的后果——没有结构化语义，就没有编译期检查，纠错轮次 ×2–4。

抽象解法：为 Handoff 建立 可复用、可缓存、可 diff 的 Design-to-Code DSL 栈，让三类信息各归其位、只传一次：

① 设计层不可复用  →  Token Registry（Design Token 绑定代码语法，全局缓存）
② 开发侧重复翻译  →  Component Registry + Intent DSL（组件映射一次建立，Handoff 传语义）
③ 重复生成冗余样式 →  HCP 分层 + Delta-First（L0/L1 缓存，L3 只传变更）

下文用 领域特定语言（DSL） 把这三条抽象机制落成可执行协议。DSL 的价值是 高信号密度、无歧义、可 diff、可校验——正是 Context Engineering 在 Handoff 场景的落点。

实操对照——同一块 Hero CTA，自然语言 vs Intent DSL 的信号密度：

# 自然语言 Handoff（~150 tokens，每轮表述可能不一致）
「主色大号按钮，loading 态，文案『立即开始』，用公司 Button，
 import @corp/ui，埋点 home_cta_click，i18n key home.cta.start」

# Intent DSL（~40 tokens，确定性，可 diff）
component: ECR.corp.button
props: { variant: primary, size: lg, loading: false }
slots: { label: i18n:home.cta.start }
analytics: { event: home_cta_click }

Design-to-Code DSL Stack：Handoff 的领域语言

理论：Handoff 不是「翻译问题」，是 缺少设计→代码的领域语言栈。五层 DSL 各解决三类浪费的一个或多个环节，合在一起构成 UDHP（Universal Design Handoff Protocol）。

设计阶段 ──► Handoff ──► AI 生成 ──► 验证
   │              │           │          │
Component DSL   Intent DSL  Generation  Verification
Architecture DSL    │         DSL         DSL
                    ▼
              HCP 序列化层（Agent 消费格式）
DSL 层产物解决的浪费回答的问题
Component DSLECR Manifest② 重复翻译设计组件 = 哪个工程组件？props/slots？
Architecture DSLArchitecture Profile② 重复翻译页面模板、目录、横切规则？
Token RegistryDesign Token → 代码语法① 不可复用primary 对应 var(--color-brand)？
Intent DSLDID②③这一屏要实现什么？（可 diff）
Generation DSLEmission Profile②③ECR 组件如何写成企业代码？
Verification DSLContract Spec后置校验生成物是否合规？

Token Registry 可并入 Component DSL / ECR，也可独立维护；关键是 Design Token 必须绑定代码语法，而非只存 hex 值。

Agent 角色：从「视觉理解 + 架构猜测 + 代码生成」变为 Intent DSL 解析 → Generation DSL 查表 → props 填充——确定性编译，不是看图说话。

实操：五层 DSL 最小 YAML 骨架（先从一个页面跑通）：

# ── Token Registry（解决 ①）──
tokens:
  color.brand: { figma: "primary/500", code: "var(--color-brand)" }
  space.16: { figma: "spacing/md", code: "var(--spacer-4)" }

# ── Component DSL / ECR（解决 ②）──
components:
  corp.button:
    import: "@corp/ui/CorpButton"
    props:
      variant: { type: enum, values: [primary, default, text], default: default }
      size: { type: enum, values: [sm, md, lg], default: md }
    slots:
      label: { type: i18n-key, required: true }

# ── Intent DSL / DID（解决 ②③）──
nodes:
  - id: hero-cta
    component: corp.button
    props: { variant: primary, size: lg }
    slots: { label: i18n:home.cta.start }
    tokens: { background: color.brand }   # 引用 Token Registry，非 #0066FF

# ── Generation DSL / Emission Profile（解决 ②③）──
emission:
  components:
    corp.button:
      import: "import { CorpButton } from '@corp/ui'"
      template: |
        <CorpButton variant="{props.variant}" size="{props.size}">
          {t('{slots.label}')}
        </CorpButton>

# ── Verification DSL ──
contract:
  nodeId: hero-cta
  mustImport: ["@corp/ui"]
  props: { variant: primary, size: lg }

HCP：三类浪费的精益传输协议

理论：HCP（Handoff Context Pack）不是又一套设计格式，而是 把 DSL 分层供给 Agent——直接针对三大浪费中的 ③，并配合 ①② 的缓存复用。

在 Harness Engineering 里：Token Registry + Component DSL = Guides；Verification DSL = Sensors；HCP = Context 的 Lazy Loading。

HCP 层内容对应浪费传输策略
L0Token Registry + Component DSL 摘要①② 全局复用MCP Resource，content-addressed 缓存
L1Generation DSL + Architecture DSL② 项目级复用MCP Resource，项目缓存
L2Intent DSL 页面子树③ scope 裁剪inline，只传 task 相关节点
L3Delta + 任务指令③ 增量inline，since → current diff

三条规则（实操必守）：

  1. Reference-not-Inline — L0/L1 永远 ref；Token 与组件定义不重复传输
  2. Scope Slicing — L2 只传 task.scope 子树
  3. Delta-First — 改一个按钮只传 L3 Delta，不全页重跑

实操：HCP 示例 + Agent 集成：

hcpVersion: "1.0"
cacheKeys:
  l0: "ecr:sha256:a3f8..."
  l1: "profile:corp-web:v2"
task:
  scope: "node:hero-cta"
  since: "did:v3"
context:
  l0Ref: "ecr:sha256:a3f8..."
  l1Ref: "profile:corp-web:v2"
  l2Inline:
    nodes:
      - id: hero-cta
        component: corp.button
        props: { variant: primary, size: lg }
        slots: { label: i18n:home.cta.start }
  l3Inline:
    delta: { props.size: { from: md, to: lg } }
verification:
  contract: "./contracts/hero-cta.contract.yaml"
async function implementFromDesign(task: Task) {
  const ecr = await mcp.readResource(`ecr://${task.ecrHash}`);     // L0 命中 cache → 0 边际
  const profile = await mcp.readResource(`profile://${task.projectId}`);
  const hcp = await udhp.pack({ did: task.did, scope: task.scope, since: task.since });
  const code = await agent.generate({ ecr, profile, ...hcp });
  return udhp.verify({ code, contract: hcp.verification.contract });
}

设计阶段约束：让私有架构在 Handoff 之前就生效

理论：「请用 @corp/ui」写在 Prompt 里，挡不住设计师画游离矩形，也挡不住 AI 输出 div。DSL 语法 + 设计时 Lint 把 ② 的翻译工作前移到设计阶段。

机制针对浪费实操
约束 Palette②设计师只实例化 ECR 已注册组件
Token 绑定代码语法①Design Token 存 code: 字段，非 hex
Props Binding②设计侧选 props = 写 API 调用
设计时 Lint后置校验udhp lint did.yaml --ecr ecr.yaml
Emission Profile②③AI 查表生成，不猜 import

三级门禁：设计 Lint → Handoff Lint → Contract Verify。任何一道门失败，不进入 AI 生成，不烧 Token。

从现有 @corp/ui 启动：

udhp ecr extract --from "./node_modules/@corp/ui/dist/index.d.ts" --out ./handoff/ecr.yaml
udhp emission init --from "./src/pages/Home/index.tsx" --ecr ./handoff/ecr.yaml --out ./handoff/emission.yaml

Token 量化：传统 Handoff vs DSL + HCP

模式做法合计 Token三大浪费
V1 传统截图 + 自然语言11K–28K/页①②③ 全中
V2 半结构化JSON 全页 + 架构说明5K–13K① 部分缓解
V3 DSL + HCPL0/L1 cache + L2/L3 inline0.8K–3K/页①②③ 针对性消除
V3 增量仅 L3 Delta80–250/次③ 全消除

MVP：不依赖任何设计工具 API

udhp ecr init --out ./handoff/ecr.yaml
udhp did import --asset ./design/home.png --map ./handoff/mapping.yaml --out ./handoff/did-home.yaml
udhp lint ./handoff/did-home.yaml --ecr ./handoff/ecr.yaml
udhp pack ./handoff/did-home.yaml --scope "node:hero-cta" --profile ./handoff/emission.yaml -o ./handoff/hcp.yaml
udhp verify --code ./src/pages/Home/HeroCta.tsx --contract ./handoff/contracts/hero-cta.contract.yaml

设计师通过 中立映射 UI 完成 Intent DSL 标注；P2 才是各设计工具的 DID 适配器。

反模式与行动清单

反模式对应浪费
截图 Handoff①②③ 全中
Token 只存 hex 不绑 code syntax①
每轮 Prompt 重复解释组件库②
改一个 props 重发整页③
无 Contract Verify 直接 merge后置校验爆炸

五 step：提取 ECR → 写 Emission Profile → 标注一页 DID → lint → pack → verify → MCP 注册 L0/L1。

验证实例：Figma Dev Mode + MCP + Code Connect

Figma 不是本文方案的前提。以下说明：Figma 现有 Handoff 模式为何比传统交付省 Token——因为它在 商业产品内实现了上文三类浪费的抽象解法。

Figma 把 Handoff 拆成三层能力，与三大浪费一一对应：

抽象解法Figma 实现验证了什麼
① Token 可复用Dev Mode Variables + Code Syntax：Inspect Panel 直接给出 var(--spacer-2)，而非 4px；设计 Token 绑定代码语义设计层信息一次定义、开发侧直接引用，无需 AI 重复解析像素
② 翻译只做一次Code Connect：Figma 组件实例映射到生产代码组件；Dev Mode 展示真实 import 与 props mapping组件翻译在配置期完成，Handoff 传语义不传猜测
③ 上下文分层供给MCP Server：get_metadata 定位 → get_design_context 按需切片；结构化 design tree 替代截图不全量 dump；Scope Slicing 控 Token

Figma 内部设计系统团队的实践也印证了 ①：Dev Mode 之前开发者要自行推断「4px 对应哪个 CSS 变量」，现在 Inspect Panel 直接给出 var(--color-icon-onbrand)——重复翻译的 Token 成本归零。

与 UDHP 的关系：Figma 验证了三类抽象解法 单独成立且可叠加；但未提供工具无关的 Intent DSL 标准、完整的 HCP 分层缓存（L0/L1 content-addressed）、开放的 Generation DSL（MCP 默认 React+Tailwind，私有 @corp/ui 仍需 Emission Profile）。完整 DSL 栈 + HCP 是 UDHP 对 Figma 思路的通用化——任何设计工具只要能导出 Raw Asset，都可以走 MVP 路径；Figma 用户把 Code Connect 当作 Component DSL 的适配器，在 MCP 之上加 HCP 分层即可。

收束

设计开发 Handoff 的 Token 困境，表面是「AI 生成贵」，根源是 三类不可复用：设计 Token 不可复用、组件翻译不可复用、生成上下文不可复用。精益策略是建立 Design-to-Code DSL 栈 + HCP 分层协议，让 Agent 消费结构化语义而非截图。

理论：三类浪费 → 三个抽象机制 → 五层 DSL + HCP 落地。

实操：从 @corp/ui 提取 ECR，写 Emission Profile，跑通 lint → pack → verify，MCP 注册 L0/L1。Figma 的 Dev Mode + Code Connect + MCP 是这套方法论已跑通的验证实例——路可行，协议需自己定义。

参考