Landing Page
Esta skill cria landing pages que convertem — não apenas páginas bonitas. Ela combina uma ordem comprovada de seções com textos reais e código pronto para produção.
Analogia: uma landing page é um vendedor que nunca dorme. Um bom vendedor segue uma ordem — chamar a atenção, nomear a dor, mostrar a cura, provar que funciona, pedir a venda. A estrutura de seções abaixo é esse script.
Fluxo de Trabalho
Etapa 1 — Faça até 3 perguntas (nada mais)
- O que você está vendendo ou oferecendo? (produto, serviço, SaaS, consultoria)
- Quem é o cliente ideal? (o avatar — seja específico)
- Qual é a única ação principal que você quer que o visitante tome? (comprar, agendar uma chamada, inscrever-se, entrar na lista de espera)
Se a mensagem já responder a essas perguntas, pule adiante.
Etapa 2 — Monte a estrutura de seções (ordem psicológica comprovada)
- Hero — proposta de valor clara + CTA principal. O visitante deve entender o que é e por que importa em 5 segundos.
- Problema — agite a dor do cliente. Faça-o sentir o custo de não resolver o problema.
- Solução — como o produto/serviço resolve essa dor.
- Funcionalidades — 3 a 6 itens principais, escritos como benefícios, não especificações ("entregue em um fim de semana", não "construído com framework X").
- Prova social — depoimentos, logotipos, números, resultados.
- Preço — se aplicável; faixas claras, uma destacada.
- FAQ — mate as principais objeções antes que elas impeçam a venda.
- CTA Final — reafirme o valor e repita a ação principal.
Etapa 3 — Ative ui-design para o sistema visual
Passe para a skill ui-design gerar o sistema de design (estilo, paleta, tipografia, espaçamento, modo escuro) antes de escrever os componentes. Não invente escolhas visuais aqui.
Delegação: o sistema de design em si é obtido conforme a disponibilidade — se ui-ux-pro-max estiver instalado, deixe-o gerar o sistema (opcionalmente refinado por taste-skill); se nenhum estiver instalado, recorra aos princípios embutidos em ui-design. A landing page funciona de qualquer forma; os originais apenas a tornam mais afiada. Nunca bloqueie por uma dependência ausente.
Etapa 4 — Gere o texto, não apenas o código
Esta skill escreve o texto base para cada seção — título, subtítulo, corpo, rótulos do CTA — adaptado à oferta e ao avatar. Código sem texto é meia landing page.
Etapa 5 — Stack e complementos opcionais
Stack padrão: React + Vite + Tailwind. Antes de construir, pergunte se a página precisa de:
- Animações → Framer Motion
- Um formulário → React Hook Form
- Analytics → qual provedor (por exemplo, Plausible, GA, PostHog)
Adicione estes apenas se o usuário quiser; não inflacionar por padrão.
Etapa 6 — Saída
Entregue componentes prontos para uso, não protótipos — cada seção como um componente real, conectado aos tokens de design, com o texto gerado no lugar e estados vazio/carregamento/erro tratados onde relevante (por exemplo, o formulário).