Brand Snapshot

Was macht Brand Snapshot?

Holen Sie sich die visuellen und verbalen Grundlagen einer Marke in Minuten auf zwei Seiten: Farben, die Sie mit Vertrauen verwenden können, die Schriftart und ihre kostenlosen Alternativen, wie das Logo und die UI sich verhalten, wie die Marke klingt, und Links zu den offiziellen Dateien. Es ist die Kurzversion des Markenabschnitts im Company-Brief-Skill.

Verwendung

/brand-snapshot <url oder markenname> [nur tokens]

Einfache Anfragen funktionieren auch:

• „Brand Snapshot für linear.app.“
• „Welche Farben und Schriftarten verwendet Patagonia?“
• „Hole Design-Tokens von stripe.com für einen Pitch-Mockup.“
• „Snapshot von Oatly und Liquid Death, nebeneinander.“ (erstellt je einen Snapshot)

„nur tokens“ überspringt die PDF und gibt tokens.json und tokens.css zurück.

Dateien. <skill-dir> bedeutet den Ordner dieses Skills, der diese SKILL.md enthält. Vorlagen befinden sich in assets/, Skripte in scripts/, und die gemeinsamen PDF-Schritte (Schriftarten, Farben, Rendern, Prüfen) sind in references/rendering.md.

Harte Regeln

• Live-Website zuerst. Farben und Schriftarten stammen aus den berechneten Stilen der Website (references/brand-extraction.md), gekennzeichnet als Verifiziert und datiert. Offizielle Richtlinien oder ein Press Kit haben Vorrang vor der Website, wenn sie widersprechen; beides notieren. Drittanbieterquellen wie Brandfetch sind als Berichtet gekennzeichnet.
• Logos beschreiben, nicht kopieren. Beschreiben Sie das Markenzeichen und das Wortzeichen in Worten und verlinken Sie das offizielle Press Kit oder Markenportal. Zeichnen Sie niemals ein Logo, Maskottchen oder Werbebilder nach, umfahren oder einbetten. Farbfelder und Schriftmuster, die in einer Ersatzschriftart gesetzt sind, sind in Ordnung.
• Sagen Sie, was ein Ersatz ist. Wenn eine Markenschriftart kostenpflichtig oder benutzerdefiniert ist, nennen Sie sie, nennen Sie die Schriftgießerei, und setzen Sie Muster in der nächsten kostenlosen Entsprechung, als solche gekennzeichnet.
• Nutzungsbedingungen gelten. Erinnern Sie den Leser daran, dass die Assets der Marke der Marke gehören und deren Richtlinien die Nutzung bestimmen.
• Quellenangabe: Der Snapshot endet mit einem kleinen Beautiful-Engine-Hinweis. Lassen Sie ihn weg, wenn die Person darum bittet.

Arbeitsablauf

1. Öffnen Sie die Website in einem Browser, falls verfügbar (die Domain einmal bestätigen, wenn gefragt); andernfalls abrufen. Bestätigen Sie, dass es die Marke ist, die die Person meint.
2. Extrahieren Sie mit dem Skript in references/brand-extraction.md, Abschnitt 1, auf der Startseite und einer weiteren Seite (Preise, Produkt oder Über uns): Überschriftenstil, geladene Schriftarten, Farben nach Bildschirmbereich, Stylesheet-Farben, CSS-Custom-Properties, Verläufe, Button- und Kartenstile sowie Logo-Informationen. Zoomen Sie einen Screenshot auf das Logo, um es zu beschreiben, und auf den Hero, um die Bildsprache zu beschreiben.
3. Prüfen Sie offizielle Quellen: Suchen Sie nach dem Press Kit der Marke, dem Markenportal, der Designsystem-Website oder der Richtlinien-PDF sowie der Schriftgießerei für ihre Schriftarten. Notieren Sie Untermarken (Events, Produktlinien) separat.
4. Wählen Sie die Palette: 4–8 Farben in der Reihenfolge ihrer Wichtigkeit (Primär, Sekundär, Akzente, Neutrale), jede mit einem einfachen Namen und einer Rolle. Führen Sie dann aus: python3 <skill-dir>/scripts/palette.py --colors "Name:#hex,..." --font-display "…" --font-body "…" --font-mono "…" --radius 8px --brand "<Marke>" > swatches.html Es schreibt tokens.json und tokens.css und gibt die Farbfeldtabelle mit Kontrastprüfungen aus.
5. Schriftarten für die PDF: Installieren Sie die kostenlosen Schriftarten der Marke oder Ersatzschriftarten mit scripts/fonts.py, und führen Sie scripts/tokens.py mit der Primär- und Akzentfarbe der Marke aus, damit der Snapshot selbst die Marke trägt (references/rendering.md).
6. Stimme: 3–4 Eigenschaften, jede mit einem echten Satz von der Website in Anführungszeichen.
7. Erstellen Sie aus assets/snapshot-template.html (kopieren Sie base.css), fügen Sie die Farbfeldtabelle ein, rendern, prüfen, und überprüfen Sie das Kontaktblatt. Zwei Seiten; kürzen Sie eher, als auf eine dritte Seite auszuweichen.
8. Liefern Sie die PDF, tokens.json und tokens.css. In der Antwort: die Primär- und Akzentfarben mit Hex, die Schriftarten und Ersatzschriftarten, und wo die offiziellen Richtlinien sind (oder dass keine öffentlich sind).

Ausgabename: <Marke>-Brand-Snapshot-<YYYY-MM>.pdf.