instagram-carousel — Carrousel Instagram

Carrousels Instagram

Produit deux choses : (1) le script + la légende et (2) les diapositives au format PNG, prêtes à poster. Les règles proviennent de l'analyse de carrousels réels performants et des retours utilisateurs (voir references/).

Workflow

1. Brief (demander uniquement ce qui manque)

• Sujet / contenu : quoi communiquer, ou les photos/données disponibles.
• Objectif : portée (partages), sauvegardes (valeur pratique), prospects (commenter un mot → DM), ventes, ou portfolio.
• Marque : @handle, couleurs, polices, logo. S'il n'y a rien, choisir un système adapté au sujet et préciser lequel a été choisi.
• Images : les photos de l'utilisateur, une banque d'images gratuite, ou rien. Lire references/images.md. Vous ne générez pas d'images et n'inventez pas de photographies.
• Langue du texte (par défaut : la langue de l'utilisateur).

Si la demande contient déjà suffisamment d'informations, allez-y sans demander.

2. Choisir l'archétype

Situation	Archétype
Enseignement, comparaisons, astuces, un processus, "X erreurs", "avant/après"	A. Éducatif/listicle
Présentation de photographies, produits ou projets avec plusieurs photos	B. Portfolio/photo dump
Une marque, un produit ou une ambiance où le design s'étend comme une bande (panorama, fond continu)	C. Continu/panoramique
Plusieurs éléments avec la même structure de données (matchs, événements, menus, prix, offres d'emploi)	D. Template de série
Un message fort avec peu de texte, marque personnelle, storytelling, ton dramatique/éditorial, avec des photos de personnes ou de scènes	E. Cinématographique

Les archétypes se combinent : un carrousel éducatif (A) peut avoir un fond continu (C) ou des photos cinématographiques (E).

Lire avant d'écrire :

• references/archetypes.md : la section de l'archétype choisi
• references/continuity.md : toujours, car chaque carrousel a une continuité entre les diapositives
• references/fonts.md : toujours, pour choisir un nouvel appairage de polices
• references/colors.md : toujours, pour choisir une palette "2 bases + 1 accent" (sauf si la marque a déjà des couleurs)
• references/copy.md : accroches, appels à l'action et légendes
• references/apple-design.md : tailles minimales, contraste, qualité et révision

2b. Système visuel : planifier et critiquer

Avant le script, définir le système (references/apple-design.md › 4) :

• Couleur : une palette issue de references/colors.md (2 couleurs de base + 1 accent à ≤ 10 %), différente de la dernière utilisée, ou les couleurs de la marque disposées selon le même motif. Indiquer le contraste de chaque paire texte/fond (node scripts/contrast.mjs <texte> <fond> <px>).
• Typographie : choisir un appairage dans references/fonts.md différent du dernier utilisé (le journaliser dans references/font-history.md). Indiquer l'échelle en px (minimum 31 px ; texte d'appui ≥ 44 px).
• Continuité : quelle technique relie les diapositives (fond continu, objet sur la jointure, titre coupé…). Au moins le lien 1→2 est obligatoire.
• Signature : l'élément unique dont le carrousel sera mémorisé.

Ensuite, critiquer le plan : "Est-ce que j'aurais fait ceci pour un sujet différent ?" Si oui, c'est un défaut par défaut (voir les 3 looks de template à éviter). Le réviser avant de continuer.

3. Script (livrer à l'utilisateur)

Format :

ARCHÉTYPE : E — Cinématographique (+ continuité par titre coupé)
SYSTÈME : Palette Midnight Gold (#0D1B2A + #D9DEE4 + accent #E2B13C) · Bodoni Moda + Pinyon Script + DM Sans · grain + vignette
CONTINUITÉ : 1→2 le titre "DÉTAIL" est coupé à la jointure ; 3→4 le bureau traverse la jointure
SIGNATURE : un mot géant par diapositive dans une police expressive, derrière le sujet

01 · COUVERTURE | Titre : … | Sous-titre : … | Visuel : … | Liens vers 02 : …
02 · …        | Titre : … | Texte : … (≤ 15 mots) | Visuel : …
…
NN · CTA      | …

LÉGENDE :
…
HASHTAGS / MOTS-CLÉS :
…
IMAGES : liste des photos nécessaires (avec la source de chacune ou le prompt suggéré)

Si l'utilisateur souhaite d'abord voir le script, s'arrêter ici et attendre. Sinon, passer aux diapositives.

4. Construire les diapositives (HTML)

1. Copier assets/kit/ vers <output>/kit/ (donnant kit/base.css et kit/carousel.js).

2. Partir de l'exemple le plus proche dans assets/examples/, le copier vers <output>/carousel.html et modifier la marque, les polices et le contenu :

   Exemple	Montre
   A-educational.html	Comparaisons et framework, avec un disque reliant 1→2
   B-portfolio.html	Collages de photos
   C-continuous.html	Panorama encadré à travers les diapositives
   C2-continuous-background.html	Fond continu avec des produits sur les jointures
   D-series.html	Template répété avec data-fit
   E-cinematic.html	Photo plein fond, étalonnage couleur, mot géant dans une police expressive

3. Règles du kit (détails dans references/design.md) :

   • Chaque diapositive est <section class="slide"> en 1080×1350 ; light = fond clair ; clear = transparent (montre le fond continu).
   • Fond continu : <div class="backdrop"> en premier enfant de .carousel, aussi large que toutes les diapositives.
   • Éléments traversant les diapositives : enfants de .carousel avec class="span" et un left absolu en px (la diapositive k commence à (k-1)*1080px).
   • <div class="hdr"> = en-tête à 3 éléments (optionnel). <div class="nav" data-auto> = barre PRÉC./SUIV., optionnelle et non utilisée par défaut (voir règle 4).
   • data-fit="group" sur une ligne avec white-space:nowrap : réduit le texte jusqu'à ce qu'il tienne et applique la même taille à tout le groupe.
   • Images : <div class="media" style="background-image:url('photo.jpg')">. Pas de photo : <div class="ph">description</div>.
   • Photos de sources différentes : les unifier avec .grade (étalonnage couleur), .vignette et .texture (grain).

5. Rendu et vérification

node <skill>/scripts/render.mjs <output>/carousel.html <output>/png

Écrit slide-01.png … slide-NN.png (1080×1350) avec Chrome headless (aucune dépendance npm).

Ouvrir les PNG et les vérifier un par un avec la checklist dans references/design.md. Regarder également les paires de diapositives côte à côte pour confirmer que la continuité s'aligne sans décalage. Puis effectuer la revue design à 5 objectifs dans references/apple-design.md › 7 et terminer par "supprimer un accessoire". Corriger et refaire le rendu jusqu'à ce qu'aucun problème Critique ou Haut ne subsiste.

Pour prévisualiser dans un navigateur, ouvrir le HTML sans hashtag : toutes les diapositives apparaissent côte à côte, réduites.

5b. Version vidéo

Si l'utilisateur demande le carrousel animé / au format MP4 (ou utilise /carousel-mp4), suivre references/video.md. Pas de ffmpeg nécessaire ; le son provient des effets intégrés ou d'Openverse (CC0, pas de crédit).

6. Livraison

• png/slide-XX.png
• caption.txt avec la légende, les hashtags et les mots-clés
• le script sous forme de texte dans le chat
• une courte note avec les choix (archétype, polices, palette, continuité, signature), le résumé de la revue design et ce qui manque (placeholders de photos, crédits d'images)

Règles d'or

1. La couverture fait ~80 % du résultat : titre énorme (≥ 120 px), une idée, un visuel central, fort contraste. Jamais de paragraphes sur la couverture.
2. La continuité est obligatoire : la diapositive 2 montre la fin de quelque chose qui a commencé sur la diapositive 1 (titre, objet, forme, fond) pour accrocher l'œil. Ajouter au moins un lien supplémentaire au milieu du carrousel. Exception : archétype D quand les éléments sont indépendants.
3. Variété typographique : chaque carrousel utilise un appairage de polices différent du précédent. Ne pas toujours répéter les mêmes polices ; les mêmes polices deviennent vite lassantes. Le corps du texte reste dans une police lisible ; la personnalité vit dans les titres.
4. Pas de "swipe"/SUIVANT fixe dans le coin : pas de pied de page PRÉC./SUIV. répété ni de "swipe →" sur chaque diapositive. La continuité fait déjà ce travail. Au maximum un indice discret sur la couverture uniquement, et seulement si le design n'a pas de continuité visible.
5. Un concept par diapositive. Titre de 1 à 4 mots, texte d'appui ≤ 15 mots. Si ça ne tient pas, diviser en deux diapositives.
6. Système cohérent, variation contrôlée : même grille et mêmes marges. Varier le fond, l'image et, dans l'archétype E, la police d'affichage au sein de la même famille stylistique.
7. La dernière diapositive a un seul CTA, avec une récompense quand c'est possible (par exemple "Commentez GUIDE et je vous enverrai…").
8. La légende complète, ne répète pas : accroche, contexte, CTA et hashtags/mots-clés.
9. Marges de sécurité : texte important à ≥ 80 px des bords latéraux et loin des jointures, sauf s'il s'agit de l'élément de continuité lui-même.
10. Lisibilité mobile : 1 pt ≈ 2,77 px. Pas de texte en dessous de 31 px (11 pt), texte d'appui ≥ 44 px, contraste ≥ 4,5:1 (≥ 3:1 si ≥ 50 px ou en gras). Le sens ne repose jamais uniquement sur la couleur.
11. Couleur 2 + 1 : deux couleurs de base font le travail (~60/30) et une couleur d'accent apparaît avec parcimonie (≤ 10 %, 1 à 2 endroits par diapositive, jamais sur chaque diapositive). L'accent en texte ne va que sur la base foncée ; sur la base claire, l'utiliser comme une forme avec un texte foncé par-dessus. Le logo n'apparaît que sur la couverture et/ou le CTA.
12. Entre 5 et 10 diapositives (20 max).