⏱️ A cronometragem real: 5 minutos de ponta-a-ponta
🚀 Passo 1 (30s): Preparar 3 inputs
Antes de abrir a ferramenta, prepare três coisas rápidas:
"App X para audiência Y. Objetivo: conversão de email. Offer: [valor]."
Site de competidor ou marca cujo feeling você admira. Não precisa ser perfeito.
2-3 hex codes ou um logo. Se não tiver, descreva o feeling.
💭 Passo 2 (45s): O primeiro prompt
Abra claude.ai/design. Cole o template abaixo (personalize os [colchetes]):
📋 Template pronto
Crie uma landing page para [produto] que resolve [dor]
para [audiência específica].
Objetivo principal: captura de email.
Feeling: [late-night cinematic | editorial minimalism |
warm editorial | outro]. Inspiração visual em [URL anexa].
Estrutura: hero com headline <8 palavras, 3 benefícios
com ícones, 1 social proof (quotes), FAQ curta, CTA duplo.
Restrições: sem lorem ipsum, sem orbes flutuantes,
sem gradientes blob, sem emojis no corpo.
Ask me questions before generating.⚡ Por que esse template funciona
- •"Ask me questions" no fim ativa o questions_v2 explicitamente — você GANHA as 10 perguntas
- •Restrições desativam o viés newspaper-minimalist default
- •Feeling nomeado ancora a estética — sem isso, Claude improvisa
❓ Passo 3 (90s): Responder as 10 perguntas
Claude vai fazer 10+ perguntas. É tentador pular — não pule. Aí mora o ROI.
Exemplo real de perguntas que aparecem
- Qual design system/UI kit existente vou usar como base?
- Quantas variações você quer do layout geral?
- Quantas variações do hero especificamente?
- Interessa UX inovador, ou componentes/estilos familiares?
- Quão importante é o fluxo vs. o texto vs. o visual?
- Que Tweaks você quer expostos no canvas?
- Audiência é mais técnica, executiva, ou geral?
- Tem restrições de tamanho (viewport, mobile-first)?
- Deve incluir dark mode?
- Handoff final é para qual destino (Canva, Claude Code, PDF)?
Respostas curtas (2-5 palavras) são ideais — não escreva ensaios.
⚡ Passo 4 (60-120s): Primeira geração
Claude vai: (1) planejar estrutura, (2) explorar recursos (web capture da sua URL, ler arquivos anexos), (3) montar componentes React/HTML, (4) renderizar no canvas.
Você vê Claude planejando (mensagens de "vou agora explorar...", "encontrei uma paleta...")
Canvas atualiza progressivamente — hero aparece, depois seções, depois detalhes
Mensagem final: "Pronto. Role pelo design. Posso iterar quando quiser." (Verificador silencioso já rodou em background.)
🎛️ Passo 5 (45s): Ajustar via Tweaks
Abra o painel Tweaks (toolbar, ícone 🎛️). Você vai ver os controles que Claude escolheu — tipicamente: cor principal, tamanho de fonte, densidade, tema dark/light.
Use Tweaks para…
- Cor principal + tons derivados
- Fonte (headline e body)
- Densidade (spacing global)
- Tema dark/light
- Variantes A/B prontas
Se o Tweak que você quer não existe…
Peça no chat: "adicione um Tweak para [controlar X]". Claude implementa e ele fica persistente.
Ex: "adicione um Tweak para alternar entre 2 layouts de hero (A: text-left, B: text-center)".
📤 Passo 6 (20s): Exportar
Decisão rápida baseada no que você vai fazer a seguir:
🎯 Decisão de export (landing page)
✅ Resumo do Módulo
Próximo Módulo:
1.5 — 🔄 O ciclo: gerar → refinar → exportar