Brand Kit (Kit de Marca)

Brand Kit

Constrói um brand-kit.json descrevendo o produto do usuário de uma forma que outras skills possam consumir — cores, tipografia, voz, linguagem do tipo 'faça/não faça', logotipo opcional. Outras skills Cogny (/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video, /landing-page-review, /ad-copy-writer) leem este arquivo quando presente.

A skill é construída em torno da realidade de que os usuários nem sempre têm acesso ao código-fonte do seu site. Existem seis caminhos para um kit, em ordem de prioridade. Pare no primeiro que produzir o suficiente.

Uso

/brand-kit https://exemplo.com — extrair de um site ativo /brand-kit ~/git/nosso-site — extrair de um repositório local (Tailwind / variáveis CSS) /brand-kit ~/Desktop/logo.png — extrair paleta de um logotipo ou screenshot /brand-kit ~/Desktop/homepage.png logo.png — combinar screenshot do site + logotipo /brand-kit — entrevistar o usuário

Saída

Um brand-kit.json escrito em (por ordem de prioridade, o caminho que fizer sentido para a configuração do usuário):

1. .agents/brand-kit.json (se .agents/ existir)
2. .claude/brand-kit.json (se .claude/ existir)
3. ./brand-kit.json (caso contrário — diretório de trabalho atual)

Sempre imprima o caminho onde foi escrito para que o usuário possa movê-lo.

Schema

{
  "name": "cogny",
  "site": "https://cogny.com",
  "logo": {
    "path": "./brand/logo-square.png",
    "use_in_video": false
  },
  "colors": {
    "background": "#1f1d1d",
    "foreground": "#ede8e3",
    "primary":    "#b09acd",
    "accent":     "#c9badf",
    "muted":      "#9a9494",
    "card":       "#282525",
    "fuchsia":    "#d4848a",
    "success":    "#7ec8a4",
    "amber":      "#d4a857"
  },
  "type": {
    "family":   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
    "weight_display": 700,
    "weight_body":    500,
    "letter_spacing_display": "-0.02em"
  },
  "voice": {
    "register":   "técnico, direto, anti-jargão, estética CLI",
    "person":     "primeira pessoa do plural (nós / nosso)",
    "do":         ["números concretos", "nomeie a compensação", "nomeie a ferramenta"],
    "dont":       ["alavancar", "desbloquear", "revolucionário", "próxima geração"]
  },
  "source": "repo: ~/git/cogny/tailwind.config.ts + src/index.css",
  "captured_at": "2026-04-25"
}

Kit mínimo viável: colors.background, colors.foreground, colors.primary, type.family, voice.register. Não entregue sem todos os cinco.

---

Caminho 0 — Árvore de contexto MCP Cogny (mais barato, execute primeiro se conectado)

Use quando: o servidor MCP cogny estiver em .mcp.json. O usuário pode já ter documentado sua marca — voz, paleta, tom — em sua árvore de contexto; nesse caso, fazer scraping é redundante.

mcp__cogny__get_context_tree_overview              # veja o que está documentado
mcp__cogny__search_context query="brand"           # paleta, voz, tom, design tokens
mcp__cogny__search_context query="posicionamento"  # voz + registro geralmente estão aqui
mcp__cogny__read_context_node node_id="…"

Se a árvore retornar nós de marca / paleta / voz, hidrate o kit a partir desses valores. Faça uma verificação cruzada com o Caminho 1 ou 3 apenas se algo parecer desatualizado ou contraditório.

Se o MCP cogny não estiver conectado, ou a árvore não tiver nada relacionado à marca, caia para o Caminho 1.

Caminho 1 — Repositório com variáveis Tailwind / CSS (melhor sinal)

Use quando: o usuário tiver acesso ao código-fonte do site.

Procure, nesta ordem:

# Configuração Tailwind — namespaces de cores personalizados
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# Propriedades personalizadas CSS (pilhas modernas)
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# Design tokens
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Quando encontrar uma configuração Tailwind, procure por um namespace de cor personalizada (geralmente o nome da marca, ex: cogny: {...}):

// tailwind.config.ts (exemplo cogny)
colors: {
  cogny: { dark: "#1f1d1d", purple: "#b09acd", secondary: "#7E69AB", light: "#c9badf" }
}

Quando encontrar um arquivo CSS, use grep para os nomes canônicos de propriedades personalizadas:

grep -E '^\s*--(background|foreground|primary|accent|muted|card)' <css-file>

Mapeie os valores para o schema do kit. Se encontrar --primary (HSL ou hex) e também um namespace Tailwind, prefira o namespace Tailwind — geralmente é a intenção explícita da marca, não um padrão do shadcn.

Detecção de tipo nos mesmos arquivos:

grep -E "(font-family|fontFamily|--font-)" <repo>/src/**/*.{css,ts,tsx,js} 2>/dev/null | head

---

Caminho 2 — URL do site ativo (funciona sem acesso ao código-fonte)

Use quando: o usuário tiver apenas uma URL pública.

Passos:

1. Busque a página inicial com WebFetch <url> e extraia quaisquer blocos <style> inline e os links de folhas de estilo do <head>.
2. Busque a folha de estilo principal (o maior link CSS no <head>, normalmente). curl -sL <css-url> | head -c 200000 é suficiente — procure por propriedades personalizadas CSS (--primary, --background, etc.) e regras @font-face.
3. Procure por um manifesto em /site.webmanifest, /manifest.json ou /manifest.webmanifest. Manifestos contêm theme_color, background_color e uma lista de ícones — ouro para kits de marca.
4. Procure por um favicon e um logotipo de alta resolução:

   curl -sL "<site>/favicon.ico" -o /tmp/favicon.ico
   curl -sL "<site>/apple-touch-icon.png" -o /tmp/touch.png
   # Ou extraia de <link rel="icon"> no HTML da página inicial
   

   O maior ícone PNG no site (Apple touch icon, ícone do manifesto) é a marca.
5. Detecte tipografia: pesquise no CSS inline por declarações font-family em body, html ou h1. Se vir links do Google Fonts no <head>, o nome da família está na URL.

Se o site usar um frontend estático (Next.js, etc.), o CSS empacotado geralmente contém as mesmas propriedades personalizadas que a fonte de desenvolvimento — então você pode recuperar a paleta completa da marca sem acesso ao repositório.

Se você obtiver apenas informações parciais (ex.: conseguiu theme_color do manifesto, mas não a paleta completa), prossiga para o Caminho 3 para preencher lacunas a partir do logotipo / screenshot.

---

Caminho 3 — Extração de paleta de logotipo ou screenshot (a alternativa que sempre funciona)

Use quando: o usuário enviar uma imagem de logotipo, um screenshot da página inicial ou um PNG/JPG de ativo da marca.

O usuário geralmente tem alguma imagem — um logotipo no Desktop, um avatar do Slack, um screenshot do site. Extraia uma paleta diretamente com FFmpeg:

# Gere uma imagem de paleta pequena (máx. 6 cores distintas) a partir de qualquer imagem.
ffmpeg -y -i <input.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# Leia essas cores da paleta de volta como hex. O cabeçalho PPM é
#   P6\n<W> <H>\n255\n  → 13 bytes para a paleta padrão 16x16.
ffmpeg -y -i /tmp/_palette.png -c:v ppm -f image2 -update 1 - 2>/dev/null \
  | tail -c +14 \
  | xxd -c 3 -p \
  | awk '!seen[$0]++' \
  | head -8 \
  | awk '{print "#" toupper($1)}'

Saída para o logotipo cogny (gradiente C em fundo escuro quente):

#1D1B1B   ← background
#5F4953   ← ameixa escura
#BB93B9   ← lavanda (primária da marca)
#CA8B9D   ← coral-rosa
#D2858C   ← coral (acento)

Regras de mapeamento — a paleta é ordenada por frequência, mas a atribuição de papéis é sua:

• Cor mais escura → colors.background (se cobrir >40% dos pixels)
• Mais brilhante (não branca) → colors.foreground (se não houver off-white, padrão #fafafa)
• Croma mais saturado → colors.primary
• Segundo mais saturado → colors.accent

Verifique a imagem original uma vez e confirme — a atribuição algorítmica de papéis acerta ~70% das vezes.

Para tipografia a partir de um screenshot: detecção de fonte baseada em imagem não é confiável. Ou:

• Pergunte ao usuário ("a fonte do título nesta imagem é…?"), ou
• Use uma ferramenta gratuita como WhatTheFont ou Fontspring Matcherator — mostre a URL ao usuário, não tente fazer programaticamente.

Opcional: paleta semântica via node-vibrant (um npm install, fornece categorias vibrant/muted/dark-vibrant/light-vibrant — mais útil para mapeamento de papéis primário/acento):

npm install -g node-vibrant
node -e "
  const Vibrant = require('node-vibrant');
  Vibrant.from(process.argv[1]).getPalette().then(p => {
    const out = {};
    for (const k of ['Vibrant','Muted','DarkVibrant','LightVibrant','DarkMuted','LightMuted']) {
      if (p[k]) out[k] = p[k].hex;
    }
    console.log(JSON.stringify(out, null, 2));
  });
" <input.png>

Use o que estiver disponível. O FFmpeg já vem com as skills de vídeo, então é o padrão.

---

Caminho 4 — Seletor de cores / entrada manual (sempre disponível)

Use quando: nada mais funcionou, ou o usuário quiser substituir o kit explicitamente.

Pergunte, nesta ordem, e aceite respostas parciais:

1. Hex do fundo? (o fundo da página que os usuários mais veem)
2. Hex do primeiro plano? (cor do texto do corpo)
3. Hex da marca primária? (a cor que um botão ou link usa)
4. Hex do acento? (opcional — se houver uma segunda cor da marca)
5. Família de fontes? ("uma sans como Inter", "JetBrains Mono", etc. — melhor esforço, fallbacks de sistema são suficientes)

Três cores e uma fonte são suficientes para entregar.

---

Caminho 5 — Extração de voz (sempre executado, independentemente do caminho de cores)

Voz é a parte de um kit de marca que as ferramentas de copiar-e-colar esquecem. Ela muda quais batidas um vídeo escreveria ou quais títulos uma skill de redação de anúncio produziria.

Fonte para voz: o hero da página inicial + 1–2 páginas mais profundas (sobre, preços, blog).

Passos:

1. Busque o texto do hero da página inicial (h1, h2, o primeiro parágrafo após o CTA do hero).
2. Busque uma página profunda (/about ou /pricing normalmente).
3. Leia o texto e produza três campos:

"voice": {
  "register": "<descrição de uma linha>",
  "do":   ["padrão 1", "padrão 2", "padrão 3"],
  "dont": ["palavra proibida 1", "palavra proibida 2"]
}

Exemplos (reais, derivados da página inicial de cada empresa):

Marca	register	do	dont
cogny	"técnico, direto, anti-jargão, estética CLI"	números concretos, nomeie a compensação, nomeie a ferramenta	alavancar, desbloquear, revolucionário, próxima geração
Linear	"operador, opinativo, rápido"	segunda pessoa, conciso, linguagem de construção	enterprise, sinergia, robusto
Mailchimp	"caloroso, conversacional, inglês simples"	primeira pessoa, contrações amigáveis, CTAs claros	utilizar, paradigma, alavancar

Se não conseguir inferir a voz a partir da página (ex.: página inicial muito enxuta), peça ao usuário uma frase descrevendo como eles querem soar. Não invente.

---

Passos (o fluxo real)

1. Detecte qual entrada o usuário forneceu:

   • URL → Caminho 2 → caia para 3 / 5 se necessário
   • Caminho do repositório → Caminho 1 → caia para 5
   • Caminho da imagem → Caminho 3 + peça URL do site ou repositório para voz (Caminho 5)
   • Nada → Caminho 4 + pergunte se têm um logotipo para extrair

2. Construa o kit incrementalmente. Imprima o estado parcial após cada etapa para que o usuário possa intervir:

   ◆ Kit de marca (cogny)
   ✓ cores    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
   ✓ tipo     JetBrains Mono / mono
   ◇ voz      pendente — buscando /about para análise…
   

3. Mostre o resultado ao usuário antes de escrever o arquivo. Eles devem aprovar as atribuições de papéis de cores (background vs primary, etc.) — estas são as decisões de alto impacto.

4. Escreva brand-kit.json no local mais apropriado (consulte a seção Saída). Se um kit já existir, faça um diff e pergunte antes de sobrescrever.

5. Imprima uma dica de instalação de uma linha para as skills consumidoras:

   Salvo → .agents/brand-kit.json
   Usado por: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
              /ad-copy-writer, /landing-page-review
   

Erros comuns

1. Tratar uma única cor hex como a marca — a maioria das marcas tem uma primária + um acento + um par fundo-primeiro plano. Mínimo de três cores.
2. Entregar sem voz — cores carregam 30% da marca; a voz carrega 70%. Não pule o Caminho 5.
3. Usar padrões do shadcn como a marca — se o arquivo CSS do usuário tiver o literal --primary: 240 5.9% 10% do shadcn, isso é um placeholder, não uma marca. Verifique com o screenshot da página inicial.
4. Saturar demais o kit com artefatos de gradiente do logotipo — a extração de paleta de um logotipo com gradiente retornará 4–5 cores de transição. Escolha os extremos (primário + acento), descarte os intermediários.
5. Deixar o azul do LinkedIn / azul do Twitter / rosa do TikTok escapar para o kit — essas são cores de interface da plataforma que vazam em screenshots, não cores da marca.
6. Confiar cegamente em theme-color — sites às vezes definem theme-color para combinar com a barra de endereço do Safari móvel, que é decorativo e pode não corresponder à primária real da marca.

Relacionados

• /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video — consomem o kit
• /ad-copy-writer — usa as regras de voz para escrever textos apropriados para a plataforma
• /landing-page-review — verifica a consistência entre uma landing page e o kit de marca
• /non-commodity-content — a extração de voz se sobrepõe à etapa de entrevista desta skill