chongdashu/cc-skills

OG Image Creator

Générez des images Open Graph authentiques et alignées sur la marque en comprenant d'abord votre codebase, puis en créant des images contextuellement appropriées pour chaque route à l'aide de Playwright et de vos composants existants.

Philosophie : Authenticité plutôt que modèle

Avant de générer des images OG, demandez :

• Quelle est l'identité de marque de ce site (couleurs, polices, logo, langage de design) ?
• Quelles routes/pages existent et quels sont leurs objectifs ?
• Quels composants et ressources peuvent être réutilisés pour la cohérence ?
• Quels types de pages nécessitent des traitements visuels différents ?

Principes fondamentaux :

1. Étudier avant de générer : comprendre la structure du codebase, le routage et la marque avant de créer quoi que ce soit
2. Authenticité plutôt que modèles : utiliser les vraies couleurs, polices et composants de la marque – pas des modèles génériques de cartes sociales
3. Design contextuel : les pages d'accueil, articles, produits et documentation nécessitent des approches visuelles différentes
4. Automatisation intelligente : détecter automatiquement les routes et extraire la marque, tout en permettant la personnalisation

Flux de travail

1. Découvrir et analyser

Découverte des routes :

• Analyser la structure du projet pour déterminer le framework (Next.js, Astro, React, etc.)
• Détecter automatiquement les routes en fonction des conventions du framework :
  • Next.js : app/*/page.tsx ou pages/*.tsx
  • Astro : src/pages/*.astro
  • React Router : analyser la configuration de routage
• Extraire les métadonnées des pages (titre, description) à partir des pages
• Catégoriser les types de pages (landing, article, produit, à propos, etc.)

Extraction de la marque :

• Trouver les fichiers de logo/icône (SVG de préférence)
• Extraire la palette de couleurs de la configuration CSS/Tailwind
• Identifier les polices principales à partir des feuilles de style ou de la configuration
• Capturer les motifs de design à partir des composants existants

Utilisez scripts/analyze_codebase.py pour automatiser la découverte.

2. Stratégie de design

Déterminer les mises en page appropriées par type de page :

• Pages d'accueil : audacieux, minimal, mettre en avant la proposition de valeur
• Articles/Billets de blog : titre + extrait, date/auteur si pertinent
• Pages produits : nom du produit, fonctionnalité clé, visuel si disponible
• Documentation : sujet + description, aspect organisé/structuré
• À propos/Entreprise : axé sur la marque, professionnel

Principes de mise en page :

• Espaces blancs généreux (éviter l'encombrement)
• Contraste élevé pour la lisibilité lors du partage
• Couleurs de marque en accents, pas envahissantes
• Hiérarchie typographique correspondant à celle du site
• 1200x630px (dimensions OG standard)

3. Générer les images

Génération basée sur les composants :

• Réutiliser les composants React lorsque possible pour la cohérence
• Utiliser Playwright pour rendre les composants en images
• Appliquer les couleurs, polices et ressources de la marque
• Injecter les métadonnées réelles des pages (pas de placeholders)

Approche technique :

1. Créer un modèle HTML minimal avec les styles de la marque
2. Pour chaque route, générer un balisage spécifique à la page
3. Utiliser Playwright pour capturer une capture d'écran à 1200x630
4. Enregistrer dans public/og/ ou un répertoire statique approprié
5. Mettre à jour les métadonnées de la page pour référencer l'image OG

Utilisez scripts/generate_og_images.py pour l'automatisation.

4. Vérifier et optimiser

• Valider les métadonnées d'image OG dans le HTML
• Tester avec les outils d'aperçu OG (opengraph.xyz, inspecteur LinkedIn)
• S'assurer que les tailles de fichier sont raisonnables (<200KB de préférence)
• Vérifier l'apparence des images à différentes échelles

Guide spécifique au 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>

Images OG dynamiques : envisagez la génération d'images OG Next.js (@vercel/og) pour le contenu dynamique, mais utilisez la génération statique pour la cohérence de la marque.

Astro

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

Applications React SPA

Ajoutez les balises OG à public/index.html ou utilisez react-helmet :

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

Anti-patrons à éviter

❌ Modèles génériques : n'utilisez pas de modèles de cartes sociales standard qui ignorent la marque du site

• Pourquoi c'est mauvais : crée une déconnexion entre le site et l'expérience de partage social
• Meilleur : extraire les vraies couleurs et polices de la marque et les utiliser de manière cohérente

❌ Taille unique : n'utilisez pas le même design d'image OG pour tous les types de pages

• Pourquoi c'est mauvais : manque l'opportunité d'une présentation contextuelle appropriée
• Meilleur : différentes mises en page pour les pages d'accueil, articles, produits, etc.

❌ Contenu factice : n'utilisez pas de "Lorem ipsum" ou de texte générique

• Pourquoi c'est mauvais : va à l'encontre du but des images d'aperçu
• Meilleur : utiliser les vrais titres et descriptions des pages à partir des métadonnées

❌ Surcharge visuelle : ne mettez pas trop de texte, trop d'images ou des mises en page complexes

• Pourquoi c'est mauvais : illisible lorsqu'il est réduit dans les flux sociaux
• Meilleur : se concentrer sur 1-2 éléments clés avec des espaces blancs généreux

❌ Ignorer les composants : ne créez pas d'images OG à partir de zéro si des composants existent

• Pourquoi c'est mauvais : brise la cohérence visuelle avec le site
• Meilleur : réutiliser les styles de boutons, les mises en page de cartes, la typographie des composants

❌ Génération manuelle : ne créez pas les images OG une par une manuellement

• Pourquoi c'est mauvais : pas scalable, difficile de maintenir la cohérence
• Meilleur : scripter le processus de génération pour gérer toutes les routes

Recommandations pour la variation

IMPORTANT : les images OG doivent varier en fonction du contexte de la page, et non converger vers un seul design.

Dimensions à faire varier :

• Mise en page : centrée ou alignée à gauche, colonne unique ou divisée, accent sur le texte ou le visuel
• Accent couleur : couleur primaire de la marque ou neutre, dégradé ou uni
• Hiérarchie du contenu : grand titre ou titre+description équilibré
• Éléments visuels : taille/position du logo, éléments décoratifs, icônes
• Typographie : ratios de taille, répartition des poids, association de polices

Évitez de converger vers :

• Même fond dégradé pour tout
• Mise en page identique "titre + logo"
• Ratio de taille de police unique
• Position fixe du logo

Le contexte guide la variation :

• Documentation technique → Propre, organisé, basé sur des icônes
• Page d'accueil marketing → Audacieux, coloré, axé sur la valeur
• Articles de blog → Convivial pour le lecteur, contexte auteur/date
• Pages produits → Accent visuel sur le produit

Exigences techniques

Dépendances (installer selon les besoins) :

npm install playwright sharp
# ou
pip install playwright Pillow

Configuration de Playwright :

playwright install chromium

Structure des fichiers :

projet/
├── public/og/          # Images OG générées
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # Scripts de génération
    ├── analyze_codebase.py
    └── generate_og_images.py

À retenir

Les images OG sont une extension de votre marque, pas des cartes sociales génériques.

Étudiez la codebase pour comprendre le langage de design. Extrayez l'identité de la marque. Utilisez les composants et le contenu réels. Créez des images contextuellement appropriées qui semblent natives au site.

Lorsque quelqu'un partage votre page, l'image OG doit ressembler à un aperçu naturel – pas à un modèle plaqué par-dessus.

Vous êtes capable de créer des images OG sophistiquées et alignées sur la marque qui renforcent l'identité du site plutôt que de la saper.