Uma ferramenta que monta a landing page a partir do que a empresa já sabe
- AI Product Builder
- Product Design
- UI/UX Design
- Produto em evolução
Desenhei e construí com IA uma ferramenta em que a marca, o produto e o conhecimento da empresa alimentam a IA que monta a landing page. Ela funciona, e eu estou refinando a jornada de quem usa pela primeira vez.
Em resumo
Montar uma landing page costuma começar do zero, com a marca num lugar, o material do produto em outro e a redação num terceiro. A Dobra reúne isso por área da empresa: cada marca guarda a identidade, cada produto guarda o que se vende, e a IA lê os dois antes de propor a página.
A pessoa edita a página no canvas, com 67 dobras (as seções) que assumem a identidade de qualquer marca. Quem não é designer tem um caminho guiado, e quem é tem controle sobre o que a IA lê e sobre as instruções que ela segue.
O produto roda localmente, com banco real, e ainda não foi publicado. A jornada da primeira landing page é a parte que eu considero em refino: fiz o diagnóstico, reconstruí o começo e ainda falta testar com quem nunca usou.
Meu papel
- Product design
- UI/UX
- Design system
- Front-end
- Back-end
- IA aplicada
- QA
Ferramentas
- Claude Code
- Codex
- Next.js
- React
- TypeScript
- Tailwind
- Supabase
- Playwright
- Contexto
- Ferramenta interna, para áreas que montam landing pages
- Prazo
- 6 a 19 de outubro de 2026 no código, depois de um protótipo de 1º de outubro
- Natureza
- Produto em evolução: roda localmente, publicação e jornada de primeiro uso em refino
- Dados
- As telas desta página usam dados de exemplo
Resultados
67
MedidoTipos de dobra, prontos para qualquer marca
Contados no código (`blockTypes`) e na biblioteca do app. Cada uma assume cores e fontes da marca pelos tokens do design system.
26
Registro do projetoLanding pages reais viraram páginas editáveis
Convertidas a partir do código de LPs existentes, junto com 10 design systems extraídos. Número do registro do projeto, de 7 e 12 de outubro.
288
Histórico do gitCommits em 14 dias corridos
De 6 a 19 de outubro, em 8 dias de trabalho, com 42 migrações de banco e 14 arquivos de teste de regras de acesso.
Quem monta a página não é, quase sempre, designer
A ferramenta atende pessoas de várias áreas da empresa, inclusive quem nunca desenhou uma landing page. Por isso o desenho parte de uma pergunta: o que a IA precisa ler para escrever a página certa, e quem precisa conferir isso?
Três ideias organizam o produto, e as três nasceram de decisões que mudaram de rumo no meio do caminho.
A página no centro
Comparei três modelos em protótipo (a página, o produto ou a biblioteca como centro) e escolhi a página. Marcas, produtos e conhecimento existem para servir a ela.
A IA propõe, a pessoa confere
Tudo que a IA entende de um site ou de um arquivo vira proposta, com a origem ao lado. Nada é salvo antes de a pessoa usar, editar ou descartar.
Dobras sem identidade própria
As seções são mantidas em código e só ganham cor e fonte quando recebem uma marca. Assim a mesma dobra serve a todas.
Como a Dobra funciona
A Dobra separa quem cuida do quê, para que quem monta a página não precise ser designer. Num desenho ideal, um designer cuida do design system, e alguém de go-to-market ou o responsável pela marca preenche o conhecimento da marca e do produto. É isso que a IA lê para não criar algo genérico.
E se não houver um designer ou o material não estiver organizado, o caminho é o mesmo: o design system nasce da leitura de um site ou de alguns materiais enviados, e a identidade da marca e o dossiê do produto são preenchidos a partir deles. A IA propõe, e a pessoa confere cada item antes de qualquer coisa ser salva.
Os papéis acima são o desenho pretendido. No app, cada marca e produto também tem responsáveis, e os acessos são por papel (Leitor, Criador, Editor, Admin).
O produto, em uso
Cada tela responde a uma pergunta de quem usa. As decisões que mais pesaram: como o conhecimento é organizado, quem governa o que a IA segue e como a página pronta se comporta em cada tamanho de tela.
Conhecimento: pastas em primeiro lugar
Os materiais que a IA pode ler ficam em pastas por tema. Dentro de cada pasta, cada material é um quadradinho, e a leitura completa abre num pop-up.
A decisão por trás: Pedido durante os testes: o foco são as pastas, não os arquivos. A organização por tema responde "onde está o guia de oferta?" sem exigir uma lista longa.
Instruções da IA: texto em uso, com versão
Cada tarefa da IA (ler um site, extrair uma marca, montar a estrutura, tom em pt-BR, o que nunca inventar) tem seu texto editável, com limite de caracteres, prévia sem custo e versões. Só o Admin geral publica.
A decisão por trás: Quem responde pela IA precisa saber qual texto está em uso e poder voltar atrás. Versões imutáveis e uma prévia que não chama o modelo tornam a edição segura.
Capturas e gravações do app rodando em modo local, com dados de exemplo.
A jornada da primeira página ainda não está boa
Em 14 de outubro fiz um diagnóstico do caminho de quem chega a uma área vazia. O que encontrei: o mesmo link era pedido três vezes (para o visual, para a identidade e para o produto), a pessoa reescrevia o briefing à mão, o PDF não era aceito, e a tela mais importante morava num painel lateral de 480 px. Pela leitura do código, eram quatro esperas de IA antes de ver a primeira estrutura.
Reconstruí o começo em uma página só: fontes juntas (site, PDF, arquivos ou texto), leitura fonte por fonte, e um quadro "Confira o que entendemos", em que cada item mostra de onde veio e pede uma decisão: usar, editar ou descartar. Se a pessoa sair, o rascunho fica guardado.
Confira o que entendemos
O quadro agrupa o que foi entendido em marca, produto e página. Cada item traz a origem, o motivo e três ações. Nada é gravado até a pessoa criar.
A decisão por trás: A confiança numa IA vem de poder ver de onde ela tirou cada coisa e recusar o que não serve. Este foi o princípio do diagnóstico: nada entra sem passar pelos olhos de quem usa.
- Antes
Painéis e o mesmo link três vezes
Visual, identidade e produto pediam as fontes de novo.
- 14/10
Diagnóstico
Doze problemas, com a gravidade de cada um e a evidência no código.
Meu foco - 14–15/10
Começo reconstruído
Página em modo foco, fontes juntas, quadro de conferência e rascunho retomável.
Meu foco - Falta
Testar com quem chega
Leitura com IA em sites e materiais reais, e o caminho com pessoas que nunca usaram.
O diagnóstico e os números dele estão nos documentos do projeto; o que falta testar consta no checklist.
Construído com IA, medindo o que a IA entrega
Construí a Dobra com IA em 14 dias, e cada frente passou por revisão antes de entrar: testes de regras de acesso no banco, scripts de verificação e um robô que mede o layout das dobras em três larguras.
Também medi a qualidade do que a IA escreve. Em 15 de outubro li, às cegas, três versões do mesmo texto para quatro briefings e escolhi seção por seção. Nenhuma versão inteira me convenceu, e a redação mais enxuta ganhou uma seção de vinte.
7 de 20
Teste às cegasSeções escolhidas na versão atual do conhecimento
Contra 5 da versão anterior e 1 da redação enxuta; 6 empates e 1 "nenhuma". Uma leitura por célula, sinal fraco.
50
ContadoScripts de verificação no repositório
Verificações e testes de ponta a ponta, mais 14 arquivos de teste SQL para as regras de acesso.
- 6/10
Repositório
Primeiro commit e importação dos dados do modo local.
- 7/10
Dobras e IA
Segunda leva de dobras, IA por briefing e redação pronta.
- 12–13/10
Marca, produto, conhecimento
A página no centro: marcas, produtos, pastas e biblioteca.
Meu foco - 14–15/10
Primeira página e enquadramento
Onboarding, instruções da IA e recorte por tamanho.
Meu foco - 19/10
Passagem de infraestrutura
Documento com o que falta para publicar.
O que eu levo daqui
Três coisas que eu faria de novo em qualquer produto com IA no meio.
Mostrar de onde a IA tirou cada coisa vale mais do que acertar mais.
O ponto central do diagnóstico foi a confiança: quem pode ver a origem e recusar um item usa a ferramenta com mais segurança do que quem só recebe o resultado.
Medir às cegas desmente a intuição.
A redação enxuta ganhou 1 seção de 20 e a versão atual ganhou 7. Medir seção por seção mostrou onde a IA acerta e onde ainda soa feita por IA.
Todo produto interno tem uma primeira vez.
A Dobra funcionava para quem já a conhecia. A jornada de quem chega a uma área vazia é onde o produto ainda precisa de trabalho.
O que eu faço agora
Terminar a jornada da primeira página: testar o começo novo com pessoas que nunca usaram a Dobra, medir quanto tempo leva até a primeira estrutura e só então publicar para as áreas.