🎓 Junior-Designer Mode

O que é

"Junior-Designer Mode" vem de huashu-design (Alchain Cyf). Tese: um designer júnior decente faz mais perguntas que um sênior medíocre. O agente é instruído a se comportar como júnior performando sênior — bate perguntas antes de pixel, valida assunções, declara o que vai fazer antes de fazer. Humildade ritualizada como protocolo.

Por que aprender

É o filtro que mais economiza retrabalho. Sem ele, modelo "achou que sabia" e retrabalho dispara. Com ele, modelo expõe ignorância em forma de pergunta — e usuário corrige antes do CSS. Custo de uma pergunta << custo de refazer landing inteira.

Conceitos-chave

• huashu-design (Alchain Cyf): origem da filosofia
• Junior simulando sênior: faz perguntas em vez de assumir
• Discovery ritualizada: RULE 1, 2, 3 codificam o protocolo
• Customer-aware: agente sabe quem é o cliente do cliente

O que é

Antes de qualquer pixel, no turn 1, o agente envia um question form fixo:

1. **Superfície**: web · mobile · deck · carrossel?
2. **Audiência**: B2B SaaS · designer · investidor · público geral?
3. **Tom**: editorial · técnico · ousado · sóbrio?
4. **Contexto de marca**: tem marca? (URL, brand-spec, ZIP)
5. **Escala**: protótipo único · multi-tela · sistema completo?

Por que aprender

Cada pergunta corta uma fonte de erro. Superfície determina viewport e frames. Audiência molda o copy. Tom escolhe direção visual. Marca ativa branch B (extração). Escala dimensiona o trabalho. Skip = retrabalho garantido.

Conceitos-chave

• 5 perguntas, fechadas: opções claras, sem dissertação
• Multiple choice quando possível: reduz tempo de resposta
• Override: usuário pode dizer "pula isso, faz X" → pula form
• Linguagem do usuário: respeita PT-BR, EN, etc.

O que é

Após o turn 1, com base na resposta de "contexto de marca", o agente escolhe um de 3 caminhos:

Por que aprender

Sem branch, o agente pula direto pro design — e inventa cores aleatórias mesmo quando a marca já existe. Branch B é o que evita "Stripe com paleta fictícia". Branch A é o que evita "tela em branco infinita". Branch C é raro, só pra esboços rápidos.

Conceitos-chave

• Branch A → 5 direções visuais: Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm
• Branch B → brand-spec extraction: protocolo de 5 passos (Locate, Download, grep, Codify, Vocalise)
• Branch C → Modern Minimal default: "improvisar" sem âncora estética
• Decisão explícita: agente declara qual branch antes de ir

O que é

Cinco templates de "feel" estabelecidos em directions.ts (284 linhas). Cada um traz: paleta-base, par tipográfico, regras de spacing, exemplos de "cara" do output.

Por que aprender

Estas 5 direções cobrem 80% dos cenários comerciais. Editorial Monocle pra mídia/lifestyle. Modern Minimal pra SaaS B2B. Tech Utility pra dev tools. Brutalist pra creative. Soft Warm pra healthcare/wellness. Sabendo as 5, você nomeia rápido em conversa com cliente.

Conceitos-chave

• directions.ts: 284 linhas com paleta + tipografia por direção
• "Variations, not the answer": agente apresenta 2-3 direções diferenciadas, não 1 só
• User picks: escolha vira tag em SKILL+DESIGN
• Mistura é pecado: não combinar Brutalist com Soft Warm

O que é

Após branch, o agente usa TodoWrite (ferramenta nativa Claude Code) para emitir o plano antes de executar:

[ ] Criar template HTML com tokens
[ ] Hero (h1 + sub + CTA)
[ ] Features 3 colunas
[ ] Pricing 3 tiers
[ ] Footer
[ ] Critique 5-dim
[ ] Quick-wins iteration

Cada item vira "in progress → done" em tempo real, visível ao usuário. Você redireciona antes de gastar tokens em parte errada.

Por que aprender

É o que diferencia "modelo trabalhando" de "modelo no escuro". Sem plano visível, você só descobre que ele entendeu errado quando o output chega — e já é tarde. Plano visível = janela de redireção.

Conceitos-chave

• TodoWrite: tool padrão do Claude Code, suportada por OD
• Live updates: status muda em streaming
• Redirecionável: usuário interrompe e edita o plano
• Audit trail: histórico de tasks fica no SQLite

O que é

Cada SKILL.md tem um references/checklist.md com 3 níveis:

Por que aprender

P0 é a versão mecânica do "controle de qualidade". Em vez de confiar que o modelo "tem bom gosto", o checklist força verificações. Skills bem escritas têm 5-8 P0 — 50% do efeito de "não-slop".

Conceitos-chave

• P0 = hard gate: bloqueia emit do artefato
• P1 = warning: emite + reporta
• P2 = nice-to-have: emite silencioso
• 5-8 P0 por skill: sweet spot
• Checklist é versionado: no Git, acompanha mudanças

O que é

Após emit, o agente roda automaticamente uma auto-crítica em 5 dimensões (escala 0-10):

Por que aprender

É feedback loop interno. Score < 7 em qualquer dimensão = re-roll obrigatório com instrução específica. Sem isso, você vê o output ruim e tem que pedir refresh — com isso, modelo já corrigiu antes de você ver. 2 passes é o normal; 3+ é sinal de brief errado.

Conceitos-chave

• Self-critique embutido: em discovery.ts Step 8
• Skill critique separada: versão manual mais profunda (M 2.6)
• Threshold: < 7 = re-roll; ≥ 8 = aceito; 7-7.5 = quick-wins
• Radar chart no output: visual rápido das 5 dimensões

O que é

Quando o usuário não decide entre direções (ou quer comparar), o agente NÃO entrega 1 resposta única. Ele entrega 2-3 variações genuinamente diferentes — não 3 versões do mesmo Modern Minimal com hue diferente. Variações = direções DIFERENTES (Editorial vs Tech Utility vs Brutalist), não tweaks da mesma.

Por que aprender

É o que evita "tudo parece igual". Designers experientes apresentam direções polarizadas pra forçar decisão. Modelo sem essa instrução tende a regressar pra média (3 versões "similares" entregues como variações). Polarização > média.

Conceitos-chave

• 2-3 variações, não 5+: demais = paralisia; menos = sem comparação
• Diferenças polarizadas: direção visual ≠ apenas "cor"
• Naming: cada variação tem nome ("Direção A: Editorial", etc.)
• Trade-offs explícitos: cada variação cita o que ganha e o que perde