Guia prático com 5 passos e prompts prontos do ChatGPT ao Lovable
Resposta Rápida: Para criar uma landing page profissional no Lovable usando Claude Code sem saber programar, você precisa de 5 passos: (1) capturar o print de uma página de vendas de alta conversão com a extensão GoFullPage, (2) usar o ChatGPT para analisar a estrutura e criar um prompt detalhado, (3) colar esse prompt + o print no Claude Code gratuito para ele gerar o código HTML/CSS completo, (4) publicar o código no Lovable.dev, (5) fazer ajustes visuais direto no Lovable. O processo todo leva menos de 1 hora e o resultado é uma página publicada em nomedapagina.lovable.app.
Sobre Nossa Expertise
Testamos na prática o fluxo completo de criação de landing pages usando Claude Code + Lovable, seguindo o método que vem sendo compartilhado por criadores de conteúdo especializados em IA. Este guia reúne o passo a passo validado com ferramentas gratuitas — sem necessidade de conhecimento em programação, design ou investimento inicial. Atualizado para junho de 2026.
Você já quis criar uma página de vendas profissional para um projeto, curso ou serviço, mas sabia que contratar um desenvolvedor custa caro e demora semanas? As ferramentas no-code existentes são limitadas e os templates prontos deixam tudo com a mesma cara?
Se você respondeu sim para qualquer uma dessas perguntas, o fluxo que você vai aprender aqui é a resposta. Ele combina três ferramentas poderosas — ChatGPT, Claude Code e Lovable — em uma sequência que qualquer pessoa pode seguir, mesmo sem saber programar uma linha de código.
A ideia central é simples: você usa uma página de vendas de alta conversão como referência visual, o ChatGPT analisa e estrutura o conteúdo, o Claude Code gera o código completo, e o Lovable publica e permite ajustes finais. Tudo de graça (ou com planos gratuitos generosos) — assim como outras ferramentas de IA gratuitas para marketing que você pode estar usando.
Neste guia, você vai aprender cada etapa do processo, com prints descritivos e prompts prontos para copiar e colar.
O que você precisa antes de começar
💡 Em Resumo: Você precisa de 4 ferramentas gratuitas: (1) Extensão GoFullPage para Chrome, (2) Conta gratuita no ChatGPT, (3) Conta gratuita no Claude (claude.ai), (4) Conta gratuita no Lovable.dev. Nada mais.
Antes de começar, separe estes itens — todos com versões gratuitas funcionais:
- Extensão GoFullPage para Chrome: Instale a extensão GoFullPage no seu navegador Chrome. Ela permite capturar uma página inteira em um único print, sem precisar scrollar e tirar várias fotos. É essencial para o passo 1.
- Conta no ChatGPT: Crie uma conta gratuita em chatgpt.com. Você vai usar para analisar a página de referência e gerar o prompt estruturado.
- Conta no Claude (Claude Code): Crie uma conta gratuita em claude.ai. O Claude Code é o Assistente de Cody da Anthropic — não confunda com o chat comum. Ele é feito para gerar e editar código. O plano gratuito já permite gerar páginas completas.
- Conta no Lovable.dev: Crie uma conta gratuita em lovable.dev. O Lovable é uma plataforma que hospeda sites gerados por IA e permite edição visual sem programação. O plano gratuito já permite publicar páginas.
Com essas 4 ferramentas, você consegue criar uma landing page profissional do zero em menos de 1 hora.
[PASSO 1] Capture uma página de referência com GoFullPage
💡 Em Resumo: Escolha uma página de vendas de alta conversão do seu nicho. Use o GoFullPage para capturar a página inteira em um único print. Esse print será a referência visual para o Claude Code gerar o código.
O primeiro passo é escolher uma página de vendas que você admira e que tem alta conversão comprovada. Pode ser de um lançamento famoso, de um produtor de conteúdo que você acompanha, ou de um produto digital que você já comprou.
Alguns exemplos de páginas que funcionam bem como referência:
- Páginas de lançamento do Thiago Finch
- Páginas de vendas de cursos da Hotmart que converteram bem
- Landing pages de produtos SaaS conhecidos
- Páginas de captura de leads de especialistas do seu nicho
Importante: Você não vai copiar o conteúdo da página — você vai usar a estrutura visual (disposição dos elementos, cores, fontes, seções, hierarquia) como inspiração para a IA gerar uma página única para o seu produto ou serviço.
Como capturar o print:
1. Acesse a página de vendas que você escolheu como referência.
2. Clique no ícone da extensão GoFullPage no canto superior direito do Chrome.
3. A extensão vai scrollar a página automaticamente e capturar tudo em um único print.
4. Ao final, clique em “Fazer Download” e salve a imagem no seu computador.
Pronto. Agora você tem a referência visual completa para as próximas etapas.
[PASSO 2] Use ChatGPT para analisar e estruturar a página
💡 Em Resumo: Cole o print da página no ChatGPT e peça para ele analisar a estrutura, identificar as seções, os elementos visuais, e gerar um prompt detalhado que servirá de instrução para o Claude Code. O ChatGPT vai “digerir” toda a página e transformar em texto estruturado.
Com o print da página de referência salvo, abra o ChatGPT e faça o upload da imagem. Use o prompt abaixo para instruir a IA a analisar a página e gerar o prompt para o Claude Code:
PERSONA: Atue como um analista de páginas de vendas especializado em estrutura visual e copywriting.
CONTEXTO: Recebi o print de uma página de vendas de alta conversão. Preciso que você analise a estrutura completa dela e gere um prompt detalhado que eu possa usar no Claude Code para criar uma página similar para o meu produto: [DESCREVA SEU PRODUTO/SERVIÇO].
TAREFA:
1. Analise o print e identifique todas as seções (headline, subheadline, bullets, depoimentos, garantia, CTA, etc.)
2. Identifique cores dominantes, tipografia e disposição dos elementos
3. Extraia todos os elementos estruturais: botões, imagens, ícones, formulários, links
4. Para cada seção, descreva o que ela contém e qual a função dela na página
5. Gere um PROMPT COMPLETO em português que eu possa copiar e colar no Claude Code para gerar uma página nova para meu produto, seguindo a mesma estrutura visual da referência
O PROMPT PARA O CLAUDE CODE DEVE INCLUIR:
– Estrutura completa de seções (H1, H2, bullets, CTA)
– Paleta de cores (hexadecimais extraídos da página)
– Disposição dos elementos em cada seção
– Textos sugeridos para cada bloco (adaptados para meu produto)
– Instruções de responsividade (mobile-first)
– Links de checkout e imagens (que eu fornecerei depois)
OUTPUT: O prompt final para o Claude Code, pronto para copiar e colar.
O ChatGPT vai processar a imagem e gerar um prompt detalhado contendo toda a estrutura da página, as cores, a disposição dos elementos e os textos adaptados para o seu produto. Esse prompt é o que você vai usar no próximo passo.
Dica importante: Se o ChatGPT não conseguir ler a imagem com precisão (cores, fontes), peça para ele descrever o que vê e você complementa com informações que você mesmo observou. O importante é que o prompt final contenha instruções claras o suficiente para o Claude Code gerar o código.
[PASSO 3] Gere o código com Claude Code
💡 Em Resumo: Cole o prompt gerado pelo ChatGPT no Claude Code. Envie também o print da página como referência visual. O Claude Code vai gerar o código HTML/CSS completo da sua landing page, com imagens, links de checkout e descrições dos produtos.
Como usar o Claude Code gratuito
O Claude Code é o Assistente de Cody da Anthropic. Para acessá-lo:
1. Acesse claude.ai e faça login com sua conta gratuita.
2. Na interface, você vai encontrar o chat comum e também a opção de “Artifacts” (artefatos). É nos artifacts que o código é gerado.
3. Crie um novo artifact do tipo “Code” (HTML/CSS/JS).
Atenção: O Claude Code não é o chat comum do Claude. Ele é a ferramenta específica para geração de código. Na interface web, você pode usar o chat normalmente e pedir para ele gerar código — ele vai criar um artifact com o resultado.
O prompt para colocar no Claude Code
Cole o prompt que o ChatGPT gerou no passo anterior. Além do prompt, faça também o upload do print original da página de referência. Isso dá ao Claude Code uma referência visual direta, o que melhora muito a qualidade do resultado.
Se quiser um prompt adicional para garantir que tudo saia correto, adicione ao final do prompt do ChatGPT:
INSTRUÇÕES ADICIONAIS PARA O CLAUDE CODE:
– Gere o código completo em HTML5 + CSS3, sem frameworks externos
– A página deve ser responsiva (mobile-first)
– Inclua seções: HEADLINE, SUBHEADLINE, BULLETS DE BENEFÍCIOS, DEPOIMENTOS, GARANTIA, CTA COM BOTÃO
– O botão de CTA deve ter um link de checkout real: [INSIRA SEU LINK DE CHECKOUT]
– Imagens devem usar placeholders de serviços gratuitos (ex: Unsplash) com descrições que eu possa substituir depois
– O código deve ser compatível com Lovable.dev — sem dependências externas que o Lovable não suporte
– Inclua meta tags de SEO básicas e Open Graph
Após enviar o prompt, o Claude Code vai processar e gerar o código completo em um artifact. Dependendo da complexidade, pode levar de 30 segundos a 2 minutos.
Quando o código estiver pronto, você vai ver uma prévia no próprio artifact. Revise visualmente para garantir que a estrutura está correta. Depois, clique em “Copiar código” ou baixe o arquivo.
O prompt completo para este passo
Aqui está o prompt pronto que você pode copiar e adaptar para usar no Claude Code:
Crie uma landing page completa em HTML5 + CSS3 para vender [NOME DO SEU PRODUTO/SERVIÇO].
A página deve seguir a estrutura visual do print que estou anexando.
REQUISITOS:
1. Design responsivo (mobile-first)
2. Seções obrigatórias:
– HEADLINE principal (título forte com a promessa central)
– SUBHEADLINE (subtítulo de apoio, máximo 140 caracteres)
– Seção de DOR/PROBLEMA (2-3 parágrafos conectando com o leitor)
– BULLETS DE BENEFÍCIOS (5-7 itens com ícones, cada um com título e descrição curta)
– Seção “O QUE ESTÁ INCLUSO” (descrição do produto/serviço)
– DEPOIMENTOS (3 cards de depoimentos fictícios com foto, nome e resultado)
– GARANTIA (selo visual + texto de garantia)
– CTA COM BOTÃO (botão destacado com link [INSIRA AQUI SEU LINK DE CHECKOUT])
– RODAPÉ com links e informações legais
3. Paleta de cores baseada no print anexado (extraia os hexadecimais)
4. Fontes: use fontes seguras do Google Fonts (ex: Inter, Montserrat, Open Sans)
5. Botões com hover effect
6. Animações suaves de scroll (fade-in ao entrar na viewport)
7. Meta tags OG e SEO básicas
IMAGENS: Use placeholder images do Unsplash com descrições contextuais que eu possa substituir depois.
OBSERVAÇÃO: O código precisa ser compatível com Lovable.dev — sem dependências de servidor, apenas HTML/CSS/JS puro.
No próximo passo, vamos pegar esse código gerado e publicar no Lovable.dev.
[PASSO 4] Publique no Lovable.dev
💡 Em Resumo: Com o código gerado pelo Claude Code em mãos, acesse o Lovable.dev, crie um novo projeto, cole o código e publique. Em menos de 5 minutos sua landing page está no ar em nomedoseuprojeto.lovable.app.
Com o código HTML/CSS completo gerado pelo Claude Code, chegou a hora de colocar sua landing page no ar. O Lovable.dev é a ferramenta perfeita para isso porque aceita código puro e ainda permite edição visual depois.
Passo a passo para publicar:
1. Acesse lovable.dev e faça login com sua conta gratuita. Se ainda não criou, o cadastro leva 2 minutos com seu e-mail ou conta Google.
2. Crie um novo projeto. Na dashboard, clique em “New Project” ou “Criar Projeto”. Dê um nome para sua landing page — esse nome vai virar parte da URL. Exemplo: se você nomear como “curso-marketing-digital”, sua página vai ficar em curso-marketing-digital.lovable.app.
3. Escolha a opção de importar código. O Lovable permite começar do zero com IA, mas você vai escolher a opção de colar código HTML/CSS/JS existente. Procure por “Import” ou “Custom Code”.
4. Cole o código gerado pelo Claude Code. Copie todo o código que o Claude Code gerou no artifact e cole no editor do Lovable. O Lovable aceita HTML5 + CSS3 + JavaScript puro sem problemas.
5. Verifique a prévia. O Lovable mostra uma prévia ao vivo da sua página. Role para baixo e confira se todas as seções estão aparecendo corretamente: headline, bullets, depoimentos, CTA, rodapé. Teste também a visualização mobile clicando no ícone de celular.
6. Publique. Clique em “Publish” ou “Publicar”. Em segundos, sua landing page estará no ar em nomedoseuprojeto.lovable.app — um link real, acessível de qualquer dispositivo, pronto para receber tráfego.
[PASSO 5] Ajustes visuais sem programar no Lovable
💡 Em Resumo: O Lovable tem um editor visual que permite alterar cores, textos, imagens e botões sem precisar mexer no código. Você pode ajustar tudo clicando diretamente nos elementos da página.
Uma das grandes vantagens do Lovable é que você não precisa voltar ao Claude Code toda vez que quiser fazer uma alteração pequena. O editor visual do Lovable permite ajustes rápidos:
Para alterar textos: Clique diretamente sobre qualquer texto na prévia da página. O Lovable abre um editor inline onde você pode reescrever headlines, bullets, depoimentos e botões. As alterações aparecem em tempo real.
Para trocar imagens: Clique sobre uma imagem e escolha “Replace Image” ou “Trocar Imagem”. Você pode fazer upload do seu próprio arquivo ou colar uma URL de imagem. Os placeholders do Unsplash que o Claude Code gerou podem ser substituídos pelas suas imagens reais aqui.
Para ajustar cores e fontes: O Lovable permite alterar o CSS visualmente. Você pode mudar a cor do botão de CTA, o fundo das seções, a cor dos textos e as fontes usadas. Tudo com alguns cliques, sem digitar código.
Para adicionar ou remover seções: Se quiser incluir mais depoimentos, adicionar uma seção de perguntas frequentes, ou remover uma seção que não ficou boa, você pode fazer isso arrastando blocos no editor visual do Lovable.
Para configurar o domínio personalizado: No plano gratuito, sua página fica em nomedoseuprojeto.lovable.app. Se quiser usar um domínio próprio (ex: suapagina.com.br), o Lovable oferece essa opção nos planos pagos — mas para começar, o subdomínio gratuito já é suficiente para testar e validar.
Dica importante: Depois de qualquer alteração visual, clique em “Publish” novamente para que as mudanças entrem no ar. O Lovable não publica automaticamente — você precisa confirmar a publicação.
Erros comuns ao usar Claude Code + Lovable
💡 Em Resumo: Os erros mais frequentes são: código com dependências externas que o Lovable não suporta, imagens quebradas, links de checkout errados, e falta de responsividade mobile. Todos têm solução simples.
Erro #1 — Código com dependências externas não suportadas. O Lovable aceita HTML, CSS e JavaScript puro, mas pode ter problemas com frameworks como React, Vue ou bibliotecas muito pesadas. Solução: No prompt para o Claude Code, especifique “Apenas HTML5 + CSS3 + JavaScript puro, sem frameworks ou dependências externas”.
Erro #2 — Imagens quebradas ou não carregando. Se o Claude Code usou links de placeholder que expiraram ou não são acessíveis, as imagens vão aparecer como quadrados vazios. Solução: Substitua os links das imagens no Lovable usando o editor visual. Use imagens do Unsplash, Pexels ou suas próprias imagens hospedadas em serviços gratuitos como Imgur.
Erro #3 — Link de checkout errado ou inexistente. O botão de CTA pode estar com um link placeholder que não leva a lugar nenhum. Solução: Antes de publicar, clique no botão e verifique se o link está correto. Substitua pelo link real da sua página de checkout na Hotmart, Eduzz, Kiwify ou plataforma que você usa.
Erro #4 — Página não responsiva no celular. Às vezes o Claude Code gera um código que fica bonito no desktop mas quebra no mobile. Solução: No prompt, inclua “A página deve ser mobile-first e responsiva”. Depois de publicar, teste no seu próprio celular antes de divulgar.
Erro #5 — O código gerado está muito genérico. Se o prompt para o ChatGPT ou Claude Code foi muito vago, a página pode ficar com textos genéricos que não convencem ninguém. Solução: Seja específico nos prompts. Quanto mais informação você der sobre seu produto, seu público e a estrutura desejada, melhor será o resultado final.
[PROMPT GRÁTIS] Os prompts prontos para cada etapa
📋 Seu kit de prompts prontos:
✅ Prompt 1 — ChatGPT: “Analise o print anexado e gere um prompt detalhado para o Claude Code criar uma landing page para [SEU PRODUTO]”
✅ Prompt 2 — Claude Code: “Crie uma landing page completa em HTML5 + CSS3 para vender [PRODUTO] seguindo a estrutura do prompt abaixo…”
✅ Prompt 3 — Ajustes no Lovable: “Substitua os placeholders de imagem, verifique os links de checkout e ajuste as cores para combinar com a identidade visual.”
Total: 3 prompts que cobrem TODO o fluxo — da referência à página publicada.
Perguntas Frequentes
Preciso saber programar para usar esse método?
Não. O Claude Code gera o código para você. O Lovable permite ajustes visuais sem programação. Você só precisa saber copiar e colar textos e imagens. Se sabe usar ChatGPT, sabe usar esse método.
O Claude Code gratuito é suficiente para criar a página?
Sim. O plano gratuito do Claude (claude.ai) já permite gerar código HTML/CSS completo através dos artifacts. Para páginas de vendas simples a médias, o suficiente. Se você for criar muitas páginas, pode considerar o plano pago, mas para começar o gratuito atende bem.
O Lovable gratuito permite publicar a página?
Sim. O plano gratuito do Lovable permite criar e publicar projetos no subdomínio lovable.app. Há limites de projetos ativos e largura de banda, mas para uma landing page de teste ou de baixo tráfego, funciona perfeitamente.
Posso usar domínio próprio na versão gratuita?
Não. O plano gratuito do Lovable não permite domínio personalizado. Sua página fica em nomedoseuprojeto.lovable.app. Se quiser usar um domínio próprio (ex: meucurso.com.br), é necessário um plano pago. Mas para começar, o subdomínio já serve.
E se eu quiser alterar a página depois de publicada?
Basta voltar ao Lovable, fazer as alterações no editor visual e clicar em “Publish” novamente. O Lovable atualiza a página automaticamente. Você não precisa passar pelo Claude Code de novo para alterações simples.
Esse método funciona para qualquer tipo de página?
Sim. Landing pages de vendas, páginas de captura, páginas de evento, páginas de produto, portfólios. O fluxo é o mesmo: referência → ChatGPT → Claude Code → Lovable. A qualidade do resultado depende da qualidade dos prompts — e uma landing page bem feita é o primeiro passo de um funil de vendas online.
O Google indexa páginas do Lovable?
Sim. As páginas publicadas no lovable.app são indexadas pelo Google normalmente. Você pode configurar meta tags de SEO no código gerado — e se quiser ir além, veja como fazer otimização para busca com IA (título, descrição, Open Graph) no código gerado pelo Claude Code para melhorar o ranqueamento.
Conclusão — sua landing page pode ficar pronta em 1 hora
Criar uma landing page profissional costumava exigir um desenvolvedor, dias de trabalho e centenas de reais de investimento. Hoje, com o fluxo que você aprendeu aqui — GoFullPage para capturar referências, ChatGPT para estruturar, Claude Code para gerar o código e Lovable para publicar, isto é, usando IA no marketing digital de forma prática — você pode ter uma página no ar em menos de 60 minutos.
O segredo está na qualidade dos prompts. Quanto mais específico você for com o ChatGPT e com o Claude Code, melhor será o resultado final. Não tenha medo de repetir o ciclo: gere, publique, avalie, ajuste os prompts e gere novamente. Cada iteração melhora o resultado.
Agora você tem um método testado, ferramentas gratuitas e prompts prontos. A diferença entre quem espera o momento certo e quem começa hoje é uma landing page publicada.
🎯 Próximo passo: Abra o Chrome, instale a extensão GoFullPage, encontre uma página de vendas que você admira no seu nicho e capture o print. Depois, abra o ChatGPT, cole o Prompt 1 com o print anexado e veja o prompt para o Claude Code sendo gerado. Em 1 hora sua landing page pode estar no ar.
