🎨 Brand-Spec Extraction Avançada

O que é

Sem protocolo, você diz "use a marca da Stripe" e o modelo inventa cores plausíveis: #635BFF em vez de #0570DE; tipografia "Inter" em vez de "SF Pro". O output parece Stripe-like mas está errado. Designer experiente percebe; cliente sente que não é a marca dele. Brand-spec extraction elimina esse modo de falha.

Por que aprender

É a diferença entre "AI freestyle" e "trabalho de designer sério". Cliente fornece marca? Você extrai mecanicamente; modelo nunca improvisa. Trust mecânico > trust em LLM "lembrar bem".

Conceitos-chave

• Hallucination de cor: modo de falha #1 sem protocolo
• Hallucination de tipografia: modo de falha #2
• Branch B do discovery: ativa quando usuário fornece URL/spec
• Mecânico, não criativo: nada inventado, tudo derivado

O que é

Sequência fixa, executada pelo agente em background:

1. Locate: achar onde a marca está documentada (/brand, /press, /about)
2. Download: puxar CSS/PDF/screenshots
3. grep hex: extrair cores mecanicamente
4. Codify: escrever brand-spec.md em OKLch + tipografia + posture
5. Vocalise: declarar o sistema em uma frase ao usuário

Por que aprender

Cada passo elimina um modo de falha específico. Pular passo = voltar a alucinar. Sequência é validada — funciona em 90% dos sites públicos. Não invente sequência própria; siga.

Conceitos-chave

• Sequência rígida: não reordenar
• Estado intermediário visível: usuário vê o que foi achado
• Falha graceful: sem brand book? cai pra Branch C
• Tempo: ~60-120s no total para sites públicos

O que é

Empresas com brand book público costumam expor em paths conhecidos: /brand, /press, /press-kit, /about/brand, /about/press, /media. Agente usa WebFetch em ordem; primeiro hit ganha. Se nada, cai em scraping da homepage CSS.

Por que aprender

Saber esses paths é "design intelligence" — economiza 80% das tentativas. Se cliente é Stripe-tier, brand book está documentado. Se é early-stage, vai ser scraping. Saber escolher caminho = não retrabalhar.

Conceitos-chave

• /brand, /press, /press-kit: caminhos canônicos
• WebFetch tool: Claude Code nativo
• Fallback scraping: homepage CSS quando não há brand
• Sem brand: cair pra Branch C (improvisar)

O que é

Após Locate, baixe os arquivos:

• CSS files: são fonte de verdade (design tokens)
• Brand guide PDF: tem paleta + tipografia explicitada
• Screenshots / SVG logos: para extrair cor visual
• Webfont declarations: que tipografia o site carrega

Por que aprender

CSS é "fonte canônica" — todas as outras representações derivam dele. Ler CSS > ler brand book em 90% dos casos: brand book pode estar desatualizado, CSS é o que está rodando agora.

Conceitos-chave

• curl + WebFetch: ferramentas básicas
• CSS minificado: ainda contém HEX
• PDF parsing: via pdftotext (cli) quando preciso
• Screenshot color: só fallback de último caso

O que é

Regex pega TODOS os hex codes do CSS:

grep -E '#[0-9a-fA-F]{3,8}' style.css | sort -u
# Output:
# #0570DE  (Stripe purple-blue principal)
# #1A1F36  (texto)
# #F6F8FA  (cinza claro fundo)
# #635BFF  (accent CTA)
# #F1F3F5
# ...

Top 5-10 mais frequentes > "ruído" único. Agente aplica heurística: cores que aparecem 10+ vezes = tokens canônicos.

Por que aprender

É a única extração 100% determinística. Modelo lendo CSS lentamente erra; grep + sort não erra. Mecânico vence inteligente quando há regex.

Conceitos-chave

• Regex hex: 3, 4, 6 ou 8 dígitos
• Frequência: top 5-10 são tokens canônicos
• Cluster por similaridade: #0570DE e #035FCC podem ser variações
• RGB/HSL ignored: raros em CSS de produto

O que é

Brand-spec.md gerado pelo agente:

# brand-spec: Stripe

## color (em OKLch)
- --bg: oklch(98% 0.005 250)        # de #F6F8FA
- --fg: oklch(15% 0.02 270)         # de #1A1F36
- --accent: oklch(48% 0.18 263)     # de #0570DE
- --accent-2: oklch(57% 0.20 270)   # de #635BFF

## typography
- display: "Söhne", "SF Pro Display"
- body: "Söhne", -apple-system, "Helvetica Neue"
- mono: "Söhne Mono", monospace

## posture
- Cards com border 1px hairline; rounded 12px
- Shadows são raros — só em modais
- Accent reservado para CTAs primários

Por que aprender

brand-spec.md é plug-and-play em qualquer skill. Coloca em ./brand-spec.md do projeto, agente lê e aplica em qualquer artefato. Reuso forte.

Conceitos-chave

• 6 tokens canônicos: bg, fg, accent + variações
• 3 font stacks: display, body, mono
• 3-5 posture rules: cards, shadows, motion, copy
• OKLch mandatory: não usar HEX no spec
• Path: ./brand-spec.md no root do projeto

O que é

Após codify, agente declara em uma frase o que extraiu:

"Stripe é fundo branco-claro com accent azul-violeta vivo
em oklch(48% 0.18 263), tipografia Söhne com humor sóbrio
e posture mínima — cards com hairline, shadows raros."

Usuário valida ou corrige antes de gerar artefato.

Por que aprender

É o "checkpoint" antes de ir adiante. Se vocalise está errado, é mais barato corrigir aqui que depois do CSS pronto. Resume de 1 frase é a hipótese; usuário aceita ou refuta.

Conceitos-chave

• 1 frase: síntese do que foi extraído
• Cita OKLch: referência exata, não nome aproximado
• Postura inclusa: "cards com hairline" > só cores
• Validation gate: usuário precisa confirmar

O que é

Converter HEX → OKLch não é trivial: você precisa preservar o L "que parece o mesmo brilho" perceptualmente. oklch.com faz isso bem; conversores genéricos podem dar valores numericamente corretos mas visualmente diferentes. Use sempre a conversão perceptual.

Por que aprender

Conversão errada produz cores que parecem "deslocadas" do original. Cliente sente sutil mas certeiro: "não é a nossa cor". Detalhe técnico que protege identidade visual.

Conceitos-chave

• oklch.com: conversor canônico
• Display P3: alguns hex saem do sRGB; OKLch lida
• Round-trip test: OKLch → HEX → OKLch deve estar próximo
• Não converter cinzas absolutos: oklch(0% 0 0) e oklch(100% 0 0) só