bg-szy/TOP-SKILLS

Design de Landing Page

Visão Geral

Construa landing pages que convertem E cativam. Este skill combina uma estrutura focada em conversão com um design visual distinto 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 a cada vez.

O objetivo: Duas landing pages não devem parecer iguais, mesmo para produtos semelhantes.

---

O Processo de Descoberta de Vibes

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

Etapa 1: Coletar Contexto (Pergunte Isso)

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

Não "qual setor" - uma coisa específica de verdade. Uma loja de conveniência em Tóquio às 2h 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: "embalagens médicas + gráficos de skate", "planilhas + arte de rua", "hotel de luxo + fanzine 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 Olhe - Crie)

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

INVENÇÃO DE COR (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 aquela referência
• Invente códigos hexadecimais específicos do zero - não reutilize códigos de projetos anteriores
• Dê um nome evocativo à sua paleta (não "azul e laranja", mas "Mercearia da Meia-Noite" 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 destaque que incorpore a colisão da P3
• Não recorra às suas escolhas habituais - explore o 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 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 de assinatura que define esta página?

Etapa 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]
ANTI-PADRÕ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: [nítidas/arredondadas/orgânicas/mistas]
- Elemento de assinatura: [uma escolha de layout incomum]

MOVIMENTO:
- Nível: [parado/sutil/moderado/dinâmico/caótico]
- Animação de assinatura: [uma animação específica que define esta página]

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

Etapa 4: A Verificação de Frescor

Antes de prosseguir, verifique:

• Eu NÃO reutilizei códigos hexadecimais dos meus últimos 3 projetos
• Eu 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
• Eu incluí um curinga que até me surpreende

---

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 transporte + alta-costura"

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

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 transporte + 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 de luz fluorescente
- Destaque: #e60012 - vermelho da linha JR, comandando a atenção
- Nome da paleta: "Beira da Plataforma"

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

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

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

CURINGA:
- 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)

Espaços: Mercado noturno em Bangcoc | Museu vazio no fechamento | Sala de aeroporto às 4h | Loja de discos vintage | Sala de espera de hospital | Cassino | Estufa no inverno | Plataforma de metrô | Observatório | Fábrica abandonada | Interior de iate de luxo | Lavanderia 24 horas | Sala de livros raros da biblioteca | Oficina de funilaria | Módulo de estação espacial

Objetos: Sintetizador dos anos 1980 | Instrumentos cirúrgicos | Bagagem vintage | Motocicleta de corrida | Bússola antiga | Tear industrial | Letreiro de néon | Máquina de escrever | Vidraria científica | Livro encadernado em couro | Placa de circuito | Louça de porcelana

Eras/Movimentos: Construtivismo soviético | Design Memphis | Internacional suíço | Art nouveau | Bauhaus | De Stijl | Arquitetura Googie | Streamline moderne | Brutalismo | Metabolismo japonês | Modernismo escandinavo | Futurismo italiano

---

As Regras Anti-Convergência

1. Sem memória de código hex - Gere cores frescas a partir da referência, não se lembre de "meu azul usual"
2. Rotação de fonte obrigatória - Não pode usar a mesma fonte de destaque em projetos consecutivos
3. Colisão deve aparecer - Se alguém não consegue ver AMBAS as influências da P3, force mais
4. Curinga é obrigatório - Cada vibe precisa de um elemento que não "se encaixa", mas o torna único
5. Dê um nome - Uma vibe sem nome torna-se genérica. Uma vibe com nome 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:

1. "Qual é um lugar ou objeto que capta a energia desta marca?"
2. "Que emoção deve dominar?"
3. "Com o que isso NUNCA deve se parecer?"

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

---

A Regra dos 50%

Gaste 50% do seu tempo na seção hero. É a imagem de capa para redes sociais, a primeira impressão, o gancho. Todo o resto flui a partir de acertar o hero.

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

1. Seção Hero (Foco Principal)

O elemento decisivo. Deve conter:

• Título: Gancho nítido e baseado em benefícios (consulte a Galeria H1 para inspiração)
• Subtítulo: Contexto de suporte, 1-2 frases no máximo
• Botão(ões) de CTA: Ação primária + secundária opcional
• Prova Social: Marquee de logotipos, depoimentos ou selos de confiança
• Elemento Visual: Foto do produto, ilustração ou fundo animado

Variações de Hero:

• 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. Opções:

• Grade Bento: Cartões em layout assimétrico (popularizado pela Apple)
• Linhas Alternadas: Imagem + texto, alternando os lados
• Grade de Ícones: Ícones simples com descrições curtas
• Cartões Interativos: Estados de hover, microanimações

3. Seção de Prova Social

Construa confiança através de:

• Carrossel de logotipos (animação de marquee)
• Cartões de depoimento com fotos
• Estatísticas/métricas com contadores animados
• Trechos de estudo de caso

4. Seção Como Funciona

Explicação passo a passo:

• Etapas numeradas (padrão 01, 02, 03 adiciona sofisticação)
• Rolagem fixa com revelação progressiva
• Visualização de linha do tempo ou fluxograma

5. Seção de Preços (se aplicável)

• Comparação de 2-3 níveis
• Nível "recomendado" destacado
• Tabela de comparação de recursos
• Acordeão de FAQ abaixo

6. Seção de CTA

Impulso final de conversão:

• Repita a proposta de valor
• Título forte
• Ação única focada
• Elementos de urgência (se autênticos)

7. Rodapé

• Links de navegação
• Ícones sociais
• Links legais
• Inscrição opcional de newsletter

Princípios Anti-AI-Slop

Ícones: Evite Lucide (Excessivamente Usado)

Use em vez disso:

• Iconify Solar: Vários estilos (contorno, quebrado, duotone)
• Heroicons: Quando você precisa de simplicidade no estilo Apple
• Phosphor: Sistema de peso flexível
• SVGs Personalizados: Para diferenciação de marca

Fontes: Mate Inter/Roboto

Alternativas distintas:

• Destaque: Newsreader, Playfair Display, Space Grotesk, Clash Display
• Corpo: Outfit, Plus Jakarta Sans, Manrope, Satoshi
• Mono: JetBrains Mono, IBM Plex Mono, Fira Code

Cores: Sem Gradientes Roxos

Alternativas ousadas:

• Azul marinho profundo + destaque elétrico
• Neutros quentes + única cor de destaque
• Monocromático com profundidade tonal
• Modo escuro com destaques neon
• Paletas terrosas/orgânicas

Layouts: Quebre a Grade

• Elementos sobrepostos
• Seções diagonais
• Espaçamento assimétrico
• Elementos hero que quebram o contêiner
• Espaço negativo como elemento de design

Vocabulário de Animação

Animações de Entrada

• fade-in: Transição de opacidade simples
• blur-in: Começa desfocado, fica nítido
• slide-in: Entrada baseada em direção
• scale-in: Cresce de pequeno para tamanho total
• stagger: Revelação sequencial de elementos filhos

Animações Contínuas

• marquee: Rolagem horizontal infinita (logotipos, depoimentos)
• beam: Luz viajando ao longo de um caminho/limite
• pulse: Respiração sutil de escala/opacidade
• float: Movimento suave para cima/baixo
• rotate: Rotação contínua (ícones, decorações)

Animações Interativas

• hover-lift: Transladação Y sutil + sombra
• hover-glow: Mudança de cor de borda/sombra
• hover-reveal: Elemento oculto aparece
• click-ripple: Feedback no estilo Material

Elementos Decorativos

• Linhas de grade verticais (baseadas no tamanho do contêiner)
• Noodles/conectores curvos entre elementos
• Orbes/bolhas de gradiente no fundo
• Sobreposição de textura de grão/ruído
• Formas geométricas (círculos, retângulos com cantos arredondados)

Recursos de Design

Inspiração de Hero

• Superhero (superhero.design): Seções hero selecionadas
• Dribbble: Pesquise "seção hero", "landing page"
• Awwwards: Designs premiados

Padrões de Seção

• Mobin: Sites reais com detalhamento de seções
• Grade Bento: Inspiração de layout de cartões
• Galeria de CTA: Padrões de call-to-action

Tipografia

• Google Fonts: Fontes gratuitas e acessíveis por IA
• Fontshare: Fontes gratuitas de qualidade
• Galeria H1: Inspiração de títulos

Ícones e Logotipos

• Iconify: API de ícones unificados (Solar, Heroicons, etc.)
• Simple Icons: Logotipos de marca (SVG)
• Heroicons: Conjunto de ícones do Tailwind

Fluxo de Trabalho de Implementação

Fase 1: Pesquisa e Coleta

1. Reúna 5-10 capturas de tela de hero como wireframes
2. Identifique os padrões de seção necessários
3. Escolha o conjunto de ícones e a combinação de fontes
4. Defina a paleta de cores

Fase 2: Desenvolvimento do Hero

1. Gere o hero a partir da melhor captura de tela de referência
2. Itere: mude cores, fontes, layouts
3. Adicione animações (beam, fade-in, etc.)
4. Adicione elementos decorativos (noodles, grades, números)
5. Refine até que seja distintivo

Fase 3: Construção das Seções

1. Adicione seções uma de cada vez (não todas de uma vez)
2. Consulte componentes/capturas de tela específicos por seção
3. Mantenha a consistência de cor/fonte do hero
4. Adicione animações específicas da seção

Fase 4: Polimento

1. Corrija pontos de interrupção responsivos (celular, tablet, desktop)
2. Substitua imagens placeholder por ativos reais/de qualidade
3. Otimize animações para desempenho
4. Teste todos os elementos interativos

Fase 5: Apresentação

1. Crie uma captura de tela de capa com layout de tela infinita
2. Mostre o hero em destaque
3. Inclua visualizações para celular e desktop
4. Adicione um fundo sutil (gradiente desfocado, padrão)

Padrões de Prompt

Geração de Hero

Crie uma seção hero para [TIPO DE PRODUTO].
Altere texto, nomes e números para se adequar a [MARCA].
Use ícones Iconify Solar (estilo duotone).
Use [FONTE] para títulos.
Adicione linhas de grade verticais do tamanho do contêiner.
Adicione indicadores de etapa 01, 02, 03 para sofisticação.
Use [COR] como primária, modo escuro.

Adição de Seção

Adapte uma nova seção [TIPO DE SEÇÃO].
Combine o esquema de cores e a tipografia do hero.
Use animação de marquee para logotipos.
Adicione animação de entrada fade-in blur-in.
Mantenha o hero exatamente como está.

Aprimoramento de Animação

Adicione animação de beam à borda do botão primário.
O beam deve ter 1px, viajando continuamente ao redor da forma de pílula.
Adicione um efeito sutil de hover-lift aos cartões de recursos.

Prompts Negativos (O que NÃO mudar)

Não mude a seção hero.
Mantenha a barra de navegação exatamente como está.
Não modifique as animações existentes.

Lista de Verificação de Qualidade

Distinção Visual

• Sem gradientes roxos genéricos
• Conjunto de ícones não padrão (não Lucide)
• Combinação de fontes distinta
• Pelo menos um elemento "memorável"
• Sistema de cores consistente via variáveis CSS

Qualidade Técnica

• Otimizado para desempenho (animações usam transform/opacity)
• Totalmente responsivo (celular, tablet, desktop)
• HTML semântico (seções, artigos, nav)
• Acessível (tags alt, contraste de cores, foco visível)
• Código limpo (componentização, variáveis CSS, sem código morto)

Integridade da Marca

• O curinga faz a página se sentir viva
• A colisão da P3 é evidente
• Nenhum traço de design genérico de IA permanece
• A página seria digna de estar em um site de portfólio

Notas Finais

Lembre-se: o objetivo não é apenas uma landing page que converta. É uma página que alguém lembrará. Que pareça intencional, não gerada. Que tenha uma alma, não apenas pixels.

Cada decisão deve passar por este filtro: Isso parece com algo que um ser humano faria, ou parece com o que uma máquina geraria?

Escolha o ser humano toda vez.