A data contract generated from the design

Every handoff starts with the same friction: the design says one thing, the code understands another. The dev opens Figma, eyeballs the padding, guesses the name of the state, invents the shape of the data. Every guess is a future bug waiting for its moment.

The idea behind this experiment was simple: if the state already lives in the prototype, why type it again in the code? The data contract should come out of the design itself, ready to paste.

The problem with the traditional handoff

A spec in a document goes stale the next day. The design changes, the doc doesn't keep up, and what's left is the screen plus a pile of assumptions. The dev becomes a translator from pixel to type, and that translation is where most of the rework lives.

Handoff should be an export.

What I built

I wired the prototype to a step that reads the states of each component and generates the matching type in TypeScript. What the designer decides on the screen becomes the source of the contract.

// generated from the states of the <ScoreRing/> component
export type ScoreRing = {
  value: number;        // 0–100, current score
  delta: number;        // change vs previous period
  trend: 'up' | 'flat' | 'down';
  status: 'alto' | 'medio' | 'baixo';
};

The dev imports the type and plugs it in. If the design adds a new state, the type changes with it, and TypeScript complains exactly where it needs attention. The decision stays recorded in the one place both sides read.

What changed in practice

• Less back and forth about "what's the state when the value is zero".
• The contract doesn't drift, because it's born from the design itself.
• The dev stops decoding the screen and spends the time on behavior.

The conversation with the dev stays. The guessing goes, and the decision stays where it already was: on the screen.