Como obter resultados refinados com kits de design de IA

Estabeleça como regra que cada componente use design tokens do sistema global, nunca cores ou tamanhos de fonte fixos. Adicione isso às instruções do seu projeto (CLAUDE.md, .cursorrules ou equivalente):

## Design system

Every component must use the global design system via semantic tokens.
Use `bg-background`, `text-foreground`, `bg-card`, `text-primary`,
`border-border`, etc. Never hardcode colors like `bg-neutral-950` or
`text-white`. Typography uses the heading and body font variables, not
literal font-family values.

Before submitting a component, verify it contains zero hardcoded color
or font values. Run a review pass if needed.

Quando cada componente puxa da mesma camada de tokens, trocar o kit de design repinta todo o produto. Sem essa regra, o primeiro kit se aplica corretamente e cada mudança posterior significa rastrear valores fixos em cinquenta arquivos.

Um agente construindo um dropdown do zero vai fazer funcionar mais ou menos. Um agente estilizando um dropdown do Radix UI com os tokens do seu kit vai conseguir algo acessível, navegável por teclado, animado e visualmente consistente. O trabalho de interação já está resolvido, então o agente só precisa aplicar a aparência.

As bibliotecas de componentes que funcionam melhor com kits de design:

• [shadcn/ui](https://ui.shadcn.com/) copia componentes no seu projeto como código-fonte. Eles já usam variáveis CSS, então os tokens de um kit de design se encaixam diretamente. Identity Forge inclui um registro shadcn que instala os tokens de um kit com um único comando.
• [Radix UI](https://www.radix-ui.com/) fornece as primitivas sem estilo por trás do shadcn. Use diretamente quando quiser controle total sobre markup e estilo mantendo o comportamento de acessibilidade e interação.
• [Base UI](https://base-ui.com/) é outra biblioteca de primitivas sem estilo com uma API mínima. Boa opção quando o nível de abstração do Radix parece pesado para o seu caso de uso.

A divisão é a mesma em cada caso: a biblioteca cuida do comportamento (gerenciamento de foco, navegação por teclado, anúncios para leitores de tela, bloqueio de scroll, posicionamento de portais) e o kit de design cuida da aparência (cores, tipografia, espaçamento, formas, elevação). Você pode trocar o kit sem mexer nos componentes, ou trocar a biblioteca de componentes sem mexer no kit.

Antes de se comprometer com um kit de design, gere algumas imagens de como o produto poderia ficar. Modelos de imagem são bons em atmosfera, composição e relações de cor. Eles são ruins em produzir um sistema a partir do qual se possa construir. Use-os para o primeiro, não para o segundo.

1. 1

   Gerar imagens de referência

   Use um modelo de imagem (gpt-image-1 funciona bem pela CLI do Codex) para explorar direções visuais. Gere de três a cinco opções com atmosferas diferentes.

   Copy

   codex exec "generate an image of a SaaS dashboard with warm, earthy tones and generous whitespace"

2. 2

   Escolher a direção

   Escolha a imagem que captura como o produto deveria se sentir. Você está escolhendo uma atmosfera, não um layout.

3. 3

   Criar o kit

   Deixe seu agente criar um kit de design no Identity Forge que combine com a direção escolhida. Ou use o pipeline de extração para extrair tokens de uma referência existente.

4. 4

   Manter no Identity Forge

   A partir daqui, o kit é a fonte de verdade. Refine no Studio, versione e exporte para seu agente. A imagem deu a direção; o kit mantém a consistência.

Modelos de imagem são bons na parte de exploração. Eles não são bons em produzir algo a partir do qual um agente pode construir diretamente. Uma imagem não pode dizer a um agente qual border-radius usar em um card. Um kit pode.

A técnica menos utilizada: em vez de aceitar a primeira versão de uma seção, peça ao seu agente para construir três variações com layouts, densidades ou padrões de ênfase diferentes.

Build three variations of the pricing section:
1. A compact horizontal layout with all plans visible at once
2. A card-based layout with the recommended plan highlighted
3. A comparison table with feature rows

Use the active design kit for all three. Keep each in a
separate component file so I can compare them side by side.

Isso custa alguns minutos extras de tempo do agente e evita que o projeto fique parecendo o resultado padrão do modelo. O agente aplica o mesmo kit de design em cada variação, então as três estão alinhadas com a marca. Você escolhe a que se encaixa no conteúdo, no público e no ritmo da página.

Nada disso é difícil isoladamente. O efeito cumulativo é o que importa. Tokens obrigatórios significam que o kit realmente controla a aparência. Boas primitivas de componentes significam que as interações simplesmente funcionam. Uma referência visual real significa que a atmosfera é intencional, não acidental. E escolher entre três opções significa que o layout se adapta ao conteúdo em vez de se adaptar ao padrão do modelo. O resultado parece que alguém tomou decisões de design, porque alguém tomou.