Como a IA Gera um Site WordPress Completo em 2 Minutos

Toda vez que alguém digita uma descrição de negócio na PAGEnza e clica em gerar, algo bastante complexo acontece nos bastidores — em cerca de 90 segundos. Este post explica exatamente o que é.

O problema com os templates

A maioria dos construtores de sites com IA funcionam assim: eles escolhem um template, trocam seu texto e chamam de "gerado por IA". O resultado se parece com qualquer outro site construído nessa plataforma.

A PAGEnza funciona de forma diferente. Não há templates. Cada site começa de uma tela Gutenberg em branco e é construído algoritmicamente a partir de um conjunto de regras de design que chamamos de Mandato de Design.

O que é o Mandato de Design?

O Mandato de Design é um prompt estruturado — com aproximadamente 8.000 tokens — que descreve todas as decisões visuais e estruturais para um site específico. Ele é construído em Python antes de qualquer chamada de IA ser feita, com base na sua entrada.

Ele contém seis partes:

Parte A — Identidade da Marca: indústria, nome do negócio, tom (por exemplo, "profissional" vs "divertido"), público-alvo.

Parte B — Sistema de Cores: uma paleta de 4 cores (ink, bg1, bg2, accent) gerada algoritmicamente e validada contra as regras de contraste WCAG AA. Cada paleta é verificada com matemática real de luminância — não suposições.

Parte C — Tipografia: um trio de fontes (título / corpo / destaque) escolhido entre mais de 80 Google Fonts, filtrado por arquétipo da indústria e verificado para incluir suporte ao caractere latin-ext.

Parte D — Blueprint do Layout: a estrutura da página — quais seções aparecem, em que ordem e com qual variante (por exemplo, herói com imagem em tela cheia vs herói com layout dividido).

Parte E — Restrições de Design: estilo de raio de borda (sharp / soft / rounded), formas de divisores de seção, tratamento de imagem, sistema de espaçamento.

Parte F — Regras de Conteúdo: qual texto vai onde, como os títulos são estruturados, quais CTAs aparecem.

Como as paletas são geradas

A cor é onde a maioria das ferramentas de IA falham. Pedir a um LLM para escolher cores resulta em códigos hexadecimais aleatórios que podem parecer bons isoladamente, mas falham nos testes de acessibilidade — ou simplesmente parecem genéricos.

Nós adotamos uma abordagem diferente. Nosso sistema de paletas funciona assim:

1. Com base na sua indústria e arquétipo (por exemplo, "luxo", "ousado", "terroso"), selecionamos entre 20 grupos de paletas pré-auditados
2. Dentro de cada grupo, escolhemos uma paleta onde ink tenha contraste ≥4.5:1 contra todos os fundos
3. Verificamos se accent tem contraste ≥3.0:1 contra bg1 e bg2
4. Garantimos que as duas cores de fundo tenham temperaturas de cor contrastantes (uma quente, uma fria) para que as seções pareçam distintas

Se uma paleta falhar em qualquer verificação, ela é substituída automaticamente. Nenhum envolvimento de LLM nesta etapa — é matemática pura.

Como os blocos Gutenberg são montados

Uma vez que o Mandato de Design está pronto, ele vai para o Gemini Flash com um prompt rigoroso que especifica:

• Quais blocos são permitidos (uma lista de permissão de ~40 tipos de blocos Gutenberg)
• Atributos necessários para cada tipo de bloco
• Formato JSON exato para a saída

A IA retorna JSON bruto de blocos Gutenberg — não HTML, não React, marcação de bloco real do WP. Esse JSON então passa por várias validações:

1. Validação de esquema — atributos necessários presentes, nenhum tipo de bloco desconhecido
2. Sanitização de classes CSS — nomes de classes inventados são removidos, substituídos por nossas classes de sistema de design
3. Passes de cura — atributos de espaçamento sincronizados, gradientes de bloco de capa normalizados, divisores de forma injetados

O resultado é carregado diretamente no WordPress via WP REST API e ativado como a página inicial do site.

O que torna cada site único

Várias coisas variam entre cada geração, mesmo para a mesma indústria:

• Paleta: 20+ grupos, cada um com múltiplas paletas
• Trio de fontes: 6+ combinações por arquétipo
• Ordem e variantes de seção: layout do herói, estilo de estatísticas, arranjo de cartões de recursos
• Divisores de forma: orgânicos vs geométricos, variações de amplitude/frequência
• Formas de blob: para indústrias orgânicas, blobs de imagem e cartão são randomizados a partir de 12 variantes

O resultado é que dois restaurantes de pizza gerados no mesmo dia terão cores diferentes, fontes diferentes, layouts diferentes — e ambos serão compatíveis com WCAG AA.

O que vem a seguir

Estamos trabalhando atualmente em:

• Geração de várias páginas — gerando páginas /about, /services e /contact a partir do mesmo mandato
• Pré-visualização ao vivo — vendo o site antes de ser implantado no WordPress
• Transferência de estilo — carregando uma captura de tela de um site que você gosta e extraindo seu DNA de design

Se você quiser ver o sistema em ação, o gerador é gratuito para experimentar — nenhuma conta é necessária para o primeiro site.