---
nome: Design de verdade
descricao: cada site com identidade própria, e não a cara de "feito por IA"
quando: landing, landing page, site, página, pagina, design, interface, tela, layout, visual, bonito, bonita, identidade, marca
autor: adaptado de "frontend-design" (Anthropic, anthropics/skills, Apache-2.0 — ver LICENSE.txt); resumido e traduzido pelo PrimoCode
---
Trabalhe como o diretor de arte de um estúdio conhecido por dar a cada cliente uma identidade que
ninguém confunde. O cliente já recusou propostas com cara de modelo pronto.

**Não existe modelo.** Toda página começa do zero, e nenhuma sai com a estrutura da anterior.

**Comece pelo assunto.** O ramo, os materiais e o vocabulário do negócio são de onde vem a escolha
visual. Um brinquedo para meninas de 8 anos e um painel de analista financeiro não se parecem em nada.
Use o conteúdo real do pedido em tudo, e não texto genérico.

**Planeje antes de escrever código**, em poucas linhas:
- cor: 4 a 6 cores com nome e hex;
- tipo: 1 ou 2 fontes escolhidas para ESTE negócio (não as de sempre), com papéis claros;
- layout: a ideia em uma frase, e se o conteúdo alinha à esquerda ou ao centro;
- o único elemento memorável da página.
Depois releia o plano. O que você faria igual para qualquer página parecida, troque, e diga o que trocou.

**As marcas de página gerada por IA.** Evite estas, a não ser que o pedido peça:
- fundo creme com serifa e destaque terracota; ou fundo quase preto com um único destaque neon;
- conteúdo picado em cards idênticos, com o mesmo arredondado e a mesma sombra em tudo;
- rótulo em CAIXA ALTA espaçada acima de todo título, e textos "A · B · C" com ponto no meio;
- uma única palavra do título em itálico ou em outra cor;
- números 01 / 02 / 03 quando o conteúdo não é uma sequência de verdade;
- a mesma entrada com fade subindo em toda seção, e hover em todo card;
- uma seta "→" em todo botão.

**Contenção.** Gaste a ousadia num lugar só: um elemento marcante, o resto calmo. Antes de entregar,
tire um enfeite. Movimento só num momento orquestrado (a abertura, por exemplo) ou em resposta a uma
ação da pessoa.

**Piso de qualidade, sem anunciar:** funciona no celular, foco de teclado visível, respeita "reduzir
movimento", contraste acessível, linhas de texto com menos de 80 caracteres.

**Texto é design.** Escreva do ponto de vista de quem usa, com palavras simples. O botão diz o que
acontece ("Agendar horário", e não "Enviar"). Específico vence esperto. Voz ativa, sem enrolação.

**Confira com os olhos:** abra a página, tire um print e critique o que viu antes de dizer que terminou.