Design de Landing Page

Visão Geral

Crie landing pages que convertem E cativam. Esta habilidade combina estrutura focada em conversão com design visual distinto para criar páginas que se destacam em um mundo saturado de IA. O objetivo: páginas no valor de $50-100 que você teria orgulho de vender.

OBRIGATÓRIO: Descoberta de Vibração (Faça Isso Primeiro)

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

O objetivo: Nenhuma landing page deve parecer igual, mesmo para produtos semelhantes.

O Processo de Descoberta de Vibração

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

Etapa 1: Reunir Contexto (Pergunte Isso)

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

Não "qual indústria" – uma coisa específica real. Uma loja de conveniência em Tóquio às 2 da manhã. 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 1970.

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: "embalagem médica + gráficos de skate", "planilhas + arte de rua", "hotel de luxo + zine punk", "controle da 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"

Etapa 2: Invente a Estética (Não Procure – Crie)

Com base nas respostas, CRIE uma vibração única decidindo:

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

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

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

Como o texto soaria naquele lugar?
Encontre uma fonte de exibição que incorpore a colisão da P3
Não recorra às 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 expansivo? Semelhante a 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?

Etapa 3: Escreva Sua Especificação de Vibração

Antes de codificar, escreva isso explicitamente:

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

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

TIPOGRAFIA:
- Exibição: [nome da fonte específica] - [por que se encaixa]
- Corpo: [nome da fonte específica] - [por quê]
- 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 esta página]

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

Etapa 4: A Verificação de Frescor

Antes de prosseguir, verifique:

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

Exemplo de Descoberta de Vibração

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 confundido com: "Um aplicativo de meditação, qualquer coisa caprichosa, startup-bro tech"

Especificação de Vibração Gerada:

NOME DA VIBRAÇÃO: 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
ANTI-PADRÕ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 e liso
- Fundo: #fafaf8 - branco iluminado por fluorescente
- Destaque: #e60012 - vermelho da linha JR, impondo atenção
- Nome da paleta: "Borda da Plataforma"

TIPOGRAFIA:
- Exibição: Darker Grotesque - confiante, ligeiramente condensada, toque europeu
- Corpo: Noto Sans JP - utilidade limpa, inspirada em 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: Faixas horizontais fortes que dividem seções como horários de trem

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

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

Iniciadores de Inspiração (Quando Estiver Preso na P1)

As Regras Anticonvergência

Sem memória de código hexadecimal – Gere cores novas a partir da referência, não se lembre de "meu azul usual"
Rotação de fonte obrigatória – Não use a mesma fonte de exibição 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 – Cada vibração precisa de um elemento que não "se encaixa", mas o torna único
Nomeie-a – Uma vibração sem nome torna-se genérica. Uma vibração 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?"

Em seguida, sintetize uma vibração a partir dessas três respostas.

OBRIGATÓRIO: Estratégia de Copy (Faça Isso Com a Descoberta de Vibração)

Execute isso EM PARALELO com a Descoberta de Vibração. A Descoberta de Vibração fornece a aparência. A Estratégia de Copy fornece as palavras. Ambos devem ser feitos antes de qualquer código.

A Equação de Conversão

Cada decisão de copy flui a partir disso:

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

Aumentar desejo → comunicar valor de forma clara e específica
Diminuir trabalho → brevidade, estrutura escaneável, próximas ações óbvias
Diminuir confusão → dizer exatamente o que é, tornar botões imperdíveis

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

Etapa 1: Descoberta de Objeções

Antes de escrever um único título, 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"
"Não confio o suficiente nisso ainda"
"Não entendo o que isso realmente faz"

Anote as 3 principais objeções. Elas direcionam o gancho do seu título, o copy dos recursos e o enquadramento do CTA.

Etapa 2: Fórmula do Título

Cada título do herói segue: Proposta de Valor + Gancho

A proposta de valor deve passar neste teste decisivo:

Se um visitante vir APENAS o título e mais nada, ele saberá exatamente o que você vende?

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

O gancho é de um de dois tipos:

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

"Reduza o tempo de implantação 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 de compra nº 1):

"Sem necessidade de cartão de crédito" (lida com objeção de confiança)
"Funciona com suas ferramentas existentes" (lida com objeção de custo de troca)
"Configure em 5 minutos" (lida com objeção de esforço)

Use sua principal objeção da Etapa 1 para escolher o tipo de gancho.

Etapa 3: Regras do Subtítulo

O subtítulo faz exatamente duas coisas:

Explica o que é o produto (se o título foi focado em benefícios)
Explica como a afirmação ousada é possível (se o título fez uma afirmação)

Máximo: 1-2 frases. Mantenha leve. Se precisar de três frases, seu título não está fazendo trabalho suficiente.

Etapa 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 muros 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 se conectar à proposta de valor dominante do herói. Os recursos não são aleatórios – são evidências para a afirmação que você fez acima da dobra.

Etapa 5: Copy do CTA

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

❌ "Comece" / "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 o título.

Etapa 6: Estratégia de Prova Social

Se você tem clientes/imprensa notáveis:

Exiba logotipos em uma marquise – cria FOMO ("todo mundo já sabe disso")
Destaque métricas impressionantes (contagem 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" supera 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.

Etapa 7: Roteamento de 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 roteia 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 a partir do herói

Não force todos pelo mesmo funil se eles tiverem necessidades diferentes.

Especificação da Estratégia de Copy

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

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

TÍTULO:
- Proposta de valor: [o que você vende, concretamente]
- Tipo de gancho: [afirmação ousada / objeção abordada]
- Título completo: [o texto real]
- Teste decisivo: Alguém saberia o que vendemos só por isso? [sim/não]

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

TEXTO DO CTA: [continuação narrativa do título]

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 redes sociais, a primeira impressão, o gancho. Todo o resto flui a partir de acertar o herói.

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

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

O elemento de fazer ou quebrar. Deve conter:

Título: 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áximo de 1-2 frases, mantenha leve.
Botão(ões) CTA: Continuação narrativa do título (não "Comece" — veja as regras de Copy do CTA acima). CTA secundário opcional.
Prova Social: Marquise de logotipos, depoimentos ou selos de confiança. Se estiver começando do zero, 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 de sangria total com 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"

…

[truncado para tradução]

Design de landing — Vibe Discovery + anti-AI-slop

O que é Design de landing — Vibe Discovery + anti-AI-slop?

Perguntar na sua IA favorita

Documentação