⚙️ Mecanismo: como um Tweak vira mudança em disco
💾 Tweaks gravam no disco
Esse é o ponto central. Não existe "preview reversível". Cada slide, cada clique no color picker, cada dropdown — regrava o arquivo HTML. O que você vê é literalmente o que sai no export.
⚠️ Implicação prática
Se você "testar" 20 cores em sequência — cada uma foi gravada. Não há "undo para antes do teste". Use Tweaks com intenção, não como playground.
🧩 Protocolo EDITMODE-BEGIN/END
O mecanismo técnico: Claude envolve os defaults num JSON válido dentro de comentários marcadores. Host acha esse bloco via regex, parseia, aplica merge e regrava.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"primaryColor": "#D97757",
"fontSize": 16,
"dark": false,
"heroVariant": "A",
"density": "normal"
}/*EDITMODE-END*/;Regras não-negociáveis
- • JSON válido (aspas duplas nas chaves e strings)
- • Exatamente 1 bloco no HTML raiz
- • Deve estar dentro de
<script>inline - • Não pode ter comentários JS dentro do bloco (quebra JSON)
📡 postMessage protocol
Quatro mensagens coordenam o ciclo:
| Mensagem | Direção | Significado |
|---|---|---|
__edit_mode_available | mock → host | "Eu suporto Tweaks, mostra o toggle" |
__activate_edit_mode | host → mock | Usuário ligou Tweaks — renderize o painel |
__deactivate_edit_mode | host → mock | Usuário desligou — esconda o painel |
__edit_mode_set_keys | mock → host | Usuário mudou valor X — persista |
⚠️ Ordem importa
Registre o listener de __activate_edit_mode ANTES de mandar __edit_mode_available. Se inverter, host pode ativar antes de você estar pronto — toggle falha silenciosamente.
🎨 Tweaks customizados no chat
Os Tweaks default são genéricos (cor, fonte, densidade). Os customizados são onde mora produtividade real.
Prompts que funcionam
// Variantes de layout
"Adicione Tweak para alternar entre hero-left
e hero-center."
// Feature flag visual
"Crie Tweak para mostrar/esconder seção de FAQ."
// Numérico customizado
"Adicione Tweak de contagem regressiva em dias
(default 7, slider 1-30)."
// Texto editável persistente
"Expose headline como Tweak de texto —
o usuário digita e persiste."
// Toggle de tema além de dark/light
"Adicione Tweak de 3 temas: Editorial,
Terminal-core e Cinematic-dark."🔬 Design do painel Tweaks
Claude projeta a UI dos Tweaks. Regras do system prompt:
✓ Faça
- • Painel flutuante no canto inferior direito
- • Título "Tweaks" (bate com toggle da toolbar)
- • Pequena superfície — 3-6 controles max
- • Controles inline se espacialmente possível
✗ Evite
- • Painel enorme cobrindo metade da tela
- • Tweaks que podem quebrar o layout
- • 15+ controles num design simples
- • Labels longos — "primaryColor" > "Cor principal do CTA"
✅ Hide quando off: design finalizado
Quando o toggle de Tweaks está desligado, o design deve parecer finalizado. Esconda COMPLETAMENTE os controles — não deixe resquícios de "editor" visíveis.
💡 Por quê?
Stakeholders que viram seu export (PDF / HTML) não podem ver controles. Claude faz isso automaticamente se você pediu Tweaks no chat — mas sempre confirme no modo Present antes de exportar.
✅ Resumo do Módulo
Próximo Módulo:
2.6 — 🔀 Variações: pedir 5 em vez de 3