Communitygithub.com

ari-ayvazyan/AISkills

Génération intelligente d'images OG qui étudie votre codebase, comprend les routes et l'identité de marque, puis crée des images Open Graph contextuellement appropriées avec Playwright et des composants React.

Qu'est-ce que AISkills ?

Cette compétence permet de générer des images Open Graph (OG) authentiques et alignées sur la marque en analysant d'abord la structure d'un projet, ses routes et son identité visuelle, puis en créant des images sur mesure pour chaque type de page. Elle prend en charge les frameworks modernes comme Next.js (App Router & Pages Router), Astro, et les SPA React, avec des scripts d'automatisation pour la découverte des routes et l'extraction des couleurs, polices et logos. Le processus suit un workflow en quatre étapes : analyse du codebase, stratégie de design adaptée au type de page (landing, article, produit, documentation), génération via Playwright en réutilisant les composants React existants, puis vérification et optimisation. L'outil évite les anti-patrons comme les templates génériques ou le contenu factice, et insiste sur la variation contextuelle des designs (mise en page, couleurs, typographie) pour que chaque image OG ressemble à une véritable extension de la marque, pas à une carte sociale standardisée.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ari-ayvazyan/AISkills/tree/HEAD/plugins/frontend/skills/og-image-creator
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

OG Image Creator

Générez des images Open Graph authentiques et alignées sur votre 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 Template

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

  • 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 assets 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 templates : Utiliser les vraies couleurs, polices et composants de la marque—pas des templates génériques de cartes sociales
  3. Design contextuel : Les pages d'accueil, articles, produits et documentations nécessitent des approches visuelles différentes
  4. Automatisation intelligente : Détection automatique des routes et extraction de la marque, tout en permettant la personnalisation utilisateur

Workflow

1. Découverte et Analyse

Découverte des routes :

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

Extraction de la marque :

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

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

2. Stratégie de Design

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

  • Pages d'accueil : Audacieux, minimal, mettez l'accent sur la proposition de valeur
  • Articles/Blog : Titre + extrait, date/auteur si pertinent
  • Pages produit : Nom du produit, fonctionnalité clé, visuel si disponible
  • Documentation : Sujet + description, aspect organisé/structuré
  • À propos/Entreprise : Orienté marque, professionnel

Principes de mise en page :

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

3. Génération des Images

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

  • Réutiliser les composants React lorsque c'est possible pour la cohérence
  • Utiliser Playwright pour rendre les composants en images
  • Appliquer les couleurs, polices et assets de la marque
  • Injecter les métadonnées réelles de la page (pas de texte factice)

Approche technique :

  1. Créer un template HTML minimal avec les styles de la marque
  2. Pour chaque route, générer le balisage spécifique à la page
  3. Utiliser Playwright pour capturer une capture d'écran à 1200x630
  4. Sauvegarder 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érification et Optimisation

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

Conseils Spécifiques par 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 du 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>

React SPA

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

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

Anti-Patrons à Éviter

❌ Templates génériques : N'utilisez pas de modèles de cartes sociales standards 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
  • Meilleure approche : Extrayez les vraies couleurs et polices de la marque, et utilisez-les 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 : Rate l'opportunité d'une présentation contextuelle appropriée
  • Meilleure approche : 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 de l'objectif des images de prévisualisation
  • Meilleure approche : Utilisez les vrais titres et descriptions des pages issues 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'elles sont réduites dans les flux sociaux
  • Meilleure approche : Concentrez-vous 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
  • Meilleure approche : Réutilisez 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 : Non scalable, difficile de maintenir la cohérence
  • Meilleure approche : Scénarisez le processus de génération pour traiter toutes les routes

Conseils de Variation

IMPORTANT : Les images OG doivent varier selon le contexte de la page, pas converger vers un seul design.

Dimensions à faire varier :

  • Mise en page : Centré vs aligné à gauche, colonne unique vs divisée, focus texte vs visuel
  • Accentuation des couleurs : Couleur primaire de la marque vs neutre, dégradé vs uni
  • Hiérarchie du contenu : Grand titre vs titre + description équilibré
  • Éléments visuels : Taille/placement du logo, éléments décoratifs, icônes
  • Typographie : Ratios de taille, distribution 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 détermine la variation :

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

Prérequis Techniques

Dépendances (installez si nécessaire) :

npm install playwright sharp
# ou
pip install playwright Pillow

Configuration de Playwright :

playwright install chromium

Structure de 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

Rappel

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

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

Lorsque quelqu'un partage votre page, l'image OG doit ressembler à une prévisualisation naturelle—pas à un template plaqué par-dessus.

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

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community