Brand Kit

Construisez un fichier brand-kit.json décrivant le produit de l'utilisateur de manière à ce que d'autres compétences puissent le consommer — couleurs, typographie, voix, langage à utiliser/à éviter, logo optionnel. Les autres compétences Cogny (/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video, /landing-page-review, /ad-copy-writer) lisent ce fichier lorsqu'il est présent.

La compétence est construite autour de la réalité que les utilisateurs n'ont pas toujours accès au code source de leur site. Six chemins mènent à un kit, par ordre de priorité. Arrêtez-vous au premier qui fournit assez d'informations.

Utilisation

/brand-kit https://example.com — extraire depuis un site en ligne /brand-kit ~/git/our-site — extraire depuis un dépôt local (Tailwind / variables CSS) /brand-kit ~/Desktop/logo.png — extraire la palette depuis un logo ou une capture d'écran /brand-kit ~/Desktop/homepage.png logo.png — combiner capture d'écran du site + logo /brand-kit — interroger l'utilisateur

Sortie

Un fichier brand-kit.json écrit dans (par ordre de priorité, selon le chemin le plus adapté à la configuration de l'utilisateur) :

.agents/brand-kit.json (si .agents/ existe)
.claude/brand-kit.json (si .claude/ existe)
./brand-kit.json (sinon — répertoire de travail courant)

Affichez toujours le chemin d'écriture pour que l'utilisateur puisse le déplacer.

Schéma

{
  "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":   "technique, direct, anti-jargon, esthétique CLI",
    "person":     "première personne du pluriel (nous / votre)",
    "do":         ["chiffres concrets", "nommer le compromis", "nommer l'outil"],
    "dont":       ["optimiser", "débloquer", "révolutionnaire", "next-gen"]
  },
  "source": "repo: ~/git/cogny/tailwind.config.ts + src/index.css",
  "captured_at": "2026-04-25"
}

Kit minimum viable : colors.background, colors.foreground, colors.primary, type.family, voice.register. Ne publiez pas sans les cinq.

Chemin 0 — Arbre de contexte Cogny MCP (le moins coûteux, à exécuter en premier si connecté)

À utiliser quand : le serveur MCP cogny est présent dans .mcp.json. L'utilisateur a peut-être déjà documenté sa marque — voix, palette, ton — dans son arbre de contexte, auquel cas le scraping est redondant.

mcp__cogny__get_context_tree_overview              # voir ce qui est documenté
mcp__cogny__search_context query="brand"           # palette, voix, ton, design tokens
mcp__cogny__search_context query="positioning"     # voix + registre souvent ici
mcp__cogny__read_context_node node_id="…"

Si l'arbre renvoie des nœuds de marque / palette / voix, hydratez le kit à partir de ces valeurs. Recoupez avec le Chemin 1 ou 3 seulement si quelque chose semble obsolète ou contradictoire.

Si le MCP cogny n'est pas connecté, ou si l'arbre ne contient rien relatif à la marque, passez au Chemin 1.

Chemin 1 — Dépôt avec variables Tailwind / CSS (meilleur signal)

À utiliser quand : l'utilisateur a accès au code source du site.

Recherchez, dans l'ordre :

# Configuration Tailwind — espaces de noms de couleurs personnalisés
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# Propriétés personnalisées CSS (la plupart des stacks modernes)
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# Design tokens
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Lorsque vous trouvez une config Tailwind, cherchez un espace de noms de couleur personnalisé (généralement le nom de la marque, ex. cogny: {...}) :

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

Lorsque vous trouvez un fichier CSS, recherchez les noms de propriétés personnalisées canoniques :

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

Mappez les valeurs dans le schéma du kit. Si vous trouvez à la fois --primary (HSL ou hex) et un espace de noms Tailwind, préférez l'espace de noms Tailwind — c'est généralement l'intention explicite de la marque plutôt qu'une valeur par défaut de shadcn.

Détection de la typographie dans les mêmes fichiers :

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

Chemin 2 — URL du site en ligne (fonctionne sans accès au code source)

À utiliser quand : l'utilisateur a uniquement une URL publique.

Étapes :

Récupérez la page d'accueil avec WebFetch <url> et extrayez les blocs <style> en ligne et les liens de feuilles de style dans l'en-tête.
Récupérez la feuille de style principale (le plus grand lien CSS dans l'en-tête, généralement). curl -sL <css-url> | head -c 200000 suffit — cherchez les propriétés personnalisées CSS (--primary, --background, etc.) et les règles @font-face.
Cherchez un manifeste à /site.webmanifest, /manifest.json ou /manifest.webmanifest. Les manifestes contiennent theme_color, background_color et une liste d'icônes — une mine d'or pour les kits de marque.

Cherchez un favicon et un logo haute résolution :

curl -sL "<site>/favicon.ico" -o /tmp/favicon.ico
curl -sL "<site>/apple-touch-icon.png" -o /tmp/touch.png
# Ou extrayez depuis <link rel="icon"> dans le HTML de la page d'accueil

La plus grande icône PNG du site (Apple touch icon, icône du manifeste) est le logo de la marque.

Détectez la typographie : cherchez dans le CSS en ligne les déclarations font-family sur body, html ou h1. Si vous voyez des liens Google Fonts dans <head>, le nom de la famille est directement dans l'URL.

Si le site propose un frontend statique (Next.js, etc.), le CSS intégré contient souvent les mêmes propriétés personnalisées que la source de développement — vous pourrez donc peut-être récupérer la palette complète sans accès au dépôt.

Si vous n'obtenez que des informations partielles (par exemple, vous avez theme_color du manifeste mais pas de palette complète), passez au Chemin 3 pour combler les lacunes à partir du logo / d'une capture d'écran.

Chemin 3 — Extraction de palette à partir d'un logo ou d'une capture d'écran (la solution de repli qui fonctionne toujours)

À utiliser quand : l'utilisateur télécharge une image de logo, une capture d'écran de sa page d'accueil ou un fichier PNG/JPG d'actif de marque.

L'utilisateur a généralement une image — un logo sur le bureau, un avatar Slack, une capture d'écran du site web. Extrayez directement une palette avec FFmpeg :

# Générer une petite image de palette (max 6 couleurs distinctes) à partir de n'importe quelle image.
ffmpeg -y -i <input.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# Lire ces couleurs de palette en hexadécimal. L'en-tête PPM est
#   P6\n<W> <H>\n255\n  → 13 octets pour la palette standard 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)}'

Sortie pour le logo cogny (dégradé C sur fond chaud foncé) :

#1D1B1B   ← fond
#5F4953   ← prune foncé
#BB93B9   ← lavande (couleur primaire de la marque)
#CA8B9D   ← rose corail
#D2858C   ← corail (accent)

Règles de mappage — la palette est triée par fréquence, mais l'attribution des rôles vous incombe :

Couleur la plus foncée → colors.background (si elle couvre >40 % des pixels)
Couleur la plus claire non blanche → colors.foreground (s'il n'y a pas de blanc cassé, valeur par défaut #fafafa)
La chrominance la plus saturée → colors.primary
La deuxième plus saturée → colors.accent

Jetez un œil à l'image d'origine une fois pour confirmer — l'attribution algorithmique des rôles réussit dans environ 70 % des cas.

Pour la typographie à partir d'une capture d'écran : la détection de polices par image n'est pas fiable. Soit :

Demandez à l'utilisateur ("la police du titre sur cette image est…?"), ou
Utilisez un outil gratuit comme WhatTheFont ou Fontspring Matcherator — montrez l'URL à l'utilisateur, n'essayez pas de le faire par programmation.

Optionnel : palette sémantique via node-vibrant (une seule installation npm, donne les catégories vibrant/muted/dark-vibrant/light-vibrant — plus utile pour le mappage des rôles primaire/accent) :

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>

Utilisez celui qui est disponible. FFmpeg est déjà livré avec les compétences vidéo, c'est donc l'outil par défaut.

Chemin 4 — Sélecteur de couleur / saisie manuelle (toujours disponible)

À utiliser quand : rien d'autre n'a fonctionné, ou l'utilisateur souhaite remplacer explicitement le kit.

Demandez, dans cet ordre, et acceptez des réponses partielles :

Hexadécimal du fond ? (le fond de page que les utilisateurs voient le plus)
Hexadécimal du texte ? (couleur du texte du corps)
Hexadécimal de la couleur primaire de la marque ? (la couleur d'un bouton ou d'un lien)
Hexadécimal de l'accent ? (optionnel — s'il y a une deuxième couleur de marque)
Famille de polices ? ("un sans-serif comme Inter", "JetBrains Mono", etc. — au mieux, les polices de remplacement système conviennent)

Trois couleurs et une police suffisent pour livrer.

Chemin 5 — Extraction de la voix (toujours exécuté, quel que soit le chemin de couleur)

La voix est la partie du kit de marque que les outils de copier-coller oublient. Elle modifie les accroches qu'une vidéo écrirait ou les titres qu'une compétence de rédaction publicitaire produirait.

Source pour la voix : l'accroche de la page d'accueil + 1 à 2 pages plus profondes (à propos, tarifs, blog).

Étapes :

Récupérez le texte d'accroche de la page d'accueil (h1, h2, le premier paragraphe après l'appel à l'action de l'accroche).
Récupérez une page profonde (/about ou /pricing généralement).
Lisez le contenu et produisez trois champs :

"voice": {
  "register": "<description en une ligne>",
  "do":   ["pattern 1", "pattern 2", "pattern 3"],
  "dont": ["mot banni 1", "mot banni 2"]
}

Exemples (réels, dérivés de la page d'accueil de chaque entreprise) :

Marque	registre	do	dont
cogny	"technique, direct, anti-jargon, esthétique CLI"	chiffres concrets, nommer le compromis, nommer l'outil	optimiser, débloquer, révolutionnaire, next-gen
Linear	"opérateur, catégorique, rapide"	deuxième personne, concis, langage de construction	entreprise, synergie, robuste
Mailchimp	"chaleureux, conversationnel, en français courant"	première personne, contractions amicales, appels à l'action clairs	utiliser, paradigme, optimiser

Si vous ne pouvez pas déduire la voix de la page (par exemple, page d'accueil très légère), demandez à l'utilisateur une phrase décrivant comment il souhaite sonner. Ne l'inventez pas.

Étapes (le flux réel)

Détectez l'entrée que l'utilisateur vous a donnée :
- URL → Chemin 2 → passez au 3 / 5 si nécessaire
- Chemin du dépôt → Chemin 1 → passez au 5
- Chemin de l'image → Chemin 3 + demandez l'URL du site ou le dépôt pour la voix (Chemin 5)
- Rien → Chemin 4 + demandez s'il a un logo à partir duquel extraire

Construisez le kit de manière incrémentale. Affichez l'état partiel après chaque étape pour que l'utilisateur puisse intervenir :

◆ Brand kit (cogny)
✓ colors    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
✓ type      JetBrains Mono / mono
◇ voice     en attente — récupération de /about pour analyse…

Montrez le résultat à l'utilisateur avant d'écrire le fichier. Il doit approuver les attributions de rôles de couleur (fond vs primaire, etc.) — ce sont les décisions importantes.
Écrivez brand-kit.json à l'emplacement le plus approprié (voir section Sortie). Si un kit existe déjà, faites un diff et demandez avant d'écraser.

Affichez une ligne d'installation pour les compétences consommatrices :

Sauvegardé → .agents/brand-kit.json
Utilisé par : /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
              /ad-copy-writer, /landing-page-review

Erreurs courantes

Traiter une seule couleur hexadécimale comme la marque — la plupart des marques ont une primaire + un accent + une paire fond-texte. Trois couleurs minimum.
Livrer sans voix — les couleurs portent la marque à 30 % ; la voix la porte à 70 %. Ne sautez pas le Chemin 5.
Utiliser les valeurs par défaut de shadcn comme marque — si le fichier CSS de l'utilisateur contient littéralement --primary: 240 5.9% 10% de shadcn, c'est un espace réservé, pas une marque. Recoupez avec la capture d'écran de la page d'accueil.
Sursaturer le kit avec des artefacts de dégradé du logo — l'extraction de palette à partir d'un logo dégradé renverra 4 à 5 couleurs de transition. Choisissez les extrémités (primaire + accent), supprimez les intermédiaires.
Laisser le bleu LinkedIn / le bleu Twitter / le rose TikTok s'infiltrer dans le kit — ce sont des couleurs d'interface utilisateur de plateforme qui apparaissent sur les captures d'écran, pas des couleurs de marque.
Faire aveuglément confiance à theme-color — les sites définissent parfois theme-color pour correspondre à la barre d'adresse de Safari mobile, ce qui est décoratif et peut ne pas correspondre à la couleur primaire réelle de la marque.

Liens connexes

/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video — consomment le kit
/ad-copy-writer — utilise les règles de voix pour écrire du contenu adapté à la plateforme
/landing-page-review — vérifie la cohérence entre une page d'accueil et le kit de marque
/non-commodity-content — l'extraction de voix chevauche l'étape d'interview de cette compétence

cognyai/claude-code-marketing-skills

Qu'est-ce que claude-code-marketing-skills ?

Demander à votre IA préférée

Documentation

Brand Kit

Utilisation

Sortie

Schéma

Chemin 0 — Arbre de contexte Cogny MCP (le moins coûteux, à exécuter en premier si connecté)

Chemin 1 — Dépôt avec variables Tailwind / CSS (meilleur signal)

Chemin 2 — URL du site en ligne (fonctionne sans accès au code source)

Chemin 3 — Extraction de palette à partir d'un logo ou d'une capture d'écran (la solution de repli qui fonctionne toujours)

Chemin 4 — Sélecteur de couleur / saisie manuelle (toujours disponible)

Chemin 5 — Extraction de la voix (toujours exécuté, quel que soit le chemin de couleur)

Étapes (le flux réel)

Erreurs courantes

Liens connexes

Skills associés

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code