Page Builder
Um construtor visual de landing pages cuja IA escreve uma especificação tipada, não HTML.
- TanStack Start
- React 19
- Craft.js
- Tiptap
- dnd-kit
- Zustand
- Drizzle
- PostgreSQL
- Better Auth
- S3
- AI SDK
Visão geral
Arraste seções, edite direto no canvas, ajuste valores por breakpoint e publique HTML estático e rápido. A IA gera seções ou páginas inteiras, e tudo o que ela produz sai no tema, responsivo e totalmente editável.
Contexto
Quem vende produtos digitais no Brasil vive de landing pages: página de vendas, captura, produto, com link da Hotmart, pixels de rastreamento e consentimento da LGPD.
Eu queria um editor em que o canvas fosse a página de verdade, as páginas publicadas carregassem rápido e a IA levasse da página em branco a um bom primeiro rascunho em minutos. Na Sellflux, liderei o desenvolvimento de um editor de páginas; aqui pude desenhar um do zero, com o que aprendi lá.
O que construí
- Um editor de arrastar e soltar com 30+ componentes, edição de texto no canvas, desfazer e refazer, autosave e valores por breakpoint em cada propriedade.
- O canvas renderiza num iframe com a largura do dispositivo, então as media queries valem de verdade: o que aparece no editor é o que vai ao ar.
- IA que gera uma seção (3 variações com preview real) ou uma página inteira a partir de um briefing: propõe 3 identidades visuais, monta a estrutura e escreve as seções em paralelo.
- Publicação em HTML estático a partir das mesmas views React, com um script mínimo que inclui só as funcionalidades interativas que a página usa: modal, carrossel, formulário em etapas, contagem regressiva.
- Leads com UTM, métricas de visita, sitemap e robots, e um banner de cookies que segura os pixels até o consentimento.
Decisões principais
01A IA escreve uma especificação tipada, não HTML
O modelo responde num formato compacto, validado com Zod, que um compilador transforma em nós do editor usando os mesmos helpers dos templates feitos à mão. O resultado sempre sai no tema e editável, e specs antigas podem ser recompiladas quando o compilador melhora.
02Um schema moldado pelos Structured Outputs
O modo estrito da OpenAI exige todos os campos, proíbe recursão e limita o aninhamento. Desenhei a especificação em torno dessas regras: nullable em vez de opcional, anyOf em vez de oneOf, no máximo três níveis.
03Um motor de estilos para editor e publicação
A mesma função gera o CSS do canvas e da página publicada, então os dois não têm como divergir.
04HTML estático em vez de SSR com hidratação
Páginas publicadas são HTML puro com um script pequeno por funcionalidade: carregam rápido e são boas para SEO.
05Autosave seguro entre abas
Cada salvamento leva um número de versão. Em caso de conflito, o rascunho local é mantido e aparece um aviso de que outra aba salvou antes.
O que foi difícil
Fazer a saída da IA parecer projetada. As paletas geradas muitas vezes falhavam no contraste, então uma etapa ajusta as cores até o texto atingir uma razão mínima, e os textos são limpos dos vícios típicos de escrita de IA antes de chegar à página.