🎯 Por que design-first economiza
Fazer design antes do código elimina ~40% de retrabalho no Claude Code. Razão: o que seria "descoberta via código" (quantas seções, quais componentes, qual layout) já está resolvido visualmente.
Matemática
- • Claude Code sem design: ~100% tokens · 40% retrabalho
- • Claude Design + Claude Code: ~30% tokens no design + ~60% no code = 90% total
- • Economia líquida: ~30% + entrega mais rápida + qualidade consistente
🗺️ Arquitetura emerge do visual
Desenhar componentes e fluxo no Claude Design antes de pedir implementação ao Claude Code. Componentes emergem naturalmente do design — você não precisa "pensar em Reactês".
💭 "Plan before generating" prompt
Um truque poderoso para projetos grandes:
"Before generating the HTML, PLAN the structure first:
- List all sections with purpose
- Identify reusable components
- Specify data requirements
- Note interactions/states needed
- Flag open questions
Output plan as markdown. I'll approve before you generate."Você valida plano textual antes de gastar tokens gerando HTML.
🚦 Validação com stakeholder antes
Design visual é MUITO mais fácil de aprovar que spec técnica. Stakeholder vê a landing renderizada e diz "sim" — você não precisa escrever documento de 15 páginas.
📐 Design = especificação
HTML final já é spec implementável. Zero ambiguidade. "Faça como este protótipo" é 100x mais claro que "implemente conforme este documento de 20 páginas".
⚡ Workflow ideal completo
- Brief (5 min): descrição em 1 parágrafo
- Claude Design (30-60 min): gera visual, você itera com stakeholders na mesma call
- Aprovação visual: stakeholder diz "sim"
- Export → Claude Code: bundle empacotado
- Claude Code (tempo variável): implementa no stack real com backend/integrações
- Auditoria: segurança, a11y, SEO, vitals
- Deploy: produção