Marken-Referenzpaket

Was macht Marken-Referenzpaket?

Das Paket ist Kontext, nicht Content. Es hält fest, was die Marke bereits ist (Zielgruppe, Stimme, visuelle Sprache, Tokens und die Screens und Texte, auf denen jede Behauptung basiert), sodass später Formate, Skripte und Designentscheidungen daraus getroffen werden können. Keine Hooks, Skripte oder Serien im Paket. Wenn eine Quelle einen vorschlägt, notiere die Quelle und lasse die Entscheidung offen.

Wo es sitzt:

upstream (Strategie) ──→ dieser Skill (beobachtete Marke) ──→ downstream (Formate, Skripte, Reels)
ICP · VOC · Markenstimme   was die Oberflächen sagen/zeigen      Script-to-Reel, Shader-Lab

Dieser Skill legt nicht ICP, Voice of Customer oder Markenstimme fest. Er findet die Upstream-Artefakte, prüft die Oberflächen gegen sie und markiert jedes als verifiziert / abgeleitet / fehlend (Paket §0). Lücken gehen zurück an Upstream; überdecke sie hier nicht.

Dateien:

• template.md: die Abschnittsstruktur des Pakets.
• scripts/: generische Erfassungs- und Rendering-Hilfsmittel.
• apps/<app>/: ein Ordner pro App mit ihren URLs, Flow-Rezept, Besonderheiten, Produktionsregeln und PDF-Layout.
  • Lies zuerst apps/<app>/README.md. Für eine neue App erstelle es während des Aufnahmeprozesses.

Die folgenden Befehle sind relativ zu diesem Skill-Ordner (.claude/skills/brand-reference-pack/) angegeben, und die Ausgabepfade sind relativ zu dem Ort, von dem aus du sie ausführst. Führe sie vom Projektstamm aus aus und stelle scripts/ den Skill-Pfad voran. pack_pdf.py löst seine Konfiguration relativ zum Skill auf.

0. Aufnahme (eine AskUserQuestion-Runde, nur bei neuer App)

Sammle:

• App-Name.
• Website-URL.
• Social-Media-Handles.
• App-Store-ID und Land (Play-Paket-ID falls relevant).
• Wie die App läuft: Simulator-Build, TestFlight, Web-App oder Emulator.
• Code-Repo-Pfad, falls vorhanden.
• Vorhandene Marken-, ICP- oder Forschungsdokumente.
• Welcher Flow der Kern-Flow ist.
• Was in der Produktion tabu ist.
• Ausgabeordner.

Schreibe die Antworten in apps/<app>/README.md.

1. Grundlagenprüfung (ICP, VOC, Markenstimme)

Suche für jede Grundlage nach dem Upstream-Artefakt: einem Wiki- oder Docs-Ordner, Forschungsdecks, einem Markenbuch.

• ICP: eine definierte Zielkunde, die durch Daten oder Forschung gestützt wird. Notiere ihre Konfidenz und ihre Stichprobengröße.
• Voice of Customer: die eigenen Worte der Kunden aus Interviews, Bewertungen, Support oder Community. Testimonials auf der eigenen Website der Marke zählen nur als schwache Belege: sie sind kuratiert.
• Markenstimme: ein schriftlicher Stimmleitfaden oder Textregeln.

Halte jede in der §0-Tabelle des Pakets fest. Prüfe in den Schritten 2–5, ob die Live-Oberflächen mit dem Artefakt übereinstimmen. Abweichungen gehen in Offene Entscheidungen. Fehlt ein Artefakt, sage das und nenne die Upstream-Arbeit, die es füllen würde; erfinde die Grundlage nicht aus den Oberflächen.

2. Öffentliche Oberflächen (parallel wo möglich)

Jede Behauptung benötigt eine Datei in refs/.

Website:

node scripts/site.mjs <url> <brand>/refs/web

Dies speichert vollständige und Hero-Screenshots für Desktop und Mobil, plus site-styles.json mit Schriftarten (inklusive der echten Namen hinter Font-Host-IDs), Farben, Bildern, Links und dem Seitentext. Zerlege den Vollseiten-Screenshot in etwa 4 Teile, um ihn zu lesen.

App Store:

node scripts/store.mjs <id> <brand>/refs/store [country]

Dies speichert den Listungseintrag (die offizielle Positionierung), die Store-Screenshots und Bewertungen als rohes VOC-Material.

Soziale Medien (im integrierten Browser):

• Lehne optionale Cookies ab.
• Grid: sammle src und alt jedes Beitragsbildes, zeichne sie auf eine Leinwand, ersetze die Seite damit und erstelle einen Screenshot.
• Bildunterschriften: Same-Origin-Fetch jeder Beitragsseite → og:description.
• Ohne Anmeldung bekommst du nur etwa 12 Beiträge. Sage das, und falls die Reels wichtig sind, bitte den Benutzer, sich anzumelden oder zu exportieren.
• Wenn du die Reels bekommst, notiere ihr Tempo, den Stil der Bildunterschriften und das Audio.
• Schreibe alles in refs/<platform>/.

Vorhandene Dokumente: Verwende einen Explore-Subagenten, um Zielgruppe, Versprechen, Terminologie, Stimmregeln und Behauptungen mit Dateizitaten zusammenzufassen.

3. Code-Tokens (falls es ein Repo gibt)

Verwende einen Explore-Subagenten, um das Theme für das verwendete Framework zu finden:

• Flutter ThemeData und Farbkonstanten
• Tailwind-Konfiguration
• CSS-Variablen
• iOS-Asset-Kataloge
• Android colors.xml

Decke auch Schriftarten, Radien, Bewegungskonventionen, Shader, Logodateien und bemerkenswerten UI-Text ab. Überprüfe die Hex-Codes selbst. Schreibe tokens.json mit Farbrollen, der Schriftskala (skaliert auf 1080×1920), Form, Bewegung und Leinwand.

App-interne Texte: Extrahiere jeden benutzersichtbaren String aus dem UI-Code, wortwörtlich mit Datei:Zeile, für das Persona-Gehirn (Schritt 7):

python3 scripts/app_copy.py <quell-root> <persona>/raw/app-copy/app-copy-<datum>.md <ui-verzeichnisse/dateien…>

(Flutter: app/lib mit pages widgets constants models enums main.dart; --ext=.tsx usw. für andere Stacks.) Es filtert Logs, Keys und IDs; überfliege dennoch die Ausgabe auf Geheimnisse, bevor sie ins Gehirn gelangt.

4. Live-App-Walkthrough

Die reichhaltigste Quelle: Hier zeigt sich die tatsächliche visuelle und verbale Grammatik des Produkts.

• Einwilligung zuerst: lege genau dar, was der Lauf in die Produktion schreibt (Konto, Assessment-Antworten, generierte Berichte, Abschlüsse) und hole ein Ja. Der Benutzer erledigt jede Anmeldung und jeden Login. Gib niemals Anmeldedaten ein, abonniere niemals etwas, schreibe niemals einem KI-Coach.
• Beobachten und aufzeichnen: hänge das Simulator-Panel an (mcp__Claude_Code_iOS_Simulator__control attach).
  • Starte xcrun simctl io <UDID> recordVideo --codec=h264 --force <datei> im Hintergrund.
  • Stoppe es während der Anmeldung und starte ein neues danach, sodass nichts zugeschnitten werden muss.
  • Stoppe mit pkill -INT -f recordVideo.
• Steuere über Barrierefreiheitslabels, nicht über Koordinaten: UDID=… OUT=<brand>/refs/app scripts/ui.sh tree|shot|label|tap|swipe|hold.
  • Mache einen Shot von jedem neuen Bildschirm, benannt nach seiner Überschrift.
  • Warte, bis Animationen und CMS-Texte sich beruhigt haben, bevor du shootest; wenn eine Zeile nicht gerendert ist, gilt sie als "nicht erfasst".
  • Erstelle ein Kontaktblatt pro Phase (PIL, ein paar Zeilen) und lies das, nicht jedes PNG einzeln.
• Folge dem App-Rezept in apps/<app>/README.md. Füge neue Besonderheiten, die du triffst, wieder dort ein.
• Audio: die Simulator-Aufzeichnung hat keins. Wenn die App Sprache oder Audio hat, bitte den Benutzer um eine Quelldatei.
• Danach:
  • Nummeriere die Screenshots in Erfassungsreihenfolge neu.
  • Erstelle refs/app-flow-sheet.jpg.
  • Komprimiere die Aufnahmen: scale=540:-2,fps=30,crf 26.

5. Das Paket schreiben

Fülle template.md in <brand>/README.md.

• Zitiere nur, was du gesehen hast.
• Wo Oberflächen widersprechen, ist die neueste Live-Oberfläche der Arbeitsstandard und die Abweichung kommt in Offene Entscheidungen.
• §0 stammt aus Schritt 1.

6. Verifizieren

Gib einem frischen Subagenten das README und den refs/-Ordner, nicht deine Schlussfolgerungen. Bitte ihn, jede zitierte Zeile, jeden Hex-Wert und jede Behauptung gegen eine Datei zu prüfen und alles aufzulisten, was keine Quelle hat. Korrigiere oder markiere jedes Element vor der Rückgabe.

7. Ausgabe

• PDF: schreibe apps/<app>/pdf.json (kopiere das GetAhead-Beispiel: Cover, Schriftart, Akzent, Palettengruppen, die auf tokens.json verweisen, Textmusterseiten, Screenshot-Seiten). Führe dann aus:

  python3 scripts/pack_pdf.py apps/<app>/pdf.json
  

  Prüfe das Ergebnis als pdftoppm -r 40 Kontaktblatt.
• Dokumentation: wenn das Projekt ein Wiki oder Docs hat, lege das Paket dort gemäß dessen eigenen Konventionen ab (Seite, Index, Log, Konfliktflags auf den Seiten, die es ersetzt).
• Persona-Gehirn: wenn das Projekt eines hat (z. B. persona/, das Gehirn der Marke als Persona, aus dem die Skripterstellung spricht), kopiere die Aufnahmen des App-Walks in raw/app-run-<datum>/ und die App-internen Texte in raw/app-copy/ (mit dem Ja des Benutzers: raw/ gehört ihnen), führe dann den eigenen Ingest-Workflow des Gehirns aus (seine CLAUDE.md): Quellseiten, Konzeptseiten, Kartenneubau mit wortwörtlichen App-Zeilen. Das Paket zeichnet auf, wie die Marke aussieht; das Gehirn zeichnet auf, wie sie spricht – Skripte zehren vom Gehirn.
• Senden: das PDF und README, mit SendUserFile.
• Bericht:
  • was in die Produktion geschrieben wurde
  • was nicht erfasst wurde
  • der Status der Grundlagen
  • die offenen Entscheidungen