Se você depende de ferramentas, pode rapidamente obter algo que parece "ok". No entanto, o resultado geralmente acaba com 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, não se torna um ativo se não for reproduzível. É por isso que executamos em quatro etapas.
Produção → Qualidade → Verificação → Melhoria.
Existem quatro tipos de componentes de suporte:
・Habilidades: Templates metodológicos (motion-lp-builder para criação, frontend-design para princípios anti-IA, bulk-categorize para classificação em massa)
・Subagentes: Funções especializadas (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 estante com 4.074 listagens SANKOU classificadas por "tipo de site × setor"
・Regras em Evolução: CLAUDE.md (fluxo padrão / disciplina) + Memória (tornar críticas permanentes)
Preparação e Pré-requisitos
A base é fixa em Vite + React + GSAP (ScrollTrigger) + Lenis. O segredo é "vincular o progresso da rolagem diretamente à produção." A quantidade de rolagem se torna a entrada para a expressão (scrub de quadro de vídeo de fundo, pinagem, parallax, revelações de entrada).
Existem dois tipos de ativos, escolhidos com base no assunto:
・Geração por IA (Higgsfield): Quando imagens realistas como resorts são necessárias
・Desenho por Código (SVG/Canvas/CSS): Isso parece mais "correto" para B2B e tecnologia. Sem créditos necessários
Em caso de dúvida, decida com base em "deve ser uma foto ou um diagrama?"
PASSO 1: Produção
A ordem é crucial. Não comece a escrever imediatamente; primeiro, consolide 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 principal primeiro
- Gere outras usando essa como referência para unificar a textura
- Aguarde a conclusão e faça o download.
Para a implementação, vincule a produção diretamente à rolagem (scrub de quadro / pinar / parallax / revelar). E sempre torne robusto: fallback estático com prefers-reduced-motion, garanta que npm run dev funcione mesmo com ativos ausentes e considere economia de energia para toque e canvas.
PASSO 2: Qualidade - Rompendo com o Design Produzido em Massa
Desconstrua e elimine o "visual de IA" em seis partes:
- Uso excessivo de gradientes (especialmente texto e gradientes roxos) → Reduza a uma única cor + um acento
- Apenas alinhar 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 uma tela de workflow)
- Números "inflados" 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 cor 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 é uma única cor + um acento, tipografia é impulsionada com um tipo de letra característico, força nas margens e movimento para "foco."
PASSO 3: Verificação - Build Aprovado ≠ Bom
Mesmo que o código passe, pins, scrubs e revelações 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, em seguida, "critica visualmente."
Três pontos-chave:
・O verificador não corrige o código (para isolar a causa)
・Capturar com prefers-reduced-motion permite visualização estática de áreas fixadas e seções inferiores aguardando revelações
・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 é claro a partir das notas 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 dos clientes terminem com uma correção única; promova-as a regras permanentes.
Exemplo:
"Ícones de emoji parecem IA" "Barras de cor à esquerda parecem IA" → Transforme essas em regras proibidas na memória e no CLAUDE.md → Evite-as automaticamente em todos os sites a partir de então.
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 (LP de piscina de verão / B2C): Turquesa + Dourado. Gerado por Higgsfield. Scrub de quadro de vídeo da piscina ao rolar.
・FLOWGEAR (Suporte à implementação n8n / B2B): Cor coral único + plano, sem geração de imagens. A página inteira é uma tela 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ético 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 conceito único." Escolher o meio com base no assunto é o primeiro passo para se afastar da média.
Configuração Mínima para Construir Você Mesmo
- Modele a base vinculada à rolagem (não escreva do zero toda vez)
- Coloque princípios anti-produção em massa em uma única folha de regras (sem gradientes / emojis / barras à esquerda...)
- Sempre capture e observe a tela real após criar
- Promova críticas a regras toda vez
Armadilhas comuns e contramedidas: Desperdício de créditos (imagem principal primeiro + estimativa preliminar), omissões de verificação (capturar telas reais), acessibilidade de movimento (reduced-motion) e quebra 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.
