Design — composição espacial

Quando Usar

Use esta habilidade quando precisar de design — composição espacial.

Um modelo não pode confiar em sua própria saída de UI. Todo o resto decorre de duas falhas.

1. Não consegue ver o que criou

A UI é gerada como um fluxo de tokens, nunca como pixels — então o modelo não consegue perceber colisões, sobreposições, desequilíbrios ou espaçamento quebrado. Ele escreverá um título que se sobrepõe à imagem principal e não terá ideia.

Renderize e julgue a imagem, não o código. Sirva com qualquer servidor estático (por exemplo, python3 -m http.server ou npx serve) e capture a tela sem cabeça via Playwright. Capture a tela em algumas larguras.

Critique com olhos frescos — não os seus. Avaliar sua própria saída a racionaliza; o construtor olha para seu título sobreposto e o considera bom (é exatamente assim que uma colisão real foi enviada em testes). Use um juiz separado — um subagente que não escreveu a página — e diga a ele para procurar o que está errado: colisões, tangentes de borda, alinhamento irregular, peso desequilibrado, nenhum ponto focal claro, quebras em alguma largura. Corrija, renderize novamente, julgue novamente.

2. Sua primeira ideia é a média

O que quer que ele produza primeiro é a média de seus dados de treinamento — e há mais de uma média:

• a média de IA genérica: Inter, gradientes roxo sobre branco, coluna única centralizada, três cartões iguais;
• a média de tendências de design: letras maiúsculas condensadas exageradas, modo escuro + granulação, microtexto "vibes" monoespaçado, selos adesivos.

Aterrar na segunda não é gosto — é uma média mais lisonjeira, e é por isso que ela passa despercebida. Trate seu primeiro instinto como a média e desvie deliberadamente — em direção ao mundo específico deste produto (use o domínio / mundo de cores / assinatura do design thinking como direção), não em direção a outra tendência. Se o resultado pudesse ser de qualquer startup, você enviou a média.

3. Portanto, não prescreva um estilo

Qualquer regra fixa — uma grade de 12 colunas, uma escala de 8 pontos, "mono = dados" — se torna a média do próximo ciclo, e um modelo cego a executa em colisões de qualquer maneira. Prescreva o processo, não a aparência: veja com olhos frescos e afaste-se da média em direção ao domínio. O gosto fornece a direção (design thinking / filosofia de design); esta habilidade apenas insiste que você olhe e não envie a média.

Para ajuste espacial iterativo, uma página local com controles ao vivo (sliders, seletores, alças de arrastar) supera a crítica de tiro único.

4. NUNCA envie overflow horizontal — O portão obrigatório, sem exceções

PORTÃO DE BLOQUEIO. Você não pode chamar nenhuma UI da web de "concluída", "funcionando", "corrigida" ou "parece boa" até que você tenha executado a verificação scrollWidth abaixo em uma largura estreita NESTA vez e visto 0. Não "adicionei overflow-x:clip para que esteja bom." Não "parecia bom na minha largura." MEÇA. Estreito. Todas as vezes. Se você não mediu, não está pronto — diga "ainda não verifiquei o overflow" em vez de alegar que está pronto.

Uma barra de rolagem de um lado para o outro que não corresponde ao conteúdo é a falha de layout mais comum e mais embaraçosa, e ela é enviada repetidamente porque a viewport do desenvolvedor é larga o suficiente para escondê-la — o overflow só aparece quando a janela é mais estreita que algum elemento. É invisível na largura do desktop, então o loop de renderização-crítica §1 NÃO o capturará a menos que você capture a tela em uma largura estreita. Portão separado, explícito e inegociável.

Ele recorre porque os layouts CRESCEEM depois de terem sido verificados pela última vez. Toda vez que você adiciona uma aba de navegação, um botão de barra de ferramentas, um controle de cabeçalho, um chip, uma equação mais larga/<pre>, ou qualquer novo item a uma linha flex/inline, você invalidou a última verificação de overflow — a linha que cabia ontem agora empurra para fora da borda entre ~720–1200px enquanto sua janela de desenvolvimento de 1440px não mostra nada de errado. (Envio real, 2026-06, DUAS VEZES: um rótulo de borda de barra de progresso transbordou 23px; então um cabeçalho flex-wrap:nowrap que cresceu 4 abas rolou a página inteira 309px entre 720–1200px — ambos invisíveis na largura do desenvolvedor, ambos capturados apenas medindo em largura estreita.) Portanto: qualquer alteração que adicione um elemento a uma linha horizontal reativa este portão. Reavalie.

Defesas padrão para aplicar de antemão (para que o portão seja aprovado por construção):

• Linhas de cabeçalho / navegação / barra de ferramentas: flex-wrap: wrap, nunca nowrap. Um flex de linha única em crescimento é a principal fonte desse bug. A quebra de linha é uma operação nula quando cabe e salva você quando não cabe.
• body { overflow-x: clip } como um backstop em todos os aplicativos (clip, não hidden — mantém layouts fixos/ancorados funcionando). Um backstop, NÃO um substituto para medição.

…