Markenidentität

Was macht Markenidentität?

Der folgende Prozess ist dauerhaft. Bildmodelle, Symbol-Spezifikationen und Store-Größen ändern sich; prüfe vor dem Rendern immer die aktuelle Plattformspezifikation, und (checked 2026-10) markiert die Größen, die sich am wahrscheinlichsten ändern.

Skripte liegen in ~/claude-skills/tools/brand/. make_versus.py (die Tabelle in Schritt 3) und make_fonts.py (Schritt 5) laufen in jeder App wie sie sind. Der Rest (Prompts, Kandidatenzeichnung, Asset-Renderer, Store-Frames, Poster) wurde für eine App geschrieben und zeichnet deren Marke – lies diese also für die Methode und passe sie an. Sie benötigen rsvg-convert, Pillow, fontTools und headless Chrome.

1. Briefing

Ein gemeinsames Briefing, das jedem Konzept vorangestellt wird (tools/brand/logo-prompts.md ist ein ausgearbeitetes Beispiel):

• wo es verwendet wird (Launcher-Symbol, Store-Eintrag), sodass es bei 48px lesbar sein und als einfarbige Silhouette überleben muss
• flacher Vektor, solide Formen, keine Farbverläufe, Schatten, 3D, Texturen oder Text
• die genaue Palette als Hex, und "nichts weiter"
• ein zentriertes Zeichen auf einem abgerundeten quadratischen Kachel
• mehrere Variationen in einem Raster pro Durchlauf, sodass ein Durchlauf ein Konzept erkundet, anstatt auf eine einzige Darstellung zu setzen
• eine Verbotsliste der Klischees der Kategorie

Erledigt, wenn: das Briefing in einen Absatz passt und jedes Konzept eine zusätzliche Zeile ist.

2. Runden

• Runde 1: sechs oder sieben Konzepte plus ein offenes Briefing. Eins auswählen.
• Runde 2: den Gewinner halten und eine Achse pro Prompt variieren (geometrisch versus abgerundet, Bedeutung des Akzents, der Gegensatz, der kleine einfarbige Stresstest). Buchstabenanatomie in Worten beschreiben; Modelle verwechseln ähnliche Glyphen in verschiedenen Schriften.
• Vor dem Weitermachen anderen außerhalb des Builds zeigen. Wie eine Schrift, ein Symbol oder eine Farbe beim Publikum ankommt, kann ein Zeichen ruinieren, das kein Prompt abfangen würde. Ein externer Kommentar ist eine ganze Runde wert.
• Runde 3 Test: Könnte ein Kind es nach einem einzigen Blick aus dem Gedächtnis zeichnen? Jede Skizze demjenigen zuschreiben, der sie gezeichnet hat.

3. Vergleichstabelle

Die zwei oder drei Finalisten in Code (SVG-Strings) neu zeichnen und dann dem aussetzen, was ein Launcher-Symbol tatsächlich erlebt (make_versus.py macht das alles aus den SVGs):

• die Kreis- und Squircle-Masken
• eine unscharfe "auf einen Blick"-Ansicht
• thematische (monochrome) Symbole in hellen und dunklen Systemfarbtönen
• 48, 32, 24 und 16px, vergrößert dargestellt
• Flächendeckung und ein einzeiliges Fazit pro Kandidat

Vertraue der Tabelle mehr als einer Vorliebe. Ein Zeichen, das erklärt werden muss, verliert gegen eines, das zuerst für sich selbst spricht.

Erledigt, wenn: ein Kandidat in der Tabelle gewinnt und ich in einem Satz sagen kann, warum.

4. Eine Zeichnung, jedes Asset

Der Gewinner wird eine Funktion mit Parametern (Farben, Details je nach Größe an- oder ausgeschaltet). Ein Skript rendert jedes Asset daraus; icon-assets.md enthält die Matrix und die Regel hinter jeder Größe. In der App das Zeichen mit einer Komponente aus denselben Zahlen zeichnen, anstatt PNGs auszuliefern, damit es bei jeder Größe scharf ist und im Dunkelmodus die Farbe wechseln kann.

Dann ein Logo-Kit (Logovarianten und reines Zeichen, hell und dunkel, SVG und PNG) in den Repo-Dokumenten, damit niemand die App für ein Logo abfotografiert.

5. Schrift

Schriften selbst hosten, mit fontTools auf woff2 subsetten (die Skripte, die das Produkt benötigt, plus Währung und Symbole), variable Achsen erhalten. Ein Build, der Schriften herunterlädt, hat eine Netzwerkabhängigkeit, die einen Deploy scheitern lassen kann. (checked 2026-10: next/font/google hat auf diese Weise einen Vercel-Build zum Scheitern gebracht.)

6. Store-Grafiken und Poster

• Store-Frames als HTML über headless Chrome rendern in den aktuellen Store-Größen (checked 2026-10: Play-Telefonaufnahmen 1080x1920, Feature-Grafik 1024x500, Listing-Symbol 512px RGB ohne Alpha). Echte Aufnahmen eines echten Telefons in einem gezeichneten Frame verwenden. Chrome kann nach dem Schreiben mit einem Nicht-Null-Exit-Code beenden, also die Ausgabedatei als Erfolgssignal behandeln.
• Kein echter Name oder echte Daten eines Benutzers auf einem Bildschirm, und jede Behauptung im Text muss für den Build unter Überprüfung zutreffen.
• Hochladen mit play.py icon und play.py art (siehe expo-release). Das Listing-Symbol ist ein eigenes Asset; kein Build ändert es.
• Poster und Thumbnails: für jeden Zuschnitt entwerfen, den die App macht, und jedes Rendering in einen neuen Pfad hochladen (siehe mobile-performance, Images).