Início/Trilha 2 · Exemplos de Uso/Módulo 2.6
MÓDULO 2.6

🔍 Crítica & Tweaks — fechando o loop

Skill critique para auditar artefatos e tweaks para ajustes finos guiados pelo modelo. Iteração estruturada, não chute.

7
Tópicos
~45 min
Duração
Prático
Nível
Loop
Foco

🏁 Resultado: Você usa critique para auditar artefatos próprios e tweaks para ajustes finos guiados pelo modelo — fechando o ciclo de qualidade.

1

⏰ Quando rodar critique

Após o primeiro draft, antes do export.

O que é

A skill critique é manual e profunda — diferente da auto-crítica embutida (RULE 8 de discovery). Você roda após o agente entregar o primeiro draft, antes de exportar/compartilhar. Ela gera um relatório HTML com radar chart das 5 dimensões, lista de Keep / Fix / Quick-wins, e sugestões específicas.

Por que aprender

Sem critique, você fica com o draft inicial — que tem 20-30% de oportunidade não-explorada. Critique é cheap (~30s) e high-signal. É o "code review" do design.

Conceitos-chave

  • Trigger: usuário invoca explicitamente /skill critique
  • Não-destrutivo: não muda o artefato; gera relatório
  • Output: HTML com radar chart + lista de findings
  • Latência: ~30s na maioria dos casos
2

⭐ As 5 dimensões pontuadas 0-10

Philosophy, Visual Hierarchy, Detail, Functionality, Innovation.

O que é

Cada dimensão recebe nota 0-10 com justificativa:

Philosophy

Coerência com tese da marca/direção

Visual Hierarchy

Ordem de leitura, peso visual

Detail

Microcopy, micro-spacing, polish

Functionality

UX flow, acessibilidade, hit targets

Innovation

Algo novo, não óbvio, com bom motivo

Por que aprender

Sem dimensões nomeadas, "dá uma melhorada" é ambíguo. Com 5 dimensões, conversa fica precisa: "Detail está em 6, vamos pra 8". Modelo entende exatamente o que melhorar. Vocabulário compartilhado > subjetividade.

Conceitos-chave

  • 0-10: resolução fina; 1-5 é coarse
  • Threshold: < 7 = re-roll; ≥ 8 = aceito
  • Gap dimensions: diferença entre dimensions revela trade-off
  • Justificativa obrigatória: nota sem texto = inválida
3

📊 Output: relatório HTML com radar chart + Keep/Fix/Quick-wins

Visual + acionável.

O que é

Critique gera relatório HTML com 3 seções:

  • Radar chart: 5 dimensões em pentágono visual
  • Keep: 3-5 coisas que estão funcionando — não mexer
  • Fix: 3-5 coisas a corrigir — texto específico do quê
  • Quick-wins: 5-7 ajustes pequenos com alto impacto

Por que aprender

"Keep" é a parte subestimada. Sem ela, você corrige o que não tinha problema. Saber o que está bom = resistir a refazer. Quick-wins são o ROI: 1 hora de trabalho, salto perceptível no output.

Conceitos-chave

  • Radar chart: SVG inline com 5 vértices
  • Keep specific: "manter hero monocromático" > "manter hero"
  • Fix actionable: "trocar Inter por Söhne em h1"
  • Quick-wins ordenados: primeiro os de menor esforço
4

🎚️ Skill tweaks — painel de ajustes

Sliders por hue, spacing, font-scale, opacity.

O que é

A skill tweaks permite ajustes pós-emit via painel de sliders que o modelo gera contextualmente. Em vez de "deixa mais escuro", você arrasta um slider de hue/lightness/spacing/font-scale e vê o artefato atualizar. Modelo decide quais sliders fazem sentido para esse artefato específico.

Por que aprender

Texto livre ("um pouco mais espaçado") é impreciso e custa tokens. Slider é direto. E mais: o modelo te dá só as alavancas que importam — sem overload de 50 sliders. Constraint = decisão mais rápida.

Conceitos-chave

  • Hue slider: 0-360°, em OKLch
  • Spacing scale: 0.8x - 1.4x
  • Font-scale: 0.9x - 1.3x
  • Opacity de sub-elements: 0.5 - 1.0
  • Modelo escolhe sliders: 3-5 por sessão, não overloading
5

🤖 Quando o modelo decide o que tweakar

A heurística por trás dos sliders gerados.

O que é

Modelo lê o artefato + a critique + o histórico do chat, e decide quais sliders são load-bearing: alavancas onde 1 ajuste move muita coisa. Para um deck Editorial Monocle, hue da accent + spacing + font-scale são o set comum. Para dashboard Tech Utility, opacity de sparklines + spacing tabular + accent. Cada artefato tem alavancas diferentes.

Por que aprender

Garante que cada slider mexido faz diferença visível. Sliders genéricos (50 sliders sempre presentes) viram ruído. Sliders contextuais = decisão guiada. Modelo é seu copiloto, não dashboard de 50 botões.

Conceitos-chave

  • Load-bearing: alavanca onde delta = visível
  • 3-5 sliders máximo: sweet spot
  • Por skill: dashboard ≠ deck ≠ landing
  • Stateful: ajuste persiste para próximo turn
6

🔧 POST /api/artifacts/lint — checagem estrutural

Broken artifact, missing side-files, palette tokens velhos.

O que é

Endpoint do daemon que faz lint mecânico no artefato gerado:

  • Broken <artifact> tag não fechada
  • Missing side-files que o template referencia
  • Palette tokens velhos — usa #hex em vez de var(--accent)
  • P0 violations declaradas no checklist.md da skill

Por que aprender

Lint pega erros que crítica subjetiva não pega. Tag não fechada, token errado, P0 violado = problemas determinísticos, não opinião. Critique avalia "feel"; lint avalia "estrutura". Ambos são complementares.

Conceitos-chave

  • POST /api/artifacts/lint: recebe HTML, devolve findings
  • Severity levels: error / warning / info
  • Auto-run: daemon roda lint após cada emit
  • UI integration: findings aparecem como toast/lista
7

🔁 Iteração: 2 passes é normal, 3+ é sinal de brief errado

A heurística da convergência.

O que é

Pipeline esperado: draft → critique → quick-wins → final. 2 passes ✓. Quando você está no terceiro ou quarto pass, pare. O brief está errado, não o output. Volte ao question form, refaça assunções de superfície/tom/escala. Iterar mais não converge — só consome tokens.

Por que aprender

Sintoma comum de "AI freestyle": iterar infinitamente em pequenos ajustes, esperando milagre. Esse loop sintomatiza brief vago. Sair do loop = revisitar a base, não persistir.

Conceitos-chave

  • Pass 1: draft inicial
  • Pass 2: critique + quick-wins (normal)
  • Pass 3+: sinal vermelho — revise brief
  • Sintoma de brief vago: "ainda não tá legal"
  • Solução: refazer turn 1 (question form)

🛠️ Hands-on

Brief: Pegar um artefato gerado nos módulos 2.1-2.5 (qualquer um) e rodar critique. Aplicar Quick-wins. Re-pontuar.

  1. Escolha um artefato: deck, landing, mobile, carrossel ou dashboard.
  2. Rode critique: /skill critique referenciando o artifact ID.
  3. Leia o relatório: note as 5 notas, os 3 Keeps, os 3 Fixes, os 5 Quick-wins.
  4. Aplique 5 quick-wins: peça pro agente ajustar especificamente esses.
  5. Re-rode critique: compare as notas antes/depois. Sweet spot: +1 a +2 em cada dimensão.

Comando

/skill critique
# Output: relatório com radar + Keep/Fix/Quick-wins

# Aplicar quick-wins:
"Aplica os 5 quick-wins do relatório de critique"

# Re-validar:
/skill critique
# Compara: deltas em cada dimensão

📚 Fontes

No repositório

  • skills/critique/SKILL.md
  • skills/critique/references/dimensions.md
  • skills/tweaks/SKILL.md
  • apps/daemon/src/server.ts (/api/artifacts/lint)

Externas

  • Code review patterns — analogia direta com critique
  • Tufte — princípios de density & ink ratio

📌 Resumo do Módulo

1. Critique = "code review" do design — após draft, antes de export.

2. 5 dimensões: Philosophy, Visual Hierarchy, Detail, Functionality, Innovation.

3. Output = HTML com radar chart + Keep / Fix / Quick-wins.

4. Skill tweaks emite painel de sliders contextuais (hue, spacing, font-scale).

5. Modelo decide quais sliders são load-bearing — não dashboard genérico.

6. POST /api/artifacts/lint faz checagem estrutural mecânica (complementa critique).

7. Iteração: 2 passes é normal; 3+ = brief errado, refazer base.

Próxima trilha:

Trilha 3 · Técnicas Avançadas →
← Módulo 2.5 Trilha 3: Avançado →