Se você depende de ferramentas, consegue rapidamente algo que parece "ok". No entanto, o resultado muitas vezes acaba tendo uma aparência genérica que você já viu em algum lugar antes. Essa é a essência do "visual de IA", e é onde a maior diferença é feita agora.
Com base na minha experiência criando três sites diferentes com personalidades distintas a partir da mesma base, usando uma linha de produção construída no Claude Code (o projeto makeLP), vou resumir brevemente um método reproduzível.
Uma Fábrica, Não um Truque de Mágica Único
Mesmo que você produza algo bom uma vez, isso não se torna um ativo se não for reproduzível. Por isso, passamos por quatro etapas.
Produção → Qualidade → Verificação → Melhoria.
Existem quatro tipos de componentes de suporte:
・Habilidades: Modelos metodológicos (motion-lp-builder para criação, frontend-design para princípios anti-IA, bulk-categorize para classificação em massa)
・Subagentes: Papéis especializados (lp-visual-verifier para desenhar e criticar, design-reference-analyst para transformar referências em especificações, bulk-classifier para categorização)
・Biblioteca de Referências: Uma prateleira com 4.074 listagens SANKOU classificadas por "tipo de site × setor"
・Regras em Evolução: CLAUDE.md (fluxo padrão / disciplina) + Memória (tornando as críticas permanentes)
Preparação e Pré-requisitos
A base é fixa em Vite + React + GSAP (ScrollTrigger) + Lenis. O segredo é "vincular o progresso do scroll diretamente à produção." A quantidade de scroll se torna a entrada para a expressão (scrub de vídeo de fundo, pinning, parallax, revelações de entrada).
Existem dois tipos de ativos, escolhidos com base no assunto:
・Geração por IA (Higgsfield): Quando imagens realistas, como de resorts, são necessárias
・Desenho por Código (SVG/Canvas/CSS): Parece mais "correto" para B2B e tecnologia. Sem necessidade de créditos
Em caso de dúvida, decida com base em "deveria ser uma foto ou um diagrama?"
PASSO 1: Produção
A ordem é crucial. Não comece a escrever imediatamente; primeiro, solidifique um brief da marca (para quem você está prometendo o quê, cor, tipografia, intensidade do movimento) em uma página. Mesmo com a mesma base, é o brief, não o código, que diferencia o resultado.
Se você escolher a geração por IA, siga a disciplina de créditos:
- Verifique o saldo
- Obtenha uma estimativa preliminar com get_cost
- Crie uma imagem hero primeiro
- Gere outras usando essa como referência para unificar a textura 5. Aguarde a conclusão e faça o download.
Para a implementação, vincule a produção diretamente ao scroll (frame scrub/pin/parallax/reveal). E sempre torne-a robusta: fallback estático com prefers-reduced-motion, garanta que npm run dev funcione mesmo com ativos faltando, e considere economia de energia para toque e canvas.
PASSO 2: Qualidade - Rompendo com o Design em Massa
Decomponha e elimine o "visual de IA" em seis partes:
- Uso excessivo de gradientes (especialmente texto e gradientes roxos) → Reduza para uma única cor + um acento
- Apenas juntar partes padrão em uma ordem padrão → Crie com um conceito único para a própria estrutura (por exemplo, a página inteira como um canvas de workflow)
- Números "inflados" e arredondados → Seja específico (ex.: "600 faturas/mês → 0" antes/depois)
- Ícones de emoji → Não os use. Desenhe SVGs se necessário
- Barras de cores apenas na borda esquerda dos blocos → Não as use. Use cor em superfícies, margens e tipografia
- Tudo sendo simétrico, uniforme, arredondado e com sombras suaves → Introduza assimetria e variações na força das margens
O princípio é: esquema de cores é cor única + um acento, tipografia é impulsionada com um tipo de letra característico, força nas margens e movimento com o propósito de "foco."
PASSO 3: Verificação - Build com Sucesso ≠ Bom
Mesmo que o código passe, os pins, scrubs e reveals podem estar quebrados na tela real. Portanto, o lp-visual-verifier inicia um servidor de desenvolvimento, opera um Chrome/Edge existente via puppeteer-core, renderiza e captura cada seção, e então a "critica visualmente."
Três pontos-chave:
・O verificador não corrige o código (para isolar a causa)
・Capturar com prefers-reduced-motion permite a visualização estática de áreas fixadas e seções inferiores aguardando reveals
・Sempre capture também em larguras mobile
Apenas uma rodada de crítica → correção eleva significativamente a qualidade. Não se contente com um build bem-sucedido.
PASSO 4: Melhoria + Biblioteca de Referências
O design-reference-analyst lê sites de referência e os traduz em "padrões comuns" e "especificações de melhoria (onde e como)", em vez de apenas impressões. A biblioteca sankou-reference tem 4.074 itens classificados em dois eixos, permitindo que você puxe instantaneamente "apenas exemplos de turismo × LP especial" (o conteúdo fica claro pelas anotações em cada linha).
A própria classificação em massa também é modelada (bulk-categorize: dividir → paralelização de subagentes → agregação → correção).
Regras Que Crescem
Esta é a maior descoberta. Não deixe que as críticas do cliente terminem com uma correção única; promova-as a regras permanentes.
Exemplo:
"Ícones de emoji parecem IA" "Barras de cor na esquerda parecem IA" → Transforme estas em regras proibidas na memória e no CLAUDE.md → Evite-as automaticamente em todos os sites daí em diante.
Em outras palavras, quanto mais você usa, mais o "visual de IA" desaparece. Ter habilidades e subagentes também permite fácil expansão horizontal.
Criando Três Sites Distintos
・AZURE BAY (Summer pool LP / B2C): Turquesa + Dourado. Gerado por Higgsfield. Scrub de vídeo da piscina ao scroll.
・FLOWGEAR (Suporte à implementação n8n / B2B): Cor única coral + plano, sem geração de imagens. A página inteira é um canvas de workflow n8n. Antes/depois específicos em vez de números inflados.
・STATIK (Laboratório experimental para um estúdio fictício): Preto quase total + monocromático + uma cor ácida. Grade de texto cinética em Canvas + cursor personalizado. Uma experiência imersiva em vez de apenas um LP.
Os pontos em comum são "cor única + um acento", "falar com especificidades" e "avanço através de um único conceito." Escolher os meios com base no assunto é o primeiro passo para longe da média.
Configuração Mínima para Construir Você Mesmo
- Modele a base vinculada ao scroll (não escreva do zero toda vez)
- Coloque os princípios anti-produção em massa em uma única folha de regras (sem gradientes/emojis/barras à esquerda...)
- Sempre capture e olhe a tela real após criar
- Promova críticas a regras toda vez
Armadilhas comuns e contramedidas: Desperdício de créditos (hero primeiro + estimativa preliminar), omissões de verificação (capturar telas reais), acessibilidade de movimento (reduced-motion) e quebras em mobile (sempre capture em diferentes larguras).
Resumo
IA é uma "mão rápida", não um "olho."
No momento em que você incorpora o olho (verificação) e as regras (aprendizado) ao sistema, sites feitos por IA se libertam do visual de IA.
