🎯 A skill /design-designer
Claude Design pergunta 10+ coisas antes de começar qualquer projeto. A skill /design-designer inverte esse fluxo: faz a entrevista no terminal e entrega um prompt único pronto para colar em claude.ai/design, com todas as respostas front-loaded.
📋 As 10 perguntas
- O que você está construindo? (landing, deck, site scroll-driven, protótipo app, etc.)
- Em uma frase, o que é e para quem?
- Qual feeling deve transmitir? (late-night, editorial, luxury, playful, clinical, handcrafted)
- Tem contexto existente para importar? (Figma, GitHub, screenshots)
- Cores e tipografia da marca?
- Quantas variações e em qual eixo?
- Seções, telas ou âncoras específicas?
- O que NÃO deve estar lá?
- Output e handoff (Claude Design only, Claude Code, Canva, PDF)?
- Que tweaks devem ficar expostos no canvas?
💡 Como invocar
No Claude Code, digite /design-designer seguido de uma descrição breve. A skill vai te perguntar uma coisa de cada vez e, no final, entrega um bloco de prompt copy-paste-ready.
🧠 O que Claude Design quer
O system prompt do Claude Design tem diretrizes explícitas sobre o que prioriza. Saber essas diretrizes molda briefings que geram resultados melhores na primeira tentativa.
📊 Citações do system prompt
- 🔹 "Good hi-fi designs do not start from scratch — they are rooted in existing design context."
- 🔹 "Mocking a full product from scratch is a last resort and will lead to poor design."
- 🔹 "Try to give 3+ variations across several dimensions."
- 🔹 "Try to use colors from brand / design system."
- 🔹 "Start your variations basic and get more advanced and creative as you go!"
✨ O que priorizar no briefing
- •Feeling + audience primeiro (não componentes)
- •Contexto existente (Figma/repo/prints)
- •Hex codes reais (não "azul bonito")
- •Número de variações explícito
- •Banimentos explícitos (sem lorem ipsum, etc.)
🖼️ Context imports
Claude Design vira quase sempre no mesmo lugar quando não tem referência: newspaper-minimalist default — fundos off-white, serif italic headlines, pull-quotes. Para escapar disso você precisa importar contexto visual real.
✓ Tipos de import aceitos
- ✓Arquivo Figma
- ✓Repositório GitHub
- ✓Screenshots de UI existente
- ✓Outro projeto Claude Design
✗ Sem import = resultado pior
Não passar contexto cai no default "newspaper minimalist":
- ✗Off-white background
- ✗Serif italic headlines
- ✗Pull-quote modules genéricos
💡 Plano B
Se não tem nada para importar, descreva verbalmente pelo menos: "minha marca é cosmonauta, dark, clinical terminal Bloomberg, mas humana". Uma frase densa com 2-3 referências culturais NÃO-MARCA funciona melhor que deixar em branco.
🚀 Gerando a primeira landing
Sempre peça 4 variações progredindo de "by-the-book" a "ousada". Uma variação só te trava na primeira ideia que o modelo tiver. Quatro dão comparação real.
🗺️ Fluxo de variação "safe-to-wild"
V1 — By-the-book
Exatamente o sistema de marca, layout convencional, zero risco.
V2 — Ajuste de layout
Mesmo sistema, layout não-trivial (grid assimétrico, type treatment ousado).
V3 — Novidade visual
Permite expandir a paleta ou motion. Motif visual novo aparece.
V4 — Wild
Quebra convenção. Pode ser editorial, cinematic, kinetic — o que sua marca NUNCA fez mas poderia.
🎛️ Usando Tweaks para iterar
Tweaks é o recurso do Claude Design que expõe dimensões como controles toggleáveis no canvas. Você escolheu variação 3? Ajuste accent color, headline text e motion intensity direto no canvas, sem re-prompt. E as mudanças persistem em disco.
🎚️ Tweaks que valem a pena expor
- •Accent color — 2-3 opções para comparar
- •Headline text — testar variantes de copy
- •Font pairing — serif+sans vs geometric+humanist
- •Motion intensity — subtle vs dramatic
- •Density — airy vs packed
💡 Escolha 3–5 tweaks
Tweaks demais viram caos. 3 a 5 dimensões é o sweet spot — as que realmente importam para sua decisão final.
🚫 Os 7 banimentos padrão
Claude Design tem biases fortes para certos clichês de "startup IA". Banir explicitamente no briefing é o que separa uma landing que parece um template genérico de uma que parece sua.
✗ A lista de banimentos
- ✗Nenhum lorem ipsum (SEMPRE bane)
- ✗Nenhum blob degradê flutuante
- ✗Nenhum ícone de circuito/cérebro IA
- ✗Nenhuma referência direta a concorrente
- ✗Nenhum section label "Our Portfolio/Features"
- ✗Nenhuma hero image se texto carrega
- ✗Nenhum trope de "AI startup"
✓ Como escrever no prompt
Inclua uma linha explícita:
Banned elements: no lorem ipsum,
no gradient blobs, no generic
AI-startup tropes, no competitor
refs, no "Our Features"-style
section labels. Every sentence
must read like a human wrote it.📋 Resumo do Módulo
Próximo Módulo:
1.3 - Construindo seu Sistema de Marca