Instale o skill CLI belt: npx skills add belt-sh/cli
Design de Landing Page
Projete landing pages de alta conversão com visuais gerados por IA via CLI inference.sh.
Início Rápido
Requer o CLI inference.sh (belt). Instruções de instalação
belt login
belt app run falai/flux-dev-lora --input '{
"prompt": "pessoa profissional sorrindo enquanto usa um laptop mostrando um painel limpo, escritório moderno e iluminado, luz natural, atmosfera produtiva e acolhedora, fotografia de marketing de estilo de vida",
"width": 1248,
"height": 832
}'
belt app run tavily/search-assistant --input '{
"query": "melhores exemplos de landing page SaaS 2024 taxa de conversão"
}'
Fórmula Acima da Dobra
Tudo que é visível antes de rolar deve comunicar valor em 5 segundos.
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [Botão CTA] │
│ │
│ Manchete (6-12 palavras) │
│ ───────────────────────── │
│ Subtítulo (15-25 palavras) [Imagem Hero] │
│ mostrando o │
│ [Botão CTA Principal] RESULTADO, não │
│ "Iniciar Teste Grátis" o produto │
│ │
│ Prova social: "Confiado por mais de 10.000 equipes"│
│ [logo] [logo] [logo] [logo] [logo] │
└─────────────────────────────────────────────────┘
Os 5 Elementos
| Elemento | Regra | Exemplo |
|---|
| Manchete | 6-12 palavras, define o resultado | "Publique documentação em minutos, não em dias" |
| Subtítulo | 15-25 palavras, expande o como | "Documentação com IA que se escreve sozinha a partir do seu código. Sem necessidade de modelos." |
| Imagem hero | Mostra o RESULTADO, não o produto | Pessoa satisfeita olhando para resultados, não uma captura de tela da sua interface |
| CTA primário | Verbo de ação + valor | "Iniciar Teste Grátis" não "Enviar" ou "Saiba Mais" |
| Prova social | Logos, contagem ou microdepoimento | "Confiado por mais de 10.000 equipes em [logos]" |
Manchetes
Fórmulas que Convertem
| Fórmula | Exemplo |
|---|
| [Resultado] sem [dor] | "Documentação bonita sem habilidades de design" |
| [Resultado] em [prazo] | "Lance seu site em 5 minutos" |
| O [jeito melhor] para [tarefa comum] | "O jeito mais rápido de construir APIs" |
| Pare de [dor]. Comece [resultado]. | "Pare de adivinhar. Comece a saber." |
| [Número] [coisas] para [resultado] | "Uma ferramenta para gerenciar todos os seus dados" |
O Que Faz as Manchetes Fracassarem
❌ "Bem-vindo à Nossa Plataforma" (não diz nada sobre valor)
❌ "A Solução Mais Avançada do Mundo com IA" (palavras da moda, sem especificidade)
❌ "Ajudamos Negócios a Crescer" (vago, genérico)
❌ "Software Empresarial de Próxima Geração" (o que ele FAZ?)
✅ "Transforme feedback de clientes em funcionalidades de produto, automaticamente"
✅ "A planilha que pensa como um banco de dados"
✅ "Encontre e corrija bugs antes dos seus usuários"
Imagens Hero
Mostre o Resultado, Não o Produto
❌ Captura de tela do seu painel (chato, difícil de entender rapidamente)
❌ Fundo geométrico abstrato (não diz nada)
❌ Foto de arquivo de um aperto de mãos (clichê)
✅ Pessoa satisfeita olhando para resultados claros em sua tela
✅ Transformação antes/depois
✅ O resultado final do uso do seu produto
belt app run falai/flux-dev-lora --input '{
"prompt": "equipe profissional feliz comemorando ao redor de um laptop mostrando gráficos de crescimento positivo, escritório moderno e iluminado, luz natural do sol, momento autêntico e espontâneo, estilo de fotografia de marketing, tons quentes",
"width": 1248,
"height": 832
}'
belt app run bytedance/seedream-4-5 --input '{
"prompt": "laptop moderno e limpo sobre uma mesa minimalista mostrando um belo painel de análise, elementos de interface flutuantes emergindo da tela, fundo gradiente suave, estilo de marketing de produto, profissional",
"size": "2K"
}'
Botões CTA
Texto
| CTAs Boas | CTAs Ruins |
|---|
| "Iniciar Teste Grátis" | "Enviar" |
| "Comece Grátis" | "Clique Aqui" |
| "Veja em Ação" | "Saiba Mais" (baixo compromisso) |
| "Crie Seu Primeiro Relatório" | "Inscreva-se" (vago) |
| "Experimente Grátis por 14 Dias" | "Registrar" |
Fórmula: Verbo de ação + valor/resultado + (opcional: redução de risco)
Design
| Elemento | Regra |
|---|
| Cor | Alto contraste com o fundo — deve ser o elemento mais visível |
| Tamanho | Mínimo 44px de altura (alvo de toque), largo o suficiente para texto + espaçamento |
| Posição | Acima da dobra, repetido após cada seção importante |
| Espaço em branco | Espaçamento generoso ao redor do botão, não o amontoe |
| CTA secundário | Se necessário, use link de texto abaixo ("ou assista a uma demonstração") |
Ordem das Seções
A sequência comprovada para landing pages:
| Seção | Propósito | Elemento Chave |
|---|
| 1. Hero | Valor central, CTA primário | Manchete + imagem + CTA |
| 2. Prova Social | Construir confiança | Logos, números, selos |
| 3. Problema | Criar empatia | Ponto de dor que eles reconhecem |
| 4. Solução/Funcionalidades | Mostrar como você resolve | 3 funcionalidades principais com visuais |
| 5. Como Funciona | Reduzir complexidade | 3 passos: cadastre, configure, beneficie-se |
| 6. Depoimentos | Provar que funciona | 2-3 citações específicas de clientes |
| 7. Preços | Permitir decisão | Níveis claros, destaque o recomendado |
| 8. FAQ | Lidar com objeções | 5-7 perguntas comuns |
| 9. CTA Final | Capturar remanescentes | Repetir CTA primário com urgência |
Tipos de Prova Social
| Tipo | Impacto | Posicionamento |
|---|
| Logos de empresas | Mais rápido de processar, alta confiança | Abaixo do hero |
| Contagem de usuários | Sinal de escala | Hero ou barra de prova social |
| Classificação por estrelas | Qualidade do produto | Próximo ao CTA |
| Depoimentos | Credibilidade detalhada | Seção dedicada |
| Estatísticas de estudos de caso | Prova específica | Seções de funcionalidades |
| Selos de confiança | Segurança/conformidade | Próximo a formulários, preços, rodapé |
belt app run exa/answer --input '{
"question": "Qual é a taxa de conversão média para landing pages SaaS com prova social vs sem?"
}'
Design de Formulários
| Regra | Impacto |
|---|
| Cada campo reduz a conversão em ~11% | Minimize campos |
| Nome + Email = máximo para cadastros | Não peça telefone, empresa, cargo |
| Layout de coluna única | Não use formulários de várias colunas |
| Validação inline | Mostre erros imediatamente, não no envio |
| Mensagens de erro claras | "Email é obrigatório" não "Erro no campo 3" |
| Texto do botão de envio = ação | "Criar Conta" não "Enviar" |
Otimização Mobile
| Regra | Por Quê |
|---|
| Botão CTA com largura total | Fácil de tocar com os polegares |
| CTA fixo ao rolar | Sempre acessível |
| Sem rolagem horizontal | Quebra o layout mobile |
| Fonte mínima de 16px | iOS aumenta zoom em inputs abaixo de 16px |
| Alvos de toque mínimos 48x48px | Apple HIG, Google Material |
| Imagens responsivas | Não transbordam a viewport |
| Priorize manchete + CTA | Simplifique o que está acima da dobra |
Imagem OG para Compartilhamento
belt app run falai/flux-dev-lora --input '{
"prompt": "cartão de compartilhamento social profissional e limpo, nome do produto e slogan em fundo gradiente moderno, design minimalista, estética corporativa de tecnologia, proporção 1200x630 equivalente",
"width": 1200,
"height": 630
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:white\"><div style=\"text-align:center\"><h1 style=\"font-size:48px;margin:0\">DataFlow</h1><p style=\"font-size:24px;opacity:0.9\">Publique documentação em minutos, não em dias</p></div></div>"
}'
Velocidade da Página
| Regra | Alvo | Por Quê |
|---|
| Imagem hero | < 200 KB | Primeiro a carregar |
| Peso total da página | < 2 MB | Dados móveis, paciência |
| Carregamento preguiçoso abaixo da dobra | Sempre | Carregue apenas o visível |
| Minimize JavaScript | < 200 KB | Bloqueia renderização |
| LCP (Largest Contentful Paint) | < 2.5s | Google Core Web Vitals |
Erros Comuns
| Erro | Problema | Correção |
|---|
| Sem manchete clara | Visitante não sabe o que você faz | 6-12 palavras, focado no resultado |
| CTA diz "Saiba Mais" | Compromisso muito baixo | Verbo de ação + valor específico |
| Hero é uma captura de tela do produto | Difícil de entender, chato | Mostre o resultado, use imagens de estilo de vida |
| Vários CTAs concorrentes | Paralisia de decisão | Um CTA primário, no máximo um secundário |
| Sem prova social | Nenhum sinal de confiança | Adicione logos, contagens ou depoimentos |
| Muitos campos no formulário | Conversão cai ~11% por campo | Nome + email no máximo |
| Design apenas para desktop | 60%+ do tráfego é mobile | Projete mobile-first |
| Sem urgência no CTA final | Visitantes saem e esquecem | "Inicie seu teste grátis de 14 dias" |
Skills Relacionados
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@web-search
npx skills add inference-sh/skills@prompt-engineering
Navegue por todos os apps: belt app list