devherex/zona-segura-redes

Zona Segura Social

Las aplicaciones de las plataformas cubren partes de tu encuadre con botones, subtítulos y la barra de perfil, y la cuadrícula de perfil recorta los laterales. Cualquier cosa importante que esté ahí queda oculta. Esta habilidad se asegura de que eso nunca ocurra.

Todos los números están en zones.json. Nunca los codifiques. Lista de plantillas: python scripts/zones_lib.py list.

Flujo de trabajo (seguir en orden)

1. Elige la plantilla. Coincide con la plataforma: ig-reel, ig-story, ig-story-strict, ig-feed, tiktok, yt-shorts, linkedin-4x5, linkedin-16x9. Si el usuario no nombra una plataforma, asume ig-reel. Si quiere varias plataformas, diseña un diseño maestro con la zona más restrictiva y luego verifica las demás.
2. Lee la zona. python scripts/zones_lib.py show <plantilla> imprime el rectángulo seguro y las cajas de exclusión.
3. Construye dentro de ella.
   • Los fondos y el metraje a sangría completa pueden llenar todo el encuadre.
   • Todo lo importante va dentro del rectángulo seguro: titulares, texto del cuerpo, subtítulos, logotipos, rostros, botones de CTA, tomas clave del producto.
   • Nunca coloques nada en una caja de avoid (Reels: la columna de botones en la parte inferior derecha).
   • Los subtítulos se colocan en la parte inferior del área segura, nunca en el margen inferior.
   • Tamaño mínimo de texto: 42px a 1080 de ancho. Alto contraste en todos los fondos.
   • Reels y Feed: mantén el contenido clave también dentro del recorte de cuadrícula, para que la miniatura de la cuadrícula de perfil aún se lea.
4. Usa la ayuda adecuada para la herramienta:
   • Remotion / React: templates/SafeZone.tsx y templates/zones.ts
   • HTML / CSS: templates/safezone.css (clases como sz-ig-reel)
   • Python / Pillow / ffmpeg: scripts/zones_lib.py
   • Canva / CapCut / Premiere: coloca assets/guides/<plantilla>.png encima como una capa bloqueada
   • Más detalles: references/integrations.md
5. Verifica antes de entregar.
   • JSON de diseño (exacto): python scripts/check_zones.py layout.json
   • Imagen o video: python scripts/check_zones.py archivo --plantilla <plantilla> --overlay check.png (agrega --ocr si tesseract existe)
   • Vista previa simulada de la app: python scripts/preview_mock.py frame.png --plantilla <plantilla> --out mock.png
6. Corrige y vuelve a verificar. python scripts/autofix.py layout.json mueve o escala elementos. Para metraje terminado que no se pueda rediseñar: python scripts/autofix.py fit in.png --plantilla <plantilla> --out out.png.
7. Informa al usuario el resultado en una línea: plantilla usada, PASO o FALLO, y qué se movió. Muestra la superposición o la vista previa simulada si ayuda.

JSON de diseño (para verificaciones exactas y corrección automática)

{"plantilla": "ig-reel", "elementos": [
  {"id": "titular", "tipo": "text", "texto": "Hola", "x": 60, "y": 300, "w": 700, "h": 90, "size": 90},
  {"id": "logo", "tipo": "box", "x": 60, "y": 1500, "w": 220, "h": 110},
  {"id": "fondo", "tipo": "box", "x": 0, "y": 0, "w": 1080, "h": 1920, "important": false}
]}

important: false marca fondos que pueden sobresalir de la zona.

Reglas

• Si el usuario quiere explícitamente algo dentro de un área peligrosa, hazlo pero di qué puede quedar cubierto.
• Los valores marcados como estimate en zones.json son medidos por la comunidad, no oficiales. Menciona esto para trabajos con clientes y sugiere una publicación de prueba.
• Para agregar una plataforma o cambiar un número, edita solo zones.json, luego ejecuta python scripts/export_zones.py css > templates/safezone.css y python scripts/make_guides.py --all.