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 usuário não informou.
• Nomes genéricos ("Fornecedor 01") no lugar de empresas reais. Nome de produto de terceiros só como dado de exemplo em texto.
• Para leitor de tela, a janela inteira é uma imagem: role="img" com aria-label descrevendo, e o conteúdo interno com aria-hidden.

Passo 4: Regras de escrita

• Português do Brasil, tom humano e direto, frases curtas, sem caixa alta em rótulos. Fale com o dono do negócio, na rotina dele.
• O diferencial aparece no hero, na faixa, na seção própria e no contato: repetido com palavras diferentes, nunca copiado.
• O botão diz o que acontece, e a ação tem o mesmo nome na página inteira (no modelo, "Falar com a equipe" no cabeçalho, no hero, na seção e no formulário).
• Não invente números de clientes, depoimentos, prêmios, logos, prazos de resposta, certificações ou preços. Assinatura institucional é "Equipe [Empresa]", nunca uma pessoa fictícia.
• Só prometa o que o usuário disse. Use a palavra dele (se ele disse "acesso a fornecedores", não escreva "acesso direto", "intermediação" ou "sem sair do sistema"). Já saíram por isso: "responde em minutos", acesso remoto, integração com balança, gestão de perdas, CEASA.
• História da empresa só se confirmada. Frase como "nasceu dentro de uma loja" sai se o usuário não afirmou com clareza.
• Funcionalidades inferidas do nicho devem ser genéricas e plausíveis. Avise no final que são sugestões.
• Mensagem de erro do formulário diz o que falta e por quê, sem pedir desculpa.

Passo 5: Requisitos técnicos

• Um arquivo só na raiz do projeto (site.html, ou site-[empresa].html quando o projeto já tem site de outra empresa). <html lang="pt-BR">, <title>, <meta description>, theme-color e favicon em SVG inline.
• Responsivo: breakpoints em ~900px e ~860px, grids que viram 1 coluna, container width:min(1160px,100% - 40px). Use minmax(0,1fr) nas colunas para texto longo (e-mail) não estourar a grade.
• No celular: o menu lateral da tela do produto some, botões não quebram linha (white-space:nowrap) e enfeites que encostam em texto somem.
• Scroll suave com scroll-padding-top para o cabeçalho fixo e respeito a prefers-reduced-motion.
• Animação de entrada em um momento só: as linhas das telas do produto entram em sequência quando a tela aparece (IntersectionObserver + classe .reveal + @keyframes). Sem animação de entrada nas seções. Inclua <noscript> que deixa tudo visível. O resto do movimento é o que reage ao mouse (Passo 2d).
• Acessibilidade mínima: contraste legível, foco visível, aria-label em links só de ícone, label em todo campo, mensagem do formulário em aria-live.
• JS mínimo e inline: ano do rodapé, reveal, validação do formulário e abas.
• O formulário não envia dados por padrão (só mostra confirmação). Diga isso ao usuário e ofereça ligar a WhatsApp, e-mail ou serviço de formulários.
• Nenhuma dependência além do Google Fonts.

Passo 6: Entrega

1. Escreva o arquivo com Write. Nunca sobrescreva uma versão que o usuário já viu: nova versão vai em arquivo novo (-v2), para ele comparar.
2. Confira o layout antes de dizer que está pronto, olhando os prints:
   • Desktop: Chrome headless com --screenshot --window-size=1280,H --virtual-time-budget=6000 --hide-scrollbars. Para página alta, recorte o print em pedaços com Python (PIL) e olhe um a um.
   • Celular: Chrome sem tela não desce de ~500px de largura. Crie um HTML temporário com um <iframe> de 390px de largura apontando para o site e tire o print dele; o iframe respeita os breakpoints.
   • Outras abas: no mesmo HTML temporário, clique na aba pelo script (iframe.contentDocument.querySelectorAll('[role=tab]')[n].click()) e rode o Chrome com --allow-file-access-from-files.
   • Efeitos de mouse: o print sem tela não mostra animação. Sirva a pasta em http://127.0.0.1:<porta> e confira num Chrome de verdade (passe o mouse no hero, tire print, leia style.transform da janela e a opacidade das linhas). Se não houver navegador disponível, avise que os efeitos não foram vistos.
   • Erros que já apareceram e valem a conferência: menu colado na logo, cartão flutuante cobrindo texto, botão quebrando em três linhas no celular, legenda cortada pela borda do bloco de cor, rodapé desalinhado por causa do e-mail.
3. Responda curto, em português, com:
   • onde está o arquivo e o que foi conferido (e o que não foi);
   • a estrutura da página em poucas linhas;
   • o que o usuário precisa trocar (contatos placeholder, link do WhatsApp, formulário sem envio);
   • o que foi sugerido por você e não informado por ele;
   • se houve imagens: quais foram geradas e que são feitas por IA (e olhe se algum detalhe, como logotipo pequeno numa capinha, precisa de revisão); se não houve chave, uma linha dizendo que saiu sem imagens;
   • quais dados reais fortaleceriam a página e que bloco cada um destrava (depoimentos, clientes, planos).
4. Se a identidade mudou em relação ao briefing (fonte, cores), ofereça atualizar o briefing depois da aprovação.

Referência

• exemplos/osvaldo-software-com-efeitos.html (usa exemplos/imagens/): modelo mais completo, com fotos e com os efeitos de mouse do Passo 2d. Fonte do CSS e do script dos efeitos.
• exemplos/osvaldo-software-com-imagens.html (com a pasta exemplos/imagens/): o mesmo modelo com as três fotos geradas. Use como base quando o Passo 1b deu sim.
• scripts/gerar_imagens.py: gerador de imagens e detector da chave (Passos 1b e 2c).
• exemplos/osvaldo-software.html: modelo atual sem imagens, aprovado. Base quando o Passo 1b deu nao. Leia antes de escrever, reaproveite a estrutura de CSS e JS e troque conteúdo, paleta, fonte se o nicho pedir, ícones (redesenhe para o nicho novo) e as telas do produto. Não copie textos da Osvaldo para outra empresa.

Histórico de aprendizados

Cada versão do caso de exemplo (Osvaldo Software) ensinou uma regra que hoje está na skill:

• Rodada 1: cartões de solução, emojis e selo pulsante no hero foram rejeitados por "cara de IA". Entraram os ícones SVG próprios, a linha de apoio no lugar do selo e os módulos em abas com prévias de tela.
• Rodada 2: cartão inclinado, brilho radial, faixa em movimento e número grande inventado denunciavam template. A página passou a ter tela do produto no hero, uma única família sans, escala menor, cantos e bordas discretos, faixa estática, "como funciona" dentro do diferencial, contato em duas caixas e rodapé em colunas.
• Rodada 3: três fotos geradas pelo Nano Banana via OpenRouter (hero de fundo, diferencial em duotone, contato). Regra: se existe chave do OpenRouter no arquivo de ambiente do projeto, gerar o site com imagens automaticamente; se não existe, gerar sem imagens, sem perguntar nada. Aprendizados: 16:10 não é proporção válida; texto aparece em embalagens e placas se o prompt não proibir; o atributo height da <img> estica a foto sem height:auto; só o script lê a chave, nunca o modelo.
• Rodada 4: efeitos que reagem ao mouse (lanterna, poeira de luz em canvas, profundidade e inclinação no hero; cartões com inclinação; botões magnéticos). Aprendizado de verificação: o Chrome headless não serve para medir animação; para conferir efeitos, sirva a pasta com python3 -m http.server em 127.0.0.1 e abra num Chrome de verdade (passe o mouse, tire print e leia os estilos com JavaScript). Pare o servidor no fim.