infografía editorial

¿Qué hace infografía editorial?

Estilo de referencia: el post "Anthropic enters consulting." Ese post tiene:

• un titular pesado de dos líneas, con la segunda línea en el color de acento;
• un dek: una frase simple que dice lo que pasó;
• un objeto principal grande hecho de partes, con etiquetas numeradas señalándolas;
• un dato lateral;
• una fila "Por qué está pasando" de tres columnas con iconos;
• una línea de autor y una línea de fuentes.

El objetivo es explicar una idea en unos 10 segundos.

Formato

• Por defecto: una imagen independiente, 1080×1350 (4:5). Funciona bien en feeds de LinkedIn e Instagram y es fácil de guardar.
• Como diapositiva de carrusel: el tamaño coincide con los carruseles, por lo que el PNG se puede insertar como {"type": "photo", "image": "images/x.png", "fit": "contain"}, o copiar como portada.
• Como diapositiva de presentación: el diseño 4:5 no encaja en 16:9. Si el usuario necesita una, crea un diseño 16:9 aparte.

Partes:

• Plantilla: pipeline/remotion/src/Infographic.tsx.
• Construcción: pipeline/build_infographic.py.
• Cada infografía vive en su propia carpeta infographics/<slug>/ con un infographic.json y una subcarpeta opcional images/.
• Salida: out/infographics/<slug>.png.

1. Elige una idea que tenga partes

Buenas opciones:

• un movimiento con 2–4 componentes: "Anthropic entra en consultoría" con estrategia, operaciones y tecnología;
• una arquitectura: las fuentes, conectores, programación y salidas del Morning Loop;
• un framework o un antes → después.

Si la idea es un solo número, usa una diapositiva graphic de carrusel o un short. Si necesita más de 4 partes, haz un carrusel.

2. Redacta el texto (ajustado)

• titular: dos líneas, de 2 a 4 palabras cada una, con un punto al final de la línea 2. La línea 2 es la conclusión.
  • Ejemplos: ["Anthropic entra en", "consultoría."], ["Tu jefe de IA", "de confianza."].
• dek: una frase, de máximo 25 palabras: quién hizo qué y por qué es importante.
• llamadas: de 2 a 4 elementos. Cada uno tiene un title de 1–2 palabras y un texto de máximo 12 palabras.
  • Se leen de arriba abajo, así que ordénalos como una secuencia o como capas (el de arriba = el más estratégico).
• lateral: opcional. Un dato impactante, de máximo 22 palabras, p. ej. "formando a 10.000 ingenieros para 2027…".
• por qué: un título como "Por qué lo hacen" o "Por qué construirlo", más exactamente 3 elementos. Cada elemento tiene un title de 2–3 palabras y un texto de máximo 7 palabras.
• firma: {"name", "org"}. fuentes: las publicaciones, el episodio, o "Fringe Lines podcast, ".

Honestidad:

• Cada hecho necesita una fuente que puedas nombrar en sources.
• No añadas números que la fuente no indique.
• Matiza ("según se informa", "según el S-1") cuando solo un medio lo haya publicado.

3. Visual principal

• Por defecto: el bloque apilado integrado ("hero": {"label": "Anthropic"}). Dibuja un bloque isométrico del color de acento por cada llamada, alternando desplazamientos, con líneas guía que aterrizan en cada bloque y la etiqueta en el bloque superior. No necesita archivo de imagen.
• Imagen principal: "hero": {"image": "images/hero.png", "fit": "contain"}. Usa una captura de pantalla del producto, un gráfico o diapositiva de la pantalla compartida del episodio, o una imagen de objeto/lugar proporcionada. Nunca los presentadores ni ninguna persona real: sin fotos de cámara ni primeros planos.
• Imágenes generadas por IA (como el render de concreto de la referencia): solo cuando el usuario lo solicite, p. ej., a través del conector de Canva. Sin personas reales y sin "fotos" falsas de eventos reales.

4. infographics/<slug>/infographic.json

{
  "headline": ["Tu jefe de IA", "de confianza."],
  "dek": "El agente 'Morning Loop' de Quinn lee sus herramientas de trabajo cada día laboral a las 8 AM y le entrega un resumen antes de que abra el portátil.",
  "hero": {"label": "Morning Loop"},
  "callouts": [
    {"title": "Fuentes", "text": "Correo de Outlook, calendario y tareas, Slack, Asana, SharePoint."},
    {"title": "Conectores", "text": "Conectores empresariales aprobados llegan a cada fuente."}
  ],
  "side": {"title": "Cerrando el ciclo", "text": "Al final del día responde al resumen…"},
  "why": {"title": "Por qué construirlo", "items": [
    {"icon": "clock", "title": "Empieza adelantado", "text": "El triaje está listo antes de las 9."},
    {"icon": "check", "title": "Nada se escapa", "text": "Marca lo que te perdiste."},
    {"icon": "plug", "title": "Sin nuevas herramientas", "text": "Usa el stack que ya pagas."}
  ]},
  "byline": {"name": "Fringe Lines", "org": "Episodio del 30 de octubre de 2026"},
  "sources": "Podcast Fringe Lines, 30 de octubre de 2026.",
  "accent": "#FF5A1F"
}

• Iconos: chart rings target users bolt shield dollar clock globe check mail calendar plug brain. Añade uno nuevo al mapa de Icon en Infographic.tsx si es necesario: un trazado de trazo de 36×36.
• Acento: por defecto, el naranja de Fringe Lines. El rojo de la referencia es #C8231B.

5. Renderiza y controla calidad

~/.shorts-skill/bin/python pipeline/build_infographic.py infographics/<slug>

El renderizado tarda unos 20 s. Abre el PNG y verifica:

• El titular cabe en 2 líneas. Si no, acórtalo; no lo reduzcas.
• El dek cabe en 3 líneas o menos.
• Los textos de las llamadas no chocan. Con 4 llamadas, cada texto debe mantenerse en 2 líneas o menos, así que recorta palabras.
• Cada línea guía termina en su bloque.
• La nota lateral no se superpone con el recuadro "por qué".
• Las tres columnas "por qué" están equilibradas (longitudes de texto similares).
• La línea de fuentes cabe en 2 líneas.
• No aparece ningún presentador, invitado ni persona real en ninguna parte.

Informa la ruta del PNG, las fuentes utilizadas y cualquier cosa que necesite verificación de datos.