LeadMagic/gtm-skills

Construtor de Landing Pages v0

Visão Geral

v0 da Vercel é a forma mais rápida de criar uma landing page com qualidade de produção. Você descreve a página em linguagem natural. v0 gera código React/Next.js/Tailwind. Você itera de forma conversacional. Você exporta e implanta. O que costumava levar 1-2 semanas com um designer + desenvolvedor agora leva de 2 a 4 horas para um fundador ou profissional de marketing. Esta skill é um manual passo a passo para construir todos os tipos de landing pages de GTM com v0.

Fundamentos Autorizados

• v0 da Vercel — Plataforma de UI generativa (Guillermo Rauch)
• shadcn/ui — Biblioteca de componentes que alimenta o v0
• Tailwind CSS — Framework CSS utilitário
• Next.js — Framework React para produção

Quando Usar

Frases de gatilho: "criar uma landing page com v0", "tutorial v0", "prompt para landing page v0", "v0 da Vercel para marketing", "construtor de landing page com IA", "gerar landing page com v0", "página de preços v0", "lista de espera v0"

Conceitos Básicos do v0

O que é: v0.dev — Plataforma de UI generativa da Vercel. Você digita. Ela gera componentes React usando shadcn/ui + Tailwind CSS. Você pode:

• Gerar páginas completas a partir de um único prompt
• Iterar em seções específicas ("mude o título do hero")
• Gerar componentes individuais ("um card de depoimento com avatar")
• Exportar código para seu projeto Next.js
• Implantar diretamente na Vercel

Preços: Plano gratuito (200 gerações/mês). Pro ($20/mês) para uso ilimitado.

Processo Passo a Passo

Fase 1: Preparação (Antes de Abrir o v0)

Defina 5 coisas antes do seu primeiro prompt:

1. O tipo de página: Landing page, página de preços, página de lista de espera, página de evento, anúncio de funcionalidade ou microssite?
2. O público: Quem são eles? O que é importante para eles?
3. A ação: O que UMA coisa você quer que eles façam? (Iniciar teste, agendar demonstração, entrar na lista de espera, comprar agora)
4. A marca: Cores (primária/secundária/neutras), fonte (Inter é segura), tom (profissional, lúdico, técnico, premium)
5. A referência: Com qual site existente este deve se parecer? "Limpo como Stripe" ou "Técnico como Vercel" ou "Ousado como Linear"

Documento de contexto da marca (cole no seu primeiro prompt do v0):

CONTEXTO DA MARCA:
- Empresa: [nome]
- Produto: [resumo em uma linha]
- Cor primária: #0066FF
- Secundária: #FF6600
- Fonte: Inter
- Tom: Direto, baseado em dados, confiante
- Referência: Stripe (limpo, minimalista) + Linear (escuro, técnico)
- NÃO: gradientes, emojis, fotos de banco de imagens, clichês genéricos de SaaS

Fase 2: Gerar a Página (Engenharia de Prompt)

O modelo de prompt principal:

Crie uma [tipo de página] para [empresa/produto].

Público: [ICP]. Eles se importam com [top 3 preocupações].

SEÇÕES (em ordem):
1. Nav: [logotipo da empresa à esquerda, links no centro, CTA à direita — "Iniciar teste grátis"]
2. Hero: Título [focado em benefício, menos de 10 palavras]. Subtítulo [uma frase expandindo]. CTA primário ["Iniciar teste grátis"]. CTA secundário ["Veja como funciona"]. Placeholder de imagem/vídeo do hero.
3. Prova social: 6 logotipos de clientes em uma linha. "Confiado por mais de 2.000 equipes"
4. Propostas de valor: 3 colunas. Cada: ícone, título, uma frase. Foco em RESULTADOS, não em funcionalidades.
5. Como funciona: 3 etapas. Cada: número da etapa, título, uma frase. Visual: placeholder de screenshot/GIF.
6. Funcionalidades: Grade de 2 colunas. 6 funcionalidades. Cada: nome da funcionalidade + uma frase.
7. Depoimentos: 3 cards de citação. Cada: citação (1-2 frases), nome, cargo, empresa, placeholder de foto.
8. Preços (se for página de preços): 3 planos. Alternador mensal/anual. Plano recomendado destacado. Cada plano: preço, descrição, 5 funcionalidades, CTA.
9. FAQ: 6 perguntas com respostas expansíveis. Cobrir preços, configuração, segurança, suporte, cancelamento, comparação.
10. CTA final: Mesmo CTA do hero. "Iniciar teste grátis." Sem necessidade de cartão de crédito.
11. Rodapé: Logotipo, links, direitos autorais, ícones sociais.

ESTILO:
- Tema escuro (ou claro — escolha um)
- Paleta de cores: primária #0066FF, secundária #FF6600, fundo #0A0A0A, texto #FFFFFF, suave #9CA3AF
- Tipografia: Inter, títulos em negrito, corpo regular
- Espaçamento: generoso. 80-120px entre seções
- Cards: bordas sutis, raio 8px, efeito de elevação ao passar o mouse
- Botões: primário (preenchido, texto branco), secundário (contornado, cor primária)
- Largura máxima: 1200px, centralizado

TÉCNICO:
- Responsivo para mobile: empilhar seções verticalmente no mobile
- Alvos de toque: 44px+ no mobile
- Animações: fade-in sutil ao rolar (Intersection Observer)
- Sem animações pesadas. Respeitar prefers-reduced-motion.

Por que este prompt funciona:

• Ele especifica cada seção em ordem (v0 constrói de cima para baixo)
• Ele inclui estilo visual (cores, tipografia, espaçamento)
• Ele inclui requisitos técnicos (responsivo, acessível)
• Ele dá exemplos concretos ("Iniciar teste grátis" não "CTA aqui")

Fase 3: Iterar Seção por Seção

Não corrija tudo em um prompt. Itere seção por seção:

SEQUÊNCIA DE ITERAÇÃO (15-30 minutos):

1. "O título do hero é muito genérico. Torne-o específico: '[Empresa] ajuda [ICP] a fazer [coisa] em [período]'"
2. "As propostas de valor estão focadas em funcionalidades. Reescreva-as como resultados: 'Lance campanhas em 2 horas, não em 2 semanas' em vez de 'Construtor de campanhas com IA'"
3. "Os depoimentos são muito longos. Cada citação deve ter no máximo 1-2 frases"
4. "Adicione uma tabela de comparação acima do FAQ. 5 linhas: [funcionalidade], Nós, Concorrente A, Concorrente B. Marcas de verificação para nós. Onde os concorrentes não têm, use '—'"
5. "Os cards de preços precisam de estados de hover. Adicione um scale(1.02) sutil + sombra ao passar o mouse para o plano recomendado"
6. "Substitua o placeholder da imagem do hero por um componente de screenshot. Fundo escuro, cantos arredondados, borda sutil"
7. "Os botões CTA parecem pequenos. Aumente para 16px de padding, 16px de fonte"
8. "No mobile, o nav deve recolher em um menu hambúrguer. Mostre-me a versão mobile"
9. "Adicione uma barra CTA fixa que aparece após rolar além do hero. Botão 'Iniciar teste grátis', fundo branco, sombra sutil"
10. "Torne toda a página responsiva. Teste em 375px, 768px, 1024px, 1440px"

Fase 4: Gerar Componentes Individuais

Quando a página completa está boa, mas uma seção precisa de mais trabalho:

"Gere apenas a seção de depoimentos. 3 cards em uma linha. Cada card:
- Fundo: ligeiramente mais claro que o fundo da página
- Borda: 1px, sutil
- Padding: 32px
- Citação no topo: grande, itálico
- Autor abaixo: avatar (círculo, 48px) + nome + cargo + logotipo da empresa
- Hover: acento de borda sutil, sem elevação"

v0 irá regenerar apenas aquele componente. Substitua a seção existente pela versão melhorada.

Fase 5: Polir para Produção

Antes de implantar, itere em:

1. Texto: Substitua todo o lorem ipsum por texto real. "v0 gerará texto placeholder — você DEVE substituí-lo." Escreva títulos reais, propostas de valor reais, depoimentos reais.

2. Imagens: Substitua placeholders por imagens reais:

   • Hero: screenshot do produto (Cmd+Shift+4, envie para o v0)
   • Logotipos de clientes: logotipos reais de clientes (envie)
   • Fotos de depoimentos: fotos reais de clientes

3. Links: Conecte todos os botões e links:

   • "Iniciar teste grátis" → URL de cadastro
   • "Agendar demonstração" → link do Calendly
   • "Ver preços" → âncora da seção de preços
   • Links do rodapé → páginas reais

4. Formulários: Se sua página tiver um formulário (lista de espera, contato, solicitação de demonstração):

   • Conecte a um backend de formulário (ConvertKit, HubSpot, Google Forms ou API)
   • Adicione validação (formato de email, campos obrigatórios)
   • Adicione mensagem de sucesso ("Obrigado! Entraremos em contato.")
   • Adicione tratamento de erros

5. Analytics: Adicione antes de implantar:

   <!-- Adicione ao head -->
   <script defer data-domain="seudominio.com" src="https://plausible.io/js/script.js"></script>
   

   Ou Google Analytics, PostHog, etc.

Fase 6: Exportar e Implantar

Opção A: Implantar diretamente do v0 (mais rápido)

1. Clique em "Deploy" no v0
2. Conecte sua conta Vercel
3. Adicione um domínio personalizado nas configurações da Vercel
4. Pronto — no ar em menos de 5 minutos

Opção B: Exportar para projeto Next.js (mais controle)

1. npx shadcn@latest add [component-url] — adiciona o componente v0 ao seu projeto Next.js existente
2. Ou: Copie o código manualmente do v0 → cole no seu projeto
3. git push → Vercel faz implantação automática no push

Opção C: Exportar como HTML estático (mais simples)

1. Copie o HTML/CSS gerado
2. Cole em um novo arquivo
3. Implante em qualquer host estático (Netlify, Cloudflare Pages, GitHub Pages)

Fase 7: Iteração Pós-Lançamento

Após o lançamento, itere com base nos dados:

PROMPTS ORIENTADOS POR ANALYTICS:

1. "O CTA do hero tem uma taxa de clique de 2,1%. Gere 3 variações do hero com diferentes títulos e CTAs para teste A/B"
2. "A taxa de rejeição no mobile é de 68%. Audite a versão mobile e corrija quaisquer problemas de layout. Empilhe todas as seções verticalmente. Garanta alvos de toque de 44px+"
3. "A página de preços tem uma taxa de conversão de 1,2%. Gere 3 variações da página de preços: uma com padrão anual, uma com padrão mensal, uma com um selo 'Mais Popular' no plano intermediário"
4. "O tempo de carregamento da página é de 4,2 segundos. Otimize: carregamento lento de imagens abaixo da dobra, remova CSS não utilizado, adie scripts não críticos"

Prompts v0 para Tipos Específicos de Página

Landing Page de SaaS

"Crie uma landing page de SaaS para [produto]. Tema escuro. Seções: hero, prova social (logotipos), 3 propostas de valor (resultados), como funciona (3 etapas), depoimentos (3), preços (3 planos, padrão anual, Growth recomendado), FAQ (6), CTA final, rodapé. Estilo: limpo como Stripe, escuro como Linear. Primária: #0066FF. Fonte: Inter."

Página de Preços

"Crie uma página de preços para [produto]. 3 planos: Starter $49/mês, Growth $199/mês (RECOMENDADO), Enterprise (Fale conosco). Alternador mensal/anual, padrão anual. Tabela de comparação de funcionalidades abaixo dos planos. Seção de FAQ com 8 perguntas. Enterprise inclui um CTA 'Agende uma chamada' em vez de preço."

Página de Lista de Espera

"Crie uma página de lista de espera para [produto] lançando em [mês]. Hero: nome do produto, proposta de valor em uma linha, campo de email + botão 'Entrar na lista de espera'. Abaixo: 3 coisas que você receberá (acesso antecipado, preço de lançamento, suporte prioritário). Prova social: 'Mais de 2.000 na lista de espera.' Contador mostrando o número de inscrições."

Página de Evento/Webinar

"Crie uma página de registro para [nome do evento] em [data]. Hero: nome do evento, data/hora, descrição em uma linha. Abaixo: 3 motivos para participar. Seção de palestrantes com fotos, nomes, cargos, títulos das palestras. Agenda/cronograma. Formulário de registro: nome, email, empresa. CTA 'Garantir minha vaga'."

Formato de Saída

CONSTRUÇÃO DE LANDING PAGE V0 — [Nome da Página]

URL do Projeto v0: [link v0.dev]
URL Implantada: [URL de produção]

Prompt Utilizado:
[Texto do prompt principal]

Registro de Iteração:
1. Gerado v1 — [o que funcionou, o que precisou de mudança]
2. ["Alterar hero"] — [resultado]
3. ["Adicionar seção de depoimentos"] — [resultado]
...

Método de Exportação: [Implantação direta / shadcn add / cópia manual]

Pós-Lançamento:
- Analytics: [Plausible / GA / PostHog conectado]
- Taxa de conversão: X% (meta: Y%)
- Próxima iteração: [data / gatilho]

Checklist de Implementação

• Texto real — sem lorem ipsum, sem texto placeholder gerado por IA
• Imagens reais — screenshots do produto, logotipos de clientes, fotos reais
• Todos os CTAs linkados para URLs reais (não "#")
• Formulários conectados ao backend (ConvertKit, HubSpot, API)
• Responsivo para mobile (testado no iPhone SE + iPhone Pro Max + iPad)
• Carregamento da página em menos de 3 segundos (Lighthouse score 90+)
• Analytics instalado e verificado (verifique o dashboard em tempo real)
• SEO: tag de título, meta descrição, H1, texto alternativo em todas as imagens
• Legal: link da política de privacidade, link dos termos no rodapé
• Sem "porcaria" de IA — sem ilustrações SVG genéricas, sem lorem ipsum

Verificação de Qualidade

Antes de entregar, verifique:

• A saída corresponde à solicitação declarada do usuário
• Frameworks ou fontes nomeados estão refletidos na recomendação
• A entrega é específica o suficiente para um agente executar
• Quaisquer suposições, riscos ou dependências são explícitas
• Nenhuma afirmação sem suporte, fato inventado ou referência privada/interna foi incluída

Armadilhas Comuns

1. Prompt de uma só vez. "Criar um site SaaS" em um prompt = saída genérica, sem marca, mediana. Correção: Construa seção por seção. Hero primeiro. Itere. Depois preços. Itere.

2. Saída genérica sem contexto de marca. Sem cores, fontes e referências da marca, o v0 gera Tailwind genérico. Correção: Cole seu contexto de marca no primeiro prompt. Faça referência a um site conhecido para o estilo.

3. Conteúdo placeholder enviado para produção. v0 gera "Lorem ipsum" e imagens placeholder. Enviar isso ao vivo = amador. Correção: Substitua TODO o conteúdo placeholder antes de implantar.

4. Não iterar no mobile. v0 gera desktop-first por padrão. O layout mobile frequentemente quebra. Correção: "Mostre-me a versão mobile" como uma etapa de iteração dedicada.

5. Nenhuma conexão de formulário. Um botão "Iniciar teste grátis" que leva a "#" é uma promessa quebrada. Correção: Conecte formulários e CTAs antes de implantar.

6. Muitas seções. v0 gerará alegremente 15 seções se você pedir. Mais seções = mais carga cognitiva = menor conversão. Correção: Máximo de 6-8 seções. Corte tudo que não suporta diretamente o objetivo de conversão.

Referências de Especialistas

• Guillermo Rauch (@rauchg) — Criador do v0, CEO da Vercel. Siga para atualizações do v0, técnicas de prompt e filosofia de UI generativa.
• Documentação do v0: v0.dev/docs — guia de prompt, biblioteca de componentes, instruções de exportação/implantação
• shadcn/ui: ui.shadcn.com — a biblioteca de componentes que o v0 gera. Aprenda-a para entender o que o v0 está construindo.

Artefatos de Execução

• references/framework-notes.md — Frameworks nomeados e tabelas de referência
• templates/output-template.md — Estrutura de entrega para saída do agente
• scripts/check-output.py — Validador leve de entrega

Skills Relacionadas

• vibe-coding — Comparação completa de ferramentas de desenvolvimento com IA (v0, Lovable, Bolt, Cursor)
• vibe-marketing — Conteúdo de marketing com IA em escala
• landing-pages — Auditorias de CRO, padrões de otimização de conversão
• design-system-gtm — Tokens de marca, variáveis CSS para saída consistente de IA
• popular-web-designs — 54 sistemas de design de marca como referência visual
• ui-ux-gtm — UX de landing page, design de formulário, acessibilidade