Ferramenta

Windsurf

Nível

Iniciante

Tempo

40min

Visualizações

145

Como usar windsurf para frontend em landing-page

Criar landing page de alta conversão usando Windsurf para capturar leads

📝 Prompt

Crie uma landing page de alta conversão para [PRODUTO/SERVIÇO] usando as melhores práticas de UX/UI.

**Objetivos:**
- Produto: [PRODUTO]
- Público: [PÚBLICO]
- Ação desejada: [CTA_PRINCIPAL]
- Meta de conversão: [META]%

**Seções Obrigatórias:**

1. **Hero Section**
   - Headline impactante (benefício principal)
   - Subheadline explicativo
   - CTA principal visível e destacado
   - Imagem/vídeo relevante

2. **Proposta de Valor**
   - 3-5 benefícios principais
   - Icons ou ilustrações
   - Foco em resultados, não features

3. **Como Funciona** (3 passos simples)
4. **Social Proof** (depoimentos, logos, números)
5. **Pricing** (se aplicável, com valor âncora)
6. **FAQ** (objeções principais do público)
7. **CTA Final** + elemento de urgência

**Especificações Técnicas:**
- Framework: [FRAMEWORK]
- Design: Responsivo (mobile-first)
- Performance: < 3s loading
- SEO: Meta tags otimizadas
- Analytics: Google Analytics/GTM

**Entregáveis:**
1. HTML/CSS/JS completo
2. Imagens otimizadas
3. Copy persuasivo
4. Configuração de analytics
5. Formulário funcional

Foque em conversão, não em complexidade visual.

⚙️ Variáveis

[PRODUTO]

Produto ou serviço sendo promovido

[PúBLICO]

Público-alvo específico

[CTA_PRINCIPAL]

Ação que o visitante deve tomar

[META]

Taxa de conversão desejada

[FRAMEWORK]

Framework/tech stack preferido

💡 Exemplos

Curso Online de Marketing

Landing para capturar emails de interessados

Resultado: Landing com 32% de conversão e 450 leads/mês