Início/Trilha 2 · Exemplos de Uso/Módulo 2.2
MÓDULO 2.2

🌐 Landing Page SaaS

Hero / features / pricing / CTA com direção visual coerente com a marca. 8 seções, ritmo, trust signals honestos.

7
Tópicos
~50 min
Duração
Prático
Nível
Web
Plataforma

🏁 Resultado: Você gera uma landing com hero/features/pricing/CTA usando direção visual coerente com a marca, sem inventar métricas.

1

🧱 saas-landing skill — anatomia

Estrutura de side-files e quando ela é default.

O que é

A skill saas-landing é otimizada para sites institucionais de produto B2B. Frontmatter od: declara scenario: marketing, default_for: ["b2b-saas"]. Side-files cobrem layouts, componentes recorrentes (hero, features, pricing) e checklist focado em conversão.

Por que aprender

Landing é o output mais pedido. Saber a anatomia da skill = saber onde estender (adicionar uma seção própria sem editar o core), onde herdar (ritmo, hierarquia), e onde declarar override (anti-patterns específicos do cliente).

Conceitos-chave

  • scenario: marketing
  • default_for: b2b-saas — primeiro no picker quando brief casa
  • design_system pareada: linear-app é default; trocar é trivial
  • Output: single-file index.html responsivo
2

🎯 As 8 seções da references/layouts.md

Hero, features, pricing, social proof, testimonials, FAQ, CTA, footer.

O que é

8 seções padrão do SaaS landing, cada uma com layout paste-ready em layouts.md:

1. Hero — h1 + sub + CTA + visual
2. Features — 3-4 colunas
3. Pricing — 3 tiers
4. Social proof — logo wall
5. Testimonials — quotes
6. FAQ — acordeão
7. CTA final — repetir hero
8. Footer — links + legal

Por que aprender

Saber as 8 evita inventar seção. Não toda landing precisa das 8 — pequena pode usar só 4 (hero, features, CTA, footer). Mas você sempre escolhe do menu, não do vácuo.

Conceitos-chave

  • Min viable: hero + features + CTA + footer (4 seções)
  • Full SaaS B2B: as 8 (hero, features, pricing, social proof, testimonials, FAQ, CTA, footer)
  • Order matters: hero antes de features; pricing após social proof
  • Skip social proof: só se cliente é early-stage sem logos
3

🎵 Ritmo padrão

Hero → 3 features → social proof → pricing → CTA.

O que é

Ordem padrão otimizada para conversão B2B: Hero → 3 Features → Social Proof → Pricing → Testimonials → FAQ → CTA → Footer. Hero é "o quê", features é "como funciona", social proof é "por que confiar", pricing é "quanto", testimonials sustentam pricing, FAQ derruba objeção, CTA repete o convite.

Por que aprender

Há motivo. Inverter (pricing antes de social proof) = visitante pula. Pular features = visitante não entende o produto. Ritmo é a sequência da venda, não decoração.

Conceitos-chave

  • Above the fold: hero + 1 CTA
  • Mid-page: features (entender) + social proof (confiar)
  • Decision zone: pricing + testimonials (justificar custo)
  • End: FAQ (último resistance) + CTA (ação) + footer
4

✨ One decisive flourish

Uma imagem real, um pull-quote, ou uma animação de carga — escolher uma.

O que é

Regra editorial: uma página merece UM ponto de "wow". Pode ser uma foto real do produto/time (não stock), um pull-quote tipográfico bonito, ou uma micro-animação no hero. Mas só uma. Mais de uma flourish = ruído competitivo, leitor não sabe pra onde olhar.

Por que aprender

É a diferença entre "landing OK" e "landing memorável". Mas exige restrição: o agente quer fazer 5 coisas legais; checklist força ele a escolher 1. Restraint is design.

Conceitos-chave

  • Imagem real: screenshot do produto, foto do time
  • Pull-quote: tipografia gigante, 1 frase potente
  • Animação: hero loading, parallax sutil, CTA hover
  • P0 enforcement: > 1 flourish = warning
5

💳 Pricing table — 3 colunas, "highlight da do meio"

Convenção de mercado para reduzir paralisia.

O que é

3 colunas (Free/Pro/Enterprise ou Starter/Growth/Scale), com a coluna do meio em destaque visual (border accent, badge "Mais popular"). É a convenção que cliente B2B reconhece. 4 ou 5 colunas confundem; 2 não dão âncora.

Por que aprender

Decoy pricing: a coluna 1 (mais barata) e a 3 (mais cara) servem pra fazer a 2 parecer "óbvia". Saber esse padrão = não inventar layout exótico que vai converter pior. Convenção é seu amigo no B2B.

Conceitos-chave

  • 3 tiers: Free + Pro + Enterprise (ou variações)
  • Middle highlight: border accent + badge
  • Feature checklist: ✓ ou ✗ por feature
  • CTA por tier: "Free" = signup; "Pro" = trial; "Enterprise" = contact
  • Annual toggle: 20% off comum
6

🛡️ Trust signals honestos vs. invented metrics

Como o agente lida quando não tem números reais.

O que é

A blacklist anti-slop proíbe métricas inventadas. Sem dado real, o agente não escreve "10.000+ clientes" ou "99.9% uptime". Em vez disso, usa placeholders honestos: [X clientes ativos], [Brand 1 logo], "Após 6 meses, gostamos de…" (sem número específico). É preferível placeholder que dado falso.

Por que aprender

Métricas inventadas erodem confiança. Cliente percebe e acha o site "AI-generated" instantaneamente. Placeholder é honesto: cliente sabe o que preencher antes do launch. O agente não tenta enganar.

Conceitos-chave

  • ❌ "10.000+ clientes": dado inventado
  • ❌ "99.9% uptime": claim sem fonte
  • ✅ "[X clientes]": placeholder honesto
  • ✅ "Trusted by [Brand 1, Brand 2, Brand 3]": espaço claro
  • P0 do checklist: grep mecânico de números no output
7

📱 Responsividade

Viewport, breakpoints, touch targets.

O que é

Landing tem que rodar em mobile primeiro. Breakpoints Tailwind padrão: sm: 640px, md: 768px, lg: 1024px. Hero collapse: 1 coluna em mobile, 2 em desktop. Touch targets ≥ 44px. Botões CTA full-width em mobile, auto em desktop.

Por que aprender

~70% do tráfego B2B SaaS chega em mobile (até decisão final, que vem em desktop). Landing ruim em mobile = lead perdido antes de virar trial. Saber checklist de mobile = checklist mecânico contra esse erro.

Conceitos-chave

  • viewport meta: sempre presente
  • Mobile-first: defaults sem prefixo, opcionais com sm:/md:/lg:
  • Touch targets: min 44px (Apple HIG, Google Material)
  • Hero stack mobile: headline → CTA → visual
  • Pricing scroll-x: 3 colunas viram horizontal scroll em mobile

🛠️ Hands-on

Brief: Landing para um curso online de Cybersegurança para devs.

Output esperado: index.html responsivo + pricing/3 planos + FAQ acordeão.

Pré-decisões para o brief:

  • Direção: Tech Utility (dark + neon accent)
  • Hero CTA: "Começar trial" (não "Comprar")
  • 3 features: "Lab hands-on" / "Mentoria" / "Certificado"
  • Pricing: Free taster + Pro 297/mês + Team enterprise
  • FAQ: 5-7 perguntas (pré-req, certificado, política reembolso)

Comando

/skill saas-landing
/design-system custom-cyber  # ou tech-utility default

# Brief
Landing para curso de cybersegurança para devs intermediários.
Tom: técnico, sóbrio, sem hype.
Direção: Tech Utility, dark mode default.
8 seções incluindo FAQ.
Sem inventar métricas — placeholders.

📚 Fontes

No repositório

  • skills/saas-landing/SKILL.md
  • skills/saas-landing/references/layouts.md
  • skills/saas-landing/references/checklist.md

Externas

  • Stripe, Linear, Vercel — landings canônicas para inspiração
  • Apple HIG (touch target 44px)
  • Google Material 2024 (breakpoints)

📌 Resumo do Módulo

1. Skill saas-landing é default para B2B SaaS (scenario marketing).

2. 8 seções padrão: hero, features, pricing, social proof, testimonials, FAQ, CTA, footer.

3. Ritmo Hero → 3 Features → Social Proof → Pricing → CTA é a sequência da venda.

4. One decisive flourish — uma imagem, quote ou animação por landing.

5. Pricing: 3 colunas, highlight da do meio (decoy padrão).

6. Trust signals honestos: placeholders > métricas inventadas.

7. Mobile-first: viewport, breakpoints sm/md/lg, touch ≥ 44px.

Próximo módulo:

Módulo 2.3 · App Mobile Multi-tela →
← Módulo 2.1 Módulo 2.3 →