mapa_mental_lp_claude_hostinger (2).html
Page
1
/
1
100%
Mapa Mental - Landing Page com Claude
Como Criar Landing Page / Página de Vendas com o Claude
Do prompt até subir na Hostinger
1. Primeiro passo: ver o outro vídeo sobre Claude
Antes de criar a landing page, a pessoa precisa aprender a configurar a conta do Claude e instalar as skills.
Explique no vídeo que isso melhora muito a qualidade do resultado, porque sem configuração o Claude tende a entregar algo mais simples.
Fala sugerida: “Antes de começar, assiste meu outro vídeo sobre Claude para aprender a configurar a conta e instalar as skills, porque isso faz diferença no resultado que ele entrega.”
2. Criar um bom prompt para a LP
Aqui você ensina que não basta pedir uma landing page genérica. É preciso passar objetivo, público, oferta, cores e estrutura.
Prompt: Página de Vendas
Prompt: Página de Vendas
Atue como um desenvolvedor web front-end sênior e especialista em conversão.
Quero que você escreva o código completo em um único arquivo, utilizando HTML5 moderno, CSS3 com Flexbox/Grid e JavaScript apenas se necessário para interações simples. O design deve ser moderno, limpo, responsivo e focado em conversão.
1. Informações do produto ou serviço:
[Descreva o objetivo da página]
2. Público-alvo:
[Descreva para quem é a página]
3. Produto ou serviço:
[Explique o que está sendo vendido]
4. Tom da comunicação:
[Ex: moderno, direto, sofisticado, profissional]
6. Estrutura obrigatória:
Hero Section com headline forte, subtítulo e botão
Benefícios
Seção sobre
Prova social
Oferta ou preço
FAQ
Rodapé
Importante:
O layout deve ser moderno, bonito, responsivo e focado em conversão.
3. Criar a LP no Claude e ir refinando
Cole o prompt, gere a primeira versão e explique que dificilmente ela vai sair perfeita de primeira.
O processo ideal é pedir melhorias aos poucos até a página ficar mais profissional.
Comandos úteis: “melhore o design”, “deixe mais moderno”, “melhore a copy”, “destaque mais os botões”, “melhore a responsividade”.
Depois disso, peça uma revisão técnica completa sem alterar o layout.
Prompt SEO + Segurança + llms.txt
Prompt: SEO + Segurança + llms.txt
Agora mantenha exatamente o layout que já construímos e faça uma revisão técnica completa no código para deixar essa landing page mais otimizada em SEO, performance, acessibilidade e segurança para publicação.
Importante:
- não altere visualmente a estrutura da página nem descaracterize o design
- preserve a responsividade
- mantenha a LP em HTML e CSS, usando JavaScript apenas se for realmente necessário
- todos os botões da página devem apontar para este link:
https://kit.cursodescomplicandosites.com.br/
Quero que você aplique no código:
SEO
- HTML semântico
- apenas um H1 principal
- hierarquia correta de headings
- title e meta description bem otimizados
- meta robots
- canonical
- Open Graph
- Twitter Card
- alt text estratégico nas imagens
- schema markup em JSON-LD apropriado para página de oferta / produto digital / curso
- estrutura pensada para boa leitura por Google e IAs
Performance
- código mais limpo e enxuto
- otimização do CSS
- remoção do que for desnecessário
- imagens preparadas para boa performance
- lazy loading quando fizer sentido
- boas práticas de Core Web Vitals
- carregamento rápido principalmente no mobile
Acessibilidade
- estrutura clara para leitores de tela
- contraste adequado
- botões e links acessíveis
- atributos ARIA quando necessário
Segurança
Mesmo sendo uma LP estática, aplique as boas práticas possíveis no front-end e me entregue também as recomendações do que precisa ser configurado no servidor/hospedagem, incluindo:
- Content-Security-Policy
- Referrer-Policy
- X-Content-Type-Options
- Permissions-Policy
- uso de rel="noopener noreferrer" onde for necessário
Além disso:
- gere um arquivo llms.txt para acompanhar a LP, com uma versão estruturada da oferta para leitura por IAs
- esse llms.txt deve incluir: nome da oferta, proposta principal, público-alvo, benefícios, o que está incluso, FAQ resumido e CTA com o link principal
Na entrega final, me mostre:
1. o código final atualizado
2. o conteúdo do llms.txt
3. uma lista resumida das melhorias implementadas
4. um bloco separado com as configurações recomendadas no servidor
4. Colocar os links nos botões
Depois que a página estiver pronta, peça para o Claude substituir os botões pelos links corretos.
Prompt: Inserir Links
Prompt: Inserir Links
Agora substitua os botões pelos seguintes links:
Botão principal: [colar link]
Botão secundário: [colar link]
Botão de WhatsApp: [colar link]
Botão de checkout: [colar link]
5. Criar a página de obrigado
Depois da landing page, vale criar também a página de obrigado para deixar a estrutura mais completa e profissional.
Prompt: Página de Obrigado
Prompt: Página de Obrigado
Crie uma página de obrigado simples e moderna em HTML e CSS.
Objetivo:
Confirmar que a ação foi concluída e orientar o próximo passo.
Elementos:
Mensagem de confirmação
Próximo passo
Botão de ação
Cores:
[mesmas da landing page]
Design consistente com a landing page.
6. Subir no ar na Hostinger
Agora é a parte de comprar hospedagem e domínio e escolher a melhor forma de publicar a página.
Opção 1: subir o HTML direto no ar
Ideal para páginas simples, sem formulário ou sem integrações mais complexas.
Fluxo: acessar a hospedagem, abrir o gerenciador de arquivos, criar ou editar o index.html, colar o código e publicar.
Opção 2: instalar WordPress + Elementor
Melhor para quem quer editar com mais facilidade depois.
Fluxo: instalar WordPress na Hostinger, instalar Elementor, criar a página e colar o código em um widget HTML.
Depois que a versão técnica estiver pronta, você pode pedir ao Claude apenas a preparação dos arquivos finais para upload na Hostinger.
Prompt: Preparar Arquivos Hostinger
Prompt: Preparar Arquivos Hostinger
Com base neste arquivo que estou te enviando agora, quero que você faça apenas a preparação dos arquivos para publicação na Hostinger.
Importante:
- não refaça o layout
- não mude a copy
- não altere o design
- não repita a etapa de SEO, performance, acessibilidade e segurança, porque isso já foi feito antes
- use como base exatamente o arquivo que estou enviando agora
- não substitua os links atuais dos botões pelo domínio que vou informar
- o domínio informado serve apenas para configurar publicação, canonical, sitemap, caminhos finais e contexto da hospedagem
- os botões devem continuar com os links que já estão definidos no arquivo, a menos que eu peça alteração específica
O domínio onde a página será publicada é:
[COLE AQUI O DOMÍNIO]
Agora eu quero apenas que você organize e gere os arquivos necessários para subir essa landing page em uma hospedagem da Hostinger.
Sua tarefa é:
1. Preparar a estrutura final dos arquivos para publicação
2. Separar corretamente os arquivos do projeto, deixando tudo pronto para upload na hospedagem
3. Gerar os arquivos finais necessários para colocar a LP no ar, como por exemplo:
- index.html
- style.css, caso o CSS esteja separado
- script.js, apenas se realmente existir necessidade
- llms.txt, caso já faça parte da versão atual
- robots.txt
- sitemap.xml
- .htaccess, se fizer sentido para hospedagem Apache na Hostinger
4. Ajustar os caminhos internos dos arquivos para funcionarem corretamente no domínio informado
5. Garantir que a página abra corretamente quando eu subir os arquivos na Hostinger
6. Manter intactos os links dos botões já existentes no arquivo
7. Me entregar os arquivos completos, cada um separado pelo nome do arquivo antes do código
8. No final, mostrar também a estrutura de pastas final, exatamente como devo organizar os arquivos dentro do gerenciador de arquivos da Hostinger
Também quero que você considere o seguinte:
- se essa LP puder funcionar apenas com index.html e poucos arquivos auxiliares, prefira a estrutura mais simples possível
- se houver imagens ou arquivos externos necessários, identifique claramente onde cada um deve ficar
- se existir alguma configuração importante para o domínio funcionar corretamente com essa LP estática, informe de forma objetiva no final
- mantenha tudo pronto para upload manual na Hostinger, sem depender de frameworks, build ou terminal
No final da resposta, além dos arquivos, me entregue também:
1. a estrutura de pastas final
2. o passo a passo curto de upload na Hostinger
3. qualquer observação importante para eu não errar na publicação
7. Se a página for de captura
Se precisar de formulário, o ideal é usar WordPress + Elementor.
Você pode usar parte do layout criado pelo Claude em HTML e construir o formulário dentro do Elementor.
Explique que o Claude entrega muito bem o visual, mas o formulário precisa de estrutura funcional para captar os dados corretamente.
8. Resumo final da lógica
Ver o vídeo sobre Claude
Criar um prompt bom
Gerar a landing page
Ajustar até ficar boa
Inserir os links
Criar a página de obrigado
Comprar domínio e hospedagem
Escolher entre HTML direto ou WordPress
Se houver formulário, usar WordPress + Elementor
Copiar texto manualmente
Use Ctrl+C ou Cmd+C depois de selecionar o conteúdo.
O ambiente bloqueou a cópia automática. O texto já foi selecionado para você copiar manualmente.