Como Corrigir as Suposições de CSS do Claude Code com um Sistema de Design

Um desenvolvedor construindo um painel de análise de ações com o Claude Code encontrou uma frustração comum: a IA gerava repetidamente CSS quebrado para a mesma div desalinhada. Ao longo de seis iterações, tentativas de corrigir padding, mudar de flex para grid e adicionar overflow: hidden falharam ou pioraram o problema.

O Problema: IA Projetando às Cegas

O desenvolvedor percebeu que o Claude Code não tem feedback visual—ele não consegue ver a saída do navegador. Ele faz correspondência de padrões a partir de descrições e adivinha a estilização, frequentemente produzindo "CSS tecnicamente válido que parece ter sido projetado por alguém que nunca usou um computador".

A Solução: Restringir com um Sistema de Design

Em vez de dar tokens, forneça uma especificação completa do sistema de design. O desenvolvedor usou:

/* espaçamento */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* cores */
--bg-primary: #0f1117;
--bg-card: #1a1d27;
--accent: #3b82f6;
--text-primary: #e2e8f0;
--text-muted: #64748b;
/* escala de tipografia */
--text-sm: 12px;
--text-base: 14px;
--text-lg: 18px;
--text-xl: 24px;

Em seguida, instrua: "Use apenas esses valores. Nenhum número fixo em lugar algum." Isso dá ao Claude uma estrutura para raciocinar, em vez de uma tela em branco para decisões arbitrárias.

Separar Prompts de Estrutura e Estilo

Nunca peça ao Claude para escrever HTML e CSS simultaneamente. O desenvolvedor dividiu o processo:

• Primeiro prompt: "Gere apenas a estrutura HTML para este painel. Sem atributos de estilo, sem CSS, sem classes ainda. Apenas estrutura semântica."
• Segundo prompt: "Agora escreva o CSS para esta estrutura usando apenas o sistema de design acima."

Isso força o Claude a tratar o HTML como um contrato fixo antes de aplicar estilos, impedindo que ele perca o controle das suposições sobre sua própria saída.

O resultado: o próximo componente passou de seis iterações para uma. O desenvolvedor também levantou a questão de se esse sistema de design poderia ser imposto via um arquivo CLAUDE.md para evitar colá-lo a cada sessão.