Communitygithub.com

peth-eth/unicorn-landing

Skill do Claude Code: audite ou crie páginas de destino usando 11 padrões de empresas como Stripe, Airbnb, Coinbase, DoorDash, Dropbox, GitLab, Instacart e Gusto.

O que é unicorn-landing?

Este skill permite que o Claude Code audite ou construa páginas de destino (landing pages) baseadas em 11 padrões de design de alta conversão, extraídos da análise de gigantes tecnológicos como Stripe, Airbnb, Coinbase, DoorDash, Dropbox, GitLab, Instacart e Gusto. Quando o usuário deseja auditar uma página existente, o skill extrai a URL ou analisa o código/descrição fornecida e avalia cada padrão como PASS, PARTIAL ou FAIL com uma frase de justificativa. Em seguida, gera uma lista priorizada de correções, com foco no maior impacto em conversão. Se o usuário quiser construir uma nova página, o skill usa os 11 padrões como especificação para gerar uma estrutura completa de landing page: headline, subheadline, layout do hero, prova social, navegação, CTA e estratégia de rodapé. Ideal para desenvolvedores, designers e profissionais de marketing que trabalham com Claude Code, Cursor ou Codex, o skill é compatível com qualquer plataforma que execute agentes de IA, rodando inspeções diretamente a partir de comandos no terminal ou feedback textual.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add peth-eth/unicorn-landing

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Quando usar

Invocar quando:

  • O usuário quiser auditar uma landing page existente ("essa página tem o que precisa?")
  • O usuário quiser construir uma nova landing page ou seção hero
  • O usuário pedir feedback sobre copy, estrutura ou design de CTA

O que este skill faz

Executa a página (URL, código ou descrição fornecida) por todos os 11 padrões abaixo. Pontua cada um como PASS / PARTIAL / FAIL com uma frase de justificativa. Em seguida, gera uma lista priorizada de correções — do maior impacto em conversão para o menor.

Se estiver construindo do zero, use os padrões como especificação para gerar uma estrutura completa de landing page: headline, subheadline, layout hero, prova social, navegação, CTA e estratégia de rodapé.


Os 11 Padrões Unicórnio

Derivados da análise de Stripe ($65B), Airbnb ($80B), Coinbase ($50B), DoorDash ($55B), Dropbox ($8B), GitLab ($8B), Instacart ($10B), Gusto ($10B).

1. Headline que define categoria

Reivindique uma categoria, não uma lista de recursos.

  • FAÇA: "Infraestrutura financeira para a internet" (Stripe) — domina uma categoria
  • FAÇA: "A plataforma cripto mais confiável" (Coinbase) — usa "A", não "Uma"
  • NÃO FAÇA: "Uma plataforma que ajuda equipes a gerenciar [X]" — genérico, esquecível
  • Teste: Substitua o nome da sua empresa pelo de um concorrente. Se a headline ainda fizer sentido, ela falhou.

2. Simplicidade no hero — menos de 30 palavras no total

O hero responde a UMA pergunta: "estou no lugar certo?" Nada mais.

  • FAÇA: Headline + uma sublinha + um CTA. Pronto.
  • NÃO FAÇA: Bullets de funcionalidades, parágrafos explicativos, múltiplas seções acima da dobra
  • Conte cada palavra no hero (headline + subhead + CTA + qualquer texto de apoio). Se passar de 30, corte.

3. Divisão de mercado bilateral (aplica-se apenas a marketplaces)

Ambos os públicos recebem um caminho claramente identificado em até 3 segundos. Sem rolagem necessária.

  • FAÇA: Alternância "Convidados / Anfitriões" (Airbnb), "Pedir comida / Torne-se um Dasher" (DoorDash)
  • NÃO FAÇA: Um hero genérico que tenta falar para ambos os lados
  • Se o produto tem lados de oferta E demanda, ambos devem ser endereçáveis no hero

4. Produto no hero

Mostre o produto real — não uma ilustração, não um ícone, não uma foto de estilo de vida.

  • FAÇA: Captura de tela do dashboard, interface ao vivo, dados reais (Stripe mostra seu dashboard, GitLab mostra seu pipeline)
  • NÃO FAÇA: Gráficos abstratos, partículas animadas, fotos de stock
  • O produto É a prova de conceito nesta escala

5. Prova social através de escala

Lidere com o maior número verdadeiro que você tem.

  • FAÇA: "PIB global rodando no Stripe" / "50M+ pessoas" (GitLab) / logos de clientes
  • FAÇA (early stage): "500+ equipes usam isso" é melhor que nenhum número
  • NÃO FAÇA: "Junte-se a milhares de empresas" genérico, sem especificidade
  • Um número concreto > múltiplas alegações vagas

6. Navegação mínima

Máximo de 5–6 itens. Cada item extra de navegação é um ponto de decisão que reduz conversão.

  • FAÇA: Stripe (5 itens), Airbnb (3 itens), Coinbase (6 itens)
  • NÃO FAÇA: Megamenus, mais de 10 itens de navegação, dropdowns na navegação primária de uma página de marketing
  • O objetivo é uma ação. Todo o resto é atrito.

7. Personalização por público (avançado)

Se você conseguir detectar o segmento do visitante, mostre conteúdo específico para ele.

  • FAÇA: Stripe mostra conteúdo diferente para desenvolvedores vs. empresários; Gusto mostra conteúdo por porte da empresa
  • Implementação: parâmetros de URL, detecção de referrer, cookies, ou seletor explícito "Eu sou [função]"
  • Pule este até que os padrões 1–6 estejam sólidos

8. O CTA é sempre gratuito

Lidere com ação de barreira zero. Vendas/Enterprise acontecem DEPOIS da adoção self-serve.

  • FAÇA: "Comece agora", "Cadastre-se", "Experimente grátis", "Comece de graça"
  • NÃO FAÇA: "Fale com vendas", "Agende uma demonstração", "Solicite um orçamento" como CTA PRIMÁRIO do hero
  • Mesmo páginas B2B enterprise (Stripe, GitLab) lideram com self-serve gratuito

9. Velocidade da página é invisível

A página deve parecer instantânea. Se você notar que está carregando, já falhou.

  • FAÇA: Audite com Lighthouse / PageSpeed Insights. Alvo LCP < 2,5s, CLS < 0,1
  • FAÇA: Otimize imagem do hero, adie JS não crítico, use formatos modernos de imagem (WebP/AVIF)
  • NÃO FAÇA: Carregue bibliotecas pesadas, scripts bloqueantes ou vídeo não otimizado no hero

10. Rodapé como hub de navegação (escala com o produto)

Early stage: rodapé simples de 3 colunas. Produto maduro: sitemap abrangente por categoria.

  • FAÇA: Organize por: Produto, Desenvolvedores, Empresa, Jurídico (mínimo)
  • FAÇA: O rodapé da Stripe tem mais de 50 links organizados por categoria — atende SEO e descoberta
  • NÃO FAÇA: Rodapé vazio, ou rodapé apenas com copyright + links sociais, em um produto maduro

11. Consistência em todas as páginas

Cada página parece parte do mesmo sistema: mesmas fontes, cores, espaçamentos, estilos de componente.

  • FAÇA: Estabeleça design tokens cedo — variáveis de cor, escala tipográfica, unidades de espaçamento
  • NÃO FAÇA: Estilos de botão ligeiramente diferentes em páginas diferentes, tamanhos de heading inconsistentes
  • Teste: Abra 5 páginas aleatórias do site. Você consegue dizer que são o mesmo produto sem ver o logotipo?

Formato de saída da auditoria

## Auditoria Unicórnio de Landing Page — [Nome do Produto]

### Pontuação dos Padrões
| Padrão | Pontuação | Observação |
|--------|-----------|------------|
| 1. Headline de categoria | PASS / PARTIAL / FAIL | uma frase |
| 2. Simplicidade do hero | ... | contagem de palavras: X |
| 3. Divisão bilateral | N/A / PASS / FAIL | (apenas se for marketplace) |
| 4. Produto no hero | ... | |
| 5. Prova social | ... | maior número de prova usado: X |
| 6. Navegação mínima | ... | contagem atual de itens: X |
| 7. Personalização | ... | |
| 8. CTA gratuito | ... | CTA primário atual: "X" |
| 9. Velocidade da página | ... | LCP: Xs (se conhecido) |
| 10. Profundidade do rodapé | ... | |
| 11. Consistência entre páginas | ... | |

### Correções Prioritárias (maior impacto em conversão primeiro)
1. [Padrão X] — [mudança específica a fazer]
2. ...

Formato de saída de construção

Ao gerar uma estrutura de landing page do zero:

## Especificação de Landing Page — [Nome do Produto]

**Alegação de categoria (headline):** "..."
**Subheadline (≤15 palavras):** "..."
**Contagem de palavras do hero:** X (deve ser ≤30)
**CTA primário:** "..." (deve ser gratuito/sem atrito)
**Visual do produto:** [o que mostrar — captura de tela, demonstração, etc.]
**Maior número de prova:** "..."
**Itens de navegação:** [lista — máx. 5]
**Divisão de público necessária?** Sim / Não — [justificativa]

### Seção hero (cópia completa):
[headline]
[subheadline]
[botão CTA]

### Seção de prova social:
[alegação de número/escala]
[logos ou depoimentos]

### Estrutura do rodapé:
[coluna 1: Produto] | [coluna 2: Empresa] | [coluna 3: Jurídico]

Habilidades Relacionadas