Como eu criei a landing page do meu e-book com o Claude (sem escrever uma linha de código)

Tem uma pergunta que eu escuto direto de quem me segue: "tá, mas na prática, como é usar o Claude pra construir alguma coisa de verdade — não só um texto ou um resumo?" Então resolvi contar os bastidores reais de um projeto que acabei de terminar: a landing page do meu próprio e-book, Tire Seus Projetos do Papel, construída inteira em conversa com o Claude, sem eu escrever uma linha de código do zero.

Não é um case polido de agência. São os perrengues, as decisões e os ajustes de curso reais de um projeto que foi pro ar.

O briefing que eu dei

Comecei simples: expliquei o objetivo (uma landing page de vendas pra um e-book), o público (quem quer sair da ideia parada e não sabe programar), a identidade visual (preto e laranja, a mesma do resto do site) e uma restrição técnica que muita gente esquece de mencionar — a página ia rodar dentro de um widget de HTML do Elementor, no WordPress.

Essa última parte parece detalhe, mas foi o que mais definiu como o projeto inteiro precisou ser construído.

O primeiro perrengue: o WordPress apaga o <script>

Widget de HTML do Elementor, por segurança, remove qualquer tag <script> assim que você salva. Isso significa: nada de JavaScript. Nenhum. E a página precisava de accordion no FAQ, de uma barra de compra fixa no celular, de animações suaves quando cada seção entra na tela.

Foi aqui que ficou claro o valor de conversar com uma IA que entende o problema todo, não só "escreve o código que eu pedir". Em vez de simplesmente recusar, o Claude propôs resolver tudo só com CSS: o accordion virou um truque com atributo onclick inline trocando uma classe; as animações de entrada usaram animation-timeline: view() (CSS puro, ativado pelo scroll), com uma regra de segurança pra qualquer navegador mais antigo simplesmente mostrar o conteúdo direto, sem esconder nada.

Nenhuma dessas soluções eu teria pensado sozinho. E foi assim, ainda: sem escrever uma linha de código, só descrevendo o problema.

Depois do primeiro rascunho, a parte que ninguém mostra

A primeira versão da página saiu boa, mas longe de pronta. As próximas semanas foram uma sequência de ajustes pequenos e reais:

• Troquei o link de checkout três vezes conforme eu testava ofertas diferentes na Hotmart.
• Repensei o preço do zero — comecei com "de R$ 97 por R$ 37" e, depois de rodar anúncios e ver que a moldura de desconto não estava convertendo, decidi simplificar pra um preço final único de R$ 9,97, sem parecer promoção.
• Tirei um vídeo de apresentação da capa (tinha ficado desatualizado) e pedi pra usar a própria capa do e-book no lugar, mantendo os selinhos flutuantes que davam vida à seção.

Cada uma dessas mudanças foi uma frase curta pro Claude — "troca esse link", "tira a moldura de desconto e deixa só o preço final", "esse vídeo saiu, usa a capa" — e o código inteiro (HTML, CSS, os dois arquivos que geram a página) se ajustava de um jeito consistente, sem eu precisar caçar manualmente cada lugar que precisava mudar.

O que ficou pronto no fim

A página final tem hero com prova social, bloco de preço, uma seção de oferta com a lista do que vem dentro do e-book, prova de garantia, FAQ em accordion, seção de fechamento e uma barra de compra fixa que só aparece no celular. Tudo isso rodando sem nenhum JavaScript, dentro de um único widget de HTML colado no Elementor — porque essa era a restrição real do projeto, e o trabalho é justamente construir dentro da restrição que você tem, não na que você gostaria de ter.

O que dá pra levar disso pro seu projeto

Três coisas que valem pra qualquer projeto que você for tocar com IA, não só landing page:

• Descreva a restrição, não só o objetivo. "Preciso de uma página de vendas" gera algo genérico. "Preciso de uma página de vendas que rode sem JavaScript dentro de um widget do Elementor" gera uma solução que realmente funciona no seu caso.
• Trate o primeiro resultado como rascunho, não como entrega. O valor real apareceu nas dezenas de ajustes pequenos depois — preço, link, vídeo — não na primeira versão.
• Peça pra IA justificar decisões técnicas incomuns. Quando uma solução foge do óbvio (como resolver interatividade só com CSS), entender o porquê evita que você fique perdido na próxima vez que precisar mexer sozinho.

É basicamente esse processo — briefing, primeira versão, ajuste real depois de ajuste real — que eu detalho com muito mais profundidade nos estudos de caso do e-book. Se esse tipo de bastidor te interessa, é exatamente o tipo de coisa que separa "sei usar IA pra conversar" de "sei usar IA pra entregar projeto".