ReScienceLab/super-prototyping

Marken-Kit

Ein Canvas-Ordner enthält Boards: HTML-Zeichenflächen, die du gebaut hast. Dies fügt demselben Ordner eine zweite Art von Zeile hinzu — vom Unternehmen veröffentlichte Bilder, angeordnet als Bildformen statt als Boards. Logos, Schriftmuster, Store-Screenshots, Social-Posts, Anzeigenmotive, Pressefotografie.

Der Sinn ist der Vergleich in einer Spalte. Zeilen sind Oberflächen, keine Asset-Typen, daher liegt der Avatar auf X über dem Avatar auf Instagram über dem Avatar auf TikTok, und einer, der von den anderen abweicht, zeigt sich als Bruch in der Spalte und nicht als etwas, das du suchen musst.

Lies references/sources.md vor dem Sammeln. Es ist das Playbook pro Oberfläche, in Ertragsreihenfolge, mit den Aufrufen. Lies references/manifest.md, wenn du mit dem Schreiben des Manifests und der Verkabelung des Generators beginnst; es enthält das Schema, das Verifikationsskript und die gen.py-Regel.

Was du produzierst

canvases/<slug>/
  assets/brand/
    manifest.json          die Quelle der Wahrheit: Zeilen in kanonischer Reihenfolge
    identity/  social/  stores/  ads/  press/
  gen.py                   liest das Manifest, fügt seine Zeilen an layout.json an
  layout.json              was die Canvas und die Markenseite tatsächlich rendern

assets/brand/ ist der einzige Teil von assets/, dem die Canvas eine URL gibt. Der Generator bindet alles andere unter assets/ als data:URI in ein Board ein, daher muss ein Bild, das seine eigene Form sein soll, hier leben.

Die sieben Schritte

Schreibe das Manifest niemals zuerst. Jede Datei darin muss bereits die Verifikation bestanden haben. Eine Datei, die fehlschlägt, wird gelöscht; sie erhält keinen Manifesteintrag mit einem Vorbehalt in der Beschriftung.

1. Sieh dir ein fertiges an. Die App enthält zwölf. Liste sie auf und gib die Zeilen eines aus:

   KIT="$(sp root)"
   ls "$KIT"/canvases/*/assets/brand/manifest.json
   python3 -c 'import json,sys
   for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \
     "$KIT/canvases/claude-ios/assets/brand/manifest.json"
   

   sp nicht gefunden? Führe sh <sp-canvas skill dir>/scripts/install.sh aus (Windows: install.ps1) und folge den references/install.md dieses Skills. Eine [super-prototyping:notice]-Zeile in seiner stderr enthält seine eigene Regel: beende den Schritt, dann tue, was sie sagt.
2. Die eigene Marke oder der Pressekit des Unternehmens. Vollauflösende Logos, die Schrift und die Farbwerte stammen von hier, also überprüfe dies zuerst. Siehe references/sources.md.
3. Store-Listings. Die zuverlässigste Massenquelle, und eine API gibt alle Screenshots auf einmal zurück.
4. Social. Der Avatar, das Banner und 4–8 gepostete Bilder pro Plattform. Überprüfe zuerst jeden Handle — siehe „Überprüfe den Account, nicht den Handle“ unten.
5. Marketing-Website und Newsroom. Hero-Art, Feature-Seiten-Illustrationen, og:image-Karten, Pressefotografie.
6. Überprüfe jede Datei. Bytes, Erweiterung, Abmessungen, Größe, Duplikate. references/manifest.md enthält das Skript. Es muss KEINE PROBLEME ausgeben.
7. Schreibe das Manifest, verkabele gen.py, generiere neu, betrachte es im Browser.

Zeilen sind ein festgelegter Wortschatz

Zeilentitel stammen aus dieser Liste, und die Zeilen, die du schreibst, müssen als Teilsequenz davon erscheinen: diese Reihenfolge, wobei alle weggelassen werden, die nicht zutreffen.

Logo & Wortmarke · Schriftart · Art Direction · Angewandte Identität ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
Ankündigungskarten · Bezahlte Werbung · Pressefotografie

Identität zuerst, dann eine Zeile pro Plattform. Zwei dieser Titel sind nicht selbsterklärend, daher hier die Übereinstimmung mit den ausgelieferten Ordnern:

• Art Direction ist der Bildstil, den das Unternehmen selbst veröffentlicht: Illustrationssysteme, Hero-Art, Fotografie-Bearbeitung, Charakterstudien, Richtlinien-Art.
• Angewandte Identität ist die Identität auf Dingen: Produkt-UI, Poster, Beschilderung, Bühnenbilder, Merchandise.

Erfinde keinen Zeilentitel. Wenn eine Oberfläche für dieses Produkt nicht existiert, lasse sie weg: Eine fehlende Zeile ist korrekt, eine leere Zeile ist ein Fehler, und eine Zeile mit Material von etwas anderem ist eine Lüge.

Wie viel

Die zwölf ausgelieferten Ordner enthalten 50 bis 144 Assets, die meisten zwischen 70 und 120. Breite über Oberflächen ist der Sinn, daher schlagen 4–8 gepostete Bilder pro Social-Plattform vierzig Screenshots aus einem Store – aber eine Store-Zeile nimmt alles, was der Store hat, was in diesen Ordnern 4 bis 20 sind.

Fünf Regeln, die entscheiden, was hineinkommt

Herkunft ist binär und niemals eine Vermutung

„theirs“ bedeutet, dass das Unternehmen es veröffentlicht hat. „archive“ bedeutet, dass ein kuratiertes Markenarchiv es getan hat, und ein Archiv zählt nur dann, wenn es die ursprüngliche Quelle und das Datum für jedes Element benennt. Wenn du keins von beidem feststellen kannst, kommt das Asset nicht hinein. Das ist der ganze Grund, warum das Blatt existiert: Ein Bild gibt an, woher es stammt, und etwas, das von einem Dritten kuratiert wurde, gibt niemals als etwas durch, das das Unternehmen herausgegeben hat.

Überprüfe den Account, nicht den Handle

Vertraue keinem Handle, den du bekommen hast, auch nicht einem, der in einem Pflichtenheft steht. Bestätige, dass er aufgelöst wird, dass er verifiziert ist, wo es Verifikation gibt, und dass es das richtige Unternehmen ist. Gekaperte und ruhende Lookalike-Accounts sind häufig: Bei einem Durchlauf stellte sich heraus, dass @tiktok auf X ein nicht zusammenhängender lokaler Angebots-Account war und der des Unternehmens @tiktok_us war.

Gib in deinem Bericht an, welche Handles und Store-IDs du verwendet hast und welche sich als falsch herausgestellt haben.

Ein 200 ist kein Beweis dafür, dass die Seite existiert

Marketing-Websites und Newsrooms sind normalerweise Single-Page-Apps, die HTTP 200 für jeden Pfad liefern, auch für einen, den du erfunden hast. Überprüfe stattdessen den gerenderten <title>. Ein echter Artikel hat einen eigenen; ein erfundener Slug erhält den generischen Titel der Website:

curl -sL "$URL" | grep -o '<title>[^<]*</title>'

Führe das zuerst gegen einen absichtlich falschen Slug auf derselben Website aus, damit du weißt, wie sein generischer Titel aussieht. Jeder Slug, der mit dem generischen Titel zurückkommt, existiert nicht: Wirf ihn weg und wirf alles weg, was du daraus entnommen hast.

Dieselben Bytes zweimal sind ein Asset

Nach jedem Download-Batch, vom Canvas-Ordner aus:

find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d

Es muss nichts ausgeben. Wenn ein Hash kollidiert, lösche die neue Kopie. Beschnitte und Größenänderungen eines Bildes sind nicht byte-identisch und werden von keinem Tool hier erfasst – das prüfst du mit dem Auge und behältst das größere.

Die Erweiterung muss zu den Bytes passen

file <Pfad> ist die Autorität, nicht die URL, von der du heruntergeladen hast. PNG als .jpg gespeichert, WebP als .png gespeichert und eine HTML-Challenge-Seite als .jpg gespeichert – das ist alles schon vorgekommen. Benenne entsprechend um. HEIF wird konvertiert, nicht umbenannt, weil kein Browser hier es zeichnen wird:

sips -s format jpeg in.heic --out out.jpg

Wo die Dateien hinkommen

Gruppe	enthält
identity	Logo, Wortmarke, Schriftmuster, Farbe, Art Direction, angewandte Identität
social	X, Instagram, TikTok, YouTube, LinkedIn
stores	App Store, Google Play, Microsoft Store
ads	kreative Werbemittel, Ankündigungskarten
press	Pressefotografie

Verwende diese fünf Namen; erfinde keine parallelen. Benenne eine Datei nach dem, was sie ist (x-avatar.jpg, appstore-iphone-03.jpg, wordmark-black.svg).

Einige Ordner enthalten bereits ein Bild unter assets/brand/, das der Generator in ein Board einbindet, anstatt es als Zeile zu zeichnen – ein Profilfoto, das ein Mockup verwendet, zum Beispiel. Diese sind kein Markenmaterial; lasse sie genau so, wie sie sind, und außerhalb des Manifests. Finde sie, bevor du beginnst:

git ls-files assets/brand/

Jeder Pfad, der ausgegeben wird, kommt in die IGNORE-Menge des Verifikationsskripts, relativ zum Canvas-Ordner geschrieben, so wie das Skript vergleicht.

Verkabelung

Eine Konstante neben den anderen Verzeichniskonstanten des Ordners:

BRAND_DIR = OUT / "assets" / "brand"

und eine Zeile, wo dieser Ordner seine Zeilenliste abschließt. Generatoren kommen hier in zwei Formen, also passe den an, der vor dir liegt:

    rows += json.loads((BRAND_DIR / "manifest.json").read_text())        # innerhalb von layout()
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text())  # Modulebene LAYOUT

Die Markenzeilen kommen nach jeder Board-Zeile, und das Lesen ist bedingungslos, ohne if BRAND_DIR.exists(). Füge die Zeile erst hinzu, wenn das Manifest existiert, sonst löst python3 gen.py einen FileNotFoundError beim Lesen aus.

Dann python3 gen.py und überprüfe, dass der Diff zu layout.json eine reine Hinzufügung ist. Wenn er Zeilen löscht, stoppe und lies den Abschnitt „gen.py muss ein No-op sein“ in references/manifest.md; du hast einen echten Fehler gefunden und das Neugenerieren würde den Schaden begehen.

Die Canvas nimmt den Ordner ohne weitere Änderung auf: Die Zeile wird gerendert, der „Marken-Kit“-Button erscheint in der Symbolleiste und der Ordner erscheint im Schalter der Markenseite.

Überprüfe im Browser, bevor du berichtest

Öffne beide Seiten für den Ordner auf dem Dev-Server:

http://127.0.0.1:<port>/?canvas=<slug>            die Canvas
http://127.0.0.1:<port>/brand.html?canvas=<slug>  das Marken-Kit

Führe dies auf dem Marken-Kit aus, nicht auf der Canvas. Lazy Loading bedeutet, dass ein Bild, das nie in den Sichtbereich gescrollt wurde, auch nie fehlgeschlagen ist, also erzwinge es und zähle:

const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length;  // muss 0 sein

Die Canvas zeichnet ihre Markenzeilen als tldraw-Shapes und schneidet die außerhalb des Bildschirms ab, daher beweist dieselbe Anzahl dort nichts. Zoome stattdessen auf Anpassung und schaue.

Bericht

• Die vollständige Ausgabe des Verifikationsskripts, einschließlich der Zeilentabelle.
• Ob das Unternehmen ein formelles Marken- oder Presse-Kit veröffentlicht, und dessen URL.
• Welche Accounts, Handles und Store-IDs du verwendet und verifiziert hast und welche sich als falsch, ruhend, gekapert oder ein anderes Unternehmen herausgestellt haben.
• Jeden Kandidaten, den du abgelehnt hast, und warum: 404, blockiert, nicht Erstanbieter, zu klein, Duplikat, falsches Unternehmen.
• Was du nicht erreichen konntest, aufgeteilt in das, was nicht existiert, und das, was existiert, aber von hier aus blockiert war.

Klare Lücken sind besser als ein aufgeblähtes Manifest. Ein ehrliches „Dieses Produkt hat keinen Microsoft Store-Eintrag“ ist mehr wert als eine Zeile mit Screenshots von etwas anderem.