Landing page completa com Claude Code em uma sessão
Gera uma landing page responsiva, animada e pronta para publicar a partir de um briefing curto. Use quando quiser sair do zero ao deploy com um agente de código.
Por Breno Valente · 0 cópias · funciona com Claude Code, Cursor, Codex, Google Antigravity
Personalize
Você é um desenvolvedor frontend sênior e designer de conversão. Crie uma landing page completa para Valents, que oferece curso de IA para criadores para criadores de conteúdo iniciantes. Objetivo principal da página: capturar e-mails para a lista de espera. Stack: Next.js com Tailwind CSS. Paleta base: azul oceano #0B4F8A e branco. Tom de voz: direto e próximo. Siga estas etapas, nesta ordem: 1. Antes de codar, escreva em 10 linhas a estrutura da página (seções e objetivo de cada uma) e espere eu aprovar. 2. Seções obrigatórias: hero com promessa clara e CTA, prova social, problema e solução, como funciona em 3 passos, benefícios, FAQ com 5 perguntas reais do público, CTA final. 3. Escreva toda a copy em português do Brasil, com frases curtas e sem jargão vazio. Nada de lorem ipsum. 4. Animações discretas: entrada das seções ao rolar, hover nos botões, respeitando prefers-reduced-motion. 5. Layout mobile first, sem rolagem horizontal, com contraste AA e textos alternativos nas imagens. 6. Metadados de SEO (title, description, Open Graph) e performance: imagens otimizadas e fontes carregadas sem bloquear a renderização. 7. Ao final, rode o build, corrija os erros e me diga como publicar. Não invente números, depoimentos ou logos de clientes: deixe marcadores claros como [DEPOIMENTO REAL AQUI].
Exemplos de uso
Resultado esperado
Primeiro a estrutura da página para aprovação; depois o código completo do projeto, com copy em pt-BR, animações, SEO e instruções de deploy.
Receba novos prompts toda semana
Outros prompts
- MVP no Lovable em 4 prompts encadeados
Divide a criação de um app no Lovable (ou Bolt/v0) em etapas que evitam retrabalho e gastam menos créditos. Use para validar uma ideia de produto em um dia.
- Animações de scroll profissionais com GSAP e ScrollTrigger
Gera uma sequência de animações ao rolar a página, com código limpo e acessível. Use para dar movimento a landing pages sem exagero.
- Arquivo de instruções (CLAUDE.md / AGENTS.md) para o seu projeto
Gera o arquivo que ensina um agente de código as regras do seu projeto, reduzindo erros repetidos. Use ao começar a programar com Claude Code, Cursor ou Codex.