Contrato de dados gerado do design

Todo handoff começa com a mesma fricção: o design diz uma coisa, o código entende outra. O dev abre o Figma, mede padding no olho, adivinha o nome do estado, inventa o tipo do dado. Cada adivinhação é um bug futuro esperando a hora.

A ideia desse experimento foi simples: se o estado já existe no protótipo, por que digitar ele de novo no código? O contrato de dados devia sair do próprio design, pronto pra colar.

O problema com o handoff tradicional

Especificação em documento envelhece no dia seguinte. O design muda, a doc não acompanha, e o que sobra é a tela mais um monte de suposição. O dev vira tradutor de pixel pra tipo, e nessa tradução mora a maior parte do retrabalho.

O handoff deveria ser um export.

O que eu montei

Liguei o protótipo a um passo que lê os estados de cada componente e gera o tipo correspondente em TypeScript. O que o designer decide na tela vira a fonte do contrato.

// gerado a partir dos estados do componente <ScoreRing/>
export type ScoreRing = {
  value: number;        // 0–100, score atual
  delta: number;        // variação vs período anterior
  trend: 'up' | 'flat' | 'down';
  status: 'alto' | 'medio' | 'baixo';
};

O dev importa o tipo e pluga. Se o design adiciona um estado novo, o tipo muda junto, e o TypeScript reclama exatamente onde precisa de atenção. A decisão fica registrada no único lugar que os dois lados leem.

O que mudou na prática

• Menos ida e volta sobre "qual é o estado quando o valor é zero".
• O contrato não desatualiza, porque nasce do próprio design.
• O dev para de decifrar a tela e gasta o tempo no comportamento.

A conversa com o dev continua. O que sai do caminho é a adivinhação, e a decisão fica onde já estava: na tela.