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:

Nome da empresa e o que ela vende (segmento/nicho).
Diferencial principal: a única coisa que a empresa quer que o visitante lembre. É ele que organiza a página inteira.
Público: quem compra e qual a rotina dele.
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.
Contato: telefone, WhatsApp, e-mail. Se não houver, use placeholders óbvios, como (00) 0000-0000.
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).

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.
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").
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.
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.
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.
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.

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.
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.
Faixa estática: uma linha com 4 frases curtas do diferencial, cada uma com um ícone, separadas por linhas finas.
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.
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.
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.
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.
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 a empresa não tem.

Passo 4: Escrever o HTML (regras)

Um arquivo só com <style> inline no <head> e <script> inline antes de </body>. Nada de arquivo separado de CSS ou JS.
As fontes vão de @import (Google Fonts) no CSS, uma família, 4 a 5 pesos (ex.: 400, 500, 600, 700, 800). A largura (wdth) pode variar se a fonte tiver eixo. A fonte vai no body, não no html.
CSS todo em variáveis no :root: cores, fonte, escalas, cantos (4 níveis: --r-sm, --r-md, --r-lg, --r-xl). As seções são padding: 6rem 0 (desktop) e padding: 3rem 0 (celular).
Conteúdo centralizado com max-width: 1240px + padding: 0 2rem. No celular, 0 1.25rem.
Entre seções adjacentes do mesmo fundo (ex.: módulos e rodapé escuros), a de cima tem padding-bottom: 4rem e a de baixo padding-top: 4rem.
A ordem das seções é a do passo 3: cabeçalho, hero, faixa, diferencial, módulos, contato, rodapé.
Nada de <section> sem <h2> (a seção do hero usa <h1> no lugar). Acessibilidade: aria-label no <nav>, labels nos campos e erros.
Layout: flexbox e grid, sem float ou tabela. gap no grid, não margin.
Paleta de até 7 cores no :root.
Versão para impressão (@media print): fundos brancos, texto preto, sem header fixo, sem efeitos, sem botão de WhatsApp.
html { scroll-behavior: smooth }.
A página passa no validador W3C (exceto pelo @import no CSS, que é necessário para as fontes).

Passo 5: Antes de entregar (verifique)

O briefing foi seguido? Nicho, diferencial, funcionalidades e contatos batem com o que foi combinado?
A página tem menos de 700 linhas? Se passou, corte: junte seletores CSS, encurte frases de apoio e remova comentários desnecessários.
A página funciona só abrindo o arquivo? Teste no navegador (caminho relativo das imagens e fontes carregando).
O H1 está no hero e não no header? A marca no header é <span>, não <h1>.
O H1 termina na cor de acento? A última linha está com color: var(--accent)?
Nenhum emoji? Nem no código, nem no conteúdo.
A fonte não é a mesma da última página que gerou? Olhe o @import. Se for Inter de novo, troque.
Os placeholders de contato são óbvios? (00) 0000-0000 e [email protected].
Os links do rodapé existem? Se não, tire. Nada de # vazio em link de política ou blog.
O aviso de IA está no rodapé? "Telas e imagens são ilustrações criadas com IA" (se tiver imagens) ou "Telas são ilustrações com dados de exemplo" (sem imagens).
A prévia do módulo ativo mudou visualmente? Abra uma aba, veja se o painel mudou e se a barra de acento apareceu no item.
O Formulário ... (não faz nada sem back-end; pode mostrar um alert de confirmação ou redirecionar para o WhatsApp; isso já está explicado no HTML de exemplo).
O intersection observer do hero funciona? Role para baixo, veja se a poeira parou (performance).
Os selects e inputs têm id e label? Os erros usam aria-describedby.

Exemplos de saída

exemplos/osvaldo-software.html: versão sem imagens.
exemplos/osvaldo-software-com-imagens.html: versão com imagens geradas.
exemplos/osvaldo-software-com-efeitos.html: versão com efeitos de mouse.

Scripts

Na pasta scripts/ da skill:

gerar_imagens.py: detecta chave e gera imagens (não modifique).

Perfect Landing Page (Página Inicial Perfeita)