CEVIU Logo
Voltar

Cada componente em seu design system é uma promessa, e a IA precisa de contratos, não só de documentação

Aprofundamento CEVIU

Aprofundamento

O uSpec da Uber não é só uma ferramenta de documentação acelerada, é um teste de maturidade estrutural do seu design system. Ele só funciona quando componentes são definidos como APIs visuais: com propriedades tipadas, variantes enumeradas, tokens semanticamente nomeados (ex: color-feedback-critical, não blue-600) e relações entre partes codificadas na estrutura, como um Modal que exige um ModalFooter em tempo de execução, não só em um guia do Storybook. Isso transforma o Figma de um quadro de desenho em uma fonte de verdade executável.

O Anova, plugin lançado em outubro de 2025, é o elo crítico nessa cadeia: ele converte 42 mil linhas de JSON bruto do Figma em algumas centenas de linhas de especificação determinística, com anatomia, diffs de variantes e combinações inválidas explicitadas. É essa compressão semântica que permite ao agente no Cursor ler o componente como um contrato, não como um arquivo de imagem vetorial. E tudo roda localmente, sem sair da rede da Uber, segurança não é um extra, é parte do contrato.

O que mudou

A cobertura CEVIU anterior (2026-05-11 e 2026-05-14) já apontava para a necessidade de 'design systems agentic', mas como conceito. Agora, com o uSpec em produção desde março de 2026 e integrado à plataforma Michelangelo da Uber, temos um caso real de implantação: não é mais teoria, é pipeline operacional. O que era rumor sobre 'contratos explícitos' virou prática com TypeScript strict + DTCG 2025.10 + Anova YAML. A diferença? Antes falávamos em 'preparar para IA'. Hoje, a Uber já opera com agentes que geram código válido na primeira tentativa, porque o sistema recusa erros em tempo de compilação, não apenas os descreve em texto.

Por que isso importa

Designers e devs não estão mais apenas fazendo interfaces para humanos. Estão escrevendo contratos para máquinas que vão gerar, testar e manter essas interfaces. Um token chamado blue-600 é um convite para erro silencioso; color-action-primary é uma regra que impede que um agente use o mesmo azul num botão de exclusão. Isso muda o papel do designer: de autor de diretrizes para engenheiro de interfaces de consumo, humano ou máquina. E muda o papel do dev: ele não implementa mais um componente, ele valida se o contrato foi respeitado, tanto no código quanto no Figma.

Linha do tempo

  1. Lançamento da versão estável 2025.10 da especificação DTCG

  2. Lançamento do Figma Console MCP Desktop Bridge pela Southleft

  3. Lançamento do plugin Anova para Figma

  4. Ian Guisard publica detalhes iniciais do uSpec

  5. CEVIU News analisa o uSpec como sistema de contratos para IA, não apenas documentação

Perguntas frequentes

O uSpec funciona fora da Uber?

Sim, é open-source no GitHub e roda localmente com Cursor + Figma Desktop. Mas depende de um design system estruturado conforme DTCG e com componentes codificados como contratos, o que poucas empresas têm hoje. A infraestrutura está acessível; a maturidade estrutural, não.

Qual a diferença prática entre um token 'blue-600' e 'color-action-primary'?

O primeiro descreve um valor visual. O segundo define um propósito: esse azul é reservado para botões primários de ação. Um agente pode reutilizar 'blue-600' em qualquer lugar. Já 'color-action-primary' só aparece onde o contrato permite, e o sistema rejeita uso indevido antes mesmo de gerar código.

O Anova substitui o Storybook?

Não. O Storybook continua essencial para demonstração humana e testes interativos. O Anova alimenta agentes de IA com dados estruturados, é o 'manual de máquina' que o Storybook nunca foi projetado para ser. São camadas complementares: um fala com pessoas, o outro com processos.

Por que a DTCG 2025.10 é tão relevante agora?

Porque ela padroniza como tokens carregam significado, não só valores. Com suporte nativo a temas, aliases e herança, ela permite que um agente entenda que '--button-background-primary' vem de '--color-action-primary', que por sua vez vem de '--color-brand-primary'. Sem isso, cada ferramenta interpreta tokens de forma isolada, e os agentes inventam ligações.

Fontes

Avalie este artigo:
Compartilhar:
Categoria
CEVIU Design
Publicado
15 de junho de 2026
Editoria
CEVIU Design

Quer receber mais sobre CEVIU Design?

Conteúdo curado diariamente, direto no seu e-mail.

Conteúdo curado diariamenteDiversas categoriasCancele quando quiser