devherex/social-safe-zone

Social Safe Zone

Die Apps der Plattformen überdecken Teile deines Bildes mit Buttons, Bildunterschriften und der Profilleiste, und das Profilraster schneidet die Seiten ab. Wichtige Inhalte werden so unsichtbar. Diese Fähigkeit stellt sicher, dass das nicht passiert.

Alle Zahlen leben in zones.json. Niemals hart codieren. Voreinstellungen auflisten: python scripts/zones_lib.py list.

Arbeitsablauf (in dieser Reihenfolge)

1. Voreinstellung wählen. Plattform zuordnen: ig-reel, ig-story, ig-story-strict, ig-feed, tiktok, yt-shorts, linkedin-4x5, linkedin-16x9. Wenn der Benutzer keine Plattform nennt, ig-reel annehmen. Wenn mehrere Plattformen gewünscht sind, ein Master-Design mit der strengsten Zone erstellen, dann die anderen überprüfen.
2. Zone auslesen. python scripts/zones_lib.py show <preset> gibt das sichere Rechteck und die Vermeidungsboxen aus.
3. In der Zone bauen.
   • Vollflächige Hintergründe und Footage dürfen das gesamte Bild füllen.
   • Alles Wichtige muss innerhalb des sicheren Rechtecks liegen: Überschriften, Fließtext, Untertitel, Logos, Gesichter, CTA-Buttons, wichtige Produktaufnahmen.
   • Niemals etwas in einer avoid-Box platzieren (Reels: die Buttonspalte unten rechts).
   • Untertitel im unteren Teil des sicheren Bereichs, niemals am unteren Rand.
   • Minimale Textgröße: 42px bei 1080 Breite. Hoher Kontrast auf jedem Hintergrund.
   • Reels und Feed: Schlüsselinhalte auch innerhalb des Rasterzuschnitts behalten, damit das Profilraster-Thumbnail noch lesbar ist.
4. Das richtige Hilfsmittel für das Werkzeug verwenden:
   • Remotion / React: templates/SafeZone.tsx und templates/zones.ts
   • HTML / CSS: templates/safezone.css (Klassen wie sz-ig-reel)
   • Python / Pillow / ffmpeg: scripts/zones_lib.py
   • Canva / CapCut / Premiere: assets/guides/<preset>.png als gesperrte Ebene einfügen
   • Weitere Details: references/integrations.md
5. Vor der Auslieferung überprüfen.
   • Layout-JSON (exakt): python scripts/check_zones.py layout.json
   • Bild oder Video: python scripts/check_zones.py file --preset <preset> --overlay check.png ( --ocr hinzufügen, wenn tesseract existiert)
   • Fake-App-Vorschau: python scripts/preview_mock.py frame.png --preset <preset> --out mock.png
6. Korrigieren und erneut prüfen. python scripts/autofix.py layout.json verschiebt oder skaliert Elemente. Für fertiges Material, das nicht neu angeordnet werden kann: python scripts/autofix.py fit in.png --preset <preset> --out out.png.
7. Dem Benutzer das Ergebnis in einer Zeile mitteilen: verwendete Voreinstellung, PASS oder FAIL, und was verschoben wurde. Die Überlagerung oder Mock-Vorschau anzeigen, wenn es hilfreich ist.

Layout-JSON (für exakte Prüfungen und automatische Korrektur)

{"preset": "ig-reel", "elements": [
  {"id": "headline", "type": "text", "text": "Hello", "x": 60, "y": 300, "w": 700, "h": 90, "size": 90},
  {"id": "logo", "type": "box", "x": 60, "y": 1500, "w": 220, "h": 110},
  {"id": "bg", "type": "box", "x": 0, "y": 0, "w": 1080, "h": 1920, "important": false}
]}

important: false markiert Hintergründe, die außerhalb der Zone auslaufen dürfen.

Regeln

• Wenn der Benutzer ausdrücklich etwas in einem Gefahrenbereich haben möchte, tu es, aber sage, was möglicherweise verdeckt wird.
• In zones.json als estimate markierte Werte sind Community-gemessen, nicht offiziell. Für Kundenarbeit erwähnen und einen Testbeitrag vorschlagen.
• Um eine Plattform hinzuzufügen oder eine Zahl zu ändern, nur zones.json bearbeiten, dann python scripts/export_zones.py css > templates/safezone.css und python scripts/make_guides.py --all ausführen.