Quando usar
- O usuário quer uma landing page nova (produto, serviço, evento, portfólio, waitlist)
- Quer redesenhar uma landing existente para que pareça profissional e única
- Pede animações, efeitos de scroll ou microinterações em uma página de marketing
- Está em fase de planejamento: quais seções, qual mensagem, qual estrutura
Stack (e por quê)
| Peça | Escolha | Por quê | Alternativa descartada |
|---|---|---|---|
| Framework | Astro 5 | Estático por padrão (0 JS de base), componentes, astro:assets para imagens, deploy = enviar dist/ | Next.js (exagerado para landing, deploy mais complexo), HTML puro (sem componentes ou otimização) |
| Estilos | Tailwind CSS v4 | Tokens próprios via @theme em CSS, sem config JS, purga automática | UI kits (shadcn/DaisyUI/Flowbite → visual genérico), CSS puro (lento para iterar) |
| Animação | GSAP 3.13+ (ScrollTrigger, SplitText) | Padrão da indústria para scroll/timeline; desde v3.13 TODOS os plugins são gratuitos | Framer Motion (preso ao React), AOS (limitado, parece "de template") |
| Smooth scroll | Lenis | Leve (~4kb), integração documentada com ScrollTrigger | Locomotive Scroll (mais pesado, menos mantido) |
| Deploy | Netlify / Cloudflare Pages / Vercel | Conectar repositório → push → deploy; saída estática sem servidor | VPS (desnecessário para estático) |
Regra rígida: NÃO instalar bibliotecas de componentes de UI. O design é próprio — isso é exatamente o que separa esta skill de um template.
Fluxo de trabalho (obrigatório, nesta ordem)
NUNCA comece pelo código. Uma landing sem briefing é um template com outro nome.
- Briefing — preencha assets/brief-template.md COM o usuário. Se faltarem objetivo, público ou CTA: PERGUNTE antes de prosseguir.
- Direção de design — siga references/design-direction.md: personalidade → tipografia → cor → layout → assinatura visual. Materialize-a em assets/design-tokens.css.
- Arquitetura de seções — defina o arco narrativo (tabela abaixo) e o texto dos títulos antes de diagramar.
- Construção — seção por seção, mobile-first (390px primeiro). Animações com references/animation-recipes.md.
- Auditoria — checklist de entrega (abaixo). Não é entregue sem passar por ela.
- Deploy — build estático + hospedagem (comandos abaixo).
Arco narrativo (estrutura base)
| # | Seção | Trabalho que faz |
|---|---|---|
| 1 | Hero | Proposta de valor compreensível em <5s + CTA primário |
| 2 | Problema / contexto | Nomeia a dor que o visitante reconhece |
| 3 | Solução / benefícios | Como você resolve — benefícios, não características |
| 4 | Prova social | Depoimentos reais, logotipos, métricas |
| 5 | Como funciona | Passos, demo, screenshots |
| 6 | Objeções | FAQ, garantia, preços |
| 7 | CTA final | Repete a MESMA ação única do hero |
Adapte, funda ou elimine seções conforme o briefing — nem todas as landings levam as 7.
Padrões críticos
- Uma única conversão: toda a página empurra para UMA ação. Dois CTAs distintos = briefing mal feito.
- Mobile-first real: projeta-se e constrói-se primeiro em 390px; desktop é a progressão, não o contrário.
- LCP intocável: o elemento LCP (título ou imagem do hero) nunca fica
opacity: 0em CSS. As entradas são feitas comgsap.from()(sem JS a página é exibida completa) e duram ≤ 1s no total. prefers-reduced-motion: TODA animação vive dentro degsap.matchMedia(). Sem exceções.- Ilhas mínimas: JS apenas onde há interação real. Um acordeão FAQ é
<details>, não um componente hidratado. - Imagens: sempre
astro:assets(<Image>), AVIF/WebP, dimensões explícitas,loading="lazy"exceto o hero. - Fontes: self-hosted (woff2 local ou Fontsource),
font-display: swap, máximo de 2 famílias, pré-carregamento da fonte de exibição.
Checklist antes de entregar
- Lighthouse mobile ≥ 95 em Performance, Acessibilidade e SEO
- CLS = 0 (dimensões em imagens, fallback de fonte ajustado)
- Animações desativadas com
prefers-reduced-motion: reduce - Contraste AA: 4.5:1 texto, 3:1 UI grande
- Navegável por teclado, foco visível, um único
h1 - Meta description, OG tags, favicon, título único
- Testada em 390px, 768px e 1440px
- Teste da marca: escondendo o logotipo, a página poderia ser de outra empresa? Se sim → voltar para a fase 2
Comandos
# Criar projeto
pnpm create astro@latest minha-landing -- --template minimal --typescript strict
cd minha-landing
pnpm astro add tailwind
pnpm add gsap lenis
# Desenvolvimento e build
pnpm dev
pnpm build && pnpm preview
# Deploy (escolha um; no Netlify/Vercel/Cloudflare: build "pnpm build", saída "dist")
npx wrangler pages deploy dist # Cloudflare Pages direto
npx netlify deploy --prod --dir=dist # Netlify direto
Recursos
- Templates: assets/brief-template.md — questionário de planejamento; assets/design-tokens.css — base do sistema de design próprio (Tailwind v4
@theme) - Guias: references/design-direction.md — direção de arte anti-genérica; references/animation-recipes.md — receitas GSAP/ScrollTrigger/Lenis prontas para adaptar