---
id: anti-ai-look
domain: web-craft
agents: [ux-design-expert, dev]
when: "ao desenhar ou implementar qualquer página web que precisa parecer feita por um designer, não gerada por IA"
---

# Anti-AI-Look — páginas que não parecem feitas por IA

Páginas geradas por IA têm uma "cara" reconhecível. O objetivo deste pack é fazer o agente **reconhecer
os tells e fugir deles**, produzindo algo que parece autoral. A regra-mãe: **uma decisão de design só
existe se você consegue justificar por que ela é assim e não o default.** Default não-justificado é o
que cheira a IA.

## Os tells (reconheça pra evitar)

Se a página tem 3+ destes, ela grita "IA":

1. **Estética de component-library default** — shadcn/ui ou Material sem customização: mesmos cantos
   arredondados em tudo, sombras `shadow-md` genéricas, botões e cards idênticos aos da doc.
2. **Tipografia Inter (ou system) em tudo**, um ou dois pesos, sem hierarquia real — títulos só "maior
   e bold", nunca um contraste de caráter.
3. **Gradiente índigo→violeta / roxo→rosa** no hero, em botões, em "blobs" de fundo. O gradiente da IA.
4. **Glassmorphism e blur** aplicados sem motivo, em todo card.
5. **Tudo centralizado** — hero centralizado, texto centralizado, um eixo vertical único do topo ao fim.
6. **Grid de 3 cards de feature** com um ícone (lucide/emoji), um título de 2 palavras e um parágrafo
   genérico. Quase sempre 3, quase sempre iguais.
7. **Espaçamento uniforme** — tudo em múltiplos de 8 sem ritmo: nenhuma seção respira diferente da
   outra, nenhuma tensão entre apertado e generoso.
8. **Ilustrações de "blob 3D" / stock genérico / gradient mesh** sem relação com a marca.
9. **Estrutura previsível** sem surpresa: hero → faixa de logos → 3 features → depoimento → CTA. Na
   ordem, sempre.
10. **Motion uniforme**: tudo faz o mesmo `fade-up` no scroll, mesma duração, mesmo easing.
11. **Copy vaga de "empoderamento"**: "Empower your workflow", "Unlock your potential", "Seamlessly
    integrate" — sem dizer o que o produto faz.
12. **Detalhes esquecidos**: cor de seleção de texto default, foco azul do browser, favicon genérico,
    sem OG image, botões todos com o mesmo raio.

## Os princípios do craft (como o designer faz diferente)

### 1. Sistema tipográfico, não "uma fonte"
- Pareie uma **display face com caráter** (serifa de contraste, grotesca com personalidade, ou uma
  fonte de marca) para títulos com uma **workhorse legível** para corpo. O contraste entre as duas é
  metade da personalidade da página.
- Defina uma **escala modular** (ex.: razão ~1.2–1.333) em vez de tamanhos avulsos. Hierarquia vem da
  escala, do peso E do tracking/leading — não só de "maior".
- Ajuste **tracking** (apertado em display grande, neutro em corpo) e **leading** (1.1–1.2 em títulos,
  1.5–1.7 em corpo). `line-height: 1.5` em título é tell de IA.
- Use no máximo 2 famílias. Caráter vem do par, não da quantidade.

### 2. Cor derivada de uma ideia, não o gradiente default
- Comece de um **conceito de marca** (uma palavra: "editorial", "brutalista", "calmo", "premium") e
  derive a paleta dela. Um **accent confiante** + neutros **com temperatura** (cinzas levemente
  quentes ou frios, nunca `#808080` puro).
- **Fuja do gradiente índigo→violeta.** Se for usar gradiente, que seja sutil, de marca, e raro.
- Tenha um **dark e light de verdade** (não só inverter), e estados (hover/focus/active) pensados.

### 3. Layout editorial, não cards empilhados
- **Quebre o grid de propósito**: sobreposição, assimetria, um elemento que sangra pra fora da coluna,
  uma imagem que cruza duas seções. O olho lembra do inesperado.
- Crie **um ponto focal por tela** e uma hierarquia clara — não 3 cards de peso igual competindo.
- Use **whitespace como ferramenta de ênfase**: generoso onde importa, apertado onde agrupa. Contraste
  de densidade é o que parece intencional.

### 4. Ritmo de espaço, não múltiplos uniformes
- Tenha uma **escala de espaço** com contraste (ex.: 4, 8, 16, 32, 64, 128) e **use os extremos**. Uma
  seção colada e outra arejada criam ritmo; tudo em 24px é monótono e robótico.

### 5. Motion art-directed, com restrição
- **Stagger** (elementos entram em sequência, não todos juntos), **scroll-linked** onde faz sentido,
  **easing com caráter** (não o `ease` default; uma curva custom). Duração varia por elemento.
- Menos é mais: 2–3 momentos de motion memoráveis batem 1 animação repetida em tudo.
- Respeite `prefers-reduced-motion`.

### 6. Imagem e textura com intenção
- Foto real art-direcionada, ou ilustração de estilo consistente, ou tipografia-como-imagem. **Nunca**
  blob 3D aleatório ou stock que não conversa com a marca.
- Textura sutil (grão, ruído, uma borda, um detalhe gráfico recorrente) tira o aspecto "template".

### 7. Copy específica, com voz
- Diga **o que o produto faz e pra quem**, com concretude e ponto de vista. "Agende posts pros 7 canais
  em 2 minutos" vence "Streamline your social presence".
- Microcopy com personalidade (botões, estados vazios, mensagens de erro) é assinatura barata e forte.

### 8. Os detalhes que ninguém da IA lembra
- `::selection` com cor de marca · estados de **foco** desenhados (não o anel azul do browser) ·
  **favicon** e **OG image** próprios · raios de canto **variados por propósito** · um cursor/hover
  state pensado · tipografia responsiva (clamp) · 404 e estados vazios com voz.

## Checklist "isto parece de IA?"

Antes de entregar, responda — qualquer "sim" é um tell a corrigir:

- [ ] A tipografia é Inter/system em tudo, um ou dois pesos, sem par de caráter?
- [ ] Tem gradiente índigo/violeta/roxo-rosa em algum lugar de destaque?
- [ ] O hero e a página são centralizados num eixo único?
- [ ] Tem um grid de 3 cards iguais com ícone + título curto + parágrafo genérico?
- [ ] O espaçamento é uniforme, sem seção respirando diferente da outra?
- [ ] As ilustrações são blob 3D / stock / mesh sem relação com a marca?
- [ ] A estrutura é hero→logos→features→depoimento→CTA sem nenhuma surpresa?
- [ ] Todo elemento faz o mesmo fade-up no scroll?
- [ ] A copy fala em "empower/unlock/seamless" sem dizer o que o produto faz?
- [ ] Faltou `::selection`, foco custom, favicon, OG image?

## Antes → depois

| Tell (IA) | Craft (bespoke) |
|---|---|
| Inter 700 pra título, Inter 400 pra corpo | Display de caráter (ex.: uma grotesca com personalidade) + workhorse legível, escala modular |
| Hero centralizado com gradiente roxo e botão arredondado | Composição assimétrica, paleta de marca, tipografia grande como protagonista |
| 3 cards "⚡ Fast / 🔒 Secure / 🚀 Scalable" | 1 prova concreta com número real + layout editorial que destaca o que importa |
| Tudo `gap-8`, `py-16` | Ritmo: seção densa de prova social, seção arejada de manifesto |
| `transition: all .3s ease`, fade-up em tudo | Stagger no hero, parallax sutil numa imagem, easing custom, resto quieto |
| "Empower your workflow today" | "Publique nos 7 canais em 1 clique — e veja o que rendeu" |