7 passos para criar sites sem cara de IA, com qualquer modelo

Todo mundo que usa IA pra criar site já caiu na mesma armadilha, o resultado sai funcional, mas tem uma cara genérica que qualquer pessoa reconhece de longe. O erro comum é achar que a solução é trocar de modelo, esperar o próximo lançamento, usar o Opus em vez do Sonnet, ou o GPT mais novo em vez do anterior. Na prática, o modelo importa menos do que parece. O que realmente separa um site com cara de IA de um site com cara profissional é o processo usado pra chegar lá. Separei os 7 passos que sigo sempre, funcionam com Claude, com a família Fable, com GPT, com qualquer modelo que você tiver disponível.

Passo 1: diretrizes de marca

Antes de escrever qualquer prompt de site, o primeiro passo é ter um design system detalhado, cores, tipografia, tamanhos, padrões visuais da marca. Se o cliente ou o projeto já tem uma identidade definida, o trabalho é só passar isso pro prompt. Se não tem, vale criar um documento assim antes de seguir.

Uso o Claude Design pra isso, na opção de criar um design system, alimentando com os materiais que a pessoa já gosta, cores de referência, fontes, sites que ela aponta como inspiração. O resultado é um documento, um arquivo tipo design.md, que não serve só pro Claude. Esse mesmo documento pode ser reaproveitado em qualquer outro modelo depois, porque ele descreve a identidade visual de forma independente da ferramenta que gerou.

A vantagem prática é parar de reexplicar preferência de marca em cada prompt novo. É um trabalho feito uma vez, que economiza tempo em todos os projetos seguintes e já melhora a qualidade de tudo que vem depois, antes mesmo de pensar em layout ou interação.

Passo 2: qual é o objetivo do site

Nem todo site precisa de efeito de rolagem e imersão. Isso depende do objetivo do negócio, e esse é um ponto que muita gente ignora ao copiar efeito só porque viu em outro lugar.

Pra um e-commerce, ou qualquer site com objetivo de conversão direta, cheio de scroll elaborado e animação pode até prejudicar. Em vez de ajudar, esse tipo de efeito distrai do CTA e atrasa a decisão de compra. Já pra sites mais experienciais, uma agência de design, o lançamento de um empreendimento imobiliário, a imersão faz sentido, porque ajuda a contar uma história antes de pedir qualquer ação do visitante.

Um bom exercício é comparar dois sites premiados em categorias diferentes. Um de e-commerce, direto, sem scroll elaborado, com CTA de compra claro desde a primeira tela. Outro de uma agência de design, com bastante scroll e storytelling visual, sem CTA aparente nas primeiras telas, porque o objetivo ali é outro. A lição não é que um formato é melhor que o outro, é escolher a abordagem certa pro tipo de negócio, em vez de aplicar scroll e efeito por modismo.

Passo 3: interatividade sem depender só do scroll

Mesmo quando o site não pede um storytelling de scroll completo, pequenos detalhes de interação já elevam muito a percepção de qualidade. Botão que ilumina no hover, card que reage quando o mouse passa por cima, número que aparece ao dar scroll, elemento que brilha. Tudo isso faz um site "estático" parecer vivo.

Dá pra sentir essa diferença comparando a mesma seção de um site com esses microefeitos ligados e desligados. A versão com os detalhes parece outro produto, mesmo sem nenhuma mudança estrutural de layout. Outro exemplo prático, o hero de um site fictício de cafeteria, com um efeito visual de xícara soltando fumaça aplicado só na primeira seção. Não precisa de scroll elaborado no resto do site pra esse detalhe já causar impacto.

Passo 4: referências e inspiração

Esse é o passo mais importante de todos. Nenhum modelo, nem os mais recentes, entrega um resultado de alto nível sem receber referência visual concreta. É preciso mostrar sites que sirvam de inspiração, não só descrever o que você quer em texto.

Os lugares que mais uso pra buscar referência são o Awwwards, que reúne sites premiados, um site de referências de design que já traz a documentação técnica do próprio exemplo junto com a peça, o que ajuda bastante a entender como os efeitos de movimento foram construídos, além do Dribbble e do Godly.

Um ponto crítico aqui, nunca passar uma única referência. Isso faz o modelo copiar demais aquele site específico, e o resultado vira uma cópia disfarçada em vez de uma inspiração. O ideal é combinar várias referências, pra guiar o estilo geral sem travar o resultado numa única fonte.

Além da inspiração de layout e estilo geral, vale usar bibliotecas de componentes prontos, o 21st.dev é um bom exemplo, pra elementos de interação específicos, como um efeito de cursor que segue o mouse. Esse tipo de componente funciona como um toque final, sem precisar poluir o site com efeito demais.

Passo 5: otimização para mobile

A maior parte dos brasileiros acessa a internet só pelo celular. Isso torna testar e ajustar a experiência mobile obrigatório, não opcional. Efeito que parece ótimo no desktop pode quebrar completamente a experiência no celular, texto que fica ilegível, animação que trava, elemento que não cabe na tela. Esse passo não é um detalhe final, é parte do processo desde o início.

Passo 6: o polimento final

Mesmo seguindo os cinco passos anteriores com um prompt bem estruturado, o resultado da primeira geração costuma ficar entre 80% e 90% pronto. Nunca sai 100% de primeira. Sempre vai ter ajuste fino necessário, um botão que pode ficar mais bonito, uma fonte que fica difícil de ler em determinado contraste, um espaçamento que aperta mais do que devia.

Esse processo de iteração final, pedir pro modelo corrigir detalhes específicos um a um, é o que muita gente ignora depois de ver o primeiro resultado já bom. E é exatamente esse polimento que faz a diferença entre um site que parece bom e um site que está pronto pra vender.

Sobre as imagens e os efeitos de movimento

Modelo de linguagem não gera imagem nativamente, então é necessário usar um serviço externo de geração de imagem pra criar os assets visuais, fotos e vídeos de fundo usados nos efeitos de scroll. Uso um serviço chamado Higgsfield pra isso, embora eu não tenha certeza absoluta da grafia exata do nome. Não é parceria nem indicação paga, é só a ferramenta que uso no meu processo.

Pros efeitos de scroll em si, tenho uma skill própria que já automatiza boa parte dessa construção, então não preciso reescrever a lógica de animação do zero em cada projeto novo.

Um bom prompt final reúne todos esses passos de uma vez, pede pro modelo buscar múltiplas referências de site e de componente, criar efeitos premium controlados por scroll quando fizer sentido pro objetivo do negócio, mencionar o design system quando ele existir, e deixar claro que o objetivo é se inspirar em várias fontes, não copiar um único site de referência.

Conclusão

Design system bem definido, objetivo do site claro, interatividade usada com critério, referência de múltiplas fontes, otimização mobile e polimento final. Esses 7 passos juntos produzem sites de alto nível, com aparência premium, de forma replicável, independente do modelo de IA usado. E o mais importante, sites que ajudam a vender e converter pro objetivo real do negócio, não só bonitos por bonitos.