🎯 Matriz: qual modo escolher
💬 Comments em batch
Marque N elementos, escreva N comentários, selecione tudo com checkbox, envie de uma vez. Claude interpreta o batch como instrução coerente — mais barato e mais claro que fluxo por fluxo.
Workflow ideal
- Entre no modo Comments (toolbar ✏️)
- Anote TODAS suas observações antes de enviar (não clique "enviar" após cada)
- Revise a lista (pode editar, reordenar, remover)
- Selecione todos com checkbox → Enviar lote
- Claude processa como uma unidade coerente
🏷️ mentioned-element blocks (por baixo do capô)
Cada comment dispara um bloco técnico que Claude recebe:
<mentioned-element>
react: HeroSection > Headline > Emphasis
dom: body > main > section[01-hero] > h1 > span[data-cc-id="cc-7"]
id: cc-7
</mentioned-element>Claude usa para localizar o código-fonte exato. Se dom: tiver data-screen-label, ele também sabe em qual slide/tela o comment foi feito.
💡 Dica prática
Rotular screens com data-screen-label="01 Hero", "02 Features" ajuda Claude a entender em que tela está o comentário. 1-indexed, sempre.
✏️ Inline text edit (duplo-clique)
Duplo-clique em qualquer texto → modo de edição. Você escreve, clica fora → salva direto no arquivo. Zero tokens consumidos. 10x mais rápido que chat.
Use para…
- •Headline fine-tuning — trocar "Revolucione X" por "A ferramenta para X"
- •CTA polish — "Começar agora" → "Criar conta grátis"
- •Bullets específicos — ajustar tom de voz pontualmente
- •Números e dados — trocar "10.000+ usuários" por "Mais de 12.000 empresas"
🖐️ Drag de elementos
Arrastar elementos dispara evento que Claude interpreta como "mover X para posição Y". Mais claro que descrever em texto.
✗ Descrever em texto
"Coloque o card de preços
à esquerda do botão CTA,
mas abaixo dos benefícios"Ambíguo. Claude pode interpretar "à esquerda" em relação a quê?
✓ Arrastar
Você segura o card e move para a posição exata. Claude recebe as coordenadas visuais. Zero ambiguidade.
🎨 Draw mode: esboço + narração
Rabisque sobre o canvas. Opcionalmente narre pelo microfone. Claude processa em fila — você pode desenhar 5 mudanças e ele aplica em ordem.
🎙️ Quando narração supera texto
- •Reorganização de flow (desenhe setas entre telas + narre o porquê)
- •Mudança estrutural complexa ("esses 3 cards viram um carousel")
- •Feedback de design que envolve movimento / animação
- •Quando você pensa mais rápido do que digita
🧠 Árvore de decisão: escolher o modo certo
Depois de 3-4 designs feitos, isso vira automático. Até lá, consulte:
| Você quer… | Use | Custo |
|---|---|---|
| Trocar cor/tamanho/densidade | Tweaks | zero |
| Trocar copy de um elemento | Inline edit | zero |
| Mudar estilo de elemento específico | Comment | baixo |
| Mover elemento para outra posição | Drag | baixo |
| Reorganização de flow/layout | Draw + narração | médio |
| Adicionar nova seção | Chat | alto |
| Mudar feeling geral | Chat + re-gerar | alto |
✅ Resumo do Módulo
Próximo Módulo:
2.5 — 🎛️ Tweaks: edições permanentes