mohitagw15856/créateur-de-vignettes

Compétence Créateur de Vignettes (via Gemini)

Génère des propositions de vignettes pour articles et newsletters en agissant comme un agent de génération d'images directement dans Claude Code. Au lieu de jongler entre des outils et de solliciter l'interface web de Gemini une image à la fois, cette compétence permet à Claude d'effectuer la boucle complète : lire le contenu, proposer des compositions, écrire des prompts adaptés, appeler l'API Gemini, évaluer les résultats et renvoyer un classement avec des justifications concises.

Le résultat est constitué de propositions de vignettes prêtes pour la production, que vous pouvez intégrer directement dans votre CMS, votre outil de newsletter ou votre planificateur de réseaux sociaux.

---

Prérequis

Ces deux éléments doivent être en place avant que la compétence puisse générer des images :

1. Clé API Gemini

Obtenez une clé gratuite depuis Google AI Studio.

Définissez-la comme variable d'environnement :

export GEMINI_API_KEY=<votre-clé>

Pour la conserver entre les sessions, ajoutez-la à votre profil shell (~/.zshrc ou ~/.bashrc) :

echo 'export GEMINI_API_KEY=<votre-clé>' >> ~/.zshrc
source ~/.zshrc

Vérifiez qu'elle est définie :

echo $GEMINI_API_KEY

2. Script generate_image.py

Ce script doit exister à l'emplacement ./generate_image.py à la racine du projet. Le modèle complet est fourni dans la section Modèle de Script ci-dessous. Claude vérifiera sa présence et proposera de le créer s'il manque.

Dépendances Python :

pip install google-generativeai Pillow requests

Ou avec uv :

uv pip install google-generativeai Pillow requests

---

Entrées Requises

Claude demandera ces informations si elles ne sont pas fournies :

Entrée	Requis	Notes
Contenu de l'article ou URL	Oui	Collez le texte intégral de l'article, ou fournissez une URL à récupérer. Utilisé pour extraire les thèmes, les accroches et les arguments clés pour la composition.
Couleurs de la marque	Recommandé	Codes hexadécimaux ou noms descriptifs. Ex : #1A1A2E (marine), #E94560 (corail). Si non fourni, Claude utilise des valeurs par défaut neutres et propres.
Polices / style typographique	Recommandé	Ex : "sans-serif gras", "serif éditorial", "Neue Haas Grotesk". Utilisé dans le prompt pour guider le traitement du texte.
Description de référence de style	Recommandé	Ex : "illustration plate, minimaliste, comme le site marketing de Stripe" ou "photorealiste, fond sombre, contraste élevé". Une URL d'image de style peut également être fournie.
Dimensions de sortie	Non	Par défaut 1792x1024 (paysage, vignette d'article standard). Options : 1024x1024 (carré), 1024x1792 (portrait/mobile).
Nombre de propositions	Non	Par défaut 4. Min 1, max 8 (limites de l'API et coût).
Titre de l'article (si différent du H1)	Non	Utilisé comme élément de texte principal dans les prompts d'image.
Sélection des propositions	Non	Après avoir proposé des compositions, Claude demande lesquelles générer. L'utilisateur peut répondre "toutes" ou choisir par numéro.

---

Structure de Sortie

Phase 1 — Propositions de Composition (texte, avant tout appel API)

Claude présente 3 à 4 concepts de composition pour approbation par l'utilisateur. Format :

Concepts de Composition pour : "[Titre de l'Article]"

1. AFFIRMATION FORTE
   Disposition : Fond sombre pleine page, grand titre blanc centré,
                point de données d'accent unique (ex. "3x plus rapide") en couleur de marque en dessous
   Ambiance :   Haute autorité, style newsletter
   Idéal pour : LinkedIn, en-têtes Substack
   Justification : L'affirmation centrale de l'article ("X surpasse Y de 3x") est suffisamment
                   spécifique pour ancrer le visuel — les lecteurs s'arrêtent sur les données.

2. OBJET CONCEPTUEL
   Disposition : Illustration d'objet centrale (ex. une horloge cassée pour un article sur le temps perdu),
                titre dans le tiers supérieur, fond à texture minimale
   Ambiance :   Éditorial, style Medium
   Idéal pour : En-tête de blog, couverture Medium, pré-en-tête d'email
   Justification : Offre une flexibilité de métaphore visuelle aux directeurs artistiques ; fonctionne à toutes les tailles.

3. SÉPARATION DE CONTRASTE
   Disposition : Moitié gauche couleur de marque, moitié droite blanche ou image,
                titre sur le côté couleur, sous-texte de soutien sur le côté blanc
   Ambiance :   Propre, professionnel, style startup
   Idéal pour : Newsletter, première diapositive de carrousel LinkedIn
   Justification : La disposition divisée est performante dans les tests A/B de newsletters ;
                  le texte est lisible en petites tailles.

4. UNIQUEMENT TYPOGRAPHIQUE
   Disposition : Aucune illustration, traitement de titre surdimensionné,
                nom de l'auteur en petites capitales en bas, fine règle de séparation
   Ambiance :   Premium, confiant, éditorial
   Idéal pour : Substack, Ghost, listes d'email à forte densité
   Justification : Fonctionne lorsque la marque a une forte identité typographique. Le plus rapide à produire.

Quelles compositions souhaitez-vous générer ? (Répondez avec les numéros, ex. "1, 3" ou "toutes")

Phase 2 — Fichiers d'Images Générées

Après la génération, Claude sauvegarde les fichiers dans ./thumbnails/[slug-de-l-article]/ :

thumbnails/
└── slug-de-l-article/
    ├── candidate_01_affirmation_forte.png
    ├── candidate_02_objet_conceptuel.png
    ├── candidate_03_separation_contraste.png
    ├── candidate_04_typographique.png
    └── rapport_evaluation.md

Phase 3 — Tableau Récapitulatif d'Évaluation

Claude évalue chaque image retournée via vision par ordinateur et produit :

Évaluation des Vignettes — "[Titre de l'Article]"
Généré : 2026-05-27  |  Modèle : Gemini Imagen  |  Dimensions : 1792x1024

| # | Candidate | Composition | Adéquation Marque /10 | Lisibilité Texte /10 | Recommandation |
|---|---|---|---|---|---|
| 1 | candidate_01_affirmation_forte.png | Affirmation Forte | 9 | 8 | ★ Meilleur choix — ancre de données solide, couleurs de marque correctes, titre lisible à 200px de large |
| 2 | candidate_02_objet_conceptuel.png | Objet Conceptuel | 7 | 9 | Bonne alternative — lisible, propre, mais le style d'illustration a légèrement dévié de la marque |
| 3 | candidate_03_separation_contraste.png | Séparation de Contraste | 8 | 7 | Fonctionne bien en taille réelle ; tester à la taille de la vignette avant publication — le texte à droite se resserre |
| 4 | candidate_04_typographique.png | Typographique | 9 | 10 | Plus fort pour l'email — risque de déviation de marque nul, entièrement basé sur le texte |

Recommandé pour le web :          candidate_01_affirmation_forte.png
Recommandé pour l'email/mobile : candidate_04_typographique.png
Recommandé pour les réseaux :     candidate_03_separation_contraste.png

Fichiers sauvegardés dans : ./thumbnails/slug-de-l-article/

---

Comment Claude Doit Exécuter Cette Compétence

Étape 1 — Ingérer et analyser l'article

Accepter le contenu de l'article sous forme de texte collé ou d'URL.

Si une URL est fournie, récupérez la page et extrayez :

• Le titre H1
• Les 3 à 5 premiers paragraphes (l'accroche, l'argument central et les points clés)
• Toute statistique notable ou cadre nommé mentionné
• Le nom de l'auteur (pour les compositions typographiques)

Si du texte est collé, lisez-le directement. Concentrez-vous sur :

• L'accroche : Quelle est l'affirmation ou la tension d'ouverture ?
• La thèse centrale : Quelle est l'unique chose que l'article argumente ou enseigne ?
• Les spécificités clés : Tous les chiffres, cadres nommés ou exemples concrets qui pourraient ancrer un visuel
• Le ton : Est-ce formel/autoritaire, conversationnel/accessible, provocateur/basé sur le défi ?

Résumez ces constats en interne avant de proposer des compositions — les propositions doivent sembler adaptées à cet article spécifique, pas génériques.

Étape 2 — Collecter les spécifications de marque

Demandez à l'utilisateur les spécifications de marque si elles ne sont pas fournies :

Pour générer des vignettes conformes à la marque, j'ai besoin de quelques détails :

1. Couleurs de la marque (codes hexadécimaux ou descriptions) — ex. #1A1A2E, #E94560
2. Préférence de style de police — ex. "sans-serif gras", "serif éditorial", "géométrique"
3. Style visuel — ex. "minimal plat", "photorealiste", "illustré", "uniquement typographique"
4. Références de style — décrivez une marque ou une publication dont vous souhaitez reproduire l'esthétique,
   ou partagez une URL d'image

Si vous n'avez pas encore de spécifications de marque, dites "utiliser les valeurs par défaut" et j'utiliserai un
style éditorial professionnel sombre sur blanc.

Si l'utilisateur dit "utiliser les valeurs par défaut", appliquez :

• Fond : #FFFFFF ou #0F0F0F (mode sombre par défaut)
• Accent : #2563EB (bleu)
• Style de police : sans-serif géométrique gras
• Style : minimal plat, sans textures, contraste élevé

Étape 3 — Proposer des concepts de composition

Rédigez 3 à 4 concepts de composition adaptés au ton et au contenu de l'article. Chaque concept doit :

• Avoir un nom (étiquette courte et mémorable)
• Décrire la disposition avec précision (où va le titre, quel élément visuel l'ancre, traitement du fond)
• Noter l'ambiance et le cas d'utilisation pour lequel il est le mieux adapté
• Inclure une phrase de justification expliquant pourquoi cette composition correspond à cet article spécifique

Après avoir présenté les concepts, demandez lesquels générer. Attendez la confirmation de l'utilisateur avant de faire des appels API.

Étape 4 — Rédiger les prompts de génération d'image Gemini

Pour chaque composition sélectionnée, rédigez un prompt de génération d'image détaillé. Les prompts de génération d'image suivent une grammaire différente des prompts de texte — ils sont descriptifs, pas instructifs.

Structure du prompt :

[Sujet/composition] + [Style] + [Palette de couleurs] + [Ambiance/éclairage] +
[Traitement du texte si présent] + [Ce qu'il faut éviter]

Exemple de prompt pour la composition Affirmation Forte :

Image de vignette d'article. Grand texte de titre blanc sans-serif gras lisant "3x Plus Rapide Que Les
Méthodes Traditionnelles" centré sur un fond bleu marine foncé (#1A1A2E). Petit texte d'accent corail
(#E94560) en dessous lisant le sous-titre. Design minimal plat, pas de dégradés, pas d'éléments de banque
 d'images, pas de personnes. Style éditorial professionnel propre, contraste élevé, format d'en-tête de newsletter,
 orientation paysage 16:9. La composition est typographique — le texte est le héros, aucune illustration requise.
 Éviter : clip art, ombres portées, faible contraste, disposition encombrée.

Règles du prompt :

• Inclure les codes hexadécimaux exacts lorsque les couleurs de marque sont fournies
• Spécifier le texte exact du titre à faire apparaître dans l'image
• Nommer le style explicitement ("design plat", "éditorial", "photorealiste") — Gemini réagit bien aux noms de catégories de style
• Ajouter un prompt négatif ("Éviter : ...") à la fin pour réduire les déviations du style de marque
• Garder les prompts sous 300 mots — les prompts plus longs ne produisent pas systématiquement de meilleurs résultats

Étape 5 — Vérifier les prérequis et exécuter le script de génération

Avant d'appeler l'API, vérifiez :

# Vérifier que la clé API est définie
echo $GEMINI_API_KEY

# Vérifier que le script existe
ls -la ./generate_image.py

# Vérifier les dépendances
python3 -c "import google.generativeai, PIL, requests; print('Dépendances OK')"

Si le script est manquant, proposez de le créer en utilisant le modèle dans la section Modèle de Script ci-dessous.

Exécutez le script de génération pour chaque prompt :

python3 generate_image.py \
  --prompt "votre prompt complet ici" \
  --output "./thumbnails/slug-article/candidate_01_affirmation_forte.png" \
  --width 1792 \
  --height 1024

Ou passez tous les prompts dans un fichier de configuration par lot :

python3 generate_image.py --config ./thumbnails/slug-article/prompts.json

Étape 6 — Évaluer les images générées

Après que chaque image est sauvegardée, examinez-la en utilisant la vision par ordinateur. Évaluez sur deux dimensions :

Adéquation à la Marque (score /10) :

• Les couleurs de la marque sont-elles correctes ? (1-2 points chacune)
• Le style correspond-il à l'esthétique demandée ? (2 points)
• La disposition est-elle cohérente avec le brief de composition ? (2 points)
• Y a-t-il des artefacts d'IA, du texte déformé ou des éléments non intentionnels ? (-1 par problème)

Lisibilité du Texte (score /10) :

• Le texte du titre est-il lisible en pleine résolution ? (3 points)
• Le texte du titre est-il lisible lorsque l'image est réduite à 300px de large (taille de vignette) ? (3 points)
• Y a-t-il un contraste suffisant entre le texte et le fond ? (2 points)
• Le texte est-il placé dans des zones sûres (pas coupé sur les bords) ? (2 points)

Remarque : Gemini Imagen rend parfois le texte avec des fautes d'orthographe ou des formes de lettres déformées. Si cela se produit, notez-le dans l'évaluation et suggérez à l'utilisateur d'ajouter la superposition de texte manuellement dans Canva ou Figma.

Étape 7 — Produire le rapport d'évaluation

Rédigez le tableau récapitulatif d'évaluation (format montré dans la section Structure de Sortie) et sauvegardez-le en tant que rapport_evaluation.md dans le dossier de sortie.

Incluez :

• Une justification en une ligne pour chaque score
• Une recommandation de meilleur choix par cas d'utilisation (web, email/mobile, social)
• Toute note de production (ex. "le rendu du texte n'est pas parfait sur candidate_02 — superposez le texte manuellement")
• Les prompts complets utilisés, afin que l'utilisateur puisse itérer directement dans AI Studio si nécessaire

Étape 8 — Proposer une itération

Après avoir livré les propositions, proposez un cycle d'itération :

Souhaitez-vous que j'itère sur l'un de ceux-ci ?

Options :
- Ajuster les couleurs ou le style sur une proposition spécifique
- Essayer un concept de composition différent
- Modifier le texte du titre
- Relancer avec différents paramètres Gemini (température/seed différente)
- Générer des variantes supplémentaires du meilleur choix

Dites-moi simplement quoi changer.

---

Modèle de Script

Claude doit proposer d'écrire ce fichier si generate_image.py n'est pas présent. Voici le modèle canonique à utiliser.

#!/usr/bin/env python3
"""
generate_image.py — Wrapper Gemini Imagen pour la compétence Créateur de Vignettes.

Usage :
    python3 generate_image.py --prompt "..." --output "./out.png" [--width 1792] [--height 1024]
    python3 generate_image.py --config ./prompts.json

Format du JSON de configuration :
    [
      {
        "prompt": "...",
        "output": "./thumbnails/slug/candidate_01.png",
        "width": 1792,
        "height": 1024
      }
    ]

Prérequis :
    pip install google-generativeai Pillow
"""

import os
import sys
import json
import argparse
import base64
from pathlib import Path

try:
    import google.generativeai as genai
    from google.generativeai import types as genai_types
except ImportError:
    print("ERREUR : google-generativeai n'est pas installé. Exécutez : pip install google-generativeai")
    sys.exit(1)

try:
    from PIL import Image
    import io
except ImportError:
    print("ERREUR : Pillow n'est pas installé. Exécutez : pip install Pillow")
    sys.exit(1)


def get_api_key() -> str:
    key = os.environ.get("GEMINI_API_KEY", "")
    if not key:
        print("ERREUR : La variable d'environnement GEMINI_API_KEY n'est pas définie.")
        print("Obtenez une clé sur : https://aistudio.google.com/app/apikey")
        print("Exécutez ensuite : export GEMINI_API_KEY=<votre-clé>")
        sys.exit(1)
    return key


def generate_image(
    prompt: str,
    output_path: str,
    width: int = 1792,
    height: int = 1024,
) -> bool:
    """
    Appelle Gemini Imagen pour générer une seule image et la sauvegarder dans output_path.
    Retourne True en cas de succès, False en cas d'échec.
    """
    key = get_api_key()
    genai.configure(api_key=key)

    try:
        model = genai.GenerativeModel("gemini-2.0-flash-exp-image-generation")
    except Exception:
        # Fallback vers le dernier modèle d'image disponible
        model = genai.GenerativeModel("gemini-2.0-flash-exp")

    generation_config = genai_types.GenerationConfig(
        # taille d'image fixe pour la vignette ; Gemini prend en charge 1792x1024, 1024x1024, 1024x1792
    )

    response = model.generate_content(
        prompt,
        generation_config=generation_config,
    )

    # Vérifier qu'une image a été retournée
    if not response.candidates or not response.candidates[0].content or not response.candidates[0].content.parts:
        print(f"ERREUR : Aucune image générée pour le prompt. Réponse : {response.text[:200] if hasattr(response, 'text') else 'aucune réponse'}")
        return False

    # Sauvegarder la première image du résultat
    output_file = Path(output_path)
    output_file.parent.mkdir(parents=True, exist_ok=True)

    for part in response.candidates[0].content.parts:
        if part.inline_data and part.inline_data.mime_type.startswith("image/"):
            image_data = part.inline_data.data
            output_file.write_bytes(image_data)
            print(f"Image sauvegardée : {output_path}")
            return True

    print(f"ERREUR : Aucune donnée d'image trouvée dans la réponse pour le prompt.")
    return False


def generate_batch(config_path: str) -> None:
    """
    Lit un fichier JSON avec une liste de prompts et génère des images pour chacun.
    """
    with open(config_path, "r", encoding="utf-8") as f:
        tasks = json.load(f)

    success_count = 0
    for i, task in enumerate(tasks):
        print(f\n[{i+1}/{len(tasks)}] Génération : {task.get('output', 'unknown')}")
        ok = generate_image(
            prompt=task["prompt"],
            output_path=task["output"],
            width=task.get("width", 1792),
            height=task.get("height", 1024),
        )
        if ok:
            success_count += 1
        else:
            print(f"  ÉCHEC pour le prompt [{i+1}]")

    print(f\nTerminé. {success_count}/{len(tasks)} images générées avec succès.")


def main():
    parser = argparse.ArgumentParser(description="Générer des images avec Gemini Imagen")
    parser.add_argument("--prompt", type=str, help="Prompt de génération d'image")
    parser.add_argument("--output", type=str, help="Chemin du fichier de sortie (.png)")
    parser.add_argument("--width", type=int, default=1792, help="Largeur de l'image (par défaut : 1792)")
    parser.add_argument("--height", type=int, default=1024, help="Hauteur de l'image (par défaut : 1024)")
    parser.add_argument("--config", type=str, help="Chemin vers le fichier de configuration JSON pour les traitements par lot")

    args = parser.parse_args()

    if args.config:
        generate_batch(args.config)
    elif args.prompt and args.output:
        ok = generate_image(args.prompt, args.output, args.width, args.height)
        sys.exit(0 if ok else 1)
    else:
        parser.print_help()
        sys.exit(1)


if __name__ == "__main__":
    main()

---

Considérations sur les Coûts

• Gemini Imagen (via l'API) : Actuellement gratuit pendant la période de preview. Google facturera à terme par image.
• Claude Code : Les jetons d'entrée/sortie standard s'appliquent pour l'analyse, les évaluations et les interactions.
• Stockage : Les fichiers PNG générés sont enregistrés localement. La taille typique est de 200 à 600 Ko par image.
• Limites de débit : Gemini impose des limites de débit (RPM). Pour 4 images, la génération prend généralement 20 à 40 secondes au total. Pour 8 images, prévoyez jusqu'à 90 secondes.

---

Dépannage

Problème	Cause probable	Solution
GEMINI_API_KEY not set	Clé API manquante	Exécutez export GEMINI_API_KEY=<votre-clé>
ModuleNotFoundError: No module named 'google.generativeai'	dépendances manquantes	Exécutez pip install google-generativeai
generate_image.py not found	Script manquant	Demandez à Claude de créer le script en utilisant le modèle ci-dessus
400 Bad Request: prompt too long	Prompt > 300 mots	Raccourcissez le prompt ; concentrez-vous sur la disposition, les couleurs, le style
Image contains garbled text	Artefact connu d'Imagen	Notez-le dans l'évaluation ; proposez la superposition manuelle du texte dans Canva/Figma
Safe filter blocked generation	Contenu signalé	Ajustez le prompt — supprimez les personnalités publiques, les marques déposées ou tout langage sensible
Thumbnail takes too long	Plusieurs générations simultanées	Réduisez le nombre de propositions à 4 maximum ; exécutez la génération une par une