Aplicar direção de arte, UX writing e padrões de código

A skill frontend-design existe para impedir que a tela saia com a cara de qualquer outra tela gerada. Ela consegue isso em duas passadas: primeiro o plano, depois o código. O padrão mais denunciador é o fundo creme com acento terracota, que é a cor da interface do próprio Claude.

Ela ancora cada tela no assunto do negócio e corta o texto de preenchimento. No fim, devolve o processo inteiro documentado, do plano de cores à autocrítica. Isso deixa a decisão visível antes de virar código.

O primeiro movimento da skill é ancorar a tela no assunto. Quando o briefing não diz o que o produto é, o agente propõe um assunto concreto, o público e o trabalho principal da tela. Depois confirma com você antes de desenhar.

As escolhas visuais nascem da indústria, dos materiais e do vocabulário do negócio, porque é isso que separa uma tela da outra. Um brinquedo para meninas de oito a onze anos e um painel para analistas financeiros não podem sair parecidos. Todo o conteúdo usa o material real do briefing, em vez de texto de preenchimento.

O hero, a primeira parte da página, vista antes de qualquer rolagem, abre com a coisa mais característica do assunto: manchete, imagem ou demonstração ao vivo. O número gigante com rótulo pequeno e um acento em gradiente é o tratamento automático, e só entra se for mesmo a melhor opção.

A tipografia carrega a personalidade da página. Use uma família de letras, ou duas claramente distintas; defina a escala de tamanhos de propósito e mantenha a linha abaixo de 80 caracteres. A serifa aceita linha um pouco mais longa e pede mais espaço entre as linhas.

Três tiques denunciam página gerada por máquina. Uma só palavra da manchete em itálico, negrito ou outra cor. Rótulos inteiros em caixa alta. E etiquetas colocadas acima de um conteúdo que dispensava etiqueta.

Estrutura visual carrega informação, então cada traço precisa dizer algo. Borda, numeração, etiqueta pequena acima do título, divisória e rótulo entram para codificar alguma coisa sobre o conteúdo. A numeração 01, 02, 03 só cabe quando o conteúdo é mesmo uma sequência, como um processo em etapas.

Movimento que ninguém pediu entra num único momento combinado, como a abertura da página. Entrada com desvanecimento em toda seção é o comportamento automático, e se lê como gerado. Movimento que responde a uma ação da pessoa é bem-vindo, porque mostra o que mudou. O texto da tela também é material de design, e é o assunto da aula seguinte.

A skill lista cinco padrões em que a tela gerada se agrupa hoje, e reconhecê-los de longe salva a sua. O primeiro é o creme com serifa de exibição e acento terracota, a cor da interface do Claude, que num projeto seu denuncia a origem. O segundo é o quase-preto com um único acento verde-ácido ou vermelhão.

O terceiro imita jornal de folha larga, com fios finos, cantos retos e colunas densas. O quarto é o kit de cartões de software: tudo vira cartão igual, com o mesmo arredondamento e a mesma sombra cinza. O gradiente entra como pura decoração.

Fecha a lista o quinto, o acabamento de template, que aparece seja qual for o assunto. Ele reúne a etiqueta em caixa alta e espaçada, os metadados unidos por ponto médio e o rótulo em palavra seguida de fragmento. Completam o kit a monoespaçada em rótulo de dado e a seta no fim do botão.

Todos os cinco são legítimos para algum briefing. A regra da skill é que o briefing vence: quando ele fixa uma direção, o agente segue ao pé da letra, mesmo que peça um desses cinco. Quando o briefing deixa um eixo livre, essa liberdade não pode ser gasta num padrão automático.

O trabalho vem em duas passadas. Na primeira, o agente escreve um plano curto de tokens, os valores de design guardados com nome, como a etiqueta na lata de tinta. O plano traz a cor em quatro a seis valores nomeados, a tipografia com o papel de cada família e o layout em uma frase.

A segunda passada revisa esse plano contra o briefing. O agente pergunta se um briefing parecido daria o mesmo resultado, corrige o que parecer automático e diz o que mudou e por quê. Só então escreve o código, cuidando para que uma regra de estilo não cancele a outra.

A autocrítica fecha o processo. A ousadia vai num lugar só, e o resto fica quieto e disciplinado. O piso de qualidade entra sem anúncio: a tela funciona no celular, o foco fica visível para quem navega pelo teclado. O movimento reduzido é respeitado e o contraste permite ler o texto.

O agente tira um print da tela, revisa a própria entrega e retira um elemento antes de fechar. E anota o que já tentou, para a passada seguinte começar de outro lugar.

Nos dois caminhos o custo da geração é o mesmo, então a diferença está só no pedido. Num ateliê de cerâmica que vende turmas de torno, o pedido sem a skill devolve o cartão genérico. Com o plano revisado, a manchete vira aprender a centrar o barro e o botão diz o que acontece ao clicar.

Peça a primeira passada só com o plano: a cor em valores nomeados, a tipografia com o papel de cada família e o layout em uma frase. Revise esse plano contra o briefing antes de pedir qualquer código.

Só aprove a tela depois de conferir os cinco padrões contra o resultado pronto. Qualquer um que apareça volta para o agente citado pelo nome, porque nome vago devolve correção vaga.

Escrever a regra da marca uma vez e travar quem a ignora

A direção estética já vem revisada em duas passadas, e o texto da interface e a regra de marca ainda dependem de uma skill do projeto com guarda automática.

A regra de marca só passa a valer quando uma guarda automática a verifica antes de a alteração ser registrada. Escrita apenas no arquivo de memória do projeto, ela convive com o botão Submeter e o aviso Erro 500 na tela entregue ao cliente.

Escrita uma vez numa skill do projeto, a pasta de instruções que o agente relê, e travada por essa guarda, a regra vale para toda tela seguinte. Ninguém precisa lembrar dela.

A memória do projeto é um arquivo de texto na raiz da pasta, que o agente relê antes de começar qualquer pedido. Nele entram a stack do site, que é o conjunto de tecnologias em uso, os comandos que já existem e as regras que você não quer repetir.

Cada regra precisa descrever um estado conferível no arquivo pronto. Escreva bom código não muda nada na saída. Texto secundário usa o tom seiscentos, nunca o quatrocentos muda cada geração seguinte, porque descreve algo que você confere olhando o resultado.

A política de uso de CSS entra na mesma memória, em três níveis. O agente aprendeu com código de dois anos atrás e não sugere recurso novo por conta própria.

O recurso amplamente disponível entra livre: a consulta de contêiner por tamanho, desde agosto de 2025, e a caixa de diálogo nativa, desde setembro de 2024. O seletor :has() entrou nesse grupo em junho de 2026.

Já o recém-disponível entra atrás de uma verificação de suporte, com plano B que continue servindo. O que fica fora do Baseline, o rótulo público que diz o quanto um recurso já é suportado pelos navegadores, só entra quando você pede pelo nome. Ele entra como melhoria que some em silêncio onde não existe.

As palavras da tela existem por um motivo só: tornar a tela mais fácil de entender e usar. Elas recebem o mesmo cuidado que o espaçamento e a cor. A skill frontend-design manda escrever do ponto de vista de quem usa: a pessoa gerencia notificações, e configurar webhook é linguagem do sistema.

Descreva o que a coisa é ou faz, em vez de vender, e use voz ativa por padrão. O botão diz exatamente o que acontece ao ser tocado, Salvar alterações em vez de Enviar. A ação mantém o mesmo nome no fluxo inteiro, então Publicar gera o aviso Publicado.

Erro e tela vazia são momentos de direção. O erro explica o que houve e como resolver, sem pedir desculpa e sem vagueza; a tela vazia convida a agir. O tom é conversado, só com a primeira letra da frase em maiúscula, e cada elemento escrito faz um trabalho só.

A forma durável dessa regra é uma skill do projeto, guardada numa pasta própria dentro do repositório. O cabeçalho traz o nome e uma descrição insistente, para ela disparar em toda tela, componente ou texto do negócio. O corpo traz as cores, a tipografia, as proibições e as regras de texto, tudo conferível.

Escrever resolve metade, porque o agente esquece no meio de uma sessão longa. A outra metade é a guarda automática, o gancho que amarra uma verificação a um evento fixo. Ela formata ao salvar e, antes de registrar a alteração, roda a checagem de tipo, o estilo e a montagem do site, mais o script da marca.

A skill-creator do mesmo catálogo ensina a testar a skill com pedidos reais e a reescrever a descrição quando ela deixa de disparar.

Peça ao agente o retrato real do projeto, sem regra que ele não segue. Escreva a skill de marca numa pasta do repositório, com cores, proibições e regras de texto conferíveis.

Ligue a guarda que roda o verificador e o script da marca antes de cada registro. Depois force um erro de propósito, como um botão com seta no fim; se a guarda deixar passar, ela ainda não está amarrada ao evento certo.

Reconhecer o componente que o agente devolve e onde cada dado mora

Com marca e texto travados por guarda, sobra reconhecer os cinco padrões de componente que voltam do agente e decidir onde cada dado mora na tela.

Um componente cheio de useMemo e useCallback é sinal de código de dois anos atrás, porque o React Compiler faz essa otimização sozinho desde 2025. React é a biblioteca que monta a tela em peças reaproveitáveis, e o compilador é o passo que reescreve o código antes de ele rodar.

Toda versão do React de 19.0.0 a 19.2.2 carrega a falha de segurança CVE-2025-55182, e conferir a versão instalada é a primeira linha de qualquer revisão. A estável no fechamento desta aula é a 19.2.8.

Quase todo componente que o agente devolve segue um de cinco padrões, e quase todo dado da tela mora em um de cinco lugares. Reconhecer os dois encurta a revisão, porque você passa a aprovar ou devolver com motivo escrito.

Um componente é a peça reutilizável da tela, como um cartão ou um campo de formulário. O primeiro padrão é o componente com props, as entradas que ele recebe e a partir das quais decide a aparência. O segundo é a composição, em que o invólucro cuida da borda e do espaçamento e o conteúdo entra de fora.

O terceiro é o estado local, o valor que a peça guarda enquanto a pessoa mexe nela, atualizado sempre a partir do valor anterior. O quarto é a lista, cuja chave vem do identificador do item, nunca da posição, e que trata o caso vazio. O quinto é o campo controlado, que valida enquanto a pessoa digita.

O compilador muda o que reprovar na revisão, porque a otimização escrita à mão virou ruído. Ele entrou na versão 19.2 junto com outros recursos novos.

Ligue o eslint-plugin-react-compiler no projeto. Ele acusa a violação de regra na hora, antes de o compilador desistir daquele componente em silêncio e você perder o ganho sem saber.

Todo dado novo pertence a um de cinco lugares, e errar o lugar é a causa comum de tela que mostra número desatualizado. O local mora dentro do componente. O derivado se calcula na hora de desenhar e nunca se guarda, porque guardar cria duas versões do mesmo número.

O compartilhado atravessa telas sem vir do servidor. O de servidor vive no sistema, e a tela guarda só uma cópia temporária. Filtro, aba, ordenação e página têm o quinto lugar, o endereço da tela, o que deixa o link reproduzir exatamente o que a pessoa está vendo.

Três peças do manual de setembro de 2026 completam a bancada. React Aria Components entra como opção direta de componente acessível sem estilo, e vale quando teclado e leitor de tela precisam vir prontos.

A resposta de um modelo de linguagem chega em pedaços. A tela mostra o texto conforme ele chega, mantém o aviso de que está gerando e oferece o botão de parar. O MSW, o interceptador que devolve respostas falsas no lugar da API durante o teste, permite testar esse componente sem depender do sistema real.

Tela com IA precisa de cinco componentes, pelos cinco padrões de Agent UX do manual. São o plano visível antes da execução, o uso de ferramentas exposto, a memória exibida, o acompanhamento de cada etapa e a rota clara de recuperação de erro.

Para um protótipo que precisa viajar num arquivo só, a skill web-artifacts-builder empacota React, Vite, Tailwind e shadcn/ui num único HTML. O Tailwind, a biblioteca que aplica estilo por nomes de classe curtos, escreve esse estilo dentro da própria marcação. A stack dessa skill é datada frente ao React 19 e ao Tailwind 4 deste curso.

Numa loja de bicicletas com painel de ordens de serviço, o cartão que troca de cor pelo status é o padrão de props. A lista vem do servidor, e o filtro por mecânico mora no endereço da tela. Se o agente devolver seis estados locais sincronizados na mão, devolva citando a linha da tabela.

Trocar o modelo de IA não conserta a segurança do que ele escreve. Na comparação de dois anos da Veracode, modelos mais novos melhoraram a sintaxe sem melhorar a segurança. A pior classe foi o cross-site scripting, a injeção de código estranho na página, que é justamente o risco de toda tela que mostra conteúdo vindo de fora.

Confira a versão do React no arquivo de dependências e aplique a correção da falha CVE-2025-55182 antes de revisar qualquer componente. Ligue o eslint-plugin-react-compiler no mesmo passo.

Classifique cada pedaço de estado pela tabela: o derivado vai para o cálculo e o filtro vai para o endereço da tela. Teste todo componente assíncrono com o MSW, simulando resposta lenta, erro e lista vazia, e revise à mão o trecho que mostra conteúdo vindo de fora.

Guia prático: um vocabulário de comandos para dirigir o desenho

Pedir ao agente que deixe a tela mais bonita devolve qualquer coisa. A skill Impeccable troca o adjetivo por um verbo com escopo: cada um dos seus 24 comandos nomeia um tipo de trabalho, carrega um roteiro próprio e mexe só no que aquele trabalho pede. Você digita /impeccable, o comando e o alvo.

Dois arquivos sustentam os comandos. PRODUCT.md guarda o que não muda de tela para tela: quem usa, para fazer o quê, com quais restrições e provas. DESIGN.md guarda o sistema visual que já existe no código, com os tokens, valores nomeados de cor, fonte e espaçamento, em formato que a máquina lê e até oito seções de regras de uso. Sem o primeiro, o agente desenha para um público genérico; sem o segundo, inventa uma identidade nova a cada pedido.

A skill também pede que você diga o que é sucesso naquela tela, em quatro modos. Persuadir vale para página de campanha e de preço, onde a pessoa decide e age. Operar vale para painel, formulário e configuração, onde ela conclui uma tarefa. Ler vale para artigo, guia e documentação. Vivenciar vale para portfólio e galeria. A página de vendas de uma ferramenta é do modo persuadir, mesmo que a ferramenta seja do modo operar.

Três recursos ficam para quando o básico estiver rodando. O modo live abre variantes de um elemento no navegador e troca uma pela outra na hora; exige o projeto rodando na sua máquina e não funciona sobre o site publicado. O comando hooks liga o detector a cada arquivo de interface que o agente edita, por projeto, e vale combinar com a equipe antes, porque passa a valer para toda sessão naquele repositório. E /impeccable pin audit cria o atalho /audit para o comando que você mais usa.

A skill tem uma lista de recusas que ajuda a ler qualquer tela gerada: cartões iguais de ícone, título e texto como estrutura da página, número gigante com rótulo pequeno no topo, texto em gradiente, vidro fosco como enfeite, fonte monoespaçada para parecer técnico e emoji no lugar de ícone. Um briefing pode pedir qualquer um deles de propósito. O defeito é usá-los sem ter decidido.

Guia prático: do estilo aprovado à receita que vira skill

Um estilo aprovado numa conversa some na conversa seguinte. O curso estudado em 07/10/2026 guarda cada estilo de edição numa receita reutilizável, e a forma dela serve igual para tela. São 11 receitas, de 212 a 302 linhas cada, todas com o mesmo esqueleto: um cabeçalho com para que serve, o formato e o que precisa; uma frase que resume o estilo; quando usar e quando não usar; de 10 a 14 regras numeradas, imperativas e com medida; tipografia com peso e tamanho; componentes com tempo e curva de entrada; as armadilhas já pagas; e o código de partida, para o próximo trabalho começar do mais parecido e não do zero.

A receita guarda a gramática e deixa o conteúdo mudar. No lugar do texto de exemplo, ela diz que tipo de mensagem entra em cada bloco. É isso que a transforma em skill: a pasta com o SKILL.md, a receita e o código de partida, que o agente lê toda vez que o pedido combina com a descrição.

Para personas e skills prontas, o estudo mediu um catálogo de 2.092 assistentes de texto, de 708 autores. Formatos: 637 personas, 446 tarefas, 358 de imagem, 353 skills, 154 estruturados e 144 de sistema. A nota de qualidade vai de 0 a 3, e só 211 (10%) têm nota 3; 1.819 ficam em 1 ou 2. Só 158 são marcados para desenvolvedores. Em marketing são 62, com 3 de nota máxima; em design, 302, com 47. Catálogo grande é ponto de partida para curadoria, não prateleira de uso direto.

Aplicar os recursos ao projeto