Generador de Infografías

¿Qué hace Generador de Infografías?

Genera especificaciones completas de infografías a partir de cualquier contenido, dato o tema. Produce diseño estructurado + todo el texto + puntos de datos + esquema de colores, listo para renderizar como HTML/CSS, con Satori (del lado del servidor), en Canva, Figma o cualquier herramienta de diseño.

Las publicaciones de LinkedIn con imágenes obtienen 2-3 veces más participación. Esta habilidad convierte tu contenido en activos visuales sin necesidad de habilidades de diseño.

Inspirado en el renderizado Satori de content-pipeline: La IA escribe el contenido → especificación estructurada → renderizado como imagen de marca.

Etapa

Esta habilidad pertenece a la Etapa S2: Contenido

Cuándo Usarlo

• Después de que viral-post-writer cree una publicación de LinkedIn — añade un visual
• Después de que content-research-brief recopile estadísticas — visualízalas
• Al crear contenido comparativo — gráfico comparativo de características/precios
• Al compartir datos o estadísticas — tarjetas destacadas de estadísticas
• Al crear un artículo de lista — lista de verificación visual o lista numerada
• Para cualquier publicación en redes sociales que se beneficie de una imagen de marca

Esquema de Entrada

content: string                # (requerido) Contenido a visualizar — texto de publicación, datos o artículo
infographic_type: string       # (opcional, predeterminado: auto-detectado)
                               # "stat_highlight" — 1-3 números clave, grandes y en negrita
                               # "comparison" — comparación lado a lado de producto/característica
                               # "process_flow" — flujo de trabajo paso a paso o cómo hacer
                               # "checklist" — lista de elementos con marcas de verificación
                               # "timeline" — eventos cronológicos
                               # "data_chart" — representación de gráfico de barras/tarta
                               # "quote_card" — cita destacada con atribución
                               # "feature_grid" — cuadrícula de características/beneficios con iconos
platform: string               # (opcional, predeterminado: "linkedin")
                               # "linkedin" — 1080×1350 (vertical, participación óptima)
                               # "instagram" — 1080×1080 (cuadrado)
                               # "twitter" — 1200×675 (horizontal)
                               # "facebook" — 1200×630
                               # "blog" — 1200×800 (imagen destacada)
brand: object                  # (opcional) Personalización de marca
  name: string                 # Nombre de la empresa/marca personal
  primary_color: string        # Hex — "#0066FF"
  secondary_color: string      # Hex — "#1A1A2E"
  accent_color: string         # Hex — "#FF6B35"
  font_style: string           # "modern" | "classic" | "bold" | "minimal"
  logo_text: string            # Logotipo basado en texto — "Affitor" | "@tuhandle"
output_format: string          # (opcional, predeterminado: "spec")
                               # "spec" — especificación JSON estructurada (para cualquier renderizador)
                               # "html" — HTML/CSS renderizable (autónomo)
                               # "both" — especificación + HTML

Flujo de Trabajo

Paso 1: Analizar Contenido y Seleccionar Tipo

Lee el contenido de entrada y detecta el mejor tipo de infografía:

Patrón de Contenido	Tipo Auto-detectado
Contiene 1-3 números/estadísticas prominentes	stat_highlight
Contiene "vs", datos comparativos	comparison
Contiene pasos numerados o un proceso	process_flow
Contiene una lista de elementos (3-10)	checklist o feature_grid
Contiene fechas o eventos cronológicos	timeline
Contiene una cita notable	quote_card
Contiene porcentajes o proporciones	data_chart

Si se proporciona infographic_type, úsalo. De lo contrario, auto-detecta.

Paso 2: Extraer Datos Visuales

Del contenido, extrae exactamente lo que necesita aparecer en la infografía:

Para stat_highlight:

stats:
  - number: "30%"        # El número grande
    label: "comisión"     # Lo que mide
    context: "recurrente" # Contexto adicional
  - number: "60"
    label: "días de cookie"
    context: "promedio de la industria: 30"

Para comparison:

items:
  - name: "HeyGen"
    features:
      - label: "Comisión"
        value: "30% recurrente"
        highlight: true         # ganador para esta fila
      - label: "Cookie"
        value: "60 días"
        highlight: true
  - name: "Synthesia"
    features:
      - label: "Comisión"
        value: "25% único"
        highlight: false
      - label: "Cookie"
        value: "30 días"
        highlight: false

Para process_flow:

steps:
  - number: 1
    title: "Investigar"
    description: "Encuentra programas ganadores"
    icon: "🔍"
  - number: 2
    title: "Crear"
    description: "Escribe contenido que convierta"
    icon: "✍️"

Para checklist:

items:
  - text: "Comisión recurrente"
    checked: true
  - text: "Cookie de 60+ días"
    checked: true
  - text: "Prueba gratuita disponible"
    checked: true
  - text: "Gestor de afiliados dedicado"
    checked: false

Paso 3: Diseñar el Diseño

Basado en el tipo + plataforma, define el diseño:

Dimensiones de la plataforma:

Plataforma	Ancho	Alto	Relación de aspecto
LinkedIn	1080	1350	4:5 (vertical)
Instagram	1080	1080	1:1 (cuadrado)
Twitter	1200	675	16:9 (horizontal)
Facebook	1200	630	~2:1
Blog	1200	800	3:2

Estructura del diseño (todos los tipos):

┌─────────────────────────────┐
│         ENCABEZADO          │  10-15% de altura
│    Título / Encabezado      │
├─────────────────────────────┤
│                             │
│         CUERPO              │  70-80% de altura
│    Datos / Contenido        │
│    (diseño específico del tipo)│
│                             │
├─────────────────────────────┤
│         PIE DE PÁGINA       │  10% de altura
│    Marca / CTA / Fuente     │
└─────────────────────────────┘

Paso 4: Generar Esquema de Colores

Si se proporcionan colores de marca: úsalos directamente.

Si no hay colores de marca: genera una paleta profesional:

# Opciones de paleta profesional predeterminadas
palettes:
  dark_modern:       # Fondo oscuro, texto claro
    bg: "#1A1A2E"
    text: "#FFFFFF"
    accent: "#0066FF"
    secondary: "#16213E"
    
  light_clean:       # Fondo claro, texto oscuro
    bg: "#FFFFFF"
    text: "#1A1A2E"
    accent: "#0066FF"
    secondary: "#F0F4F8"
    
  warm_bold:         # Tonos cálidos
    bg: "#FFF8F0"
    text: "#2D2D2D"
    accent: "#FF6B35"
    secondary: "#FFE8D6"
    
  dark_gradient:     # Degradado oscuro
    bg: "linear-gradient(135deg, #1A1A2E, #16213E)"
    text: "#FFFFFF"
    accent: "#00D4AA"
    secondary: "#2A2A4A"

Auto-selección según la plataforma:

• LinkedIn → dark_modern o light_clean (profesional)
• Twitter → dark_gradient o warm_bold (llamativo)
• Instagram → Cualquiera (la mayor flexibilidad visual)

Paso 5: Generar Todo el Texto

Escribe cada pieza de texto que aparece en la infografía:

copy:
  headline: string          # Título principal — en negrita, corto (máx. 8 palabras)
  subheadline: string       # Línea de apoyo opcional
  body_items: string[]      # Etiquetas de datos, descripciones, etc.
  cta: string               # Texto de llamada a la acción — "Enlace en la biografía" | "Ver comentarios para el enlace"
  footer: string            # Nombre de la marca o @handle
  source: string            # "Datos: openaffiliate.dev" o atribución de fuente

Reglas de texto:

• Títulos: 3-8 palabras, afirmación audaz o número específico
• Todo el texto debe ser legible a escala móvil (no demasiado pequeño)
• No más de 50 palabras en total en la infografía (menos = mejor)
• Datos > adjetivos (muestra números, no "asombroso" o "increíble")

Paso 6: Salida

Salida de especificación (predeterminada):

Especificación estructurada completa que cualquier renderizador puede consumir:

infographic_spec:
  type: string
  platform: string
  dimensions:
    width: number
    height: number
  colors:
    background: string
    text: string
    accent: string
    secondary: string
  layout:
    header: object
    body: object
    footer: object
  data: object              # Datos específicos del tipo (estadísticas, elementos de comparación, pasos, etc.)
  copy:
    headline: string
    subheadline: string
    body_items: string[]
    cta: string
    footer: string
    source: string

Salida HTML (si output_format es "html" o "both"):

Genera un archivo HTML autónomo con CSS en línea que renderiza la infografía en las dimensiones exactas. Esto puede:

• Abrirse en un navegador y capturarse como pantallazo
• Renderizarse del lado del servidor con Satori o Puppeteer
• Usarse como punto de partida para la iteración del diseño

<!-- Autónomo, sin dependencias externas -->
<div style="width: 1080px; height: 1350px; ...">
  <!-- Encabezado -->
  <!-- Cuerpo (específico del tipo) -->
  <!-- Pie de página -->
</div>

Paso 7: Autovalidación

Antes de presentar la salida, verifica:

• Recuento total de palabras en la infografía ≤ 50 palabras
• Todo el texto legible al 50% de zoom (tamaño de fuente mínimo efectivo)
• El contraste de color cumple con la accesibilidad (WCAG AA: relación 4.5:1)
• Los puntos de datos son precisos y atribuidos
• El diseño no se siente apretado — los espacios en blanco son intencionales
• Las dimensiones de la plataforma son correctas

Si alguna verificación falla, corrígela antes de entregar.

Formato de Salida

## Infografía: [Título]

### Especificación
- **Tipo:** [stat_highlight]
- **Plataforma:** [LinkedIn] — 1080×1350
- **Colores:** [dark_modern] — bg: #1A1A2E, accent: #0066FF

### Vista previa (representación de texto)

┌─────────────────────────────────┐
│                                 │
│     HeyGen vs Synthesia         │
│     La Comparación Real         │
│                                 │
│  ┌──────────┐  ┌──────────┐    │
│  │  HeyGen  │  │Synthesia │    │
│  │          │  │          │    │
│  │ 30% rec. │  │ 25% único│    │
│  │ 60 días  │  │ 30 días  │    │
│  │ ★ 127    │  │ ★ 84     │    │
│  └──────────┘  └──────────┘    │
│                                 │
│     🏆 Ganador: HeyGen          │
│                                 │
│  ───────────────────────────    │
│  @tuhandle · openaffiliate.dev  │
└─────────────────────────────────┘

### Datos

[Especificación estructurada como YAML o JSON]

### HTML (si se solicita)

[Bloque de código HTML/CSS autónomo]

### Próximos Pasos
- Publica en [plataforma] con tu publicación viral de `viral-post-writer`
- Crea variaciones para otras plataformas: `--platform instagram`
- Genera más infografías a partir de diferentes datos en tu `content-research-brief`

Manejo de Errores

• El contenido no tiene datos extraíbles: Genera un tipo quote_card o checklist en su lugar. Nota: "No se encontraron datos numéricos. Se creó una infografía de tipo [tipo] en su lugar."
• Demasiados datos para una sola infografía: Selecciona los 3-5 puntos de datos más impactantes. Nota: "El contenido tiene [X] puntos de datos. Se seleccionaron los [Y] más impactantes para la claridad visual. Considera crear múltiples infografías."
• Sin colores de marca: Usa la paleta predeterminada. Nota: "No se especificaron colores de marca. Usando [nombre de paleta]. Añade colores de marca para una marca consistente."
• Salida HTML demasiado compleja: Simplifica el diseño. Las infografías deben ser simples — la complejidad mata el impacto visual.

Ejemplos

Ejemplo 1: Usuario: "Haz una infografía comparando HeyGen vs Synthesia para LinkedIn" → tipo: comparison, plataforma: linkedin (1080×1350) → Extraer: comisión, cookie, calificación, precio para cada uno → Salida: tarjeta de comparación lado a lado con ganador resaltado → Paleta oscura moderna, números en negrita

Ejemplo 2: Usuario: "Crea una tarjeta de estadísticas a partir de mi informe de investigación que muestre los números clave de HeyGen" → tipo: stat_highlight, plataforma: linkedin → Extraer: "$60M recaudados", "40K negocios", "30% de comisión" → Salida: 3 números grandes con etiquetas y contexto

Ejemplo 3: Usuario: "Visualiza los pasos del embudo de afiliados como una infografía" → tipo: process_flow, plataforma: blog (1200×800) → Pasos: Investigar → Contenido → Página de aterrizaje → Desplegar → Rastrear → Optimizar → Salida: flujo horizontal con iconos y descripciones breves

Reporte de Comentarios y Problemas

Cuando esta habilidad produzca resultados inesperados, incompletos o incorrectos, genera un bloque skill_feedback (consulta shared/references/feedback-protocol.md para el esquema completo).

Modos de fallo específicos de la habilidad:

• Sin datos extraíbles del contenido: El contenido es puramente narrativo, sin estadísticas/números. Reporta como data_quality.
• La salida HTML no se renderiza correctamente: Problemas de CSS, dimensiones incorrectas, desbordamiento de texto. Reporta como wrong_output con el HTML.
• Demasiadas palabras en la infografía: >50 palabras la hace ilegible. Reporta como wrong_output.

Disparadores de auto-detección:

• infographic_spec.data tiene <2 puntos de datos
• Recuento total de palabras en todos los campos de texto > 60
• Las dimensiones no coinciden con la plataforma declarada

Reporta problemas: GitHub Issues | Discussions

Referencias

• shared/references/social-data-providers.md — fuentes de datos para contenido de infografías
• shared/references/platform-rules.md — requisitos de imagen específicos de la plataforma
• shared/references/flywheel-connections.md — mapa de conexiones del volante maestro
• shared/references/feedback-protocol.md — estándar de detección y reporte de problemas

Conexiones del Volante

Alimenta a

• social-media-scheduler (S5) — infografía lista para programar con la publicación
• landing-page-creator (S4) — infografía como imagen de héroe o visual de sección
• email-drip-sequence (S5) — infografía como contenido visual de correo electrónico
• bio-link-deployer (S5) — infografía en el centro de enlaces

Alimentado por

• content-research-brief (S2) — estadísticas clave y datos para visualización
• viral-post-writer (S2) — contenido de publicación para crear el visual acompañante
• affiliate-blog-builder (S3) — datos del blog para la infografía de imagen destacada
• trending-content-scout (S1) — datos de participación para gráficos de referencia
• traffic-analyzer (S1) — datos de tráfico para infografías comparativas
• comparison-post-writer (S3) — datos comparativos para formato visual
• commission-calculator (S1) — datos de comisión para destacados de estadísticas

Bucle de Retroalimentación

• Publicaciones S6 con infografías vs sin ellas → performance-analyser (S6)