Escrever o pedido de uma tela sem deixar buraco

O capítulo anterior mostrou as três camadas e o que uma tela publicada custa. Falta transformar esse entendimento em um pedido com assunto, público, tarefa e critério de sucesso.

Um pedido de tela sem assunto, público e tarefa nomeados devolve a média de tudo o que o agente de IA já viu. Agente de IA é o programa que escreve o código do seu pedido, e essa média custa três rodadas de correção.

Escrito por partes, um briefing nomeia essas três coisas, fixa os eixos visuais que importam e diz o que conta como entrega boa. Eixo visual é cada decisão de aparência: cor, tipo de letra, fundo, ritmo das seções. Escrever tudo isso troca correção repetida por aprovação na primeira rodada.

Escreva o pedido em sete partes, na mesma ordem: objetivo, público, tokens (cores e espaçamentos da marca guardados com nome), layout, estados, acessibilidade e dados de exemplo. Layout é o arranjo das partes na tela, e acessibilidade é a página servir também quem enxerga pouco ou usa só o teclado.

Cada parte fecha um buraco onde o agente inventaria sozinho, e por isso pular uma delas transfere a decisão para o acaso.

A parte mais esquecida é a quinta, os estados. Estado é a situação em que a tela aparece: vazia, carregando, com erro e com sucesso. O rascunho bonito desenha só a última, e as outras três chegam com o cliente na frente do celular.

Um critério de aceite é a frase que diz, antes de começar, o que conta como entrega boa. "Contraste de 4,5:1 no texto" é critério de aceite; "bonito e moderno" é gosto.

O objetivo ganha três nomes concretos: o assunto da tela, o público que a usa e o trabalho principal que ela faz. A skill frontend-design (o roteiro de projeto visual que o agente lê) manda propor esses três quando o pedido não os traz, e confirmar com você.

Dessas três coisas saem as escolhas visuais próprias. A indústria, os materiais e o vocabulário do negócio decidem cor, tipo de letra e ritmo da página. Um brinquedo para meninas de oito a 11 anos e um painel para analista financeiro pedem desenhos que ninguém confunde.

No mesmo ramo vale o padrão. Uma pousada na serra tem madeira, lareira e hóspede cansado; um escritório de contabilidade tem prazo, guia de imposto e cliente que quer o número certo. Um agente que não recebe esses nomes desenha a mesma página para os dois, com o mesmo azul e o mesmo cartão arredondado.

Quem constrói por vibecoding, isto é, por conversa com o agente, instala a skill no próprio ambiente. Quem contrata escreve o mesmo briefing e pede que o fornecedor o use.

Divida os eixos visuais em dois grupos. Os que você fixa (a cor da marca, a fonte do logotipo, o fundo claro) o agente segue à risca. As palavras do briefing vencem a opinião dele, mesmo quando pedem um visual que ele acha batido.

Os que você deixa livres (o tipo de letra do corpo, o ritmo das seções, a ilustração) vêm com uma restrição. Nesses eixos o agente não pode gastar a liberdade nos padrões genéricos que aparecem em qualquer página gerada. A restrição precisa estar escrita, porque sem ela o agente escolhe o padrão.

Cinco padrões genéricos têm nome e cara, e você reconhece cada um em cinco segundos quando sabe o que procurar. Por isso a proibição vai pelo nome do padrão: pedir que a página não pareça feita por IA não dá ao agente nenhum critério de recusa.

Os materiais do assunto vencem o ícone de catálogo. Uma clínica de fisioterapia pedia a página com um estetoscópio genérico e trocou o pedido por maca, faixa elástica e toalha branca. O azul-petróleo da marca ficou fixo, e a ilustração ficou livre.

Dizer em voz alta o que a tela mostra quando não há horário livre é o teste de que o estado vazio já foi escrito. Quando a frase não sai, o estado não existe no briefing.

Antes de abrir o agente, escreva o briefing em sete partes. Nomeie assunto, público e tarefa em três linhas e separe os eixos que fixa dos que deixa livres, com a proibição dos cinco padrões genéricos.

Liste os quatro estados com o texto de cada um e feche com um dado de exemplo do seu ramo e o critério de sucesso com número. Confira se o texto cabe em dez linhas antes de colar na conversa com o agente.

Guia prático: o briefing que vira configuração do agente e teste automático

O briefing deste capítulo diz assunto, público, tarefa e critério de aceite. Entre maio e setembro de 2026, três peças passaram a carregar esse texto para dentro da máquina: skills que ensinam o agente a escolher recurso do navegador pelo público, servidores MCP (o protocolo que deixa o agente abrir e inspecionar um programa) para Chrome e Safari, e uma auditoria do Lighthouse que lista os recursos da página. Você sai daqui com uma linha de compatibilidade no briefing e cada critério medível transformado em teste.