cognyai/claude-code-marketing-skills

Marken-Kit

Erstelle ein brand-kit.json, das das Produkt des Nutzers so beschreibt, dass es von anderen Skills konsumiert werden kann – Farben, Schriftart, Stimme, Do's/Don'ts-Sprache, optionales Logo. Andere Cogny-Skills (/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video, /landing-page-review, /ad-copy-writer) lesen diese Datei, wenn sie vorhanden ist.

Der Skill ist auf die Realität ausgelegt, dass Nutzer nicht immer Zugriff auf den Quellcode ihrer Website haben. Es gibt sechs Pfade zu einem Kit, in Prioritätsreihenfolge. Höre beim ersten auf, der genug liefert.

Verwendung

/brand-kit https://example.com — extrahiere von einer Live-Website /brand-kit ~/git/our-site — extrahiere aus einem lokalen Repository (Tailwind / CSS-Variablen) /brand-kit ~/Desktop/logo.png — extrahiere Palette aus einem Logo oder Screenshot /brand-kit ~/Desktop/homepage.png logo.png — kombiniere Website-Screenshot + Logo /brand-kit — befrage den Nutzer

Ausgabe

Ein brand-kit.json, geschrieben an (in Prioritätsreihenfolge, je nach Setup des Nutzers):

1. .agents/brand-kit.json (falls .agents/ existiert)
2. .claude/brand-kit.json (falls .claude/ existiert)
3. ./brand-kit.json (ansonsten – aktuelles Arbeitsverzeichnis)

Gib immer den Pfad aus, in den geschrieben wurde, damit der Nutzer die Datei verschieben kann.

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":   "technisch, direkt, anti-Jargon, CLI-Ästhetik",
    "person":     "erste Person Plural (wir / euer)",
    "do":         ["konkrete Zahlen", "nenne den Kompromiss", "nenne das Tool"],
    "dont":       ["hebelwirkung", "freischalten", "revolutionär", "nächste Generation"]
  },
  "source": "repo: ~/git/cogny/tailwind.config.ts + src/index.css",
  "captured_at": "2026-04-25"
}

Minimal brauchbares Kit: colors.background, colors.foreground, colors.primary, type.family, voice.register. Nicht ohne alle fünf ausliefern.

---

Pfad 0 — Cogny MCP Kontextbaum (günstigster, zuerst ausführen wenn verbunden)

Verwende, wenn: der cogny MCP-Server in .mcp.json ist. Der Nutzer hat möglicherweise bereits seine Marke dokumentiert – Stimme, Palette, Ton – in seinem Kontextbaum, in diesem Fall ist Scraping redundant.

mcp__cogny__get_context_tree_overview              # sieh, was dokumentiert ist
mcp__cogny__search_context query="brand"           # Palette, Stimme, Ton, Design-Tokens
mcp__cogny__search_context query="positioning"     # Stimme + Register leben hier oft
mcp__cogny__read_context_node node_id="…"

Wenn der Baum Marken-/Paletten-/Stimmen-Knoten zurückgibt, befüll das Kit aus diesen Werten. Überprüfe nur dann mit Pfad 1 oder 3, wenn etwas veraltet oder widersprüchlich erscheint.

Wenn der cogny MCP nicht verbunden ist oder der Baum nichts Markenbezogenes enthält, falle durch zu Pfad 1.

Pfad 1 — Repository mit Tailwind / CSS-Variablen (bestes Signal)

Verwende, wenn: der Nutzer Zugriff auf den Quellcode der Website hat.

Suche in dieser Reihenfolge:

# Tailwind-Konfiguration – benutzerdefinierte Farbräume
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# CSS benutzerdefinierte Eigenschaften (die meisten modernen Stacks)
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# Design-Tokens
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Wenn du eine Tailwind-Konfiguration findest, suche nach einem benutzerdefinierten Farbraum (üblicherweise der Markenname, z.B. cogny: {...}):

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

Wenn du eine CSS-Datei findest, durchsuche sie nach den kanonischen benutzerdefinierten Eigenschaften:

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

Ordne die Werte dem Kit-Schema zu. Wenn du sowohl --primary (HSL oder Hex) als auch einen Tailwind-Namespace findest, bevorzuge den Tailwind-Namespace – er ist normalerweise die explizite Markenabsicht und kein shadcn-Standardwert.

Schrifterkennung in denselben Dateien:

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

---

Pfad 2 — Live-Website-URL (funktioniert ohne Quellcode-Zugriff)

Verwende, wenn: der Nutzer nur eine öffentliche URL hat.

Schritte:

1. Rufe die Startseite ab mit WebFetch <url> und extrahiere alle eingebetteten <style>-Blöcke und die Stylesheet-Links im Head.
2. Rufe das Haupt-Stylesheet ab (den größten CSS-Link im Head, normalerweise). curl -sL <css-url> | head -c 200000 ist ausreichend – suche nach CSS Custom Properties (--primary, --background, etc.) und @font-face-Regeln.
3. Suche nach einem Manifest unter /site.webmanifest, /manifest.json oder /manifest.webmanifest. Manifests enthalten theme_color, background_color und eine Icon-Liste – Gold wert für Marken-Kits.
4. Suche nach einem Favicon und einem hochauflösenden Logo:

   curl -sL "<site>/favicon.ico" -o /tmp/favicon.ico
   curl -sL "<site>/apple-touch-icon.png" -o /tmp/touch.png
   # Oder extrahiere aus <link rel="icon"> im HTML der Startseite
   

   Das größte PNG-Icon auf der Website (Apple Touch Icon, Manifest-Icon) ist das Markenzeichen.
5. Erkenne die Typografie: suche im Inline-CSS nach font-family-Deklarationen auf body, html oder h1. Wenn du Google Fonts-Links im <head> siehst, steht der Familienname direkt in der URL.

Wenn die Website ein statisches Frontend ausliefert (Next.js usw.), enthält das gebündelte CSS oft dieselben benutzerdefinierten Eigenschaften wie die Entwicklungsquelle – du könntest also trotzdem die komplette Markenpalette ohne Repository-Zugriff wiederherstellen.

Wenn du nur Teilinformationen erhältst (z.B. theme_color aus dem Manifest, aber keine vollständige Palette), fahre mit Pfad 3 fort, um Lücken aus dem Logo / einem Screenshot zu füllen.

---

Pfad 3 — Extraktion der Farbpalette aus Logo oder Screenshot (der Ausweichpfad, der immer funktioniert)

Verwende, wenn: der Nutzer ein Logo-Bild, einen Screenshot seiner Startseite oder eine Marken-Asset-Datei (PNG/JPG) hochlädt.

Der Nutzer hat normalerweise irgendein Bild – ein Logo auf dem Desktop, einen Slack-Avatar, einen Website-Screenshot. Extrahiere eine Palette direkt mit FFmpeg:

# Erzeuge ein kleines Palettenbild (max. 6 verschiedene Farben) aus einem beliebigen Bild.
ffmpeg -y -i <eingabe.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# Lies die Palettenfarben als Hex zurück. Der PPM-Header ist
#   P6\n<B> <H>\n255\n  → 13 Bytes für die Standard-16x16-Palette.
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)}'

Ausgabe für das cogny-Logo (Farbverlauf C auf dunklem, warmen Hintergrund):

#1D1B1B   ← Hintergrund
#5F4953   ← tiefes Pflaume
#BB93B9   ← Lavendel (primäre Marke)
#CA8B9D   ← Koralle-Rosa
#D2858C   ← Koralle (Akzent)

Zuordnungsregeln – die Palette ist nach Häufigkeit sortiert, aber die Rollenzuordnung musst du treffen:

• Dunkelste Farbe → colors.background (wenn sie >40% der Pixel abdeckt)
• Hellste Nicht-Weiß-Farbe → colors.foreground (wenn es kein gebrochenes Weiß gibt, Standard #fafafa)
• Gesättigtster Farbton → colors.primary
• Zweitgesättigtster → colors.accent

Wirf einen Blick auf das Originalbild und bestätige – algorithmische Rollenzuordnung liegt in ~70% der Fälle richtig.

Für Typografie aus einem Screenshot: bildbasierte Schrifterkennung ist unzuverlässig. Entweder:

• Frage den Nutzer ("Die Überschriftenschrift auf diesem Bild ist…?"), oder
• Verwende ein kostenloses Tool wie WhatTheFont oder Fontspring Matcherator – zeige dem Nutzer die URL, versuche nicht, es programmatisch zu erledigen.

Optional: semantische Palette via node-vibrant (eine npm-Installation, liefert Kategorien vibrant/muted/dark-vibrant/light-vibrant – nützlicher für die Zuordnung von Primär-/Akzentrollen):

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));
  });
" <eingabe.png>

Verwende, was verfügbar ist. FFmpeg ist bereits mit den Video-Skills ausgeliefert, das ist also der Standard.

---

Pfad 4 — Farbwähler / manuelle Eingabe (immer verfügbar)

Verwende, wenn: nichts anderes funktioniert hat oder der Nutzer das Kit explizit überschreiben möchte.

Frage in dieser Reihenfolge und akzeptiere Teilantworten:

1. Hintergrund-Hex? (der Seitenhintergrund, den Nutzer am meisten sehen)
2. Vordergrund-Hex? (Textkörperfarbe)
3. Primäre Marken-Hex? (die Farbe, die ein Button oder Link verwendet)
4. Akzent-Hex? (optional – falls es eine zweite Markenfarbe gibt)
5. Schriftfamilie? ("eine serifenlose wie Inter", "JetBrains Mono", usw. – nach bestem Wissen, System-Fallbacks sind in Ordnung)

Drei Farben und eine Schriftart reichen zum Ausliefern.

---

Pfad 5 — Spracherkennung (immer ausführen, unabhängig vom Farbpfad)

Stimme ist der Teil eines Marken-Kits, den Copy-Paste-Tools vergessen. Sie ändert, welche Schwerpunkte ein Video setzt oder welche Schlagzeilen ein Werbetext-Skill produziert.

Quelle für die Stimme: der Hero-Bereich der Startseite + 1–2 tiefergehende Seiten (Über uns, Preise, Blog).

Schritte:

1. Rufe den Hero-Text der Startseite ab (h1, h2, der erste Absatz nach dem Hero-CTA).
2. Rufe eine tiefere Seite ab (/about oder /pricing normalerweise).
3. Lies den Text und erstelle drei Felder:

"voice": {
  "register": "<einzeilige Beschreibung>",
  "do":   ["Muster 1", "Muster 2", "Muster 3"],
  "dont": ["verbotenes Wort 1", "verbotenes Wort 2"]
}

Beispiele (real, abgeleitet von den Startseiten der jeweiligen Unternehmen):

Marke	register	do	dont
cogny	"technisch, direkt, anti-Jargon, CLI-Ästhetik"	konkrete Zahlen, nenne den Kompromiss, nenne das Tool	hebelwirkung, freischalten, revolutionär, nächste Generation
Linear	"operativ, meinungsstark, schnell"	zweite Person, knapp, Build-Mode-Sprache	Enterprise, Synergie, robust
Mailchimp	"warm, gesprächig, einfaches Englisch"	erste Person, freundliche Zusammenziehungen, klare CTAs	nutzen, Paradigma, hebelwirkung

Wenn du die Stimme nicht aus der Seite ableiten kannst (z.B. sehr dünne Startseite), bitte den Nutzer um einen Satz, der beschreibt, wie sie klingen wollen. Erfinde nichts.

---

Schritte (der tatsächliche Ablauf)

1. Erkenne, welche Eingabe der Nutzer dir gegeben hat:

   • URL → Pfad 2 → falle durch zu 3 / 5, falls nötig
   • Repository-Pfad → Pfad 1 → falle durch zu 5
   • Bild-Pfad → Pfad 3 + frage nach Website-URL oder Repository für Stimme (Pfad 5)
   • Nichts → Pfad 4 + frage, ob sie ein Logo zur Extraktion haben

2. Baue das Kit schrittweise auf. Gib nach jedem Schritt den Zwischenstand aus, damit der Nutzer eingreifen kann:

   ◆ Marken-Kit (cogny)
   ✓ Farben    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
   ✓ Schrift   JetBrains Mono / mono
   ◇ Stimme    ausstehend – rufe /about zur Analyse ab…
   

3. Zeige dem Nutzer das Ergebnis, bevor du die Datei schreibst. Er sollte Farbrollenzuweisungen (Hintergrund vs. Primär, etc.) genehmigen – das sind die entscheidenden Entscheidungen.

4. Schreibe brand-kit.json an den am besten geeigneten Speicherort (siehe Abschnitt Ausgabe). Wenn bereits ein Kit existiert, zeige die Unterschiede und frage vor dem Überschreiben.

5. Gib einen einzeiligen Installationshinweis für die verbrauchenden Skills aus:

   Gespeichert → .agents/brand-kit.json
   Verwendet von: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
                  /ad-copy-writer, /landing-page-review
   

Häufige Fehler

1. Eine einzelne Hex-Farbe als Marke behandeln – die meisten Marken haben eine Primärfarbe + einen Akzent + ein Hintergrund-Vordergrund-Paar. Mindestens drei Farben.
2. Ohne Stimme ausliefern – Farben tragen 30% zur Marke bei; die Stimme trägt 70%. Überspringe Pfad 5 nicht.
3. shadcn-Standardwerte als Marke verwenden – wenn die CSS-Datei des Nutzers das wörtliche shadcn --primary: 240 5.9% 10% enthält, ist das ein Platzhalter, keine Marke. Überprüfe es mit dem Startseiten-Screenshot.
4. Das Kit mit Farbverlauf-Artefakten aus dem Logo übersättigen – die Palettextraktion aus einem Farbverlaufs-Logo liefert 4–5 Übergangsfarben. Wähle die Endpunkte (Primär + Akzent), verwerfe die Zwischentöne.
5. LinkedIn-Blau / Twitter-Blau / TikTok-Pink in das Kit schleichen lassen – das sind Plattform-UI-Farben, die in Screenshots eindringen, keine Markenfarben.
6. Blind theme-color vertrauen – Websites setzen theme-color manchmal auf die Farbe der Adressleiste von mobilem Safari, was dekorativ ist und nicht unbedingt der tatsächlichen Markenprimärfarbe entspricht.

Verwandte

• /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video – konsumieren das Kit
• /ad-copy-writer – verwendet Stimmenregeln, um plattformgerechte Texte zu schreiben
• /landing-page-review – prüft die Konsistenz zwischen einer Landing Page und dem Marken-Kit
• /non-commodity-content – Stimmenerkennung überschneidet sich mit dem Interview-Schritt dieses Skills