🗺️ Mapa da interface
Layout esquemático: chat à esquerda, canvas central, painéis flutuantes, toolbar de 6 modos.
🖥️ Layout global: chat + canvas
A escolha de layout mais importante do produto: split-pane permanente. Chat nunca fica escondido atrás do design, design nunca fica escondido atrás do chat. Tudo é par programming entre você e o Claude.
💡 Por que split-pane importa
- •Feedback loop 10x mais rápido — você comenta e vê a mudança sem mudar de aba
- •Contexto sempre visível — não esquece "o que estava querendo" enquanto escreve
- •Referência cruzada — você aponta pro elemento enquanto fala no chat
📥 Painel de inputs
Botão "+" no chat abre o painel. É a porta para colocar o Claude dentro do seu mundo: briefings, imagens, sites, repositórios. Use e abuse — quanto mais contexto real, melhor o output.
DOCX, PPTX, XLSX, imagens (PNG/JPG), .fig do Figma, PDFs. Lidos via zip+XML extractor nativo.
Web capture nativo — Claude extrai estilo, paleta e estrutura. Ideal para apontar para competidor.
Cole URL github.com/owner/repo. Claude explora tree, importa arquivos seletivamente, extrai design system.
Outro projeto Claude Design seu — read-only. Para copiar deve importar assets explicitamente.
💡 Dica de ouro
O combo matador: (1) brief em texto + (2) URL do competidor + (3) repo ou Figma com sua marca. Claude gera um DESIGN.md derivado e aplica desde o primeiro render.
🎛️ Painel de Tweaks (Edit Mode)
Tweaks é o superpoder do Claude Design. Sliders e color pickers embutidos no próprio design — você altera e vê ao vivo, sem passar pelo chat e sem consumir tokens. O que você vê é o que é salvo.
🔬 Detalhe técnico
Os defaults de Tweaks são persistidos em um bloco JSON no próprio HTML do design:
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"primaryColor": "#D97757",
"fontSize": 16,
"dark": false
}/*EDITMODE-END*/;Quando você mexe no slider, o host parseia o JSON, mescla as mudanças e regrava. Persiste entre reloads.
💡 Dica
Mesmo sem você pedir, Claude adiciona alguns Tweaks por padrão — cor principal, fonte, densidade. Peça explicitamente os que fazem sentido pro SEU design: "exponha como Tweaks: headline text, contagem regressiva, tema dark/light, variante hero A/B".
💬 Modo Comments: feedback em batch
Marque vários elementos no canvas, escreva comentários por elemento, envie todos de uma vez com checkbox. Claude processa o lote como uma instrução coerente — mais barato em tokens, mais claro na direção.
🔧 Como Claude sabe em qual elemento você comentou
Cada elemento ganha um atributo transitório data-cc-id="cc-N" quando o modo Comments está ativo. Ao enviar, o host inclui um bloco <mentioned-element> com:
- •
react:— cadeia de componentes React (do mais externo ao mais interno) - •
dom:— ancestralidade DOM completa - •
id:— o identificador transitório do elemento
Resultado: Claude edita o código-fonte exato, não tenta adivinhar.
✏️ Modo Draw: esboço + narração
Às vezes texto não basta. No Draw Mode você rabisca diretamente sobre o canvas — marcando onde mover algo, como reorganizar, qual forma quer no lugar. Suporta narração por microfone — fala enquanto desenha.
✓ Use Draw quando…
- ✓Descrever arranjo espacial em texto fica verboso
- ✓Quer marcar "esse elemento vai AQUI"
- ✓Sketch de alternativa de layout
✗ Não use Draw para…
- ✗Cor exata (use Tweaks ou chat)
- ✗Mudanças de texto (use inline edit)
- ✗Pedidos gerais de "mais limpo"
📤 Exports e modo Present
Chegou a hora de sair da ferramenta. Cada formato de export tem um caso de uso ideal — escolher certo evita retrabalho.
🔀 Árvore de decisão: qual export escolher?
💡 Dica
Para handoff dev: use o export "Claude Code" em vez de baixar o HTML e colar no terminal. O export empacota componentes, assets copiados, CSS variables, e gera o comando de retomar — economiza 20–40 min de re-contextualização.
✅ Resumo do Módulo
Próximo Módulo:
1.3 — 📥 Inputs: texto, arquivo, URL, marca