bittencourtthulio/perfect-landing-page

Perfect Landing Page

Gera uma página inicial completa em um único arquivo HTML (HTML + CSS + JS inline, só fontes externas do Google Fonts), pronta para abrir no navegador e publicar.

O modelo de referência é exemplos/osvaldo-software.html (um software de gestão para lojas de capinha de celular, usado como caso de exemplo). Ele nasceu de várias rodadas de revisão com o objetivo de ficar "profissional e com menos cara de IA".

Quando usar

• Pedido de site, landing page ou página inicial para uma empresa.
• Pedido "no mesmo padrão dos exemplos" ou "parecido com este site de referência".
• Pedido para refazer um site já criado com mais cara de profissional.

Não usar para: sistemas com login/back-end, lojas com carrinho, sites multipágina, ou peças de redes sociais.

Passo 1: Briefing (pergunte só o que faltar)

Se houver um arquivo de briefing (BRIEFING.md, BRIEFING2.md), leia e use. Senão, pegue do pedido o que já foi dito e pergunte, em uma única rodada, só o que não estiver claro:

1. Nome da empresa e o que ela vende (segmento/nicho).
2. Diferencial principal: a única coisa que a empresa quer que o visitante lembre. É ele que organiza a página inteira.
3. Público: quem compra e qual a rotina dele.
4. Funcionalidades ou serviços (3 a 6). Se o usuário não souber, proponha com base no nicho e avise que são sugestões.
5. Contato: telefone, WhatsApp, e-mail. Se não houver, use placeholders óbvios, como (00) 0000-0000.
6. Cores ou clima visual (opcional). Se não houver, derive do nicho.

Se o usuário já deu o suficiente, não pergunte nada: escreva e deixe os ajustes para depois.

Se o usuário mandar um site de referência, analise antes de escrever: fonte, hero, densidade, cantos e bordas, ritmo das seções, rodapé. Traga os princípios, não a cópia. Blocos da referência que dependem de dado que a empresa não tem (depoimentos, logos de clientes, planos e preços) não entram: diga isso na entrega e liste o dado que destravaria cada um.

Passo 1b: Imagens (automático, nunca pergunte)

Antes de escrever, rode da raiz do projeto:

python3 -I <pasta-da-skill>/scripts/gerar_imagens.py --detectar

(<pasta-da-skill> é a pasta onde esta skill está instalada, por exemplo ~/.claude/skills/perfect-landing-page; o script só imprime sim ou nao, nunca a chave)

• sim: o projeto tem chave do OpenRouter no arquivo de ambiente. Gere o site com imagens, sem perguntar nada e sem pedir confirmação (Passo 2c).
• nao: gere o site sem imagens, sem perguntar e sem avisar que "faltou a chave". A página é a versão sem foto (tela do produto e blocos de cor), que já é completa. Só na entrega, em uma linha, diga que saiu sem imagens.
• Nunca leia, imprima ou comente o conteúdo do arquivo de ambiente. Só o script mexe nele.

Passo 2: Direção visual

O que deixa a página com cara de profissional é contenção. Defina antes de codar:

• Paleta curta: a cor escura da marca, uma cor de acento, um off-white neutro para as seções claras e dois cinzas de texto (um para fundo escuro, um para fundo claro). Se a marca é preta, use preto de verdade (#000), não um quase-preto. Tudo como variáveis CSS em :root: trocar a identidade deve exigir mexer só nelas.
• O acento aparece em poucos lugares: botão principal, a última linha do H1, o item ativo e os blocos de cor atrás das telas do produto. Nada de brilho, gradiente radial ou faixa inteira na cor de acento.
• Texto sobre o acento claro (amarelo, por exemplo) é sempre na cor escura da marca, nunca branco. Sobre fundo claro, não use o acento como cor de texto.
• Seções alternam fundo escuro e fundo claro, de borda a borda. Hero, módulos e rodapé escuros; diferencial e contato claros.
• Tipografia: uma família sans só, com hierarquia por peso e tamanho. Evite as fontes que viraram padrão de site gerado (Space Grotesk, Inter sozinha, par serifada + sans). Antes de escolher, renderize o H1 real em 4 a 6 candidatas do Google Fonts e compare no print. No modelo: Hanken Grotesk, pesos 400 a 800.
• Escala contida: H1 até ~52px (peso 800, entrelinha 1.05, tracking negativo), H2 até ~40px, corpo 16 a 18px. Título gigante e respiro exagerado são marca de template.
• Cantos por hierarquia: 8px em botões e campos, 12px em janelas, 16px em caixas, 28px só nos blocos de cor. Nada de pílula nem de um raio único em tudo.
• Bordas finas no lugar de sombras. Sombra só embaixo das janelas do produto.
• Botões retangulares, sem brilho colorido e sem seta no texto.
• Nada de emoji na página. Nem em ícones, avatar, contatos, botão de WhatsApp ou mensagens de confirmação.

O que denuncia site feito por IA (evitar)

• Selo ou pílula com ponto piscando no hero.
• Rótulo em caixa alta acima de cada título.
• Grade de cartões iguais lado a lado para apresentar funcionalidades.
• Cartão inclinado, brilho radial nos cantos, sombra colorida nos botões.
• Faixa de texto em movimento (marquee).
• Número grande inventado só para ter um "dado âncora" (ex.: escrever "China" no lugar de um número).
• Animação de subir e aparecer em toda seção.
• Emoji e ícone de biblioteca padrão.
• Textos unidos por ponto no meio ("A · B · C") e seta no fim dos botões.

Passo 2b: Ícones desenhados à mão (obrigatório)

• Desenhe os ícones em SVG próprio, um por conceito do negócio, e reúna todos num <svg> oculto com <symbol> no início do <body>; use <svg><use href="#i-nome"/></svg> onde precisar.
• Mesma família visual em todos: viewBox 32x32 (24x24 para contatos), traço de 2px com pontas redondas, cor currentColor e um detalhe de acento preenchido com var(--accent). Quando o ícone ficar sobre o próprio acento, troque --accent para branco.
• Dê um motivo do nicho aos ícones (folha no hortifruti, celular com capinha na loja de capinha).
• Evite os ícones óbvios (raio, aperto de mão, cadeado, foguete). Prefira uma metáfora do negócio.

Passo 2c: Imagens geradas (só se o Passo 1b deu sim)

Gere de 3 imagens, que cobrem tudo (o custo é de centavos): hero (fundo), diferencial (apoia a ficha do diferencial) e contato (ao lado do título).

1. Escreva imagens.json na raiz do projeto, com um estilo comum e os prompts em português. O estilo fixa: fotografia editorial realista, luz de cinema, a paleta da marca (cor escura dominante, a cor de acento como luz), sem nenhum texto, letras, logotipos, marcas reais ou marca d'água.
2. Cada prompt descreve o público e a rotina do nicho, não o software: o lugar de trabalho do cliente (para loja de capinha, o balcão com parede de capinhas), as mãos fazendo a tarefa que o diferencial resolve, o atendimento. Nada de tela de computador com interface (sai ilegível).
   • hero (16:9, modelo pro): cena ampla, lado esquerdo mais escuro e vazio para o texto.
   • diferencial (4:5, modelo flash): detalhe da tarefa que o diferencial resolve, visto de cima.
   • contato (3:2, modelo flash): momento humano de atendimento, sem escrita na embalagem nem placas ("embalagem lisa, nenhuma placa ou palavra visível").
3. Rode python3 -I <pasta-da-skill>/scripts/gerar_imagens.py imagens.json (para refazer uma só, passe o nome no fim). As imagens saem em imagens/*.jpg. Proporção 16:10 não existe: use 3:2.
4. Olhe cada imagem antes de usar. Refaça (só a que falhou) se tiver texto, logotipo legível, mão ou rosto deformado, ou se a cena não tiver a ver com o nicho. Máximo de 2 refações por imagem.
5. No HTML, as imagens ficam em imagens/ e são referenciadas por caminho relativo (a pasta vai junto na publicação). Veja exemplos/osvaldo-software-com-imagens.html:
   • Hero: foto no background da seção, com duas camadas de gradiente preto por cima: horizontal (≈94% na esquerda até ≈22% na direita) e vertical leve. O texto fica sempre sobre a parte escura. Teste a leitura do H1 e do subtítulo no print.
   • Diferencial: a foto vai dentro do bloco de cor, num ::before com filter:brightness(2.4) grayscale(.35) e mix-blend-mode:multiply sobre o acento: vira duotone na paleta da marca. A legenda sobre ela fica clara.
   • Contato: <img> em duas colunas com o título, aspect-ratio:3/2, height:auto (sem isso o atributo height estica a imagem), loading="lazy", width/height e alt descritivo. No celular vai abaixo do texto.
   • O alt das fotos diz que a imagem é ilustrativa, criada com IA.
6. O aviso do rodapé passa a dizer que as telas e as fotos são ilustrações, criadas com IA. Foto gerada nunca é apresentada como foto da loja, da equipe ou de clientes reais.

Sem chave (nao): pule este passo inteiro. O hero fica preto liso, o bloco de cor do diferencial fica na cor de acento e a seção de contato fica em uma coluna, como no exemplos/osvaldo-software.html.

Passo 2d: Efeitos que reagem ao mouse (padrão, sempre)

Todo site sai com efeitos que respondem ao mouse, principalmente no hero. Copie o bloco de CSS e o script de exemplos/osvaldo-software-com-efeitos.html e ajuste só cores e intensidade. Canvas 2D e requestAnimationFrame, sem biblioteca (não use Tween.js nem GSAP).

Hero (o lugar de mais vida):

• Camadas: a foto (ou o fundo liso, sem imagens) vai para uma div.hero-bg própria, com inset:-36px; por cima, div.hero-light e canvas.hero-fx, todas aria-hidden e pointer-events:none; o conteúdo fica em z-index:3.
• Lanterna: radial-gradient na cor de acento, com mix-blend-mode:screen, que segue o cursor via --mx/--my e some quando o mouse sai.
• Poeira de luz no canvas: até 120 pontinhos (cor de acento e branco) subindo devagar e piscando; perto do cursor (raio ~150px) eles fogem e se ligam ao cursor por linhas finas na cor de acento; um anel discreto marca o cursor. Use devicePixelRatio (até 2) e refaça as medidas no resize.
• Profundidade: o fundo anda ao contrário do mouse (até ~22px); a janela do produto inclina em 3D (até ~6°) com reflexo de luz (::after com soft-light); o cartão flutuante e o bloco de cor andam em velocidades diferentes, pela propriedade translate (não transform, para não brigar com a animação de entrada).

Resto da página:

• .tilt nos elementos de destaque (ficha do diferencial, painel das telas): inclinam até ~7° (3,5° no painel grande) com brilho sob o cursor, e voltam ao centro quando o mouse sai.
• Botões magnéticos (.btn-y, .btn-k, .fab): puxam ~25% na direção do cursor, com transition em translate.

Regras:

• Todo movimento é suavizado com interpolação (lerp), nunca pula.
• O laço do hero para quando o hero sai da tela (IntersectionObserver).
• prefers-reduced-motion: nenhum efeito.
• Sem mouse (pointer: fine falso, celular e tablet): só a poeira subindo, sem inclinação nem botões magnéticos.
• A entrada das linhas das telas usa @keyframes (animation), não transition: é mais robusta com o laço de animação rodando.
• Os efeitos não mudam layout nem texto. Se o usuário pedir uma versão sem efeitos, basta remover o bloco de script e as três camadas do hero.

Passo 3: Estrutura da página (nesta ordem)

Tudo alinhado à esquerda. Cada seção faz um trabalho só; se duas dizem a mesma coisa, junte.

1. Cabeçalho fixo na cor escura: logo em uma linha (marca + nome), menu de âncoras à direita, link de WhatsApp em texto e botão de CTA. No celular ficam só a logo e o botão.
2. Hero em duas colunas. À esquerda: H1 em três linhas curtas que junta nicho + diferencial, com a última linha na cor de acento; subtítulo de duas frases; dois botões (cheio e contornado); uma linha pequena de apoio embaixo dos botões dizendo o que acontece depois do clique. Sem rótulo acima do título. À direita: uma janela do sistema que prova o diferencial, com menu lateral, busca e lista, sobre um bloco na cor de acento que sangra até a borda da tela, mais um cartão flutuante com o detalhe do item selecionado.
3. Faixa estática: uma linha com 4 frases curtas do diferencial, cada uma com um ícone, separadas por linhas finas.
4. Diferencial (seção clara): à esquerda, um recorte ampliado da tela do produto sobre o bloco de acento, sangrando para o lado oposto ao do hero. À direita: título afirmativo, um parágrafo, três passos ligados por uma linha (o "como funciona" mora aqui) e um botão.
5. Módulos em abas (seção escura): título e parágrafo à esquerda, seguidos da lista numerada (01, 02...) com ícone próprio, nome e uma linha de apoio; o item ativo abre uma frase e ganha uma barra de acento. À direita, um painel fixo com a prévia desenhada da tela de cada módulo, em HTML/CSS simples. Só numere se a ordem tiver sentido (no modelo, o caminho da mercadoria: do fornecedor ao balcão). Troca por hover, clique e teclado; use role="tablist", role="tab", role="tabpanel", aria-selected e tabindex só na aba ativa. No celular o painel vai abaixo da lista. Use de 4 a 6 módulos.
6. Contato (seção clara): título em pergunta, a frase de destaque do diferencial logo abaixo, e duas caixas lado a lado: uma escura com o formulário (nome, empresa, WhatsApp) e uma na cor de acento com os contatos diretos.
7. Rodapé em colunas: marca e uma frase, navegação, módulos e contato. Na base, o copyright e o aviso de que as telas são ilustração. Só coloque links que existem: nada de redes sociais, blog ou política sem a página real.
8. Botão flutuante de WhatsApp, pequeno, na cor de acento.

Telas do produto

• Desenhe como produto de verdade: menu lateral, barra de busca, tabela com colunas, botão de ação. Tela clara sobre fundo escuro dá o contraste.
• Mantenha a mesma interface em todas (hero, diferencial, abas).
• Toda tela é rotulada como "Ilustração com dados de exemplo".
• A tela não pode prometer o que o texto não pode: nada de contagem de clientes ou fornecedores, selo de "verificado", prazo, preço de importação ou avaliação em estrelas se o texto não falar disso.

Entrega

• Um único arquivo HTML, válido, sem console.log e sem erros de acessibilidade.
• Links de âncora funcionando no cabeçalho (#hero, #modulos, #contato).
• Responsivo (mobile, tablet, desktop), com breakpoints em 640px e 1024px.
• Ao final, pergunte se quer ajustes (cores, texto, módulo extra) ou se pode começar de novo com outra empresa. Se o usuário não respondeu nada, está aprovado.