Tweaks Skill · Painel de Variantes Parametrizadas

Envolva qualquer artefato HTML com um painel lateral de controles ao vivo que reescrevem propriedades CSS personalizadas em tempo real e persistem para localStorage. Inspirado no padrão de ajuste do huashu-design.

O que você produz

Um único arquivo HTML autônomo com duas camadas:

1. Palco — o artefato original (página de destino / apresentação / painel) reestruturado para que todas as decisões visuais sejam lidas a partir de propriedades CSS personalizadas: --accent, --scale, --density, --mode, --motion.
2. Painel — uma barra lateral fixa (ou gaveta em visualizações de tela pequenas) com controles de formulário vinculados a essas propriedades personalizadas através de uma pequena ponte vanilla-JS. Persiste cada alteração para localStorage, identificada pelo identificador do artefato.

O usuário pode:

• Abrir o artefato e ver o palco renderizado com suas preferências salvas (ou padrões sensatos).
• Ajustar cor de destaque / escala / densidade / modo / movimento no painel e observar o palco atualizar instantaneamente — sem re-renderização.
• Pressionar <kbd>T</kbd> para ocultar / mostrar o painel; <kbd>R</kbd> para resetar para os padrões.
• Atualizar a página — cada escolha é persistida.

Quando usar

• O usuário gerou algo que gostou em 80% e quer ajustar os últimos 20% por conta própria.
• Você está apresentando um sistema de design / marca e quer que o público sinta as variantes ao vivo (em vez de você reexecutar o agente).
• Você está enviando uma demonstração autônoma (por exemplo, um portfólio) e quer que os espectadores brinquem.

Quando não usar

• Artefatos de uso único que não serão iterados (por exemplo, um runbook — parâmetros não ajudam).
• Quando o valor do artefato está em proporções fixas (por exemplo, um infográfico com visualização de dados cuidadosamente balanceada — controles deslizantes o degradariam).

Os 5 controles padrão

Escolha um subconjunto que se adapte ao artefato. Não envie todos os 5 se apenas 2 importam — a desordem é uma regressão.

1. --accent — Cor de Destaque

Uma seleção com 5–8 amostras curadas (não envie um seletor de cores livre — o usuário escolherá uma cor ruim e culpará você).

const ACCENT_PRESETS = [
  { id: 'rust',    val: '#c96442', label: 'Rust' },
  { id: 'cobalt',  val: '#2c4d8e', label: 'Cobalt' },
  { id: 'sage',    val: '#4a7a3f', label: 'Sage' },
  { id: 'plum',    val: '#7a3f6a', label: 'Plum' },
  { id: 'graphite',val: '#3a3a3a', label: 'Graphite' },
];

O artefato usa var(--accent) em todos os lugares onde antes havia uma cor de destaque codificada. Borda / link / regra de citação / CTA mudam juntos.

2. --scale — Escala de Tipo (0.85 / 1.0 / 1.15)

Três configurações: Compacta (0.85), Normal (1.0), Generosa (1.15). Todas as declarações font-size multiplicam por var(--scale) via calc(... * var(--scale)).

Não vá além de ±15% — além disso, o layout quebra (fluxo de colunas, pontos de interrupção, contagem de linhas).

3. --density — Densidade do Layout (Apertado / Normal / Espaçoso)

Três configurações que trocam a escala de espaçamento: Apertado (0.75) / Normal (1.0) / Espaçoso (1.4). Todas as declarações padding / gap / margin multiplicam por var(--density).

Este é o controle de maior impacto — também é o mais frágil, então cada contêiner crítico para o layout deve declarar seu espaçamento base em propriedades personalizadas antes de você envolver.

4. --mode — Claro / Escuro

Um alternador de 2 estados. Define data-mode="light" vs "dark" no elemento <html> e o seletor :root do artefato responde com dois conjuntos de cores.

Se o artefato já tiver um modo escuro baseado em media query, substitua-o pela versão com atributo de dados — a escolha do usuário deve prevalecer sobre seu sistema operacional.

5. --motion — Desligado / Sutil / Animado

Três configurações. Mapeia para uma variável CSS --motion-mult que escala todas as declarações transition-duration / animation-duration:

• Desligado — 0s (também desabilita canvases WebGL / animação decorativa).
• Sutil — 1.0 (o tempo de animação autoral do artefato).
• Animado — 1.6 (transições mais lentas, movimento mais visível).

Respeite prefers-reduced-motion: defina como Desligado se o usuário tiver essa opção definida, independentemente da preferência armazenada.

Contrato de integração do host (OBRIGATÓRIO)

A barra de ferramentas do visualizador OpenDesign tem um alternador Tweaks que controla a visibilidade do painel de fora do iframe. Para que o alternador se vincule ao seu painel, seu artefato deve falar um destes dois protocolos (escolha um; não misture). A barra de ferramentas se habilita no momento em que vê qualquer um dos sinais.

Protocolo A — postMessage (recomendado para artefatos gerados por agente)

Use isso quando o painel for montado via JS (React, vanilla, qualquer coisa dinâmica).

Artefato → host:

• Na montagem, envie { type: '__edit_mode_available', visible?: boolean } para