Landing page premium
Uma landing page está finalizada quando sobrevive a três verificações: corresponde à referência ou ao briefing, se mantém coesa em todas as larguras de 320 a 1920, e nada nela é acidental. A maior parte do trabalho é a terceira.
Decida o modo primeiro
Modo referência — o usuário forneceu uma captura de tela, PDF, URL ou "replique isto". A precisão é o objetivo e "quase lá" é falha. Meça a referência numericamente antes de escrever qualquer CSS. Carregue reference-replication.
Modo briefing — o usuário descreveu um negócio, um público ou um sentimento, sem imagem. A composição é sua para escolher; as regras da casa e a biblioteca de seções definem o piso de qualidade.
Se ambos estiverem presentes, a referência vence para tudo que cobre e o briefing preenche as lacunas. Se nenhum estiver claro, pergunte — uma landing page construída para o modo errado é desperdício.
Pergunte apenas o que altera a construção
Não interrogue. Quatro coisas realmente alteram a saída:
- Stack — HTML / React / Next / Astro. Estrutura a partir de
templates/<stack>/. - Informações básicas da marca — nome e uma paleta ou "extraia da referência".
- Localidade — determina moeda, formato de data, ortografia UK vs US. Pergunte uma vez, mantenha consistência.
- Seções — apenas se nem uma referência nem um tipo de página óbvio as implicar.
Todo o resto tem um padrão defensável. Use-o e diga o que você assumiu.
Ordem de construção
Trabalhar fora de ordem causa retrabalho, porque a altura do hero restringe tudo acima da dobra e os tokens de design restringem cada seção.
- Tokens — superfícies, tinta, linhas, destaque, raios, easing, uma escala tipográfica fluida.
references/design-system.md. - Hero — o elemento mais corrigido em cada construção.
100svh, ritmo emvh.references/house-rules.md. - Seções, na ordem da referência.
references/sections.md. Qualquer espaço que precise de uma fotografia: obtenha-a agora, não deixe uma caixa cinza —../stock-imagery/SKILL.md. - Footer, então a sequência de finalização abaixo.
- Verifique. Não opcional — veja abaixo.
As armadilhas
Leia references/traps.md antes de escrever código de grid, marquee, ícone SVG ou imagem full-bleed. Seis falhas ali são silenciosas: CSS válido, nenhum erro, layout errado em outro lugar. Elas custam horas na primeira vez e minutos com a referência aberta.
Verificação faz parte da construção
Uma landing page que não foi capturada em larguras reais não está finalizada. Execute o harness incluso:
scripts/verify.sh <url> --sweep # overflow 320→1920 + ajuste do hero
scripts/verify.sh <url> --shot 390x844 # um único viewport
Ele lida com a trava de janela de 500px do macOS que silenciosamente falsifica cada captura de tela móvel. Detalhes e fallback manual: references/verification.md.
Três verificações devem passar:
- Nenhum overflow horizontal em qualquer largura de 320 a 1920.
- Hero cabe em uma tela em 390×844, 414×896 e 1600×900, ou cresce deliberadamente.
- Movimento reduzido ainda renderiza cada seção — nenhum elemento deixado no meio de uma animação.
Sequência de finalização
Solicitada em toda construção real. Esta é a definição de concluído, não um opcional:
lenis-smooth-scrollpremium-mobile-menusocial-share-faviconsbuild-creditREADME.mdsobre a página — suas seções, tokens, breakpoints, passos de deploy — não sobre as ferramentas que a criaram.gitignore; mensagem de commit sem linha de co-autor de IA, a menos que solicitado- Notas de deploy (GitHub Pages precisa de
.nojekyllquando qualquer caminho começa com_)
O que "premium" realmente significa aqui
Não são gradientes e vidro. É: tipografia que escala fluidamente em vez de pular em breakpoints; movimento que toca apenas transform e opacidade; espaçamento medido em relação ao eixo em que vive; sem bandas mortas; e um layout móvel que foi projetado em vez de herdado do layout desktop. Cada um desses é verificável, e é por isso que são o padrão.
Referências
| Arquivo | Leia quando |
|---|---|
references/house-rules.md | sempre — as correções que se repetem em toda construção |
references/traps.md | antes de grid, marquee, ícones SVG, imagens full-bleed |
references/design-system.md | configurando tokens e a escala tipográfica |
references/sections.md | construindo hero, marquee, accordion, trilho de cards, footer |
references/verification.md | verificando, ou uma captura de tela parece errada |
../reference-replication/SKILL.md | uma imagem de referência ou URL foi fornecida |
../stock-imagery/SKILL.md | a página precisa de fotografia e nenhuma foi fornecida |