Design de Landing Page

Visão Geral

Crie landing pages que convertem E cativam. Esta skill combina estrutura focada em conversão com design visual distintivo para criar páginas que se destacam em um mundo saturado de IA. O objetivo: páginas que valem $50-100 e das quais você se orgulharia de vender.

OBRIGATÓRIO: Descoberta de Vibes (Faça Isso Primeiro)

ANTES de escrever qualquer código, você DEVE executar o processo de Descoberta de Vibes. Isso não é uma tabela de consulta - é um prompt criativo que gera uma direção estética ÚNICA toda vez.

O objetivo: Duas landing pages nunca devem parecer iguais, mesmo para produtos semelhantes.

O Processo de Descoberta de Vibes

Faça estas perguntas ao usuário, depois SINTETIZE uma direção única. Não apenas mapeie respostas para predefinições.

Passo 1: Reúna Contexto (Pergunte Isso)

P1: Qual é um lugar ou objeto do mundo real que esta marca seria?

Não "qual setor" - uma coisa específica real. Uma loja de conveniência em Tóquio às 2h. A cozinha de uma avó. Um estacionamento brutalista. Um recife de coral. A cabine de um 747. Um mercado de pulgas em Marrakech. Um estúdio de gravação dos anos 70.

P2: Qual é a ÚNICA emoção que alguém deve sentir nos primeiros 3 segundos?

Escolha UMA: Calmo. Energizado. Curioso. Confiante. Encantado. Impressionado. Rebelde. Nostálgico. Inspirado. Divertido. Sofisticado. Bem-vindo. Intrigado. Confiante.

P3: Escolha DUAS influências inesperadas para colidir:

Exemplos: "embalagens médicas + artes gráficas de skate", "planilhas + arte de rua", "hotel de luxo + zine punk", "controle de missão da NASA + jardim de infância", "loja de conveniência japonesa + biblioteca vitoriana"

P4: Com o que esta página NUNCA deve ser confundida?

Nomeie 2-3 coisas específicas para evitar ativamente. "Um projeto de criptomoeda", "Um aplicativo de bem-estar", "Algo feito por um banco", "Qualquer coisa com gradientes roxos"

Passo 2: Invente a Estética (Não Consulte - Crie)

Com base nas respostas, CRIE uma vibe única decidindo:

INVENÇÃO DE CORES (Não use paletas memorizadas - derive do lugar/objeto)

Que cores existem naquele lugar/objeto real da P1?
Extraia 3-4 cores que pareçam autênticas para essa referência
Invente códigos hex específicos do zero - não reutilize códigos de projetos anteriores
Dê à sua paleta um nome evocativo (não "azul e laranja" mas "Mercado da Meia-Noite" ou "Amanhecer do Cinturão Industrial")

INVENÇÃO TIPOGRÁFICA (Combine a voz com a colisão)

Como o texto soaria naquele lugar?
Encontre uma fonte de destaque que incorpore a colisão da P3
Não use suas escolhas habituais - navegue pelo Google Fonts com novos olhos
Considere: peso, largura, contraste, peculiaridades

INVENÇÃO DE LAYOUT (Derive do espaço físico)

Como o espaço é organizado naquele lugar da P1?
É apertado ou espaçoso? Semelhante a uma grade ou orgânico? Vertical ou horizontal?
Que escolha de layout inesperada incorporaria a colisão da P3?

INVENÇÃO DE MOVIMENTO (Combine com a emoção)

Como a emoção da P2 se move?
Calmo = quase imperceptível. Energizado = cinético. Sofisticado = lento e deliberado.
Qual é o ÚNICO movimento característico que define esta página?

Passo 3: Escreva Sua Especificação de Vibe

Antes de codificar, escreva isso explicitamente:

NOME DA VIBE: [Invente um nome de 2-3 palavras]
REFERÊNCIA: [O lugar/objeto da P1]
EMOÇÃO: [Da P2]
COLISÃO: [Da P3]
ANTIPADRÕES: [Da P4]

CORES:
- Primária: [hex] - [por que esta cor]
- Secundária: [hex] - [por que]
- Fundo: [hex] - [por que]
- Destaque: [hex] - [por que]
- Nome da paleta: [nome evocativo]

TIPOGRAFIA:
- Destaque: [nome da fonte específica] - [por que se encaixa]
- Corpo: [nome da fonte específica] - [por que]
- Caráter: [descreva a voz]

LAYOUT:
- Densidade: [esparso/equilibrado/denso]
- Formas: [afiadas/arredondadas/orgânicas/mistas]
- Elemento característico: [uma escolha de layout incomum]

MOVIMENTO:
- Nível: [parado/sutil/moderado/dinâmico/caótico]
- Animação característica: [uma animação específica que define isso]

CORINGA:
- Um detalhe inesperado que não "combina" mas torna memorável

Passo 4: A Verificação de Originalidade

Antes de prosseguir, verifique:

Eu NÃO reutilizei códigos hex dos meus últimos 3 projetos
Eu NÃO usei minhas fontes "confortáveis" por padrão (verifique: estou usando Inter? Nunito? Space Grotesk? Se sim, encontre outra)
A colisão da P3 está realmente visível nas minhas escolhas
Alguém NÃO poderia confundir isso com minhas landing pages anteriores
Eu incluí um coringa que surpreende até a mim

Exemplo de Descoberta de Vibe

P1 - Lugar/Objeto: "Uma estação de trem japonesa na hora do rush"

P2 - Emoção: "Confiante"

P3 - Colisão: "Sinalização de trânsito + alta-costura"

P4 - Nunca ser confundida com: "Um aplicativo de meditação, qualquer coisa caprichosa, tecnologia de startup"

Especificação de Vibe Gerada:

NOME DA VIBE: Shinjuku Runway
REFERÊNCIA: Estação de trem japonesa na hora do rush
EMOÇÃO: Confiante
COLISÃO: Sinalização de trânsito + alta-costura
ANTIPADRÕES: Sem gradientes suaves, sem ilustrações lúdicas, sem formas amigáveis arredondadas

CORES:
- Primária: #1a1a1a - o preto das portas do trem
- Secundária: #f5f5f0 - concreto da plataforma, desgastado
- Fundo: #fafaf8 - branco iluminado por fluorescente
- Destaque: #e60012 - vermelho da linha JR, chamando atenção
- Nome da paleta: "Plataforma"

TIPOGRAFIA:
- Destaque: Darker Grotesque - confiante, ligeiramente condensada, toque europeu
- Corpo: Noto Sans JP - utilidade limpa, inspirada no trânsito
- Caráter: Autoritário mas não frio. Claro. Direcional.

LAYOUT:
- Densidade: Rico mas organizado - como um mapa de estação
- Formas: Afiadas com exceções arredondadas intencionais (como janelas de trem)
- Elemento característico: Fortes faixas horizontais que dividem seções como horários de trem

MOVIMENTO:
- Nível: Sutil mas preciso
- Animação característica: Elementos deslizam do lado como trens chegando - horizontal, suave, com tempo exato

CORINGA:
- Um elemento usa uma sobreposição de textura semelhante a tecido - a colisão de alta-costura

Inspiração Inicial (Quando Estiver Preso na P1)

As Regras Anticonvergência

Sem memória de código hex - Gere cores frescas da referência, não lembre "meu azul usual"
Rotação de fontes obrigatória - Não pode usar a mesma fonte de destaque em projetos consecutivos
Colisão deve aparecer - Se alguém não consegue ver AMBAS as influências da P3, force mais
Coringa é obrigatório - Toda vibe precisa de um elemento que não "se encaixa" mas a torna única
Nomeie - Uma vibe sem nome se torna genérica. Uma vibe nomeada tem identidade.

Perguntas de Contexto Rápidas (Versão Mínima)

Se o usuário apenas disser "faça uma landing page para mim" sem contexto, pergunte:

"Qual é um lugar ou objeto que captura a energia desta marca?"
"Qual emoção deve dominar?"
"Com o que isso NUNCA deve se parecer?"

Depois, sintetize uma vibe a partir dessas três respostas.

OBRIGATÓRIO: Estratégia de Copy (Faça Isso com a Descoberta de Vibe)

Execute isso EM PARALELO com a Descoberta de Vibe. A Descoberta de Vibe dá a aparência. A Estratégia de Copy dá as palavras. Ambos devem ser feitos antes de qualquer código.

A Equação de Conversão

Toda decisão de copy flui a partir disso:

Taxa de Compra = Desejo - (Trabalho + Confusão)

Aumentar desejo → comunique valor clara e especificamente
Diminuir trabalho → brevidade, estrutura escaneável, ações óbvias
Diminuir confusão → diga exatamente o que é, torne botões impossíveis de perder

Se estiver preso em uma decisão de copy, pergunte: "Isso aumenta o desejo ou diminui o trabalho/confusão?"

Passo 1: Descoberta de Objeções

Antes de escrever qualquer headline, identifique as objeções de compra. Pergunte ao usuário:

"O que quase impediu seus clientes de comprar?" "Por que os não clientes ainda não compraram?"

Categorias comuns de objeção:

"Não tenho as habilidades/tempo para isso"
"Isso não funcionará para minha situação específica"
"É muito caro pelo que recebo"
"Ainda não confio o suficiente nisso"
"Não entendo o que isso realmente faz"

Anote as 3 principais objeções. Elas orientam o gancho do headline, o copy dos recursos e o enquadramento do CTA.

Passo 2: Fórmula da Headline

Toda headline do herói segue: Proposta de Valor + Gancho

A proposta de valor deve passar neste teste decisivo:

Se um visitante vir APENAS a headline e mais nada, saberá exatamente o que você vende?

❌ "Melhore seu fluxo de trabalho" (bla corporativo — fluxo para quê?) ❌ "O futuro da produtividade" (não diz nada concreto) ✅ "Mantimentos entregues em 1 hora" (específico, concreto, claro) ✅ "Crie sites visualmente — sem código necessário" (o que faz + objeção principal tratada)

O gancho é de um de dois tipos:

Tipo A — Afirmação ousada e específica (desperta curiosidade):

"Reduza o tempo de deploy de 4 horas para 12 minutos"
"10.000 equipes enviaram mais rápido no mês passado"

Tipo B — Objeção abordada (remove a barreira #1 de compra):

"Não é necessário cartão de crédito" (aborda objeção de confiança)
"Funciona com suas ferramentas existentes" (aborda objeção de custo de troca)
"Configure em 5 minutos" (aborda objeção de esforço)

Use sua principal objeção do Passo 1 para escolher o tipo de gancho.

Passo 3: Regras do Subtítulo

O subtítulo faz exatamente duas coisas:

Explica o que o produto é (se a headline foi focada em benefício)
Explica como a afirmação ousada é possível (se a headline fez uma afirmação)

Máx.: 1-2 frases. Mantenha leve. Se precisar de três frases, sua headline não está fazendo trabalho suficiente.

Passo 4: Estrutura de Copy dos Recursos

Cada recurso recebe exatamente três elementos:

Elemento	Regras
Cabeçalho do recurso	Apenas proposta de valor curta. Seja direto. ❌ "Capacite sua equipe" ✅ "Colaboração em tempo real"
Parágrafo do recurso	Descrição concisa + aborde UMA objeção crítica. Vincule a detalhes se necessário — sem paredes de texto.
Imagem do recurso	Mostre o produto EM AÇÃO. Para software: GIFs > capturas de tela > arte abstrata. Para bens físicos: casos de uso + close-ups de qualidade de construção.

Cada recurso deve estar ligado à proposta de valor dominante do herói. Recursos não são aleatórios — são evidências para a afirmação que você fez acima da dobra.

Passo 5: Copy do CTA

CTAs devem continuar a narrativa do herói, não ser genéricos.

❌ "Comece agora" / "Solicite demonstração" / "Inscreva-se" (preguiçoso, sem contexto) ✅ "Encontre comida perto de mim" (continua uma narrativa de entrega) ✅ "Comece a projetar" (continua uma narrativa de ferramenta de design) ✅ "Veja sua economia" (continua uma narrativa financeira)

O texto do botão CTA deve parecer a próxima frase natural após ler a headline.

Passo 6: Estratégia de Prova Social

Se você tem clientes/imprensa notáveis:

Exiba logotipos em uma faixa — cria FOMO ("todo mundo já sabe disso")
Destaque métricas impressionantes (número de clientes, receita processada, etc.)

Se você NÃO tem prova social notável ainda (início frio):

Ofereça acesso gratuito a 3-5 empresas reconhecíveis, depois exiba seus logotipos
Use depoimentos específicos com nomes reais e fotos (mesmo de usuários beta)
Mostre estatísticas agregadas ("Usado por mais de 500 equipes" é melhor do que uma barra de logotipo vazia)
Considere "Como visto em" com qualquer menção na imprensa, podcasts ou newsletters

Não finja. Uma seção de prova social vazia é pior do que nenhuma seção.

Passo 7: Roteamento para Múltiplos Públicos

Se seu produto atende a personas distintas (por exemplo, indivíduos vs. equipes, desenvolvedores vs. designers):

Adicione um elemento "escolha sua própria aventura" perto do topo da página que roteie os visitantes para seções relevantes. Exemplos:

Abas de alternância: "Para Desenvolvedores" / "Para Designers"
Herói dividido: "Sou um [papel A]" / "Sou um [papel B]"
Landing pages segmentadas vinculadas do herói

Não force todos pelo mesmo funil se eles têm necessidades diferentes.

Especificação da Estratégia de Copy

Escreva isso junto com sua Especificação de Vibe:

PRINCIPAIS 3 OBJEÇÕES:
1. [objeção] → abordada em: [headline/recurso/CTA]
2. [objeção] → abordada em: [headline/recurso/CTA]
3. [objeção] → abordada em: [headline/recurso/CTA]

HEADLINE:
- Proposta de valor: [o que você vende, concretamente]
- Tipo de gancho: [afirmação ousada / objeção abordada]
- Headline completa: [o texto real]
- Teste decisivo: Alguém saberia o que vendemos apenas com isso? [sim/não]

SUBTÍTULO: [1-2 frases — o que é + como a afirmação funciona]

TEXTO DO CTA: [continuação narrativa da headline]

PÚBLICO: [único / múltiplas personas]
- Se múltiplo: [como os roteamos]

A Regra dos 50%

Gaste 50% do seu tempo na seção do herói. É a imagem de capa para mídias sociais, a primeira impressão, o gancho. Todo o resto flui de acertar o herói.

Composição da Seção (De Cima para Baixo)

1. Seção do Herói (Foco Principal)

O elemento decisivo. Deve conter:

Headline: Proposta de Valor + Gancho da sua Especificação de Estratégia de Copy (veja acima). Deve passar no teste decisivo — se alguém vir APENAS isso, sabe o que você vende?
Subtítulo: Explica o que é + como a afirmação funciona. Máx. 1-2 frases, mantenha leve.
Botão(ões) de CTA: Continuação narrativa da headline (não "Comece agora" — veja as regras de Copy do CTA acima). CTA secundário opcional.
Prova Social: Faixa de logotipos, depoimentos ou selos de confiança. Se estiver começando frio, veja a Estratégia de Prova Social acima.
Elemento Visual: Foto do produto, ilustração ou fundo animado

Variações do Herói:

Layout dividido (texto à esquerda, visual à direita)
Centralizado com elementos flutuantes
Fundo com sangria total e texto sobreposto
Assimétrico com elementos decorativos

2. Seção de Recursos/Benefícios

Mostre o que o produto faz. Cada recurso precisa de três elementos: cabeçalho (proposta de valor curta, sem "Capacite/Revolucione")

diyanto29/crm_worrie

O que é crm_worrie?

Perguntar na sua IA favorita

Documentação