devherex/social-safe-zone

Zone de Sécurité Sociale

Les applications des plateformes recouvrent des parties de votre cadre avec des boutons, des légendes et la barre de profil, et la grille de profil recadre les côtés. Tout élément important à ces endroits est masqué. Cette compétence garantit que cela n'arrive jamais.

Tous les nombres se trouvent dans zones.json. Ne les codez jamais en dur. Lister les préréglages : python scripts/zones_lib.py list.

Workflow (à suivre dans l'ordre)

1. Choisir le préréglage. Correspondre à la plateforme : ig-reel, ig-story, ig-story-strict, ig-feed, tiktok, yt-shorts, linkedin-4x5, linkedin-16x9. Si l'utilisateur ne nomme aucune plateforme, supposer ig-reel. S'il veut plusieurs plateformes, concevoir un maître avec la zone la plus stricte, puis vérifier les autres.
2. Lire la zone. python scripts/zones_lib.py show <preset> affiche le rectangle de sécurité et les boîtes à éviter.
3. Construire à l'intérieur.
   • Les arrière-plans et séquences en pleine page peuvent remplir tout le cadre.
   • Tout ce qui est important se trouve à l'intérieur du rectangle de sécurité : titres, corps de texte, sous-titres, logos, visages, boutons CTA, plans produit essentiels.
   • Ne jamais placer quoi que ce soit dans une boîte avoid (Reels : la colonne de boutons en bas à droite).
   • Les sous-titres se situent dans la partie inférieure de la zone de sécurité, jamais sur la marge inférieure.
   • Taille de texte minimale : 42 px à 1080 de large. Contraste élevé sur tous les arrière-plans.
   • Reels et Feed : garder également le contenu clé dans le recadrage de la grille, afin que la vignette de la grille de profil reste lisible.
4. Utiliser le bon assistant pour l'outil :
   • Remotion / React : templates/SafeZone.tsx et templates/zones.ts
   • HTML / CSS : templates/safezone.css (classes comme sz-ig-reel)
   • Python / Pillow / ffmpeg : scripts/zones_lib.py
   • Canva / CapCut / Premiere : déposer assets/guides/<preset>.png par-dessus en tant que calque verrouillé
   • Plus de détails : references/integrations.md
5. Vérifier avant de livrer.
   • JSON de mise en page (exact) : python scripts/check_zones.py layout.json
   • Image ou vidéo : python scripts/check_zones.py file --preset <preset> --overlay check.png (ajouter --ocr si tesseract existe)
   • Aperçu simulé de l'application : python scripts/preview_mock.py frame.png --preset <preset> --out mock.png
6. Corriger et revérifier. python scripts/autofix.py layout.json déplace ou redimensionne les éléments. Pour des séquences finalisées qui ne peuvent pas être remises en page : python scripts/autofix.py fit in.png --preset <preset> --out out.png.
7. Informer l'utilisateur du résultat en une ligne : préréglage utilisé, RÉUSSI ou ÉCHEC, et ce qui a été déplacé. Afficher la superposition ou l'aperçu simulé si cela aide.

Mise en page JSON (pour vérifications exactes et correction automatique)

{"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 marque les arrière-plans qui peuvent dépasser de la zone.

Règles

• Si l'utilisateur veut explicitement quelque chose dans une zone dangereuse, faites-le mais précisez ce qui pourrait être masqué.
• Les valeurs marquées estimate dans zones.json sont mesurées par la communauté, non officielles. Mentionnez-le pour le travail client et suggérez un post de test.
• Pour ajouter une plateforme ou modifier un nombre, éditez uniquement zones.json, puis exécutez python scripts/export_zones.py css > templates/safezone.css et python scripts/make_guides.py --all.