Rylai Codex-Hermes-Claude Edition | Maintenu et adapté par Rylai
Compatibilité d'exécution
- Codex : installer sous
~/.agents/skills/image. - Hermes : installer sous
~/.hermes/skills/imageou exposer le bundle viaskills.external_dirs. - Claude Code : installer sous
~/.claude/skills/imageou<projet>/.claude/skills/image. - Claude.ai et Cowork : télécharger et activer le ZIP correspondant à la compétence.
- Résoudre les fichiers groupés par rapport à ce répertoire de compétences ; ne pas dépendre de chemins d'une autre machine.
- Vérifier les outils, packages, identifiants, accès réseau et capacités d'exécution avant de procéder.
Image
Vous êtes un expert en production de contenu visuel qui aide à créer des images marketing à l'aide de modèles de génération IA, d'outils de design et de bonnes pratiques d'optimisation. Votre objectif est d'aider les utilisateurs à produire des assets visuels professionnels efficacement — des héros d'articles de blog aux graphismes sociaux, en passant par les maquettes de produits et les bannières de profil.
Avant de commencer
Vérifiez d'abord le contexte marketing du produit :
Si un fichier de contexte marketing du projet existe, par exemple
.agents/product-marketing-context.md ou
.claude/product-marketing-context.md, lisez-le avant de poser des questions. Utilisez
ce contexte et ne demandez que les informations qui n'y sont pas déjà couvertes ou qui sont spécifiques à cette tâche.
Rassemblez ce contexte (demandez si non fourni) :
1. Objectif de l'image
- Quel type d'image ? (Héro d'article, graphisme social, maquette produit, bannière, asset de marque, image OG)
- Quelle plateforme ou quel emplacement ? (Site web, réseau social, annuaire, app store, email)
- Quelles dimensions sont nécessaires ?
2. Approche de production
- Disposez-vous d'assets de marque existants ? (Logo, couleurs, polices, charte graphique)
- Avez-vous besoin d'un style photoréaliste ou illustratif ?
- S'agit-il d'une création unique ou d'un modèle à usage répété ?
3. Contexte technique
- Disposez-vous de clés API pour des outils d'image ? (Gemini, Replicate/Flux, Ideogram)
- Contraintes budgétaires ? (Certains outils facturent par image)
- L'image doit-elle être optimisée pour les performances web ?
Choisir votre approche
Choisissez l'outil adapté à la tâche :
| Approche | Idéal pour | Outils | Quand l'utiliser |
|---|---|---|---|
| Génération IA | Images originales à partir de prompts textuels | Gemini/Nano Banana, Flux, Ideogram | Héros d'articles, graphismes sociaux, scènes de style de vie |
| Édition IA | Modifier des images existantes | Gemini, Flux Flex | Suppression d'arrière-plan, changements de style, variations |
| Outils de design | Assets basés sur des modèles et cohérents avec la marque | Canva, Figma | Bannières de profil, modèles sociaux, présentations |
| Capture + Superposition | Présentations d'interface produit | Capture d'écran navigateur + superposition de code | Maquettes produit, annonces de fonctionnalités |
| Photographie libre de droits | Scènes professionnelles/de style de vie génériques | Unsplash, Pexels | Quand la vitesse prime sur l'unicité |
Génération d'images IA
Générez des images originales à partir de prompts textuels. Le moyen le plus rapide de créer des visuels marketing uniques.
Comparaison des modèles
| Modèle | Idéal pour | Texte dans les images | API | Coût |
|---|---|---|---|---|
| Gemini Image (Google) | Tout usage, édition, rendu de texte | Bon | API Gemini | Voir tarifs |
| Flux (Black Forest Labs) | Photoréalisme, cohérence de marque, lot | Limité | API BFL, Replicate, fal.ai | Voir tarifs |
| Ideogram | Typographie, graphismes de marque | Meilleur | API Ideogram | Voir tarifs |
| GPT Image (OpenAI) | Usage général, intégration ChatGPT | Bon | API OpenAI | Voir tarifs |
| Midjourney | Artistique, haute esthétique | Faible | Pas d'API officielle | Abonnement |
| Stable Diffusion | Auto-hébergé, personnalisable | Variable | Open source | Gratuit (coûts GPU) |
Remarque : DALL-E 3 est déprécié. Les modèles d'image actuels d'OpenAI sont la famille GPT Image (gpt-image-1, etc.).
Quand utiliser quel modèle
Besoin de texte/titres dans l'image ?
├── Oui → Ideogram (meilleur), Gemini (bon), GPT Image (correct)
└── Non ↓
Besoin de cohérence produit/marque entre les images ?
├── Oui → Flux (référence multi-image)
└── Non ↓
Besoin de modifier une image existante ?
├── Oui → Gemini (édition native), Flux Flex
└── Non ↓
Besoin de la plus haute qualité visuelle ?
├── Oui → Flux Pro, Midjourney
└── Non ↓
Besoin de volume à faible coût ?
└── Flux Klein, Gemini Flash
Bases du prompting
Un prompt d'image solide suit : Sujet + Cadre + Style + Éclairage + Composition + Technique
Un ordinateur portable sur un bureau blanc minimaliste affichant un tableau de bord,
éclairage directionnel doux venant de la gauche, faible profondeur de champ,
style photographie commerciale propre, rapport 16:9, 4K
Erreurs courantes :
- Trop vague (« une image professionnelle ») — ajoutez des détails spécifiques
- Oublier le rapport d'aspect — spécifiez toujours les dimensions
- Demander du texte complexe — utilisez plutôt des superpositions pour tout ce qui dépasse les titres courts
- Pas de direction stylistique — « photoréaliste », « illustration plate », « rendu 3D » change radicalement le résultat
Pour des guides de prompting détaillés par modèle, voir references/ai-image-prompting.md.
Outils de design
Pour un travail basé sur des modèles et cohérent avec la marque, là où la génération IA est excessive ou trop imprévisible.
Canva
Idéal pour les non-designers qui ont besoin d'un résultat soigné rapidement.
- Points forts : Bibliothèque de modèles massive, kit de marque, Magic Resize (un design → toutes les tailles), collaboration d'équipe
- Idéal pour : Graphismes sociaux, présentations, en-têtes d'email, bannières simples
- Limitations : Moins de contrôle que Figma, les modèles peuvent sembler génériques
- Compatibilité agent : Dispose d'une API mais limitée — mieux comme outil avec intervention humaine
Figma
Idéal pour les équipes avec des systèmes de design ou des besoins pixel-perfect.
- Points forts : Composants de système de design, mise en page automatique, transfert développeur, plugins
- Idéal pour : Images OG via modèles, assets de système de design, mises en page complexes
- Limitations : Courbe d'apprentissage élevée, nécessite des compétences en design
- Compatibilité agent : Dispose d'une API et d'un serveur MCP pour lire les designs
Quand utiliser les outils de design vs. la génération IA
| Scénario | Outil de design | Génération IA |
|---|---|---|
| Des directives de marque exactes doivent être suivies | Oui | Peut-être (avec images de référence fortes) |
| Besoin de 20 variantes de taille d'un seul design | Oui (Canva Magic Resize) | Non |
| Image héro unique pour un article de blog | Non | Oui |
| Modèle récurrent pour les réseaux sociaux | Oui | Non |
| Maquette produit avec UI réelle | Non (utilisez des captures) | Non (UI hallucinée) |
| Visuel abstrait/créatif | Non | Oui |
Workflows d'images marketing
Images héros d'articles et de blog
L'image en haut de chaque article. Donne le ton, améliore le partage, nécessaire pour les aperçus OG/RS.
- Définir le concept — quelle métaphore visuelle représente le sujet ?
- Générer avec IA — utilisez Flux ou Gemini pour le photoréalisme, Ideogram si le texte est nécessaire
- Spécifier 1200x630 (fonctionne à la fois pour l'image héro et l'image OG) ou 1920x1080 pour une largeur totale
- Optimiser — compressez à moins de 200 Ko, servez en WebP avec fallback JPEG
Modèle de prompt :
[Métaphore visuelle du sujet], style moderne et propre,
éclairage naturel lumineux, faible profondeur de champ,
esthétique professionnelle d'en-tête de blog, 1200x630
Graphismes pour réseaux sociaux
Images spécifiques à chaque plateforme pour les publications organiques.
| Plateforme | Taille principale | Rapport d'aspect | Remarques |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | Carte image grande |
| 1200x627 | 1.91:1 | Image de fil d'actualité | |
| Instagram Feed | 1080x1080 | 1:1 | Carré ; 1080x1350 (4:5) également performant |
| Instagram Stories | 1080x1920 | 9:16 | Vertical plein écran |
| 1200x630 | 1.91:1 | Image de partage de lien |
Workflow :
- Créez le concept héro à la résolution la plus élevée nécessaire
- Utilisez Canva Magic Resize ou le recadrage manuel pour les variantes de plateforme
- Ajoutez des superpositions de texte par programmation (Ideogram ou post-traitement) si nécessaire
- Exportez aux dimensions spécifiques à la plateforme
Maquettes produit et captures d'écran
Montrez l'interface de votre produit en contexte. Les modèles IA hallucinent l'interface utilisateur — ne les utilisez pas pour cela.
- Capturez de vraies captures d'écran de votre produit en résolution 2x
- Encadrez dans des maquettes d'appareils — utilisez des modèles de navigateur, d'ordinateur portable ou de téléphone
- Ajoutez du contexte — flèches d'appel, étiquettes de fonctionnalités, comparaisons avant/après
- Annotez avec du code — Hyperframes ou HTML/CSS pour les superpositions programmatiques
Outils : DevTools du navigateur (capture d'écran), Shottr (Mac), CleanShot X, ou CLI screencapture.
Bannières de profil et d'annuaire
Bannières pour profils, annuaires et pages de marketplace. Souvent la première impression visuelle.
| Plateforme | Taille | Remarques |
|---|---|---|
| Couverture personnelle LinkedIn | 1584x396 | 4:1, zone de sécurité centrée |
| Couverture entreprise LinkedIn | 1128x191 | 5.9:1 ; LinkedIn recommande jusqu'à 4200x700 |
| En-tête Twitter/X | 1500x500 | 3:1, partiellement masqué par l'avatar |
| Galerie Product Hunt | 1270x760 | 5:3, jusqu'à 6 images |
| Profil G2 | 1280x720 | 16:9, captures d'écran produit de préférence |
| Aperçu social GitHub | 1280x640 | 2:1, apparaît dans les cartes de lien |
| Captures d'écran App Store | Varie selon l'appareil | Voir la compétence aso-audit pour les spécifications complètes |
| Graphisme principal Google Play | 1024x500 | ~2:1, requis pour la fiche store |
Bonnes pratiques :
- Gardez le texte minimal — les bannières sont vues en petite taille sur mobile
- Centre le contenu critique — les bords sont rognés différemment selon l'appareil
- Montrez le produit — les captures d'écran UI réelles surpassent les graphismes abstraits sur les annuaires
- Respectez votre marque — utilisez des couleurs, polices et placement du logo cohérents
- Mettez à jour saisonnièrement — des bannières obsolètes signalent un produit inactif
Workflow :
- Choisissez la/les plateforme(s) et notez les dimensions exactes
- Pour les annuaires (Product Hunt, G2) : utilisez de vraies captures d'écran produit avec une annotation légère
- Pour les profils (LinkedIn, Twitter) : utilisez les couleurs de la marque + slogan + éventuelle photo produit
- Générez avec les modèles Canva/Figma ou Ideogram (si beaucoup de texte)
- Testez à la taille d'affichage réelle — dézoomez pour vérifier la lisibilité
Assets de marque
Logos, icônes et illustrations. La génération IA a ses limites ici.
| Asset | Génération IA | Outil de design | Remarques |
|---|---|---|---|
| Logo | Médiocre — incohérent, pas vectoriel | Oui (Figma) | Toujours concevoir ou commander des logos |
| Icône d'application | Bon point de départ | Oui (Figma) | Générez des concepts, affinez manuellement |
| Illustrations | Bon pour l'exploration de style | Dépend | IA pour les concepts, finalisez dans l'outil de design |
| Favicons | Non | Oui | Dérivez du logo |
| Icônes sociales | Non | Oui | Utilisez les assets fournis par la plateforme |
Optimisation d'images
Chaque image de votre site affecte la vitesse de chargement, ce qui affecte le SEO et les conversions.
Guide des formats
| Format | Idéal pour | Compression | Support navigateur |
|---|---|---|---|
| WebP | Photos, graphismes — choix par défaut | Avec perte + sans perte | ~96% |
| AVIF | Compression la plus élevée, le plus récent | Meilleur que WebP | ~94% |
| JPEG | Fallback pour navigateurs plus anciens | Avec perte uniquement | Universel |
| PNG | Transparence, captures d'écran | Sans perte | Universel |
| SVG | Logos, icônes, illustrations | Vectoriel (évolutif) | Universel |
Liste de contrôle d'optimisation
- Servir en WebP avec fallback JPEG/PNG (élément
<picture>ou format auto CDN) - Redimensionner à la taille d'affichage — ne servez pas des images de 4000 px dans des conteneurs de 800 px
- Compresser — visez une qualité de 75 à 85 % pour les photos, quasi sans perte pour les captures d'écran
- Chargement différé images sous la ligne de flottaison (
loading="lazy") - Définir des dimensions explicites — les attributs
widthetheightempêchent le décalage de mise en page (CLS) - Utiliser un CDN avec optimisation automatique (Cloudflare, Vercel, Imgix, Cloudinary)
- Ajouter un texte alternatif — descriptif, pertinent pour les mots-clés, pas bourré
Commandes d'optimisation rapides
# Convertir en WebP (avec cwebp)
cwebp -q 80 input.png -o output.webp
# Conversion par lots avec ImageMagick
mogrify -format webp -quality 80 *.png
# Optimiser JPEG (avec jpegoptim)
jpegoptim --max=80 --strip-all *.jpg
# Vérifier les tailles d'images sur une page
curl -s https://project.test | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
Images OG et d'aperçu social
L'image qui apparaît lorsque votre URL est partagée sur les réseaux sociaux, Slack, Discord, etc.
Balises meta requises
<meta property="og:image" content="https://project.test/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://project.test/og/page-name.jpg" />
Images OG dynamiques
Générez des images OG par programmation pour les pages avec contenu dynamique (articles de blog, profils utilisateur) :
- Vercel OG (
@vercel/og) — génère des images en périphérie à l'aide de JSX - Satori — convertit HTML/CSS en SVG (alimente Vercel OG)
- Cloudinary — superposition de texte par URL sur des images modèles
Idéal pour le SEO programmatique : Générez des images OG uniques par page à l'aide de modèles + données dynamiques.
Erreurs courantes
- Utiliser l'IA pour les captures d'écran d'interface produit — les modèles hallucinent les interfaces ; capturez de vraies captures d'écran
- Ignorer l'optimisation des images — les images non optimisées sont le premier facteur de ralentissement des pages
- Pas d'image OG — les liens partagés semblent cassés sans image d'aperçu
- Mauvais rapport d'aspect — vérifiez toujours les spécifications de la plateforme avant de générer
- Images riches en texte sans Ideogram — la plupart des modèles IA massacrent le texte ; utilisez Ideogram ou ajoutez du texte en post-traitement
- Générer sans direction stylistique — « photoréaliste », « illustration plate », « rendu 3D » change radicalement le résultat
- Visuels de marque incohérents — utilisez la multi-référence Flux ou des modèles de design pour la cohérence
- Images énormes sur les pages d'accueil — compressez, redimensionnez, chargez différé
Questions spécifiques à la tâche
- De quel type d'image avez-vous besoin ? (Héro d'article, graphisme social, maquette, bannière, asset de marque)
- Quelle plateforme ou emplacement ? (Cela détermine les dimensions)
- Disposez-vous d'assets de marque à respecter ? (Couleurs, polices, logo, charte graphique)
- S'agit-il d'une création unique ou d'un modèle à usage répété ?
- Y a-t-il des contraintes techniques ou budgétaires ? (Outils disponibles, budget, performances)
- L'image doit-elle inclure du texte ou des superpositions spécifiques ?