aiskillstore/marketplace

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 US$ 50-100 e das quais você se orgulharia 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. Esta 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 Vibração

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

Etapa 1: Coletar Contexto (Pergunte Estas)

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

Não "qual indústria" - uma coisa específica e real. Uma loja de conveniência em Tóquio às 2h. A cozinha de uma avó. Um estacionamento brutalista. Um recife de coral. O cockpit 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 + arte de skate", "planilhas + arte de rua", "hotel de luxo + fanzine 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 criptomoedas", "Um aplicativo de bem-estar", "Algo feito por um banco", "Qualquer coisa com gradientes roxos"

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

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

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

• Quais cores existem no lugar/objeto 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 "Bodega da Meia-Noite" ou "Manhã 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 exibição 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?
• Qual 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 é UM movimento de assinatura que define esta página?

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

Antes de codificar, escreva isto 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]
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:
- Exibição: [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: [estático/sutil/moderado/dinâmico/caótico]
- Animação de assinatura: [uma animação específica que define isso]

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

Etapa 4: A Verificação de Originalidade

Antes de prosseguir, verifique:

• Eu NÃO reutilizei códigos hexadecimais 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 coisa)
• A colisão da P3 está realmente visível em minhas escolhas
• Alguém NÃO poderia confundir isso com minhas landing pages anteriores
• Eu incluí um coringa que até me surpreende

---

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, tecnologia de startup"

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
ANTIPADRÕES: Sem gradientes suaves, sem ilustrações lúdicas, sem formas arredondadas amigáveis

CORES:
- Primária: #1a1a1a - o preto das portas do trem
- Secundária: #f5f5f0 - concreto da plataforma, desgastado
- Fundo: #fafaf8 - branco de luz fluorescente
- Destaque: #e60012 - vermelho da linha JR, chamando atenção
- Nome da paleta: "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: Nítidas com exceções arredondadas intencionais (como janelas de trem)
- Elemento de assinatura: Fortes faixas horizontais que dividem as seções como horários de trem

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

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

---

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

Espaços: Mercado noturno em Bangkok | 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ô | Domo de observatório | Fábrica abandonada | Interior de iate de luxo | Lavanderia 24 horas | Sala de livros raros de biblioteca | Loja 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 neon | 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 Anticonvergência

1. Nenhuma memória de código hex - Gere cores novas a partir da referência, não lembre "meu azul de sempre"
2. Rotação de fonte obrigatória - Não pode usar a mesma fonte de exibição em projetos consecutivos
3. A colisão deve aparecer - Se alguém não conseguir ver AMBAS as influências da P3, force mais
4. Coringa é obrigatório - Toda vibração precisa de um elemento que não "se encaixa", mas o torna único
5. Dê um nome - Uma vibração sem nome se torna genérica. Uma vibração com nome tem identidade.

---

Perguntas Rápidas de Contexto (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 captura a energia desta marca?"
2. "Qual emoção deve dominar?"
3. "Com o que isso NUNCA deve se parecer?"

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

---

A Regra dos 50%

Gaste 50% do seu tempo na seção hero. É a imagem de capa para mídias 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 orientado a benefícios (consulte a Galeria H1 para inspiração)
• Subtítulo: Contexto de apoio, no máximo 1-2 frases
• 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" em destaque
• 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 em newsletter

Princípios Antidesign Genérico de IA

Ícones: Evite Lucide (Exageradamente Usado)

Use em vez disso:

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

Fontes: Mate Inter/Roboto

Alternativas distintas:

• Exibição: 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, nitidifica
• slide-in: Entrada baseada em direção
• scale-in: Cresce de pequeno para tamanho completo
• 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: Translação Y sutil + sombra
• hover-glow: Mudança de cor de limite/sombra
• hover-reveal: Elemento oculto aparece
• click-ripple: Feedback ao estilo Material

Elementos Decorativos

• Linhas de grade verticais (baseadas no tamanho do contêiner)
• Conectores curvos/noodles entre elementos
• Orbes/gradientes de 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 "hero section", "landing page"
• Awwwards: Designs premiados

Padrões de Seção

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

Tipografia

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

Ícones e Logotipos

• Iconify: API de ícones unificada (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é ficar distinto

Fase 3: Construção da Seção

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 (mobile, tablet, desktop)
2. Substitua imagens de espaço reservado por ativos reais/de qualidade
3. Otimize animações para desempenho
4. Teste todos os elementos interativos

Fase 5: Apresentação

1. Crie captura de tela de capa com layout de tela infinita
2. Mostre o hero com destaque
3. Inclua visualizações mobile e desktop
4. Adicione 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 do 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 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 beam ao limite do botão primário.
O beam deve ter 1px, viajando continuamente ao redor da forma de pílula.
Adicione um efeito hover-lift sutil aos cartões de recurso.

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

...