🎨 Design system completo (não só logo)
Brand guidelines, repositório, exemplos reais, descrição de estilo. Por que "só colar logo" gera resultados fracos.
Arquivo markdown com cores (hex), fontes (stacks), spacing, radii, shadows, componentes, tom de voz.
É o "contrato" que faz Claude gerar consistente em qualquer projeto da marca.
Tokens · Stacks · Componentes · Tom · Versionamento.
Anexar as 3 fontes da marca: código real, design visual, regras escritas.
Cada uma traz info que a outra não traz. Claude cruza os 3 e gera DESIGN.md automático.
Código > screenshot · Três fontes complementares · Cross-validation automático.
3 níveis de cor com variantes (hover, active, muted). System prompt sugere OKLCH para harmonia quando marca é restritiva.
Paleta bem estruturada elimina 80% das frustrações de "cor esquisita".
Primária/secundária/neutra · OKLCH · Variantes · Light+dark.
Par de fontes (headline + body) + hierarquia (4xl/3xl/2xl/xl/base/sm/xs) + weights.
System prompt sinaliza Inter/Roboto como "overused" — pede pra fugir delas se quer design distintivo.
Pair · Hierarquia · Weights · Tracking · Fonts não-óbvias.
Spacing scale (4/8/12/16/24/32/48/64), radii (none/sm/md/lg/xl), shadow levels (1/2/3).
São o que diferencia "feito à mão por designer" de "gerado por AI". Consistência aqui é 30% do feeling.
Scale · Density · Consistency · Signature.
Guidelines de como sua marca fala: formal/casual, pessoal/neutra, directa/envolvente. Exemplos de "do/don't".
Sem isso, Claude inventa copy genérico AI — aquele "Revolucione seu workflow" hype.
Voice · Tone · Do/Don't · Sem hype AI.
📚 Context stacking: PDF + site + texto bruto
A técnica que transforma resultados medianos em premium. Quanto mais contexto → melhor o output.
Empilhar múltiplas fontes de contexto: briefing + referência + marca + PDF + screenshots.
Claude cruza as fontes e extrai padrão — mais rico que qualquer fonte isolada.
Multi-source · Cross-reference · Padrão emergente.
Anexar relatório, paper, e-book. Claude invoca skill read_pdf nativa.
PDF → deck é um dos cases mais fortes. Hierarquia conceitual preservada.
read_pdf skill · Extrair essência · Manter hierarquia.
URL que Claude captura — extrai paleta, tipografia, estrutura, densidade.
Web capture retorna TEXTO extraído, não HTML/layout. Para "design como este site", peça screenshot.
Web capture · Screenshot complementar · Referência estilística.
Transcrição de vídeo, entrevista, notas de reunião, research bruto.
Claude extrai insights e estrutura — você não precisa pré-processar.
Raw input · Unstructured > structured · Claude estrutura.
Claude usa tool snip para marcar fases resolvidas. Quando contexto aperta, executa e libera espaço.
Por isso você pode empilhar muito contexto — Claude gerencia.
Lazy snip · Silent · Só avisa se crítico.
DESIGN.md primeiro → referências → conteúdo bruto → prompt.
Ancora estética antes de receber conteúdo — evita interferência.
Sequência · DS âncora · Conteúdo depois.
💬 Deixando a IA perguntar (questions_v2)
Por que responder as 10+ perguntas iniciais MELHORA o design. Quando pular.
Tool que Claude invoca no início de trabalho ambíguo. Não retorna resposta imediata — encerra turno para usuário responder.
Entender o mecanismo te ajuda a responder no formato esperado.
Batch questions · Turn-ender · Multi-choice + free-text.
Ponto de partida (UI kit/codebase), quantas variações, aspecto/visual/motion, tweaks desejados, restrições.
Saber o catálogo te permite pré-responder no prompt e pular o questionário inteiro.
Catálogo · Pré-resposta · Bypass controlado.
Ajustes pequenos, follow-ups de design existente, ou quando você já forneceu tudo no prompt inicial.
Pular não é sempre ruim. Ruim é pular em projetos novos/ambíguos.
Follow-up · Pequeno ajuste · Contexto suficiente.
"Me faça só 3 perguntas essenciais antes de gerar" — user prompt tem prioridade sobre system prompt.
Controle cirúrgico: você escolhe quanto tempo investir na preparação.
User > system · Override número · Essenciais.
2-5 palavras por resposta. Se não sabe, "escolha você" é resposta válida — Claude toma decisão informada.
Respostas longas consomem tokens sem melhorar qualidade.
Concisão · "escolha você" · Zero ensaios.
Prompt que já cobre todas as 10 perguntas — Claude pula o questionário.
Skill design-designer (T5) faz exatamente isso — entrevista OFFLINE e entrega prompt pronto.
Front-load · Skill delegada · Zero perguntas na ferramenta.
✏️ Iteração no canvas: comentários, desenho, edit inline
Comentar, riscar, arrastar. O hack dos "mentioned-element" blocks para mudança cirúrgica.
Marcar N elementos, escrever N comentários, enviar tudo de uma vez via checkbox.
Claude processa batch como instrução coerente — mais barato e mais claro.
Batch > stream · Coerência · Token-efficient.
Bloco que acompanha comentário com react:, dom: e id: (data-cc-id).
Claude sabe editar o código-fonte exato, não adivinha.
React chain · DOM path · data-cc-id transitório.
Duplo-clique em qualquer texto do canvas → modo de edição direta, sem passar pelo chat.
10x mais rápido que chat para copy fine-tuning.
Double-click · Zero tokens · Copy polimento.
Arrastar elementos dispara evento que Claude interpreta como "mover X para posição Y".
Mais claro que descrever em texto "coloque o card à esquerda do botão".
Drag event · Visual spec · Menos ambiguidade.
Rabiscar + falar no microfone. Fila de processamento — você desenha 5 coisas, Claude aplica em ordem.
Para UX complex (reorganização de flow, reestruturação), supera muito o chat.
Audio narration · Queue · Complex spec.
Quantitativo→Tweaks. Copy→inline. Elemento pontual→comment. Reestruturação→draw. Stack→chat.
Escolher o modo certo reduz iterações em ~60%.
Tool fit · Velocidade · Reduce iterations.
🎛️ Tweaks: edições permanentes, não prévias
Como Tweaks realmente funcionam (gravam no disco). Como pedir Tweaks customizados.
Mudança via Tweak é escrita direto no arquivo HTML — o que você vê é o que é exportado.
Não é "preview reversível". É edição permanente. Entenda antes de testar 20 cores.
Persistente · Escrita em disco · Sem preview.
Bloco JSON entre comentários marcadores. Host parseia, mescla edits, regrava.
Entender permite pedir Tweaks customizados sem Claude quebrar o protocolo.
EDITMODE-BEGIN/END · JSON válido · Um bloco por HTML raiz.
__activate_edit_mode / __deactivate_edit_mode / __edit_mode_set_keys / __edit_mode_available.
Ordem importa: registrar listener ANTES de anunciar disponibilidade, senão o toggle falha.
Listener primeiro · Partial update · Merge chaves.
"Adicione Tweak para alternar entre 2 layouts de hero" — Claude implementa e persiste.
Tweaks default são genéricos. Customizados são onde mora produtividade real.
Custom controls · Variantes · Feature flags.
Claude projeta a UI dos Tweaks — flutuante no canto, inline, ou modal. Pequena e focada.
Tweak painel ruim = Tweak desusado. Peça painel discreto.
Flutuante · Pequena superfície · Title "Tweaks".
Quando Tweaks está desligado, o design deve parecer finalizado. Controles ocultos.
Export final não deve ter "resto de editor" visível.
display:none · Clean export · Toggle-aware UI.
🔀 Variações: pedir 5 em vez de 3
A "escada de variação" e como forçar mais opções. Axis (cor, layout, type, motion). "Start safe, progress novel".
Padrão do system prompt: safe (conventional) → balanced → novel (experimental). 3 opções.
Se você não pedir mais, NUNCA recebe mais.
Safe · Balanced · Novel · 3 é default.
"Me dê 5 variações" — simples assim. Claude obedece user prompt > system prompt.
N > 3 revela possibilidades que você não tinha considerado.
N explícito · User prompt priority · Range real.
Nomear os eixos: "2 de cor, 2 de tipografia, 2 de densidade". Variações ganham foco.
Sem axis, Claude varia coisas aleatórias — algumas relevantes, outras não.
Named axes · Targeted variation · No random.
V1 = by-the-book da marca. V6 = experimento arrojado. Ordem progressiva.
Facilita decisão — você vê a curva de ousadia, escolhe o ponto certo.
Progression · Decision curve · Safe anchor.
Starter component para 3+ variações lado a lado com label. "Apresentar opções estáticas".
Tomar decisão rápido quando você vê todas juntas.
design_canvas · Grid comparação · Labels · Screenshots.
Se o usuário quer variantes de 1 elemento, expose como Tweak para alternar (não multiplicar telas).
Para variantes de hero/CTA/footer, Tweak > 6 páginas diferentes.
Element variants · Tweak toggle · Uma página, N opções.
🧩 Múltiplos design systems
Marcas/projetos diferentes. Como organizar, selecionar no dropdown, compartilhar entre orgs.
Cada projeto Claude Design pode ter seu DESIGN.md. Dropdown seleciona qual usar.
Agência com 10 clientes precisa 10 DS. Não misture.
DS por projeto · Dropdown · Isolamento.
Compartilhar DS entre membros da org: view-only ou edit. Por projeto.
Evitar que estagiário altere DS da marca enterprise.
Granular access · Org-level · Per-project.
Outro projeto é read-only por default. Para USAR assets, precisa copiar via copy_files.
Caminho URL de outro projeto NÃO funciona — asset deve estar no projeto atual.
Read-only cross-project · copy_files explícito · Sem URL externa.
Empresas Max/Enterprise podem ter DS compartilhados entre todos membros.
Equipe toda com mesma fonte de verdade — consistência sem coordenação.
Org DS · Single source · Admin control.
Hack da comunidade: "Combine DS da Linear com feeling de A24". Produz estéticas únicas.
Família estética híbrida é onde mora originalidade em 2026.
Linear×A24 · Stripe×A24 · Warp×Sentry · Fusion.
Trate DESIGN.md como código: commits, branches, versões (v1, v2). Claude respeita qualquer versão.
Rebranding sem perder projetos antigos — use DS v1 para legados.
DS-as-code · Versioning · Legacy support.