MATERIAL EXTRA · CAMINHO DE PRESTAÇÃO DE SERVIÇOS

Landing Page
com ChatGPT ou Claude

Base pra testar sua primeira landing page de graça, direto no chat, antes de investir em qualquer ferramenta paga. Serve pra validar a ideia rápido.

Nível · Zero a intermediário Ferramenta · ChatGPT ou Claude (versão gratuita) Formato · IA CREATOR PRO_
Por que começar assim

Testar antes de investir

Pra validar se a estrutura e o texto da sua landing page funcionam, você não precisa de ferramenta nenhuma paga. ChatGPT e Claude, mesmo na versão gratuita, já geram o código completo de uma página. É rápido, é de graça, e é o suficiente pra você testar a ideia antes de decidir se vale a pena montar algo mais robusto depois.

Diferença prática entre as duas

Claude: mostra o resultado renderizado num painel ao lado da conversa. Você vê a página pronta, funcionando, sem precisar copiar nada pra outro lugar.

ChatGPT: mostra a prévia dentro do próprio bloco de resposta, no meio da conversa. Não é mais um painel separado, mas o efeito pra quem está testando é parecido: dá pra ver a página funcionando sem sair do chat.

Nos dois casos você consegue visualizar o resultado sem precisar de nenhuma ferramenta extra. A diferença é só onde a prévia aparece na tela, não se ela existe ou não.

Estrutura

Anatomia de uma landing page que converte

Essa é a ordem de blocos que funciona pra praticamente qualquer serviço. Use como checklist na hora de montar o prompt.

Hero
Título direto com o resultado que você entrega + um botão de ação visível sem precisar rolar a página.
Dor
Um parágrafo curto nomeando o problema que seu público sente hoje, na linguagem dele, não na sua.
Solução
Como o seu serviço resolve isso, em 3 a 4 bullets objetivos, sem enrolação.
Prova
Depoimento, resultado numérico, ou exemplo de entrega. Se ainda não tem, usa "como funciona" no lugar.
Oferta
O que está incluso, formato de entrega, e se fizer sentido, o investimento.
FAQ
As 3 a 5 dúvidas que todo cliente faz antes de fechar. Isso reduz objeção sem você precisar responder uma por uma.
CTA final
Repete o botão de ação com um pequeno reforço de urgência ou benefício.
Mão na massa

Passo a passo no chat

Escreva o briefing antes de abrir o chat

Anote: qual serviço, pra qual público, qual é a dor principal, qual ação você quer que a pessoa tome (chamar no WhatsApp, preencher formulário, agendar chamada).

Quanto mais claro esse briefing, menos ajuste depois.

Cole o prompt completo de uma vez

Use o modelo logo abaixo. No Claude, a página aparece renderizada num painel ao lado da conversa. No ChatGPT, a prévia aparece dentro do próprio bloco de resposta. Nos dois casos, você já vê o resultado funcionando sem sair do chat.

Revise bloco por bloco

Compare o resultado com a anatomia da seção anterior. Falta algum bloco? Peça pra IA adicionar, um pedido de cada vez, na mesma conversa.

Peça uma mudança por vez. Pedido acumulado confunde o resultado.

Ajuste o texto com a realidade do seu cliente

Reescreva o hero e a dor com as palavras reais de quem já te procurou (se tiver print de conversa ou depoimento, cole como referência no prompt).

Valide, depois decida se coloca no ar de verdade

Se a estrutura e o texto já convencem você mesmo lendo, aí sim vale investir tempo em colocar no ar com um domínio próprio e, se quiser mais recursos (formulário salvando dados, área de login, etc.), migrar pra uma ferramenta como o Lovable.

Cola e usa

Modelo de prompt pronto

Preenche os colchetes com a realidade do seu negócio antes de colar no ChatGPT ou no Claude.

prompt-landing-page.txt
// modelo base, todos os textos em português do Brasil > Crie uma landing page em um único arquivo HTML, com CSS embutido, para o serviço de [descreva o serviço], voltada para [descreva o público-alvo]. O objetivo principal da página é [ação desejada: chamar no WhatsApp / preencher formulário / agendar uma chamada]. Estrutura da página, nessa ordem: 1. Hero com título direto sobre o resultado que o serviço entrega, e um botão de ação visível sem rolar a página. 2. Bloco curto nomeando o problema que o público sente hoje. 3. Bloco com 3 a 4 bullets de como o serviço resolve isso. 4. Bloco de prova (depoimento ou "como funciona"). 5. Bloco de oferta: o que está incluso e o formato de entrega. 6. FAQ com as dúvidas mais comuns antes de contratar. 7. Bloco final repetindo o botão de ação. Estilo visual: [descreva cores/estética, ex: fundo escuro, detalhe em verde neon, tipografia moderna e direta]. Design limpo, profissional e responsivo para celular. Use dados fictícios ou de exemplo por enquanto. O arquivo deve funcionar sozinho, sem depender de nenhum servidor ou banco de dados.
Dica pros dois

Se a IA responder só com trechos de código separados, ou não mostrar a prévia sozinha, peça explicitamente: "me mostre a prévia da página renderizada" ou "me entregue tudo em um único arquivo HTML completo, pronto pra abrir no navegador".

Próximo passo, quando fizer sentido

Quando vale sair do chat e usar uma ferramenta como o Lovable

01

Formulário salvando dados

Quando você quiser que os contatos preenchidos fiquem guardados de verdade, não só copiados manualmente.

02

Domínio e hospedagem definitivos

Quando decidir colocar a página no ar pra valer, com endereço próprio. Esse passo vai ser ensinado na aula ao vivo do módulo de prestação de serviço.

03

Login ou área de cliente

Se o serviço evoluir pra algo que exige acesso restrito ou painel do cliente.

04

Manutenção sem depender de você

Quando quiser editar textos e imagens numa interface visual, sem reabrir o chat toda vez.

Até lá, o chat resolve: testar, validar e ajustar o texto e a estrutura sem gastar nada. Domínio próprio e hospedagem entram como um passo à parte, ensinado na aula ao vivo.

Pra aprofundar de graça

Conteúdos gratuitos recomendados

DOC OFICIAL

Como funcionam os Artifacts no Claude

Explicação oficial de como o Claude gera e exibe conteúdo como páginas web direto na conversa.

support.claude.com: What are Artifacts
GUIA

Guia de prompt engineering

Como escrever instruções melhores pra qualquer IA generativa, direto da Anthropic.

docs.claude.com: Prompt engineering overview
Antes de considerar a landing page validada

Checklist de teste