LP Studio Pro, case de ia, landing page (2026)

O LP Studio Pro é um aplicativo da V4 Company, feito por mim com IA, que reúne em um só lugar o briefing, a copy, o wireframe e o diagnóstico de conversão de uma landing page. O briefing é preenchido por áudio ou texto com apoio de IA, os blocos do wireframe são montados e editados com animações, e o resultado sai em PDF e nos formatos de Figma e Greatpages. Feito com React, Vite e Supabase (login e dados), com um proxy PHP para a IA, e publicado em ferramentas.vinniciusxavier.com.

Na V4 Company, o ponto de partida de uma landing page é um briefing longo, dividido entre o Account Manager (visão do cliente) e o Copywriter (estratégia e texto). O próprio documento avisa: se faltar campo ou algo fugir do padrão, a tarefa volta para refação. Quem usa o app é o time da V4: account, copywriter e web designer.

O app nasceu como o LP Wireframe Builder, que só montava wireframes em blocos. O LP Studio Pro (V4) cobre o caminho inteiro, do briefing à exportação, com projetos compartilháveis, biblioteca de blocos e IA apoiando cada etapa.

PROBLEMA

Briefing, copy e wireframe soltos geram material incompleto e tarefas devolvidas para refação.

Wireframe que o usuário edita e anima

Clicar no elemento abre uma barra minimalista, só com ícones em preto e cinza. A decisão veio do feedback de que os cards não animavam e de que o resultado tinha cara de IA. Um wireframe só para olhar foi descartado.

Blocos mais simples e miniaturas ilustrativas

O hero passou a ter só texto, subtítulo, botão e imagem. As cores dos blocos antigos foram padronizadas, as miniaturas seguem o estilo ilustrativo das antigas e o editor usa fonte normal, porque a versão condensada ficou ruim.

Briefing e wireframe também em modo leitura

Quem só revisa precisa ver o briefing e o wireframe sem poder alterar. Por pedido do time, o visualizador ganhou as abas Briefing e Wireframe, somente leitura, ao lado do compartilhamento como editor.

Chave da IA só no servidor

Depois de uma vulnerabilidade com a chave, ela saiu do código: fica apenas no servidor, atrás de um proxy PHP, com exemplo versionado e o arquivo real no .gitignore. Os três repositórios no GitHub são privados e sem chave embutida.

Reconstruir o código a partir do site publicado

O backup da Hostinger só tinha o build. O app foi reconstruído a partir do site publicado: React e Supabase voltaram a ser pacotes do npm e o código foi separado por assunto (componentes, telas, lib, dados, utilitários). O bundle original ficou guardado só como referência.

Do backup ao código

Em 13/10/2026 o backup da Hostinger foi extraído. Entre 14 e 19/10 o app foi reconstruído a partir do site publicado em 08/10, em pastas por assunto.

Blocos, miniaturas e animações

Padronização dos blocos antigos, novas miniaturas, animações de entrada e a aba Wireframe no visualizador.

Segurança e publicação

Chave da IA fora do Git, três repositórios privados no GitHub, deploy automático e o hub integrado ao mesmo deploy.

Tutorial e divulgação

Entre 15 e 21/10: série de 12 vídeos gravada sobre o projeto de exemplo, PDF passo a passo de 16 páginas e vídeos promocionais de 30 s e 40 s.

Do briefing ao wireframe, em um só lugar.

Briefing, copy, wireframe, diagnóstico de conversão e exportação, com IA em cada etapa.

Briefing por áudio, texto ou arquivo

O briefing oficial da V4 é dividido em cinco blocos: projeto, público e objetivo, página, publicação e revisão. Em “Comece rápido”, a pessoa grava uma explicação, cola anotações ou envia PDF e Word, e a IA preenche o briefing completo para revisão. Cada campo também tem o seu botão de IA.

Gravar áudio

PDF e Word

Autopreencher com IA

5 blocos

Copy com IA

A partir do briefing, a IA escreve a copy: ideia central, headline de até sete palavras, subheadline, objeções, CTA e garantia. Todos os campos podem ser reescritos um a um, por texto ou por voz, antes de seguir para o wireframe.

Ideia central

Headline

Objeções

CTA

Wireframe editável e animável

A página é montada em sequência a partir de 106 blocos em 11 categorias. Clicar no elemento abre uma barra minimalista, só com ícones, para editar o texto e aplicar animações de entrada. Os blocos podem ser reordenados, duplicados e receber imagens de referência.

106 blocos

Animações de entrada

Reordenar

Duplicar

Diagnóstico de conversão (CRO)

Antes de entregar, a página recebe uma pontuação e uma lista de 14 itens, divididos entre estrutura e copy: começa pela oferta, explica benefícios, tem prova social, responde objeções, tem ponto de conversão e termina com chamada para ação. Cada item pendente traz o atalho para corrigir.

Pontuação

14 itens

Atalho para corrigir

Exportação e compartilhamento

Briefing e wireframe saem em um PDF no padrão da V4, com formatos para Figma e Greatpages. O projeto pode ser compartilhado como editor ou visualizador, e o domínio próprio é apontado com um passo a passo de registro CNAME.

PDF

Figma

Greatpages

Editor ou visualizador

Um fluxo único, no ar para o time da V4.

5

etapas no mesmo fluxo: briefing, copy, wireframe, CRO e exportação

106

blocos de wireframe, em 11 categorias

12

vídeos de tutorial, mais um PDF de 16 páginas

O app está publicado em dois endereços e acompanhado de tutoriais em vídeo e em PDF. Não há registro de ganho de prazo ou de volume de uso: os números acima descrevem o que foi entregue, não um resultado medido.

• React
• Vite
• Supabase (login e dados)
• Proxy PHP para a IA
• GitHub (deploy automático)
• Hostinger
• Hub integrado
• Publicado em ferramentas.vinniciusxavier.com e em lp.v4borgesco.com.br. O deploy é automático pelo GitHub (cerca de 2 minutos) e a chave da IA fica só no servidor.