brand-extract

Transforme um site ativo em um Kit de Marca completo e consumível por máquinas — identidade, paleta de cores semântica, tipografia, voz — medindo a página real, não adivinhando de memória. Esta é a metodologia por trás de um projeto de extração de marca: o site alvo é aberto em uma aba secundária do Navegador dentro do aplicativo, e você o controla com a ferramenta agent-browser.

A página do kit ativo (brand.html)

O projeto de extração abre com brand.html como a aba ativa — uma página de kit de marca autônoma (modelo: brand-extract/templates/brand-kit.html) que o daemon renderiza a partir de brand.json. O daemon a preenche previamente com uma primeira pintura determinística — um logotipo coletado, uma paleta aproximada, famílias de fontes e algumas imagens de capa — para que não seja apenas um esqueleto ao abrir. Seu trabalho é substituir essa semente pela verdade medida e preencher o restante, progressivamente, para que o usuário veja a conclusão módulo a módulo. Você nunca a edita manualmente: você escreve brand.json, então executa od brand preview <brandId> e o daemon re-renderiza a página (a página se recarrega suavemente enquanto extrai). Otimize para primeira pintura rápida e preenchimento progressivo — escreva um brand.json parcial e visualize-o no momento em que tiver um nome, um par de cores e um logotipo, então visualize novamente após cada grupo de campos, em vez de agrupar todo o kit para o final.

A armadilha a evitar: um LLM deixado sozinho regride para a média — Inter, um acento índigo, um gradiente roxo. Isso está fora da marca para todos. Cada valor que você emite deve rastrear algo que você mediu na página.

A corrente de três etapas

Trabalhe em ordem. Pular direto para escrever brand.json é como kits fora da marca e alucinados acontecem.

1. Medir (controlar a aba aberta do Navegador)

Use agent-browser contra a aba do navegador selecionada (seu URL/título estão no seu contexto de execução — trate "esta página" / "o site" como essa aba):

1. agent-browser get url / get title para confirmar o alvo.
2. agent-browser snapshot antes de extrair qualquer coisa.
3. Colete a linguagem de design real do DOM/CSS, não apenas a captura de tela:
   • Cores — classifique por frequência os literais de cor e resolva os sete papéis semânticos: background, surface, foreground, muted, border, accent, accent-secondary. O branco/creme próximo mais frequente é geralmente o fundo; a cor cromática de saturação média mais frequente é geralmente o acento.
   • Tipografia — os nomes @font-face e as declarações font-family para display, corpo e (se presente) mono. Observe os pesos realmente usados.
   • Logotipo (salve MÚLTIPLOS candidatos) — extraia todos os ativos de logotipo que encontrar e salve cada um como um arquivo em logos/: o <svg> de cabeçalho/navegação inline (escreva o literal <svg>…</svg> markup verbatim para logos/header.svg — não apenas o referencie), qualquer logotipo <img>, apple-touch-icon, favicon e og:image. Busque os URLs dos ativos diretamente — nunca deixe logo.primary vazio quando o site tiver qualquer marca. Defina logo.primary para o melhor vetor / lockup transparente (wordmark SVG > apple-touch-icon > favicon > og:image) e liste os demais em logo.alternates; a página do kit os renderiza como miniaturas selecionáveis. (O daemon busca automaticamente um fallback de favicon/og:image em logos/ para que a página nunca fique sem logotipo, mas essa rede de segurança não substitui o salvamento do wordmark real.)
   • Imagens (salve 6–8 das imagens GRANDES / DE CAPA / HERO do site) — este é o módulo de Imagens. Colete as fotos representativas grandes reais do site e salve-as em imagery/: o cartão social og:image/twitter:image, a arte hero/banner, a maior <img> (resolva a fonte srcset / <picture> de maior resolução), blocos hero de background-image CSS, capturas de tela de produto ou aplicativo e amostras de ilustração/fotografia. Filtre por tamanho renderizado — mantenha apenas imagens grandes (aproximadamente ≥320px na borda mais longa) e descarte ícones, sprites, logotipos, avatares e pixels de rastreamento. Liste-as em brand.json como imagery.samples (veja a forma abaixo); a página do kit as renderiza como uma galeria de Imagens limpa e rotulada (uma grade de miniaturas). Escolha 6–8 imagens variadas e que estejam na marca — nunca UI chrome ou ícones. (O daemon executa um fallback determinístico de imagem de capa/hero ao finalizar para que a galeria raramente esteja vazia, mas essa rede de segurança não substitui a escolha das imagens hero reais.)

…