Design de sites com IA: cinco portões antes do cliente ver

O design de sites com IA já entrega uma página inicial convincente em menos tempo do que leva para passar um café. Essa velocidade é real, e também é a armadilha. Uma página gerada parece pronta muito antes de estar, e as partes que não aparecem (contraste, ordem dos títulos, layouts espelhados, disciplina de tokens) são exatamente as que o cliente descobre três semanas depois do lançamento. A seguir está a sequência que usamos para manter a velocidade e eliminar as surpresas: cinco portões, em ordem, cada um com um critério claro de aprovação ou reprovação.

Por que um site gerado parece pronto sem estar?

Porque o modelo otimiza para o que a captura de tela mostra: um hero, três cards de recursos, uma faixa de depoimentos, um rodapé. Cada uma dessas peças é estatisticamente familiar, então a página inteira parece profissional à primeira vista. O que a captura não mostra é justamente o que decide se o site sobrevive à entrega ao cliente.

Pense na acessibilidade. O relatório WebAIM Million 2026 encontrou falhas de WCAG 2 detectadas em 95.9% das um milhão de páginas iniciais mais visitadas, e texto de baixo contraste em 83.9% delas. Um modelo treinado nessa web reproduz essa web. Ele vai entregar uma legenda cinza-clara sobre fundo creme com total confiança.

O segundo problema invisível é onde moram as decisões de design. Uma página gerada costuma trazer cores, tamanhos e espaçamentos como valores literais espalhados pela marcação. Se a cor da marca mudar no próximo trimestre, você vai caçar em quarenta blocos. Essa é uma conta de manutenção, e quem paga é o freelancer, não o modelo.

Por isso a pergunta útil não é se a IA consegue desenhar esse site. Ela consegue produzir um rascunho. A pergunta útil é quais decisões você deixa que ela tome e onde você confere o trabalho dela. Os cinco portões respondem a isso.

Portão um: escreva o briefing antes de abrir a ferramenta

Boa parte da saída decepcionante de IA começa num prompt de uma linha. "Um site para uma padaria em Curitiba" dá ao modelo permissão para inventar tudo: público, tom, lista de páginas, chamadas para ação. Ele vai inventar a partir da média de todos os sites de padaria que já viu.

Um briefing que funciona cabe em meia página. Quem visita e o que veio fazer nos primeiros dez segundos. As três páginas que precisam existir. A única ação para a qual o site serve: agendar, ligar, pedir. Dois sites que o cliente admira e um que ele odeia. Os idiomas, incluindo a direção de leitura. Se o site terá versão em árabe ou hebraico, diga isso agora, não depois que o layout for aprovado.

Essa última linha pesa mais do que parece. Direção de leitura é propriedade de layout, não tarefa de tradução. Um modelo que não foi informado disso vai produzir um design alinhado à esquerda com texto árabe colado por cima. Colocar a direção no briefing muda quais layouts a ferramenta propõe, e custa uma frase.

Deixe de lado os adjetivos do tipo "moderno e limpo". Eles não carregam informação. "Denso e editorial, como a capa de um caderno de jornal" carrega bastante.

Portão dois: peça direções, nunca páginas

O uso mais barato da IA neste trabalho é a exploração. Peça de três a cinco direções distintas, como layouts rascunhados e pares de tipografia, e escolha antes de construir qualquer coisa. Seis esboços custam alguns minutos. Refazer uma página que o cliente recusou custa uma tarde.

A disciplina é manter as direções baratas. Não deixe a ferramenta renderizar páginas completas com fotografia gerada para cada direção: o cliente se apaixona pelas fotos e depois não consegue separar o layout das imagens. Caixas cinza e títulos reais bastam. Se o cliente não consegue escolher entre três layouts em caixas cinza, o problema estava no briefing, e você aprendeu isso de graça.

A categoria da ferramenta importa aqui, e vale ser direto sobre isso. Geradores de site completos, como o 10Web, criam um site inteiro em WordPress a partir de um prompt, de uma URL ou de um arquivo do Figma, com planos a partir de $10 por mês, cobrados anualmente para um site. Construtores hospedados, como o Durable, levam de algumas respostas a um site finalizado para pequenos negócios em cerca de 30 segundos. As duas categorias são excelentes no portão dois e fracas no portão quatro, porque são donas das decisões de design em vez de expô-las. Use-as para ver opções. Desconfie de usá-las como build final de um site que você vai manter por anos.

Portão três: fixe o design no theme.json antes de construir

Este é o portão que a maioria dos fluxos pula, e é ele que separa um site que você consegue manter de um site que só serve para demonstração. Depois de escolher uma direção, transforme as decisões dela em tokens e escreva-os no theme.json: a paleta de cores, as famílias e tamanhos de fonte, a escala de espaçamento, a largura do conteúdo. Daí em diante, todo bloco referencia um token pelo slug, nunca um valor literal.

A referência do theme.json existe exatamente para isso. Ela dá a um tema de blocos um único lugar para declarar a paleta e as escalas que o editor oferece como controles. Quando o azul da marca mudar, você troca uma linha. Quando o cliente abrir o Editor do Site, vai escolher na sua paleta em vez de uma roda de cores livre, o que evita discretamente uma categoria inteira de edições fora da marca.

Aqui a IA se paga de outra forma. Dê a ela a direção escolhida e peça um conjunto de tokens, e então confira contra duas regras. Todo par de texto e fundo precisa atingir 4.5:1 para texto normal (o limite AA do WCAG), então calcule as razões você mesmo em vez de confiar na afirmação do modelo. E a escala precisa ser pequena: cinco ou seis passos de espaçamento e uma escala tipográfica de seis tamanhos. Modelos adoram devolver catorze tons de cinza quase idênticos. Apague onze.

Um teste prático para saber se este portão se sustentou: abra o tema pronto e procure um código hexadecimal em qualquer template. Se encontrar um, uma decisão escapou do sistema.

Portão quatro: construa em blocos nativos e deixe o gerador de fora do ciclo

Agora, construa. A estrutura proposta pelo modelo geralmente vale a pena manter: a ordem das seções, a lógica das colunas, o ritmo entre áreas densas e áreas abertas. A marcação que ele produziu geralmente não vale. Refaça a estrutura aprovada em blocos principais (Group, Columns, Cover, Query Loop) usando seus tokens, e trate a saída gerada como um desenho de referência, não como arquivo-fonte.

Parece mais lento. Na nossa experiência, é mais rápido a partir da segunda página, porque blocos nativos herdam os tokens, respondem ao Editor do Site e se comportam quando o cliente edita. Marcação gerada que fixa o próprio estilo briga com cada uma dessas coisas. Construtores visuais estão na outra ponta da mesma troca. O Divi, reconstruído como Divi 5 em fevereiro de 2026, traz o Divi AI no plano Pro, por $277 por ano, e a saída fica dentro do sistema de módulos do Divi. Essa é uma escolha legítima para uma agência padronizada no Divi. Mas é outro produto que um tema de blocos, com outro custo de saída, e esse custo deve entrar no orçamento.

Onde a geração por IA ainda cabe na construção é na camada repetitiva: uma variação de uma seção de preços, texto de exemplo com a forma do real, arranjos alternativos de hero para o cliente comparar. Trate cada um como um padrão de rascunho a ser organizado e registrado, nunca como trabalho final.

Um limite honesto: se o projeto exige interação de verdade, como listagens filtradas, lógica de consulta personalizada ou qualquer comportamento em JavaScript, nenhum gerador vai dar conta. Um desenvolvedor escreve essa parte, e a contribuição da IA fica nas bordas.

Portão cinco: audite o que a captura de tela não mostra

Faça a mesma auditoria curta em todos os sites, sempre na mesma ordem, para que ela vire hábito e não humor do dia.

Primeiro, contraste. Confira os pares reais renderizados, incluindo texto sobre imagens e os estados de desabilitado e hover que o modelo nunca considerou. Segundo, a estrutura de títulos: um único H1, títulos que descem sem pular níveis e nenhum título escolhido só porque é grande. Terceiro, teclado: navegue pela página inteira com Tab e confirme que o foco é visível e que a ordem segue a ordem de leitura. Quarto, texto alternativo em toda imagem que carrega significado, e alt vazio nas que não carregam.

O quinto check é o que diferencia este fluxo de uma lista genérica: a direção de leitura. Se o site tiver versão em árabe ou hebraico, veja-o em RTL e procure o que não espelhou. Ícones apontando para o lado errado, uma imagem de destaque cujo assunto principal agora fica contra o texto, espaçamento escrito como margin-left em vez de uma propriedade lógica como margin-inline-start. Isso é barato de corrigir quando você encontra neste portão e constrangedor de encontrar na captura de tela de um cliente.

Guarde as evidências da auditoria. Um par antes e depois por página, uma nota do que falhou e uma nota do que você mudou. Isso transforma o "feito com IA" de uma afirmação vaga em uma entrega concreta, e é o parágrafo do seu documento de handoff que justifica o seu honorário diante de um cliente que testou um gerador no fim de semana passado.

E os construtores de site com um único prompt?

Eles têm lugar, e o lugar é estreito. Um construtor de um único prompt serve bem para um protótipo descartável numa apresentação, uma landing page para um evento de fim de semana ou um ponto de partida visual para um cliente que não consegue descrever o que quer. O Framer combina um gerador de sites com IA a uma tela livre e a um plano gratuito, o que o torna bom para esse tipo de trabalho visual rápido e descartável, e o plano Basic começa em $10 por mês.

Evite esses construtores quando o site precisar viver no WordPress, for editado por um cliente sem conhecimento técnico ou atender um público que lê da direita para a esquerda, porque você vai reconstruir a saída em blocos de qualquer jeito. O protótipo ainda teve valor; a página não merecia ir ao ar. Saber em qual dos dois casos você está poupa mais tempo do que qualquer outra decisão.

O que testar no próximo briefing

Escolha um projeto ativo e aplique apenas os portões um e três. Escreva o briefing de meia página e fixe a paleta e as escalas no theme.json antes de existir uma única página. Cronometre e compare com quanto tempo seu último site levou para chegar a um design estável. Se o resultado se confirmar, adicione os outros três portões, um de cada vez. Qual portão teria poupado mais dor no último site que você entregou?