Como nasceu o Forge: o compilador de IA que muda como sites são feitos

Todo criador de sites com IA funciona do mesmo jeito: você digita um prompt, um LLM escreve o HTML e você recebe o que ele entregar. Às vezes fica bom. Às vezes não. Você clica em "gerar" de novo e recebe algo completamente diferente: outro layout, outras cores, outra qualidade. O resultado é, fundamentalmente, imprevisível.

Nós lançamos esse modelo. Funcionou. As pessoas criaram sites de verdade com ele. Mas, ao ver milhares de sites sendo gerados, um padrão apareceu: o LLM gastava a maior parte dos seus tokens reinventando coisas que ele não deveria estar decidindo. Sistemas de navegação. Contraste de cores. Pontos de quebra para o celular. Links de âncora. Carregamento de fontes. Marcação do formulário de contato.

Cada geração era um novo lançamento de dados em problemas que têm respostas corretas.

O Forge é a nossa resposta a essa observação. Não é uma melhoria incremental: é uma arquitetura fundamentalmente diferente para o modo como a IA cria sites.

O problema de deixar a IA escrever HTML puro

Quando você pede a um LLM para "criar um site para uma barbearia", ele precisa tomar milhares de decisões ao mesmo tempo: Quais seções incluir. Em que ordem colocá-las. Como é a navegação. Que cores usar. Como tratar os layouts para celular. Como carregar as fontes. Como ligar os links de âncora. Como estruturar o HTML de forma semântica. Como lidar com as proporções de contraste. Como formatar o horário de funcionamento. Como transformar um número de telefone em um link clicável.

Algumas dessas decisões são criativas: quais seções incluir, que paleta de cores combina com uma barbearia, qual deve ser o clima geral.

A maioria delas é de engenharia: a navegação precisa rolar até âncoras reais, a proporção de contraste precisa ser de pelo menos 4,5:1, o número de telefone precisa estar no formato E.164, a fonte precisa ser carregada do Google Fonts com preconnect, o layout para celular precisa empilhar na vertical abaixo de 480px.

Quando você deixa o LLM cuidar das duas coisas, as decisões criativas são boas, mas as de engenharia são inconsistentes. Algumas gerações têm contraste perfeito. Outras não. Algumas têm links de âncora funcionando. Outras têm hrefs mortos apontando para seções que não existem. Algumas carregam as fontes corretamente. Outras embutem um font-face que nunca é resolvido.

A ideia por trás do Forge: separar as decisões criativas das decisões de engenharia. A IA cuida da criatividade. Um compilador cuida da correção.

A arquitetura em duas fases

O Forge divide a geração de sites em duas fases distintas:

Fase 1: a IA decide o que construir (SiteSpec)

Em vez de escrever HTML puro, a IA produz uma especificação estruturada, um documento JSON que chamamos de SiteSpec. O SiteSpec descreve quais seções o site deve ter, qual conteúdo vai em cada seção, qual deve ser a paleta de cores e a tipografia, como é a navegação e qual é o tratamento geral do design.

A IA toma todas as decisões criativas: este é um visual escuro e luxuoso ou um clima claro e editorial? O título principal deve usar uma fonte condensada como a Bebas Neue ou uma serifa elegante como a Cormorant Garamond? As seções devem incluir uma galeria, uma faixa de números, um FAQ ou uma grade da equipe?

Mas a IA NÃO decide como renderizar nada disso. Ela não escreve uma única linha de HTML ou CSS. Ela descreve a intenção.

Fase 2: o compilador renderiza com perfeição (sempre)

O SiteSpec alimenta um compilador determinístico, uma função pura que recebe uma especificação e um playbook e entrega HTML autônomo e de nível profissional. A mesma entrada sempre produz a mesma saída.

O compilador é dono de toda decisão de engenharia:

• Âncoras de navegação: cada link do menu aponta para uma seção real. Âncoras mortas são impossíveis; o compilador reconcilia cada #href com os IDs reais das seções.
• Segurança de contraste: o contraste entre texto e fundo é verificado e garantido no padrão WCAG AA (4,5:1). A IA escolhe a paleta; o compilador garante a legibilidade.
• Alternância de superfícies: duas seções adjacentes nunca têm o mesmo tom de fundo. O compilador alterna automaticamente as superfícies base e secundária para criar ritmo visual.
• Normalização de contatos: os telefones são formatados em E.164 para links tel:, os canais de WhatsApp são detectados automaticamente e os horários e endereços são organizados. Cada dado de contato funciona como um link de verdade, clicável.
• Carregamento de fontes: as fontes do Google Fonts são carregadas com preconnect e display-swap. Sem font-faces quebrados, sem deslocamento de layout.
• Layout responsivo: cada bloco é renderizado corretamente nos pontos de quebra de celular, tablet e desktop. A IA não escolhe os pontos de quebra; o compilador os impõe.
• Síntese de rodapé e menu: se a IA omite um rodapé ou uma navegação (o que economiza tokens), o compilador os deriva das seções que existem. Nada nunca fica faltando no resultado final.

Por que isso importa: velocidade e determinismo

Velocidade

Como a IA produz dados estruturados em vez de HTML puro, a saída é drasticamente menor. A geração de uma página inteira em HTML exige de 15.000 a 25.000 tokens de saída do LLM. Um SiteSpec do mesmo site exige de 4.000 a 6.000 tokens, uma redução de 3 a 4 vezes. Isso se traduz diretamente em uma geração mais rápida (menos de 90 segundos para um site completo) e em menor custo.

Determinismo

O compilador é uma função pura. Dado o mesmo SiteSpec, ele sempre produz o mesmo HTML. Isso significa que:

• Editar é seguro. Quando você muda o título de uma seção no editor visual, só aquela seção muda. O compilador renderiza a especificação de novo e o resto do site fica idêntico. Sem efeitos colaterais em cascata.
• A qualidade é garantida. Contraste, âncoras, formatação de contatos, carregamento de fontes: tudo está correto em cada geração, não só em algumas.
• Dá para testar. Um motor determinístico pode ser avaliado de forma sistemática. Rodamos verificações automáticas de contraste de cores, integridade das âncoras, variedade de blocos e variação de design entre as gerações.

Criatividade com limites

Aqui está a ideia contraintuitiva: as restrições deixam a IA mais criativa, não menos. Quando o LLM é liberado de escrever HTML e CSS repetitivos, ele gasta todo o seu orçamento de tokens nas decisões que realmente importam: escolha das seções, estratégia de conteúdo, tratamento de design, teoria das cores. O resultado criativo é melhor justamente porque o resultado de engenharia já está resolvido.

O sistema de Playbooks

O compilador não deixa fixo no código como cada bloco é renderizado. Em vez disso, ele recebe um Playbook, um módulo que define a biblioteca de blocos (como cada tipo de seção é renderizado em HTML/CSS), o sistema de resolução de design (como paletas e tipografia são resolvidas) e a folha de estilos base.

Troque o playbook e o mesmo SiteSpec é renderizado em uma linguagem visual completamente diferente. O motor continua o mesmo. Os blocos mudam. É isso que torna o Forge extensível: novos tipos de seção, novos tratamentos de design, novas estratégias de renderização, tudo sem mexer no núcleo do compilador.

Hoje, o playbook do gerador de sites inclui mais de 26 tipos distintos de bloco, de seções principais e listas de serviços a faixas de números, galerias, FAQs, grades de equipe, marquees, chamadas de agendamento e mais. A IA escolhe nessa biblioteca de acordo com o tipo de negócio e o conteúdo, e o compilador os renderiza com precisão de pixel.

Como o Forge surgiu

O Forge não começou como um grande plano. Começou com um protótipo, um único arquivo compile.mjs que pegava uma especificação JSON escrita à mão e a renderizava em HTML. A pergunta era simples: se nós definíssemos os blocos e a IA preenchesse o conteúdo, o resultado seria melhor do que o HTML puro de um LLM?

Foi. Dramaticamente melhor. O protótipo renderizou o site de uma barbearia com contraste perfeito, navegação funcionando, carregamento correto das fontes e uma estética coerente em preto e dourado, tudo a partir de uma especificação JSON que era uma fração do tamanho do HTML equivalente.

A partir daí, a arquitetura foi tomando forma:

1. O protótipo virou um motor tipado e independente de framework, importável por qualquer ambiente de execução JavaScript, sem dependências do React, do Next.js ou de componentes internos do SiteDrop.
2. Os renderizadores de bloco fixos no código viraram um sistema plugável de Playbooks: cada playbook define os próprios blocos, tokens de design e CSS.
3. A integração com o LLM passou da saída em HTML puro para o uso estruturado de ferramentas (o schema do SiteSpec É o schema da ferramenta: ele ensina o modelo o que produzir e, ao mesmo tempo, restringe o formato da saída).
4. Um schema autodocumentado substituiu o prompt de sistema tradicional: as descrições do schema ensinam à IA o que cada campo significa, então a "gramática" ocupa poucas linhas.
5. As verificações de qualidade (checagem de contraste, reconciliação de âncoras, alternância de superfícies, normalização de contatos) foram embutidas no compilador para rodarem em toda geração, e não como pós-processamento opcional.

O resultado é um motor independente de provedor (funciona com Claude, GPT, Gemini, DeepSeek, xAI, qualquer modelo que aceite saída estruturada), independente de framework (extraível como um pacote autônomo) e determinístico (mesma especificação, mesmo HTML, sempre).

O que isso significa para você

Se você usa o SiteDrop, o Forge já está rodando quando você gera um site. Você não precisa fazer nada diferente: a melhoria está na qualidade, na velocidade e na consistência do resultado:

• Geração mais rápida: os sites são gerados em menos de 90 segundos porque a saída da IA é de 3 a 4 vezes menor.
• Qualidade consistente: toda geração tem contraste correto, navegação funcionando, carregamento correto de fontes e dados de contato formatados.
• Mais variedade de design: a IA escolhe entre mais de 26 tipos de bloco, mais de 4 arquétipos de design e uma ampla paleta de combinações tipográficas. Uma barbearia ganha uma estética escura e condensada; um consultório odontológico ganha um clima limpo e editorial; um restaurante sofisticado ganha um tratamento de serifa luxuosa.
• Edição mais segura: o editor visual modifica o SiteSpec e renderiza de novo pelo compilador, então as mudanças são previsíveis e sem efeitos colaterais.

Para onde o Forge vai agora

A arquitetura do compilador é a base de tudo o que estamos construindo. Como o motor é guiado por especificação, cada nova capacidade é um novo tipo de bloco, um novo playbook ou um novo token de design, e não uma reescrita do pipeline de geração. Esse é o poder da separação: a IA fica melhor em decidir, o compilador fica melhor em renderizar, e os dois evoluem de forma independente.

Acreditamos que esse padrão em duas fases (IA para a intenção, compilador para a execução) é como as aplicações web serão construídas daqui para a frente. Não só sites de uma página, mas aplicações com várias páginas, painéis e experiências interativas. A IA descreve o que deve existir. O compilador garante que funciona.