ari-ayvazyan/AISkills

Creador de imágenes OG

Genera imágenes Open Graph auténticas y alineadas con la marca comprendiendo primero tu código base y luego creando imágenes contextualmente apropiadas para cada ruta usando Playwright y tus componentes existentes.

Filosofía: Autenticidad sobre plantillas

Antes de generar imágenes OG, pregunta:

• ¿Cuál es la identidad de marca de este sitio (colores, fuentes, logotipo, lenguaje de diseño)?
• ¿Qué rutas/páginas existen y cuáles son sus propósitos?
• ¿Qué componentes y activos se pueden reutilizar para mantener la coherencia?
• ¿Qué tipos de página necesitan tratamientos visuales diferentes?

Principios fundamentales:

1. Estudiar antes de generar: Comprende la estructura del código base, el enrutamiento y la marca antes de crear nada
2. Autenticidad sobre plantillas: Usa colores, fuentes y componentes reales de la marca, no plantillas genéricas de tarjetas sociales
3. Diseño contextual: Las páginas de aterrizaje, artículos, productos y documentación necesitan enfoques visuales diferentes
4. Automatización inteligente: Detecta rutas automáticamente y extrae la marca, pero permite personalización del usuario

Flujo de trabajo

1. Descubrir y Analizar

Descubrimiento de rutas:

• Analiza la estructura del proyecto para determinar el framework (Next.js, Astro, React, etc.)
• Detecta rutas automáticamente según las convenciones del framework:
  • Next.js: app/*/page.tsx o pages/*.tsx
  • Astro: src/pages/*.astro
  • React Router: Analiza la configuración de rutas
• Extrae metadatos de las páginas (título, descripción)
• Categoriza tipos de página (landing, artículo, producto, acerca de, etc.)

Extracción de marca:

• Busca archivos de logotipo/icono (SVG preferido)
• Extrae la paleta de colores de CSS/configuración de Tailwind
• Identifica las fuentes principales de las hojas de estilo o configuración
• Captura patrones de diseño de componentes existentes

Usa scripts/analyze_codebase.py para automatizar el descubrimiento.

2. Estrategia de diseño

Determina diseños apropiados por tipo de página:

• Páginas de aterrizaje: Audaces, minimalistas, enfatizan la propuesta de valor
• Artículos / Blog: Título + extracto, fecha/autor si es relevante
• Páginas de producto: Nombre del producto, característica clave, imagen si está disponible
• Documentación: Tema + descripción, sensación organizada/estructurada
• Acerca de / Empresa: Centrado en la marca, profesional

Principios de diseño:

• Amplio espacio en blanco (evitar saturación)
• Alto contraste para legibilidad al compartir
• Colores de marca como acentos, no abrumadores
• Jerarquía tipográfica que coincida con el sitio
• 1200x630px (dimensiones OG estándar)

3. Generar imágenes

Generación basada en componentes:

• Reutiliza componentes React cuando sea posible para mantener la coherencia
• Usa Playwright para renderizar componentes en imágenes
• Aplica colores, fuentes y activos de la marca
• Inyecta metadatos reales de la página (no marcadores de posición)

Enfoque técnico:

1. Crea una plantilla HTML mínima con estilos de marca
2. Para cada ruta, genera el marcado específico de la página
3. Usa Playwright para capturar una captura de pantalla a 1200x630
4. Guarda en public/og/ o el directorio estático correspondiente
5. Actualiza los metadatos de la página para referenciar la imagen OG

Usa scripts/generate_og_images.py para la automatización.

4. Verificar y optimizar

• Valida los metadatos de la imagen OG en el HTML
• Prueba con herramientas de previsualización OG (opengraph.xyz, inspector de LinkedIn)
• Asegura que los tamaños de archivo sean razonables (<200KB preferido)
• Comprueba la apariencia de la imagen a diferentes escalas

Guía específica por framework

Next.js

App Router:

// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/og/home.png'],
  },
}

Pages Router:

// pages/index.tsx
<Head>
  <meta property="og:image" content="/og/home.png" />
</Head>

Imágenes OG dinámicas: Considera la generación de imágenes OG de Next.js (@vercel/og) para contenido dinámico, pero usa la generación estática para coherencia de marca.

Astro

---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
  <meta property="og:image" content={ogImage} />
</head>

React SPA

Agrega etiquetas OG a public/index.html o usa react-helmet:

<Helmet>
  <meta property="og:image" content="/og/home.png" />
</Helmet>

Antipatrones a evitar

❌ Plantillas genéricas: No uses plantillas estándar de tarjetas sociales que ignoren la marca del sitio

• Por qué es malo: Crea desconexión entre el sitio y la experiencia de compartir en redes
• Mejor: Extrae colores y fuentes reales de la marca y úsalos de forma coherente

❌ Talla única: No uses el mismo diseño de imagen OG para todos los tipos de página

• Por qué es malo: Pierde la oportunidad de una presentación contextual adecuada
• Mejor: Diseños diferentes para landing, artículos, productos, etc.

❌ Contenido de relleno: No uses