Projetar o briefing, o repertório da marca e o custo de manter

A cor da marca copiada em 30 arquivos do site vira 30 edições no dia em que você decide trocá-la. Toda tela publicada tem três camadas, e o visitante enxerga só uma delas quando abre o site.

As outras duas ficam invisíveis e cobram meses depois, em manutenção e em risco que a empresa assumiu sem perceber. É nelas que mora o trabalho de quem aprova, contrata ou constrói a próxima tela. Enxergar as três muda a decisão, porque você para de julgar a página só pelo que aparece.

A primeira camada é a tela pronta, o que o visitante vê ao abrir o site. Qualquer pessoa julga essa camada em cinco segundos, e por isso ela rouba a atenção de quem pede e de quem constrói.

Vem em seguida a segunda camada, o que você mantém depois de publicar. Cada componente, a peça que se repete como o botão, vira responsabilidade sua, e cada biblioteca (o pacote de código pronto que poupa escrever do zero) também.

Manter custa porque o mundo em volta se mexe. As bibliotecas publicam correção de segurança, os navegadores mudam o comportamento de algum recurso, e a tela perfeita de março quebra em setembro sem aviso.

A terceira camada é o que a empresa assume ao publicar. O formulário de cadastro guarda dado pessoal do cliente, e alguém responde por essa guarda. A biblioteca de gráficos vem com licença, e algumas obrigam você a abrir o próprio código.

O cinza claro do preço decide se um cliente com baixa visão consegue ler quanto custa. Por isso cada peça que você instala resolve a camada um e entra nas camadas dois e três no mesmo minuto.

Uma página parece um bloco só e se monta a partir de poucas partes repetidas. Uma loja online tem cinco. O cabeçalho traz logo, busca e carrinho, seguido pela faixa de destaque com a oferta do dia. Vem depois a grade de produtos, feita do cartão de produto repetido, e o rodapé fecha com contato e política de privacidade.

As mesmas cinco partes aparecem no Mercado Livre, na Amazon e na Shopee. Quem lê a página como lista de peças pede cada peça uma vez só ao agente de IA, o programa que escreve o código do seu pedido.

O cartão de produto é a peça que mais ensina o método. Você desenha o componente uma vez, com foto, nome, preço e botão de comprar, e a página o repete dezenas de vezes com dados diferentes.

A cor da marca segue a mesma lógica e vira um token (o valor guardado com nome, como a etiqueta na lata de tinta). Copiada em 30 arquivos, a troca do azul vira 30 edições. A que você esquecer aparece numa página perdida do site.

Cada biblioteca instalada traz outras junto, e essas peças de terceiros formam boa parte do código que roda no navegador do seu cliente. Uma checagem de dependências por mês, a lista dessas peças, mostra quais ficaram para trás e qual mudou de licença.

Todo número que a tela mostra pertence à terceira camada, porque a empresa responde por ele. A regra dos dois cliques (quem lê o número descobre a origem dele em dois cliques, como a data de validade no rótulo) é o critério de conferência.

Ela cobra quatro coisas: fonte, de onde o número vem; definição, o que ele conta; frescor, quando foi atualizado; e responsável, quem responde se ele estiver errado. O contador de clientes atendidos escrito direto no código reprova nos quatro.

O anti-padrão correspondente é a métrica (o número que mede o negócio) sem fonte, meta, baseline (o valor de partida contra o qual você compara) ou responsável. Um painel com 40 indicadores e nenhuma decisão nasce assim: cada número foi pedido por alguém e nenhum tem dono.

Aplique a regra a todo número de desempenho: clientes atendidos, nota média, pedidos do mês. Dado cadastral, como telefone e endereço, pede só dono e data de atualização. Quando a tela não consegue ligar o número à fonte viva, escreva embaixo dele a data e a origem, e anote o responsável na planilha interna.

Antes de aprovar a próxima tela, escreva as três camadas numa folha e marque o cartão que se repete. Depois pergunte em quantos arquivos a cor da marca está copiada, porque esse número é o custo da próxima troca de identidade.

Passe cada número visível pela regra dos dois cliques. O contador de carros atendidos de uma oficina, escrito direto no código, reprova em três dos quatro e em seis meses anuncia um passado como se fosse hoje. Peça a lista de bibliotecas atrasadas há mais de seis meses, com data marcada para revisá-la.

Escreva o pedido de uma tela sem deixar buraco

As três camadas já explicam o que uma tela publicada custa, e 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.

Faça a página parecer sua marca, e não a ferramenta

O briefing já tem destinatário e critério, e ainda produz tela genérica enquanto não carregar referências de fora do algoritmo e eixos visuais fixados pela marca.

A ferramenta de IA amplia o que já existe no briefing, inclusive a falta de repertório, e devolve a saída mais provável entre tudo que já viu. Repertório é o acervo de referências próprias da marca: a loja, a embalagem, o letreiro, o jeito de falar com o cliente.

Quando o cliente reconhece a ferramenta antes da marca na própria página, o prejuízo é de identidade. O teste do sósia decide de quem é a tela. Três itens novos entram no briefing para vencer a média: referências de fora do algoritmo, eixos fixos da marca e uma frase de assinatura.

Design é escolha, repertório, contexto e identidade. Caio Camargo escreveu que a IA começou como design para quem não é designer e está virando design para quem não entende de design. O consumidor já tem a frase pronta: "isso tem cara de IA".

Quando a pessoa reconhece a ferramenta antes da marca, o problema é de marca. No mesmo artigo, uma estrategista de branding lembra que a marca com DNA bem definido e bem gerido "é rei diante de tanta coisa igual". Um head de UX completa: a IA expôs quem já era fraco, designers incluídos.

A média tem um mecanismo simples: o modelo devolve a saída mais provável entre tudo o que viu. O índigo que aparece em botão de página gerada tem endereço verificável. Ele vem do Tailwind, o kit de estilos usado em boa parte dos sites, onde é uma das cores que já vêm prontas.

Em repositório público está documentada a cadeia que espalha essa cor. O shadcn/ui, a coleção de componentes prontos sobre o Tailwind, é a biblioteca padrão de vários geradores de página. Ninguém declarou essa preferência, e ela chega pela cadeia de ferramentas.

A página gerada hoje volta para o treino de amanhã, e o laço se fecha: quanto mais igual a web fica, mais igual nasce a próxima página.

Vibe coding é construir telas por conversa com o agente de IA, o programa que escreve o código do pedido. Um estudo da Universidade de Washington testou seis dessas plataformas, e todas reproduziram as convenções do treino.

Os autores chamam isso de armadilha do bom o suficiente. O leigo aceita o que parece pronto porque nada, na tela, pergunta se aquilo reflete a marca dele.

A perda de variedade já foi medida em texto por estudos revisados por pares. Quem escreve com ajuda de IA tem mais ideias sozinho, enquanto o conjunto do grupo fica mais parecido.

Essa causa tem endereço: o ajuste que deixa o modelo agradável ao gosto humano é o que reduz a variedade, e o modelo sem esse ajuste não reduz. Quando o modelo passa a treinar sobre a própria saída, as pontas raras somem de vez.

Para cor de site ainda não existe número publicado. A decisão prática não muda por isso: quando a sua página sai igual à do concorrente, o problema já está na sua mesa.

A web já convergia antes da IA. Os sistemas de design das grandes empresas, os manuais que padronizam botão, cor e espaçamento, já achatavam as diferenças. As marcas de luxo fizeram o mesmo ao trocar o logotipo desenhado pelo nome em caixa alta.

Nesse quadro a IA entrou como fotocopiadora de alta velocidade e como motor de média, e os antídotos cabem em qualquer negócio. Busque referências de fora do algoritmo, use a IA na geração e deixe o acabamento com a mão humana.

Referência de fora do algoritmo é a que você não achou rolando a tela: um livro, um filme, o prédio da esquina, a embalagem antiga guardada na loja.

O teste do sósia decide de quem é a tela. Tire logotipo e nome, mostre a página a alguém de fora do ramo e pergunte de quem é. Se a resposta for "alguma empresa de tecnologia", a peça é da ferramenta. Se a pessoa acerta o ramo e chega perto do nome, a peça é da marca.

A versão textual funciona igual: três parágrafos do site, sem nome, para a mesma pessoa. Se a ferramenta é reconhecida antes da marca, a marca perdeu. O critério final de Camargo vale como meta: alguém olhar a peça sem logotipo e pensar "isso só poderia ser dessa marca".

Essa saturação repete o ciclo dos bancos de imagem, os catálogos de fotos prontas que todo mundo compra: surpresa, comum, previsível, cansativo e repulsa. A tabela diz o que fazer em cada estágio, e quanto mais cedo você entra, menos estágios o site percorre.

Tudo isso entra no briefing da aula anterior como três linhas a mais. Primeiro, três a cinco referências de fora do algoritmo: o material do ramo, a loja, a embalagem, o letreiro. Segundo, os eixos fixos da marca, que o agente segue à risca. Terceiro, a frase de assinatura: "o que só poderia ser nosso".

O prompt (o pedido escrito que vai para o agente) carrega o repertório porque a ferramenta amplia o que recebe. Sem repertório, volta a média; com repertório, volta uma versão maior do que a marca já era.

A referência que serve é a que nenhum concorrente conseguiria copiar. Numa cafeteria de bairro, a primeira versão da página tinha foto de banco de imagem e um azul qualquer, e ninguém a distinguia das outras.

O dono fotografou a xícara esmaltada no balcão e o letreiro pintado à mão. A cor da xícara virou o destaque e a letra do letreiro virou o título. Quem viu a página sem logotipo passou a responder "uma cafeteria", em vez de "uma empresa de tecnologia".

Antes de aprovar a próxima tela, esconda o logotipo, mostre a página e três parágrafos do texto a alguém de fora do ramo e anote a resposta literal. Fotografe três referências que nenhum concorrente conseguiria tirar.

Escreva em uma linha o que só poderia ser da sua marca e liste os eixos que o agente não pode mudar. Cole essas três linhas no briefing, gere de novo e repita o teste: só aprove quando a resposta acertar o ramo.

Guia prático: começar de um template que já traz CLAUDE.md e DESIGN.md

A página em branco obriga o agente a decidir tudo, e ele decide pelo padrão da moda. Um template profissional chega com as decisões tomadas e com dois arquivos que o agente lê antes de editar: o CLAUDE.md, que diz como rodar e onde está cada coisa, e o DESIGN.md, que guarda a identidade. A galeria de 51 templates estudada em 07/10/2026 traz os dois arquivos em todos os 51.

Os 51 não são iguais. Medidos um a um, eles caem em três famílias

A família muda o pedido que você faz ao agente: num template premium, você edita um objeto; num importado, caça texto em vários arquivos. O setor também pesa. Advocacia (5 templates) e clínicas (4) estão só na família premium; SaaS (9), alimentação (5) e fitness (3), só na importada.

O custo de manter entra na escolha. Os 12 premium carregam dependências que a página não usa, como um driver de banco de servidor num projeto que se diz sem backend, e só aproveitam 12 dos 53 componentes de interface que vêm junto. A mídia local tem mediana de 6,9 MB por template. Nos importados, 35 templates puxam imagens do Unsplash e 19 apontam para o armazenamento do próprio fornecedor: se ele sair do ar, a imagem quebra no seu site.

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.