Inno-Merkle-TH/social-mockup-studio

Social Mockup Studio

Verwandelt eine Kurzbeschreibung in pixelgenaue Mockups von LINE-, Facebook- und TikTok-Bildschirmen für jede Marke auf iOS, Android oder Desktop. Das Kit trennt zwei Dinge, die niemals vermischt werden dürfen:

• Plattform-Chrome (Statusleiste, LINE-Header, FB-Tab-Leiste, TikTok-Leiste…) befindet sich in assets/kit.css. Sie sieht immer wie die echte App aus, niemals wie die Marke.
• Marken-Content (Flex-Nachrichten, Rich-Menu-Art, Werbekreativ, Avatar, CTA-Stil) wird ausschließlich durch die Variablen in <project>/brand.css gesteuert.

Markenwechsel = Austausch von brand.css + Bildern + Texten. Das macht Ergebnisse markenübergreifend vergleichbar.

Workflow

0. Preflight (vor der ersten Frage). Führe python3 scripts/preflight.py --brand <Marken-Seite> --surfaces <line,fb,tiktok> aus. Gib die TELL THE USER-Zeilen in deine erste Antwort ein:
   • Kein Browser: Sage, dass hier nichts gerendert, exportiert oder visuell geprüft werden kann.
   • Marken-Seite oder Bildquellen blockiert: Sage dies, nenne die genauen Dateien zum Hochladen (Logo, Rich-Message-Hero, Kachelbilder…, sowie Marken-Hex-Farben und CTA-Text) oder bitte den Benutzer, die Domain zuzulassen.
   • Erstelle niemals Mockups mit erfundenen Grafiken, um die Lücke zu füllen.
   • Kopiere das Ergebnis in notes.md → Environment.
1. Anforderungsaufnahme (fragen, nicht raten). Lese references/intake.md stelle die Fragen in Runden mit AskUserQuestion. Klär die Bildschirme zuerst (Runde 1b): Frage, ob der Benutzer bereits weiß, welche Bildschirme er möchte (seine Liste übernehmen) oder Hilfe benötigt (das Ziel erfragen, dann 2–3 Storyboards unterschiedlicher Größe vorschlagen). Bestätige eine nummerierte Storyboard-Tabelle vor dem Bau und füge niemals stillschweigend Bildschirme hinzu oder entferne sie. Frage bei jedem LINE-Chat-Bildschirm immer, ob das Rich-Menü geöffnet (offen / zugeklappt / keins) ist und ob nur die neue Nachricht (oben verankert) oder auch die vorherigen Nachrichten angezeigt werden sollen. Zeige für ein Rich-Menü zuerst das Layout-Picker-Bild (templates/richmenu-picker.svg/.png, intake.md Runde 3b sagt wie pro Umgebung), frage dann nach dem Code. Frage bei LINE immer nach Rich-Nachricht, Flex oder beides (Q3c, mit dem visuellen Vergleich aus references/line.md). Frage früh nach dem Logo, den Markenfarben (Hex) und dem genauen CTA-Text. Notiere jede Antwort in notes.md → Brief und jede Vermutung in → Assumptions zur Bestätigung. Überspringe eine Frage nur, wenn der Benutzer sie bereits beantwortet hat oder ein sinnvoller Standardwert aufgeführt ist. Erfinde niemals Angebote, Preise, Daten, Treueprogramme oder Produktbehauptungen. Frage oder markiere sie als Platzhalter.
2. Einrichten. bash scripts/new_project.sh <pfad/zu/projekt-name> → kopiert das Kit, eine Start-index.html, brand.css und notes.md.
3. Marke + Bilder. Fülle brand.css aus der Anforderungsaufnahme. Lege lizenzierte Schriftarten in brand/fonts/ und das Logo (einfarbiges Zeichen für Avatare) in brand/. Bereinige jeden Upload zuerst: python3 scripts/clean_image.py <dateien> --for <platzierung> --edges /tmp/edges.png. Es entfernt weiße Randstreifen und protokolliert sie in assets/clean-log.txt, prüft die Größe gegen references/line-image-sizes.md und erstellt ein Kantenblatt. Öffne das Blatt und sieh es dir an. Eine Rich-Nachricht ist 1040×1040, sofern der Benutzer keine andere OA-Manager-Größe bestätigt. Jedes von dir genannte Plattformlimit benötigt zwei oder mehr Quellen; falls sie sich widersprechen, sag dies und wähle die sicherste. Jeder Bildplatz bekommt ein echtes Foto. CSS-Verläufe oder Platzhaltertexte anstelle von Fotografie lassen ein Mockup unecht wirken. Befolge references/image-sourcing.md: Vom Benutzer bereitgestellt → Marken-Website/Pressekit → online suchen (scripts/find_images.py "<suchbegriff>" --orient portrait erstellt ein Kontaktblatt, das du dir ansiehst; dann scripts/fetch_image.py <url> assets/<name>.jpg --crop 4:5). Du kannst auch jede Seite (Nachrichten, Einzelhändler, Marken-Social) im Web suchen und ihre URL an fetch_image.py übergeben; es liest das Hauptbild der Seite. Jeder Download wird in assets/credits.json protokolliert.
4. Bildschirme bauen. Die Galerie enthält ein Beispiel pro Oberfläche, nicht jede Oberfläche × OS-Kombination (siehe Matrix unten). Kopiere den nächsten Block aus templates/gallery.html in index.html, wechsle dann das Gerät mit references/devices.md: tausche .dev.android ↔ .dev.ios und wende die Chrome-Unterschiede des jeweiligen OS an (z. B. FB-Tabs oben ↔ unten). Bearbeite Text und Bilder. Plattformspezifika befinden sich in references/line.md, facebook.md, tiktok.md.
   • Gib jedem Bildschirm eine eindeutige data-shot-ID; diese wird zum Dateinamen. Pro-Bildschirm-CSS kann mit [data-shot="id"] eingegrenzt werden.
   • Benenne Projekt-Klassen mit einem Projekt-Präfix (z. B. .sb-hero, nicht .kv/.hero), damit sie niemals mit Kit-Klassen kollidieren.
   • Schriftarten und Verhältnisse (lies references/typography-and-ratios.md): Text, den die App zeichnet (Bubbles, Flex, Beitragstext, CTA-Buttons, Bildunterschriften) ist immer die Plattform-Schriftart; setze daher niemals --brand-head/--brand-body darauf. Markenschriftarten werden nur in Bildern verwendet. Medienboxen nehmen ein Verhältnis, niemals eine feste Höhe: FB-Feed 4:5, Karussell 1:1, Stories/Reels/TikTok 9:16, LINE Rich-Nachricht standardmäßig 1040×1040 (andere Größen nur nach Bestätigung, siehe references/line-image-sizes.md; randlose Geometrie ist UNVERIFIED), Flex-Hero 20:13.
   • Verkürze, verkürze oder verschiebe niemals Brief-Inhalte, um sie einzupassen (z. B. Entfernen der Textblase, damit ein quadratisches Bild mit geöffnetem Menü passt, oder einen Chat mit "nur neue Nachricht" unten verankern). Informiere den Benutzer und biete Optionen an: ein kompaktes Menü, kürzeren Text oder einen zusätzlichen Bildschirm mit zugeklapptem Menü.
   • Als UNVERIFIED markierte Kit-Details (derzeit Rich-Message-Rand, Radius und Breite in references/line.md) kommen in notes.md → Unverified und in deine Liefernachricht.
   • Thai-Text: Umschließe Preise, Daten, Einheiten und Endpartikel mit <span style="white-space:nowrap">, damit Zeilen nie mit einem verwaisten "ค่ะ", "ml" oder einem geteilten Wort enden.
5. Export (auf einem Mac, damit iOS-Text in echtem SF Pro + Thonburi gerendert wird). node scripts/export.cjs <projekt> (beim ersten Mal auf einem Rechner: cd scripts && npm install; es fällt auf das installierte Google Chrome zurück, wenn Playwrights Browser nicht heruntergeladen ist). Es bedient nur den Projektordner. → captures/NN-<shot-id>.png (3× Telefone, 2× Desktop, transparent), 00-overview.png, qa.json. Repariere jede fehlgeschlagene Anfrage und jedes QA-Problem, das es ausgibt.
   • Wenn der Export hier nicht ausgeführt werden kann (Claude App / Cowork Sandbox ohne Node, Playwright oder Internet): versuche einmal cd scripts && npm install && npx playwright install chromium. Wenn das immer noch fehlschlägt, versuche Python (pip install playwright && python -m playwright install chromium) und erstelle Screenshots von jedem .frame in 3× selbst. Als letztes Mittel führe python3 scripts/bundle.py <projekt> aus, um ein einziges eigenständiges HTML (dist/<name>.html, das durch Doppelklick geöffnet wird) zu erstellen. Liefere es mit dem Projekt-ZIP und sage dem Benutzer klar: "Ich konnte hier nichts rendern, daher wurden diese Bildschirme nicht visuell geprüft. Öffne das HTML in Chrome; um einen Bildschirm zu speichern, Rechtsklick → Inspizieren → Knoten-Screenshot auf dem Telefonrahmen, oder führe den Export auf einem Mac aus." Liste dann die nicht verifizierten Details auf. Präsentiere niemals ein ungerendertes Ergebnis als geprüft und höre niemals auf, ohne etwas zu zeigen.
   • Einzeldatei-HTML: erstelle es immer mit scripts/bundle.py, niemals mit einem Ad-hoc-Skript. Es prüft die Syntax jedes Inline-Skripts (node --check), schlägt fehl, wenn eine Symbol-ID oder Datei fehlt, und bestätigt, wenn ein Browser vorhanden ist, dass Statusleisten und Symbole gerendert werden. Ein Ad-hoc-Bundler hat einmal das Symbol-Sprite beschädigt und kit.js lahmgelegt, sodass keine Statusleisten oder Symbole mehr vorhanden waren.
   • Außerhalb von macOS verwendet iOS-Text Inter anstelle von SF Pro (kit.js tauscht es ein). Sage dies in notes.md und biete einen erneuten Export auf dem Mac für finale Kundendateien an.
6. Überprüfe wie ein Kunde. Öffne jedes PNG in voller Größe (nicht nur die Übersicht) und führe references/qa-checklist.md aus. Fülle für jeden Bildschirm notes.md → "Pre-delivery check against the Brief" aus: aller Brief-Text vorhanden, Verankerung, Menüzustand und Nachrichtenformat wie gewünscht, nichts entfernt. Stelle dein Mockup Seite an Seite mit einem echten Geräte-Screenshot aus references/screens/device/ (oder bitte den Benutzer um frische Telefon-Screenshots derselben Oberfläche). Plattform-UIs ändern sich alle paar Monate, und ein echter Screenshot ist die einzige absolute Wahrheit.
7. Aufzeichnen und ehrlich liefern. Aktualisiere notes.md: Platzhalter, Annahmen, nicht verifizierte Details, Bildquellen und Bereinigungsprotokoll, Zeitplan. Die Liefernachricht muss enthalten: (a) die Dateipfade; (b) was geprüft wurde und was nicht, z. B. "gerendert und zu 100 % geprüft" vs. "hier nicht gerendert"; (c) Annahmen zur Bestätigung, als kurze Liste (besonders bei der ersten Lieferung); (d) Nicht verifizierte Details; (e) jeden Briefpunkt, den du nicht unterbringen konntest, mit den von dir angebotenen Optionen.

Galerie-Matrix (✓ = fertiger Bildschirm; andere = aus derselben Zeile anpassen)

Oberfläche	Android	iOS	Desktop
LINE OA Chat + Flex	✓ dunkel	✓ hell	– (noch nicht im Kit)
LINE Rich-Menü (12 OA-Manager-Vorlagen + benutzerdefiniert + Tabs)	✓ dunkel L6, ✓ mit Tabs	✓ groß L4b, ✓ kompakt C2l	– (wird nicht auf LINE-PC angezeigt)
LINE Push / Sperrbildschirm	anpassen (.android .notif)	✓	–
FB Feed Einzelbild	✓ hell	✓ dunkel	✓
FB Karussell	anpassen	✓ hell	anpassen
FB Stories/Reels	anpassen	✓	–
TikTok In-Feed / Spark / Produktkarte	✓ In-Feed	✓ Spark, ✓ Produktkarte	✓

Realismus-Regeln (auf die harte Tour gelernt)

Lies references/realism-rules.md einmal pro Projekt. Die Kurzversion:

• Plattform-Chrome ist niemals markenfarbig. LINE-Header, FB-/TikTok-UI bleiben nativ.
• Ein zusammenhängender Zeitplan über alle Bildschirme hinweg (Teaser → Launch → Vorbestellung → im Verkauf → erhalten). Daten, Wochentage, Countdowns und "gültig bis" müssen übereinstimmen. Überprüfe den Wochentag jedes Datums.
• Erfinde keine Vorteile (Punkte, Mitgliedschaftsstufen, kostenlose Geschenke), die die Marke nicht anbietet. Wenn es die Kurzbeschreibung nicht sagt, ist es ein Platzhalter oder eine Frage.
• Inhalte verankern, wo die echte App sie verankert. Ein frischer LINE-Thread beginnt oben; ein langer ist unten ausgerichtet (.ln-msgs.bottom). Große leere Löcher wirken unecht.
• Bilder müssen in Telefongröße lesbar sein. Ein Produkt-Miniaturbild unter ~60 px ist unsichtbar, also enger zuschneiden oder größer gehen.
• Verwende plausible Zahlen (Likes, Kommentare, Zeiten, Akku) und halte die Statusleistenzeiten konsistent mit der Geschichte (ein Push um 07:30 sollte nicht 21:14 anzeigen).
• Ein LINE-Rich-Menü ist ein gestaltetes Bild (2500×1686 oder 2500×843), keine nativen UI-Kacheln. Gestalte es als Kunstwerk.

Wenn etwas nicht im Kit ist

Baue es in der <style>-Sektion der Projekt-index.html mit denselben Konventionen (Plattform- vs. Markenvariablen). Wenn es wiederverwendbar ist (eine neue Oberfläche wie LINE VOOM, FB Messenger, TikTok TopView), füge es zu assets/kit.css + templates/gallery.html hinzu und erwähne es, damit das Team es upstreamen kann.

Dateien

Pfad	Was
assets/kit.css, kit.js, icons.svg, fonts/	das Kit (wird in jedes Projekt als kit/ kopiert)
templates/gallery.html	jede Oberfläche × OS, Blöcke von hier kopieren
templates/brand.example.css	Markenvariablen mit Kommentaren
templates/index.starter.html, notes.template.md	Projekt-Startvorlagen
scripts/new_project.sh	Projekt einrichten
scripts/preflight.py	Schritt 0: Können wir rendern? Ist es ein Mac? Sind die Markenseite und Bildquellen erreichbar? Gibt aus, was dem Benutzer gesagt werden soll
scripts/clean_image.py	Weiße Ränder von Uploads entfernen (protokolliert), Größenprüfung pro Platzierung, Kanten-Zoom-QA-Blatt
scripts/bundle.py	Ein einziges eigenständiges HTML (CSS/JS/Schriftarten/Bilder/Sprite inline), mit Syntax-, Symbol- und Renderprüfungen
templates/richmenu-picker.svg / .png	jedes Rich-Menü-Layout mit seinem Code, wird dem Benutzer bei der Anforderungsaufnahme gezeigt; neu erstellen mit scripts/richmenu_picker.py --png
references/line-image-sizes.md	LINE Rich-Nachricht / Rich-Menü / Flex / Bildgrößen pro Senderoute, mit Quellen und Konflikten
scripts/find_images.py, fetch_image.py	Echte Fotos online finden (Kontaktblatt) · herunterladen + zuschneiden + Quelle protokollieren
references/image-sourcing.md	Woher Bilder kommen, Zuschnitte pro Platzierung, Regeln für Werbekreation
scripts/export.cjs	Rendern + QA (benötigt npm install in scripts/ einmalig)
references/intake.md	Die Fragenrunden + Standardwerte
references/line.md, facebook.md, tiktok.md	Anatomie, Grenzen, Klassenkarte pro Plattform
references/devices.md	Rahmen, Statusleisten, OS-Unterschiede
references/realism-rules.md, qa-checklist.md, localization-th.md	Qualitätsstandards
references/screens/	Datierte echte App-Screenshots + calibrate/ Repliken
references/typography-and-ratios.md	Welche Schriftart jede Plattform tatsächlich verwendet, gemessene Größen, Medienverhältnisse
scripts/calibrate.cjs	Überlagere eine Kit-Replik auf einem echten Screenshot (seitlich/überblendet/Differenz + pro-Band-Bewertung)