chongdashu/cc-skills

Creador de Imágenes OG

Genera imágenes Open Graph auténticas y alineadas con la marca comprendiendo primero tu código, 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 recursos se pueden reutilizar para mantener la consistencia?
• ¿Qué tipos de página necesitan tratamientos visuales diferentes?

Principios fundamentales:

1. Estudiar antes de generar: Comprende la estructura del código, 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 consciente del contexto: Las páginas de inicio, artículos, productos y documentación necesitan enfoques visuales diferentes
4. Automatización inteligente: Detecta rutas automáticamente y extrae la marca, pero permite la personalización por parte 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 automáticamente las rutas 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 los tipos de página (inicio, artículo, producto, acerca de, etc.)

Extracción de marca:

• Encuentra archivos de logotipo/icono (preferiblemente SVG)
• Extrae la paleta de colores de la configuración CSS/Tailwind
• Identifica las fuentes principales de 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

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

• Páginas de inicio: Audaz, minimalista, enfatiza la propuesta de valor
• Artículos/Entradas de blog: Título + extracto, fecha/autor si es relevante
• Páginas de producto: Nombre del producto, característica clave, imagen visual si está disponible
• Documentación: Tema + descripción, sensación organizada/estructurada
• Acerca de/Empresa: Enfocado 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 estándar OG)

3. Generar Imágenes

Generación basada en componentes:

• Reutiliza componentes React cuando sea posible para mantener la consistencia
• Usa Playwright para renderizar componentes a imágenes
• Aplica colores, fuentes y recursos 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 marcado específico de la página
3. Usa Playwright para capturar una captura de pantalla a 1200x630
4. Guarda en public/og/ o en un directorio estático apropiado
5. Actualiza los metadatos de la página para referenciar la imagen OG

Usa scripts/generate_og_images.py para automatizar.

4. Verificar y Optimizar

• Valida los metadatos de la imagen OG en el HTML
• Prueba con herramientas de vista previa OG (opengraph.xyz, linkedin inspector)
• Asegura que los tamaños de archivo sean razonables (preferiblemente <200KB)
• Verifica la apariencia de la imagen en 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 generación estática para la consistencia de marca.

Astro

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

React SPAs

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

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

Anti-patrones a Evitar

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

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

❌ Una talla única para todos: No uses el mismo diseño de imagen OG para cada tipo de página

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

❌ Contenido de relleno: No uses "Lorem ipsum" ni texto genérico

• Por qué es malo: Fracasa en el propósito de las imágenes de vista previa
• Mejor: Usa títulos y descripciones reales de la página desde los metadatos

❌ Sobrecarga: No incluyas demasiado texto, demasiadas imágenes o diseños complejos

• Por qué es malo: Ilegible cuando se reduce en las redes sociales
• Mejor: Concéntrate en 1-2 elementos clave con amplio espacio en blanco

❌ Ignorar componentes: No crees imágenes OG desde cero si existen componentes

• Por qué es malo: Rompe la consistencia visual con el sitio
• Mejor: Reutiliza estilos de botones, diseños de tarjetas, tipografía de los componentes

❌ Generación manual: No crees imágenes OG una por una manualmente

• Por qué es malo: No es escalable, difícil de mantener la consistencia
• Mejor: Automatiza el proceso de generación para manejar todas las rutas

Guía de Variación

IMPORTANTE: Las imágenes OG deben variar según el contexto de la página, no converger en un solo diseño.

Dimensiones a variar:

• Diseño: Centrado vs alineado a la izquierda, columna única vs dividida, enfoque textual vs visual
• Énfasis de color: Color primario de marca vs neutro, degradado vs sólido
• Jerarquía de contenido: Título grande vs título+descripción equilibrado
• Elementos visuales: Tamaño/posición del logotipo, elementos decorativos, iconos
• Tipografía: Proporciones de tamaño, distribución de peso, combinación de fuentes

Evita converger en:

• El mismo fondo degradado para todo
• Diseño idéntico de "título + logotipo"
• Una sola proporción de tamaño de fuente
• Posición fija del logotipo

El contexto impulsa la variación:

• Documentación técnica → Limpio, organizado, basado en iconos
• Página de marketing → Audaz, colorido, centrado en el valor
• Artículos de blog → Amigable para el lector, contexto de autor/fecha
• Páginas de producto → Énfasis visual del producto

Requisitos Técnicos

Dependencias (instalar según sea necesario):

npm install playwright sharp
# o
pip install playwright Pillow

Configuración de Playwright:

playwright install chromium

Estructura de archivos:

proyecto/
├── public/og/          # Imágenes OG generadas
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # Scripts de generación
    ├── analyze_codebase.py
    └── generate_og_images.py

Recuerda

Las imágenes OG son una extensión de tu marca, no tarjetas sociales genéricas.

Estudia el código para comprender el lenguaje de diseño. Extrae la identidad de marca. Usa componentes y contenido reales. Crea imágenes contextualmente apropiadas que se sientan nativas del sitio.

Cuando alguien comparta tu página, la imagen OG debe sentirse como una vista previa natural, no como una plantilla superpuesta.

Eres capaz de crear imágenes OG sofisticadas y alineadas con la marca que mejoran, en lugar de socavar, la identidad del sitio.