🗺️ Mapa: o que gerar e qual starter usar
🌐 Landing page — o use case mais forte
Single-page sites são onde Claude Design brilha. SaaS, evento, portfolio, curso, e-commerce — o caso Brilliant validou com 20 prompts → 2 prompts.
Estrutura modular canônica
- Hero com headline, subhead, CTA primário
- 3 benefícios (ícones ou grid)
- Social proof (quotes, logos, números)
- Breakdown da oferta / detalhes
- FAQ curta
- CTA final + footer
📊 Pitch decks — deck_stage.js
Para slides, Claude é obrigado pelo system prompt a usar o starter deck_stage.js. Cada slide vira um <section> filho direto do <deck-stage>.
O que o deck_stage.js faz por você
- •Escala automática — canvas 1920×1080 fit em qualquer viewport via
transform: scale() - •Navegação por teclado — setas e touch
- •Overlay de contagem — "03/12" no canto
- •postMessage para speaker notes — sincroniza com painel externo
- •Persistência de posição — reload volta ao slide atual (localStorage)
- •Print to PDF — uma página por slide
💡 Use case ouro: "transforme esse PDF em deck"
Anexe um PDF longo (relatório, paper, caso). Peça: "Extraia só as ideias principais. Simplifique. Cada slide comunica UMA ideia. Use deck_stage.js." Resultado: deck pronto em ~2 minutos, hierarquia preservada.
📱 Protótipos — device frames
Quatro starters de moldura: ios_frame.jsx, android_frame.jsx, macos_window.jsx, browser_window.jsx. Cada um inclui detalhes que deixam o protótipo "real": status bar, teclado, traffic lights, address bar.
Notch, status bar, home indicator, teclado virtual. Ideal para onboarding e checkout.
Material-like status + nav bar. Para apps Android specifically.
Traffic lights + title bar. Apps desktop ou SaaS com visual de "app nativo".
Address bar + botões de navegação. Ideal para landings vistas "no navegador real".
🎬 Animações — animations.jsx
Para motion design, o starter animations.jsx é a primeira tentativa. Dá <Stage> com auto-scale, scrubber, play/pause, e primitives de entrada/saída. Popmotion só se realmente não cobrir.
API essencial
<Stage>
<Sprite start={0} end={2000}>
<div style={{opacity: useSprite('fadeIn')}}>
Hello
</div>
</Sprite>
</Stage>
// hooks: useTime(), useSprite(name)
// helpers: Easing.easeOut, interpolate(v, from, to)⚠️ Atenção ao consumo de quota
Geração de animação é quota-heavy. Cada sessão que gera vídeo consome tokens agressivamente. No plano Pro, 2-3 sessões de animação intensa podem esgotar a cota semanal.
🎨 Marketing assets estáticos
Posts sociais, banners, headers de email, cards de produto. Export direto para Canva (mantém editabilidade) ou PNG via "save as image". Ideal para equipes pequenas sem designer dedicado.
⚡ Hack: batch via Tweaks
Gere 1 template (ex: card de produto). Peça Claude para expor Tweaks de "headline", "preço" e "imagem de produto". Agora você gera 20 variantes trocando só esses 3 valores — tudo consistente com a marca.
⚠️ Onde NÃO brilha: evitar frustração
Saber os limites faz parte do domínio. Claude Design tem trade-offs claros:
✗ Vá para outra ferramenta
- →Ilustrações custom pixel-perfect → Illustrator, Figma
- →Motion design profissional longo → After Effects
- →Figma libraries compartilhadas entre times → Figma
- →MVP funcional com backend → Lovable, v0
- →Edição colaborativa real-time → Figma
✓ Fique no Claude Design
- →Landing rápida ship-ready
- →Deck a partir de documento longo
- →Protótipo clicável pra user research
- →Batch de marketing assets consistentes
- →Design-first antes de Claude Code
✅ Resumo do Módulo
Próximo Módulo:
1.7 — ✅ Checklist do iniciante (10 erros comuns)