O que Landing Page Fast faz?

Produção opinativa de landing pages. Decisões tomadas para você. Saída: uma página funcional, implantada e alinhada à marca em 4 a 8 horas, não em semanas.

Este skill incorpora regras frontend-quality (a11y, Core Web Vitals, mobile-first) e cabeçalhos web-security-baseline — você não precisa pensar neles enquanto constrói.

Stack (padrão — não desvie sem motivo)

Astro + Tailwind + Componentes estilo shadcn/ui + Vercel.
TypeScript strict mode.
astro:assets para otimização de imagens.
astro:transitions se for multi-página (mantenha mínimo — página única é mais rápida de lançar).

Quando desviar:

Precisa de gates de autenticação / conteúdo dinâmico por usuário que evolua para o aplicativo completo → use Next.js 15 App Router em vez de Astro.
O operador já padronizou SvelteKit para o projeto → use esse.

NÃO use: WordPress, Wix, HTML+JS puro sem framework, CSS vanilla sem Tailwind. Mais lento para lançar, mais difícil de evoluir.

Estrutura de seções (comprovada para B2B/SaaS público técnico)

Nesta ordem. Não pule nada sem motivo explícito:

Hero — título + subtítulo + CTA principal + visual
Prova social — logotipos, banner de estatísticas, depoimento (apenas se real)
Problema — o que está quebrado no status quo (você GANHA credibilidade aqui)
Solução — como isso resolve (máximo 3 recursos)
Como funciona — 3-4 etapas com diagrama ou capturas de tela
Casos de uso — 2-3 personas, não mais
Preços — mostre preços a menos que realmente não possa
FAQ — 5-8 perguntas reais, respostas reais
CTA final — reafirme o valor, repita a ação
Rodapé — informações legais, redes sociais, contato

Pule "Sobre Nós / Equipe" a menos que a credibilidade do fundador seja a venda (a maioria dos produtos de infraestrutura B2B: pule; produtos voltados para o consumidor liderados pelo fundador: inclua).

Anatomia do hero

[Título: 6-10 palavras, promessa de valor]
[Subtítulo: 15-25 palavras, quem/o que/por quê]
[CTA primário] [CTA secundário — "veja como funciona"]
[Visual: captura de tela, diagrama ou loop de demonstração de 30s]

Regras do título:

Prometa um resultado, não um recurso.
Específico em vez de abstrato.
Inclua palavra-chave primária para SEO + qualificação.

Exemplos:

❌ "Infraestrutura poderosa para aplicativos modernos"
✅ "Infraestrutura RPC Solana com p99 abaixo de 50ms"
❌ "Plataforma transparente para licitações públicas"
✅ "Participe de licitações públicas em 10 minutos"

Padrões específicos do projeto

Landing do [Projeto A]

Mercado localizado primário, inglês em /en quando um segundo idioma for necessário.
Hero: captura de tela do painel com um cartão de licitação destacado.
Sinais de confiança: referências legais (selos de conformidade relevantes), logotipo de auditoria, certificações regulatórias se aplicável.
Cor: primário da marca + creme neutro + acento suave.
Requisito mobile-first rígido: a maioria dos usuários está no celular.
Captura de formulário: WhatsApp + e-mail (o WhatsApp é enorme na AR para SMB).

Landing do [Projeto B]

Mercado localizado primário, inglês em /en quando um segundo idioma for necessário.
Confiança, confiança, confiança. Selos de conformidade, visualização de criptografia, mensagens de controle do paciente.
Estilo fotográfico: quente, humano, NÃO tecnológico/frio.
Cor: paleta mais quente que [Projeto A] (terracota, sálvia, creme).
Formulários mínimos — apenas e-mail + seletor "Eu sou [paciente | médico | clínica]".
Aviso de privacidade em destaque (referências à lei aplicável de direitos do paciente e proteção de dados pessoais).

Página de produto [Empresa]

Inglês primeiro, sem localização.
Foco em código. Snippets ao vivo que copiam e colam.
Números de desempenho em toda parte ("p99 < 50ms", "100k TPS"), com link para metodologia de benchmark.
CTA de inscrição no nível gratuito.
Cor: paleta da marca [Empresa] a partir das saídas brand-creation.

Cronograma hora a hora

Hora 1: Configuração

pnpm create astro@latest <projeto> -- --template basics --typescript strict
cd <projeto>
pnpm add @astrojs/tailwind @astrojs/sitemap @astrojs/vercel
pnpm dlx astro add tailwind sitemap vercel
pnpm add -D @astrojs/check

Inicialize o projeto Vercel (CLI detecta Astro automaticamente):

pnpm dlx vercel link
pnpm dlx vercel deploy --prod  # deploy base em branco, valida pipeline

Hora 2-3: Cópia + estrutura

Escreva o texto PRIMEIRO em markdown (em docs/landing-copy.md).
Não projete até que o texto seja real.
Seção por seção. Viewport mobile-first enquanto constrói.

Hora 4: Polimento visual

Visual do hero via skill nanobanana OU captura de tela real.
Ilustrações das seções consistentes (um estilo — não misture).
Escala de espaçamento do Tailwind estritamente (sem valores arbitrários).

Hora 5: Formulários + analytics

Formulário vai para Resend (e-mail transacional) OU Supabase (DB de lista de espera) via Vercel Edge Function.
Script do Plausible (auto-hospedado no Walter-VM ou cloud €9/mês).
Teste o fluxo completo: formulário → confirmação por e-mail → linha no DB.

Hora 6: SEO + cabeçalhos

Meta tags (título, descrição, og:, twitter:) por página.
URL canônica.
Dados estruturados JSON-LD (Organization ou Product).
Robots.txt + sitemap.xml (plugin Astro gera automaticamente).

Cabeçalhos de segurança (em vercel.json ou middleware):

{
  "headers": [{
    "source": "/(.*)",
    "headers": [
      { "key": "Strict-Transport-Security",
        "value": "max-age=31536000; includeSubDomains; preload" },
      { "key": "X-Content-Type-Options", "value": "nosniff" },
      { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
      { "key": "Permissions-Policy",
        "value": "camera=(), microphone=(), geolocation=()" },
      { "key": "Content-Security-Policy",
        "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 'self' https://plausible.io" }
    ]
  }]
}

Hora 7: Passada de desempenho

Execute Lighthouse. TODAS AS QUATRO pontuações ≥ 95.
Tamanhos de imagem corretos (formatos de próxima geração, dimensionados para viewport).
Bundle < 150KB gzipados iniciais.
Elemento LCP pré-carregado.

Hora 8: Implantar + verificar

Domínio personalizado via Vercel (DNS Cloudflare apontado para Vercel).
Deploy de produção.
Teste em celular real.
Envie para o Google Search Console.
Primeiro evento de analytics registrado.

Orçamento de desempenho (RÍGIDO)

Métrica	Orçamento	Ferramentas
Performance Lighthouse	≥ 95	CI
Acessibilidade Lighthouse	≥ 95	CI
Boas Práticas Lighthouse	≥ 95	CI
SEO Lighthouse	≥ 95	CI
LCP em 3G	< 2,5s	WebPageTest
INP p75	< 200ms	RUM (Plausible se ativado, ou lib web-vitals)
CLS	< 0,1	RUM
JS inicial gzipado	< 150KB	bundlewatch
Tempo até o primeiro byte	< 200ms	Edge da Vercel

Se qualquer métrica falhar: corrija antes do lançamento. Páginas de marketing com métricas ruins derrubam a conversão imediatamente.

Regras de copy

Para produto técnico ([Empresa]):

Comece com o substantivo que o cliente pesquisa ("RPC Solana").
Estatística no início — dê um motivo para acreditar nos primeiros 5 segundos.
Mostre > conte: snippet de código, captura de tela, números reais.
Um CTA, repetido.

Para mercados consumidores / localizados ([Projeto A], [Projeto B]):

Palavras simples, frases curtas.
Comece com a pergunta que o usuário está se fazendo.
Sinais de confiança (conformidade, selos de segurança) mais visíveis.
Vários CTAs ok (inscrever-se, saber mais, contato).

Captura de formulário

// Vercel Edge function: /api/signup.ts
export const config = { runtime: 'edge' }

export default async function handler(req: Request) {
  if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 })

  const { email, source } = await req.json()

  // Rate limit por IP via Vercel KV / Upstash
  // Validar e-mail com zod
  // Inserir na tabela de lista de espera do Supabase (protegida por RLS)
  // Disparar e-mail de confirmação via Resend
  // Retornar 200 ou erro específico

  return Response.json({ ok: true })
}

NUNCA:

Confie que o cliente "lembre" do estado de envio.
Pule a validação no servidor.
Esqueça o rate limiting (um usuário, um bot, um DDoS — mesmo bug).

Padrões de analytics

Plausible (auto-hospedado no Walter-VM ou cloud):

<script defer data-domain="[projeto-a].com.ar" src="https://plausible.<dominio>/js/script.js"></script>

Rastreie:

Visualizações de página (padrão)
Cliques externos (data-domain="..." data-track-outbound="true")
Envios de formulário (evento personalizado)
Profundidade de rolagem em páginas longas (evento personalizado, com debounce)

NÃO FAÇA:

Adicionar Google Analytics. Pesado, hostil à privacidade, ambíguo na UE-AR.
Adicionar ferramentas de replay de sessão. Especialmente não para [Projeto B] (risco de PHI).
Adicionar mapas de calor. Pesados + assustadores.

Anti-padrões (não faça)

Carrossel no hero — ninguém clica além do slide 1.
CTAs demais — "Inscreva-se" + "Saiba mais" + "Assista demo" + "Leia blog" no hero = paralisia de decisão.
Fotos de stock de pessoas sorrindo em escritórios — sinal instantâneo de "SaaS genérico".
Marquee com 50 logotipos minúsculos de concorrentes — escolha 4-6 legíveis.
Mural de recursos — escolha 3 ou 6, não 27.
Vídeo com reprodução automática e som — bounce instantâneo.
Popup modal antes do carregamento da página — bounce instantâneo.
Banner de cookies que bloqueia a página — ilegal na UE, irritante em todo lugar. Use notificação mínima e não bloqueante.

Quando testar A/B

Não teste até ter 1k+ visitantes/semana. Abaixo disso, o ruído domina.

Quando pronto:

Teste UM elemento por vez (título, visual do hero, texto do CTA).
Use teste A/B da Vercel ou teste dividido do Plausible.
Significância estatística antes de declarar um vencedor.

Regras rígidas

Orçamento de 8h é rígido. Se você está na hora 6 e ainda projetando, entregue o trabalho da hora 7 e pule o polimento da hora 8. Melhor imperfeito ao vivo do que perfeito no seu repositório.
Todo script externo auditado. Sem "já que estamos nisso, vamos adicionar Hotjar / FullStory / Drift". Cada script deixa a página mais lenta e adiciona risco de privacidade.
Sem alterações em produção sem deploy de preview aprovado.
Falha no Lighthouse = lançamento bloqueado.

Integração

nanobanana para geração de hero / ilustrações.
Saídas brand-creation para paleta, tipografia, tom de voz.
Regras frontend-quality incorporadas (a11y + desempenho).
Cabeçalhos web-security-baseline incorporados.
seo-keyword-research (backlog adiado) informa copy e meta.
Skill pr-review para a revisão final antes do merge.

O que este skill NÃO faz

Aplicativos multi-página com autenticação, painéis, etc. → comece com Next.js.
Configuração de blog. Use Astro Starlight ou um framework de documentação estilo Mintlify.
Automação de marketing por e-mail. Use ConvertKit / Beehiiv.
Chat de suporte ao cliente. Se necessário, use Crisp (opção argentina, multilíngue).

Landing Page Fast

O que é Landing Page Fast?

Perguntar na sua IA favorita

Documentação