Habilidad del Agente Generador de Imágenes para Twitter Card

Generador de Imágenes para Tarjetas de Twitter

Genera imágenes optimizadas para las vistas previas de enlaces de X (Twitter), es decir, las tarjetas que aparecen en la cronología cuando alguien comparte un enlace. Las Tarjetas de Twitter tienen dimensiones de imagen y un comportamiento de renderizado distintos que difieren del Open Graph estándar. Esta habilidad cubre el proceso de generación completo adaptado para la relación de aspecto 2:1 de Twitter y sus peculiaridades específicas de la plataforma.

Los seis enfoques de generación y los seis estilos visuales de generador-de-imagen-og se aplican aquí. Las únicas diferencias son: dimensiones de salida (1200x675 en lugar de 1200x630), adaptaciones de diseño específicas de X, zonas seguras para la cronología y soporte para tarjetas de reproductor.

Cuándo Usar

• El usuario necesita imágenes de 1200×675px (2:1) para vistas previas de enlaces de X/Twitter, summary_large_image o pósters de tarjetas de reproductor
• El usuario menciona twitter:image, Tarjeta de Twitter, imagen de vista previa de X, vista previa de tweet o diseño de tarjeta de cronología
• El usuario necesita diseños seguros para el modo oscuro, zonas de contenido en el 60% superior o máscaras de borde de 20px para el recorte de esquinas redondeadas de X
• El usuario ya usa generador-de-imagen-og y quiere la variante adaptada a Twitter de los mismos estilos y proceso

Cuándo NO Usar

• Imágenes OG genéricas (1200×630, 1.91:1) para Facebook, LinkedIn, Slack, etc. — use generador-de-imagen-og en su lugar
• Solo configurar las etiquetas meta HTML (no crear el archivo de imagen) — use tarjetas-de-twitter de habilidades-de-marketing
• Salida SVG — Twitter no admite SVG para imágenes de tarjeta; use PNG o JPG
• Editor visual sin código o API alojada — use Oginify en lugar de ejecutar un pipeline de agente

Al invocar: En el primer uso, comienza con 1–2 frases sobre qué cubre esta habilidad y por qué es importante, luego proporciona la salida principal. En usos posteriores o cuando el usuario pida omitir, ve directamente a la salida principal.

1. Cómo Twitter Consume las Imágenes

Twitter lee las imágenes en este orden de prioridad:

1. twitter:image — si se establece explícitamente, se usa directamente
2. og:image — recurre a la imagen OG si no existen etiquetas de Tarjeta de Twitter
3. Sin imagen — vista previa de enlace en texto plano

Dato clave: Facebook y LinkedIn NO leen twitter:image. Twitter es la única plataforma que lee las etiquetas de Tarjeta de Twitter. Esto significa que necesitas AMBAS rutas de imagen en tus metadatos, aunque el proceso de renderizado real pueda ser compartido.

2. Especificaciones de Imagen de Twitter

El tipo de tarjeta determina la visualización de la imagen:

Para la mayoría de los casos de uso, apunta a summary_large_image en 1200x675px.

3. Seis Enfoques de Generación (adaptados a Twitter)

Los seis enfoques de generador-de-imagen-og §1 funcionan para imágenes de Twitter. La única diferencia son las dimensiones de salida. Esta sección cubre las adaptaciones específicas de Twitter — consulta generador-de-imagen-og §1 para la documentación completa del proceso de renderizado.

3.1 Generación de Imágenes con IA (Núcleo #1)

Misma estrategia de prompt de tres partes que en OG, pero con estructura específica de Twitter:

Part 1 — Visual description: background, composition, mood
Part 2 — Text specification: EXACT text, in quotes, with size hints
Part 3 — Twitter constraints: "1200x675px, 2:1 aspect ratio, key text in
         upper 60%, dark background preferred for dark mode"

Enfoque híbrido (recomendado): La IA genera el fondo/atmósfera; Satori superpone el texto. Crítico para texto en chino donde los modelos de IA aún tienen dificultades — y el ~40% de uso del modo oscuro en Twitter hace que la precisión del texto sea aún más visible.

Consulta generador-de-imagen-og §1.1 para la tabla completa de comparación de herramientas de IA (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Flujo de Trabajo Nativo del Agente y Consciente del Contenido (Núcleo #2)

Mismo flujo de trabajo de 6 pasos que en OG (§1.2): Leer Contenido → Emparejar Estilo → Extraer Elementos Visuales → Seleccionar Generación → Generar → Validar. Adiciones específicas de Twitter en cada paso:

Paso 2 (Emparejar Estilo) — Consideración del modo oscuro de Twitter: prefiere estilos con fondo oscuro (Terminal/CLI, Midnight Ink Magazine, modo oscuro Brutalista) o estilos con variantes oscuras para X.

Paso 3 (Extraer Elementos Visuales) — El recorte de la cronología de Twitter a ~1:1 en móviles significa que el elemento visual más importante debe funcionar dentro de un cuadrado. Una cinta de datos horizontal que funciona en 1200x675 puede ser invisible en el recorte cuadrado. Extrae al menos un elemento que se lea bien en 1:1.

Paso 4 (Seleccionar Generación) — Mismo árbol de decisiones. Para generación con IA, añade: "¿Sobrevivirá el texto al ancho de renderizado móvil de ~260px en Twitter?"

Paso 6 (Validar) — Ejecuta tanto las comprobaciones de OG como las comprobaciones específicas de Twitter (§8).

3.3 Satori + resvg (Basado en código)

Mismo proceso que en OG. Cambia la altura de 630 a 675. Consulta generador-de-imagen-og §1.3 para la implementación completa.

// Shared endpoint serves both OG and Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}

Luego en los metadatos de la página:

const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Twitter-specific 1200x675
  },
};

3.4 Puppeteer, Servicios Gestionados, Configuración JSON

Igual que en OG — configura la ventana gráfica/altura a 675 en lugar de 630. Consulta generador-de-imagen-og §1.4–1.6. Para el sistema de prioridad de páginas v3 (S/A/B/C) y la selección de pipeline, consulta content-strategy.md y pipeline-guide.md.

4. Consideraciones de Diseño Específicas de X

Twitter renderiza imágenes de manera diferente a Facebook/LinkedIn. Diseña teniendo en cuenta lo siguiente:

Modo oscuro (~40% de los usuarios): Las imágenes aparecen en línea en el feed, rodeadas de tweets. Los fondos oscuros se integran naturalmente; los fondos claros resaltan pero pueden verse discordantes en modo oscuro. Cada plantilla debe tener una variante oscura o un valor predeterminado amigable con el modo oscuro. Entre los 6 estilos, Terminal/CLI, Midnight Ink Magazine y Brutalista (fondo negro) son naturalmente amigables con el modo oscuro. Swiss Minimal y Newspaper deben incluir una alternativa para modo oscuro.

Recorte de cronología (móvil): En móviles, las imágenes de summary_large_image se recortan a ~1:1 en la cronología hasta que se expande el tweet. La imagen completa 2:1 solo es visible al tocar. Coloca el contenido más importante (título, elemento visual principal) en el 60% superior de la imagen — el cuadrado central que sobrevive al recorte. Nunca pongas texto crítico en el 20% inferior.

Legibilidad del texto en tamaños pequeños: Las imágenes de la cronología se muestran a ~260px de ancho en los feeds móviles. Prueba tu plantilla a 1/4 de escala (~300px de ancho) para asegurarte de que el texto siga siendo legible. Esto es más estricto que el tamaño de feed de escritorio de ~500px en OG.

Máscara de borde: Twitter aplica una sutil máscara de esquinas redondeadas a las imágenes de las tarjetas. Los logotipos y elementos críticos colocados a menos de 20px de cualquier borde corren el riesgo de ser recortados parcialmente.

Adaptaciones de plantilla recomendadas para Twitter (por estilo):

5. Pósters de Tarjeta de Reproductor

Para contenido de video/audio, el tipo de tarjeta player requiere una imagen de póster:

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">

La imagen de póster se muestra antes de que el usuario toque reproducir. Diséñala como una miniatura atractiva: incluye una superposición de botón de reproducción (triángulo centrado en un círculo), el título del video y un fotograma del contenido. Se aplica la misma recomendación de relación 2:1. El botón de reproducción debe ser el elemento más grande en la zona del cuadrado central.

Para pósters generados por IA: prompt para "miniatura de video con botón de reproducción centrado, texto del título en el tercio superior, fondo oscuro, 1200x675px."

6. Sistema de Estilos (compartido con OG — 16 estilos)

Las imágenes de Twitter usan los mismos 16 estilos visuales de generador-de-imagen-og §3 y references/style-system-v3.md. Todas las plantillas funcionan para Twitter — solo cambia la altura del lienzo a 675px.

Los mejores para X: Terminal, Brutalista, Neo-Brutalismo, Gradiente Oscuro, Vaporwave — alto contraste + fondo oscuro son óptimos para la cronología de X. Evitar en X: estilos demasiado corporativos sin variante oscura; fondos blanco puro en la cronología de modo oscuro.

7. Fuente y Tipografía

Las mismas reglas que en OG. Consulta generador-de-imagen-og references/typography.md.

Adición específica de Twitter: debido a que las imágenes de la cronología se renderizan a ~260px de ancho (frente al feed de escritorio de ~500px en OG), aumenta el tamaño de fuente mínimo en 4px — usa 28px como mínimo en lugar de 24px.

8. Comprobaciones YAML del Agente

checks:
  # P0 — must pass
  - id: dimensions-twitter
    description: twitter:image is 1200x675px (2:1) or 1200x628px (cross-platform)
  - id: card-type-match
    description: twitter:card is summary_large_image when using a large image
  - id: absolute-url
    description: twitter:image URL is absolute (https://) and publicly accessible
  - id: format
    description: Image format is PNG, JPG, or WebP (not SVG)

  # P1 — should pass
  - id: og-fallback
    description: og:image is also set (as fallback for platforms that don't read twitter:image)
  - id: timeline-safe-zone
    description: Critical text and primary visual anchor are in the top 60%; nothing critical in bottom 20%
  - id: square-crop-survival
    description: The most important visual element reads correctly in a 1:1 center crop (mobile timeline)
  - id: dark-mode
    description: Template includes a dark-background variant or uses a dark-friendly default style
  - id: edge-mask-clearance
    description: Logos and critical elements are ≥20px from all edges (Twitter rounded corner mask)

  # P2 — nice to have
  - id: cross-platform-compatible
    description: Same image at 1200x628px works for both OG and Twitter without separate generation
  - id: ai-text-validated
    description: If AI-generated, all text was validated against source — no hallucinated or misspelled text
  - id: player-poster
    description: Player card pages have a dedicated poster image with play button
  - id: content-aware-twitter
    description: Image reflects page-specific content, not just a title in a Twitter-sized template

9. Errores Comunes

1. Relación de aspecto incorrecta: Usar 1200x630 (1.91:1) de OG sin ajuste. Aunque Twitter lo tolera, 1200x675 (2:1) llena mejor la tarjeta y evita los recuadros negros.
2. Falta la etiqueta twitter:image: Confiar solo en el respaldo de OG — sin twitter:image explícito, pierdes control sobre qué imagen elige Twitter.
3. Texto en el 20% inferior: Twitter recorta las imágenes a ~1:1 en móviles. El texto crítico cerca del borde inferior se corta en la cronología.
4. Sin consideración del modo oscuro: Las imágenes con fondo claro se ven duras en la cronología de modo oscuro de Twitter, que ~40% de los usuarios tienen habilitado.
5. Usar SVG: Twitter no admite SVG para imágenes de tarjeta. Siempre genera PNG o JPG.
6. GIF sin primer fotograma estático: Twitter solo muestra el primer fotograma de los GIFs. Asegúrate de que el fotograma 1 sea una imagen fija significativa.
7. Alucinación de texto de IA en la vista de 260px: El texto generado por IA que se ve correcto a tamaño completo puede mostrar caracteres deformados cuando se renderiza pequeño. Valida a 1/4 de escala.
8. Logotipos tocando los bordes: La máscara de esquinas redondeadas de Twitter recorta ~10px de los bordes. Mantén los logotipos a ≥20px de los bordes.

10. Pruebas

• Validador de Tarjetas: https://cards-dev.twitter.com/validator — muestra exactamente cómo se renderizará la tarjeta. Pega cualquier URL para previsualizar.
• Prueba manual: Tuitea un enlace desde una cuenta de prueba, luego revisa la cronología + vistas expandidas.
• Prueba de modo oscuro: Revisa la tarjeta en clientes de Twitter tanto en modo claro como oscuro.
• Forzar actualización de caché: Twitter almacena en caché los datos de la tarjeta de forma agresiva (hasta 7 días). Después de cambios, usa el Validador de Tarjetas para forzar un re-escaneo.
• Prueba de recorte móvil: Captura la tarjeta con relación de aspecto 1:1 (recorta el centro a 675x675) para verificar que el recorte cuadrado aún comunique el contenido de la página.

11. Habilidades Relacionadas

Estas habilidades son opcionales — esta habilidad funciona de forma independiente. Instálalas si necesitas capacidades adicionales:

Mismo repositorio (siempre instaladas juntas):

• generador-de-imagen-og: Generación de imágenes OG (1200x630, 1.91:1) — el proceso completo de renderizado, los 6 estilos, plantillas base, guía de tipografía, restricciones de Satori. Este generador de Tarjetas de Twitter reutiliza toda su infraestructura.

Repositorios separados (pueden o no estar instalados):

• tarjetas-de-twitter (habilidades-de-marketing): Configuración de etiquetas meta HTML para twitter:card, twitter:site, twitter:creator, validación. Maneja cómo CONFIGURAR la etiqueta; esta habilidad maneja cómo CREAR la imagen.
• open-graph (habilidades-de-marketing): Configuración de etiquetas meta HTML para og:title, og:image, og:url, herramientas de prueba de plataformas
• social-share-generator (habilidades-de-marketing): IU del botón de compartir que consume los datos de la Tarjeta de Twitter cuando los usuarios comparten enlaces en X