Que fait Carouso ?

Objectif

Produire des posts carrousel en deux phases. La Phase 1 verrouille un système de design avec l'utilisateur : tokens de marque plus une bibliothèque de motifs de mise en page. La Phase 2 compose chaque carrousel à partir de ces motifs : choisir des motifs par diapositive, écrire le contenu, placer les images, effectuer le rendu via des contrôles de qualité.

Verrouiller les tokens. Libérer la composition. C'est ce qui maintient chaque carrousel cohérent avec la marque sans donner l'impression d'être un modèle.

Utiliser un modèle (chemin par défaut)

Six modèles prêts à l'emploi sont fournis dans templates/. Chacun est un look verrouillé (couleurs, polices, tokens clairs et foncés) plus une structure de diapositives, donc aucune intégration n'est nécessaire. La galerie de prévisualisation se trouve dans README.md.

Déclencheurs : « modèle 3 », « modèle n°3 », « pakai modèle 3 », « utilise le modèle 2 pour ... », ou un nom de modèle (« morning cup »). Faites correspondre le numéro ou le nom avec templates/NN-slug/template.json.

Fichiers par modèle : tokens.css (l'apparence), template.json (nom, polices, taille, séquence de diapositives avec motifs et modes), sample.html (l'exemple de carrousel terminé à copier).

Résoudre le modèle. Lire templates/NN-slug/template.json. Si la personne n'a pas donné de numéro et qu'aucun système personnalisé n'existe, lister chaque modèle (numéro, nom, ambiance) à partir des fichiers template.json et demander lequel. Un numéro inconnu obtient la même liste.
Recueillir le brief. Demander une fois, en un seul message, ce qui manque : sujet et angle (obligatoires), nom de la marque et identifiant (les espaces réservés du modèle sont utilisés s'ils refusent), nombre de diapositives (par défaut la longueur de la séquence, autorisé de 5 à 10), images avec un plan de placement (optionnel, voir étape 6). La langue du carrousel suit la langue du brief. Traduire également chaque chaîne fixe dans le balisage : « Mythe », « Fait », « Enregistrer ceci », et le pied de page NN / TT restent, les mots changent.
Planifier à partir de la séquence. Commencer par la sequence du modèle. Garder la couverture en premier, la conclusion en dernier, et le mode de chaque diapositive tel qu'indiqué. Pour un nombre de diapositives différent, supprimer ou répéter les diapositives du milieu dans l'ordre de la séquence, en gardant les modes alternés et sans que deux diapositives adjacentes aient le même motif. Échanger un motif du milieu lorsque le contenu correspond mieux à un autre (les chiffres vers stat-band ou big-number, les étapes vers process-steps, une ligne vers quote), en conservant le mode de cette diapositive. Utiliser cover-split uniquement lorsqu'une image de couverture vérifiée est fournie. Une image placée va sur la diapositive en tant qu'emplacement .photo (voir ci-dessous), ou sur une diapositive image-hero lorsque la photo est l'élément central. Écrire le plan sous forme de liste (numéro de diapositive, motif, mode, contenu en une ligne) avant de construire.
Rédiger le contenu selon les normes de rédaction ci-dessous. Remplacer chaque ligne d'exemple. Aucun élément du sujet d'exemple ne doit subsister.
Construire le HTML. Créer carousels/<slug>/index.html en copiant le sample.html du modèle choisi. Modifier uniquement le lien tokens.css en ../../templates/NN-slug/tokens.css. Les liens fonts.css et system.css se résolvent déjà depuis cette profondeur. Conserver ou supprimer les blocs <section> selon le plan, copier les blocs de motifs depuis design-system/patterns.html pour les diapositives ajoutées, appliquer la classe mode-dark selon le plan, remplir la marque, l'identifiant et les compteurs NN / TT.
Les images passent le contrôle strict à l'étape 4 de la Phase 2 ci-dessous. Placer les copies locales dans carousels/<slug>/images/ et enregistrer la provenance dans carousels/<slug>/provenance.log.
Effectuer le rendu avec la taille et les polices du modèle depuis template.json :

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<polices depuis template.json, séparées par des virgules>"

Corriger le HTML jusqu'à ce que tous les contrôles réussissent. Ne jamais ignorer un contrôle. 8. Vérification visuelle finale comme à l'étape 7 de la Phase 2, puis livrer slide_01.jpg à slide_NN.jpg. Les modèles n'ont pas besoin de last-used.json, car les modes proviennent du modèle.

Les polices sont regroupées dans fonts/, donc rien n'est à installer à part Playwright.

Une personne qui souhaite son propre look au lieu des six modèles utilise le chemin personnalisé ci-dessous.

Système de design personnalisé (chemin optionnel)

Utiliser ce chemin uniquement lorsque la personne demande son propre look, ou envoie une capture d'écran de référence ou du HTML, au lieu de choisir un modèle. Lorsqu'aucun modèle n'a été choisi et qu'aucun système de design verrouillé n'existe encore, proposer d'abord les modèles, et lancer l'intégration ci-dessous uniquement s'ils veulent un système personnalisé. Lorsque ce chemin est exécuté, ne pas commencer à concevoir. Ouvrir d'abord le dialogue d'intégration. Poser une question à la fois, dans cet ordre, chacune avec les choix listés. Accepter une réponse personnalisée à tout moment. Sept questions, puis conception. Si l'utilisateur envoie une capture d'écran ou une référence HTML au lieu de répondre, ignorer le dialogue et passer à la Phase 1, option B.

Style. « Quelle ambiance devrait avoir le carrousel ? » Choix : Ludique et amical / Propre et minimal / Audacieux et frappant / Chaud et élégant / Sombre et premium.
Couleurs. « Choisissez une ambiance de couleurs. » Choix : Terre chaude (bruns, crème, orange) / Naturel frais (verts, crème) / Calme océanique (bleus, blanc) / Contraste audacieux (noir, blanc, un accent fort) / Pastel doux.
Polices. « Choisissez un style de police. Pas besoin de nommer les polices. » Choix : Arrondi et ludique / Sérif élégant / Audacieux et moderne / Propre et simple. Mapper en interne, ne jamais montrer les noms de polices : arrondi-ludique vers Baloo 2 + Quicksand ; sérif-élégant vers Playfair Display + Plus Jakarta Sans ; audacieux-moderne vers Albert Sans + Plus Jakarta Sans ; propre-simple vers Plus Jakarta Sans + Quicksand. Les cinq familles sont regroupées dans fonts/ : lier fonts/fonts.css depuis le HTML du carrousel.
Marque. « Nom de la marque et identifiant pour le filigrane ? » Texte libre, un message. Exemple : « Morning Cup / @morningcup ».
Sujet. « De quoi parlent habituellement les carrousels ? » Texte libre, une ligne. Cela définit le ton du contenu et le contenu d'exemple.
Langue. « Indonésien ou anglais ? » Deux choix. Cela définit chaque chaîne fixe : accroches, CTA, pied de page.
Nom du système. « Comment devrions-nous appeler ce système de design ? » Texte libre, un message. Suggérer un nom par défaut basé sur la marque et le style, par exemple « morningcup-playful ». Le nom est important car l'utilisateur peut conserver plusieurs systèmes et en choisir un par carrousel.

Après la septième réponse, résumer les choix verrouillés en un court message, puis passer à la Phase 1.

Phase 1 : verrouiller le système de design

Deux façons d'entrer. Choisir une.

A. Générer à partir des réponses d'intégration. Définir les tokens :root dans design-system/system.css pour la marque (couleurs, polices, rayon). Effectuer le rendu de trois motifs d'exemple avec ces tokens (une couverture, un corps, une conclusion) et les montrer à l'utilisateur. Itérer jusqu'à approbation.

B. Adapter à partir d'une référence. L'utilisateur envoie une capture d'écran ou un fichier HTML d'un carrousel qu'il aime. L'étudier : rôles des couleurs, échelle typographique, rythme d'espacement, éléments récurrents. Encoder ce qui est appris sous forme de tokens :root, puis effectuer le rendu des motifs d'exemple. Itérer jusqu'à approbation.

Contrôle d'approbation. Le système entre en production uniquement après que l'utilisateur a approuvé les exemples rendus. Le sauvegarder sous son nom de système (par exemple design-systems/morningcup-playful/, contenant system.css, patterns.html et last-used.json). Pour construire un autre système plus tard, relancer le dialogue d'intégration à partir de la question 1.

Phase 2 : composer un carrousel

1. Recueillir le brief

Obtenir cela clairement avant de commencer. Demander ce qui manque. Ne pas deviner.

Sujet et angle, sous forme d'une phrase d'accroche.
Système de design : quel système verrouillé utiliser. Par défaut, utiliser le plus récemment approuvé. Demander lorsqu'il en existe plusieurs. (Sur le chemin du modèle, le modèle est le système de design.)
Nombre de diapositives (par défaut 6-10) et taille (par défaut 1080x1440, ce que system.css affiche ; une hauteur différente nécessite une surcharge de hauteur .slide correspondante).
Images. Pour chaque image : la source (chemin de fichier téléchargé, URL directe ou URL d'article), la diapositive cible et le rôle (héros, divisé ou en ligne). Sans plan de placement explicite, n'utiliser aucune image.

2. Planifier la composition

Lire le last-used.json du système et le catalogue de motifs dans design-system/PATTERNS.md. Assigner un motif par diapositive :

Commencer par un motif de couverture, terminer par un motif de conclusion.
Aucune diapositive adjacente ne partage un motif.
Ne jamais répéter le motif de couverture du carrousel précédent pour la même marque.
Faire correspondre le motif au contenu : les chiffres vers stat-band ou big-number, les séquences vers process-steps, une seule ligne vers quote. Ne pas forcer le contenu dans un motif inadapté.
Alterner les deux modes entre les diapositives : assigner mode-dark à une diapositive ou la laisser claire pour qu'aucune diapositive adjacente ne partage un mode. Commencer avec le mode opposé à la première diapositive du carrousel précédent (lire last-used.json). Un carrousel peut commencer clair, le suivant foncé. Laisser le contenu guider les diapositives qui passent en foncé : les paires de contraste (mythe vs fait, problème vs solution) sont des diapositives foncées naturelles. Écrire le plan comme une simple liste (numéro de diapositive, nom du motif, mode, contenu en une ligne) avant de construire quoi que ce soit.

3. Rédiger le contenu

Une idée par diapositive. Les titres restent sous 8 mots. Le corps reste sous 25 mots par diapositive. Suivre les normes de rédaction ci-dessous.

4. Ingérer et vérifier les images (contrôle strict)

Télécharger ou copier chaque image dans le dossier local images/. Ne jamais utiliser de hotlinking pendant le rendu.
Examiner chaque image avant utilisation. La rejeter lorsque le contenu ne correspond pas au sujet de la diapositive, lorsqu'elle porte un filigrane ou un logo étranger, lorsqu'elle est floue, ou lorsque son côté le plus court est inférieur à 900 px pour une utilisation grande.
Enregistrer la provenance (URL source ou nom de fichier téléchargé) dans provenance.log.
Ne jamais utiliser d'imagerie générée par IA. Cette compétence ne génère aucune image, sans exception.

Emplacement photo. Pour ajouter une image à tout motif de corps, mettre <figure class="photo"><img src="images/<file>.jpg" alt="..."></figure> comme dernier enfant du .content de cette diapositive. Il s'ajuste à la largeur du contenu en 16:10 et prend le rayon et les couleurs du modèle. Utiliser class="photo wide" (5:2) ou class="photo band" (3:1) sur les diapositives denses comme myth-fact ou big-number, style="--focus:50% 40%" pour définir le point de recadrage, et un <figcaption> pour une légende sur un voile. Pour deux photos, utiliser <div class="photos"> contenant deux <figure class="photo"> (carrés, côte à côte, même gouttière que two-cards), ou class="photos short" (4:3) sur les diapositives denses. Pour une diapositive de type héros, mettre la photo bord à bord en haut : ajouter photo-top aux classes <section>, style="--bleed-h:600px" dessus, et <figure class="photo-bleed"><img ...></figure> comme premier enfant. La barre supérieure devient blanche sur un voile et le contenu commence sous la photo. Utiliser environ --bleed-h:440px sur les diapositives denses (myth-fact, big-number). Choisir une photo avec un bord supérieur calme, car la barre supérieure repose dessus. Vérifier que la diapositive passe toujours le contrôle de débordement et conserve au moins 40 px d'espace au-dessus et en dessous du contenu.

5. Construire le HTML

Commencer par le system.css verrouillé (copier le contenu <style> ou lier le fichier) et copier les blocs <section> choisis depuis patterns.html. Remplir les emplacements de contenu et d'images. Référencer les images par des chemins locaux relatifs au HTML. Ne pas inventer de nouvelles mises en page par carrousel. Lorsque le brief nécessite une structure qu'aucun motif ne couvre, c'est une discussion de Phase 1, pas une improvisation de Phase 2.

6. Effectuer le rendu avec le contrôle de qualité

Exécuter scripts/render_carousel.py :

python3 scripts/render_carousel.py --html <fichier.html> --out <répertoire-sortie> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

(Ajuster la largeur, la hauteur, les diapositives et les polices selon le brief et les tokens du système.) Le script se termine par 1 lorsque le nombre de .slide diffère de la demande, lorsque le contenu déborde de sa zone, lorsqu'une boîte englobante de diapositive diffère de la taille demandée, lorsque le texte est plus petit que 20 px, ou lorsqu'une police vérifiée n'a pas pu être chargée. Corriger le HTML et refaire le rendu jusqu'à réussite. Ne jamais ignorer le contrôle manuellement.

7. Vérification visuelle finale et enregistrement

Ouvrir la diapositive 1, une diapositive du milieu et la dernière diapositive. Confirmer que la police d'affichage est rendue, qu'aucun texte n'est rogné, qu'aucun élément ne se chevauche, que les images ne sont pas déformées avec les sujets intacts, et que la marque, l'identifiant et le CTA restent cohérents. Ensuite, mettre à jour le last-used.json du système avec le motif de couverture de ce carrousel, la séquence complète des motifs et le mode de chaque diapositive (par exemple {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}).

Réflexion en design

Appliquer ce raisonnement à chaque étape. C'est ce qui empêche le résultat de ressembler à du contenu IA médiocre.

Avant de rédiger le contenu

Nommer l'idée unique de la diapositive en une phrase. Si vous ne le pouvez pas, la diapositive n'existe pas encore.
Écrire d'abord le titre, puis le réduire à moins de 8 mots sans perdre de sens.
Préférer les noms concrets et les verbes forts aux adjectifs. Nommer l'heure, la température, la quantité.
Relire chaque ligne. Si elle pourrait appartenir à n'importe quelle marque, la réécrire pour celle-ci.

Avant de placer les éléments

Décider d'abord l'ordre de lecture : ce qui est vu en premier, en deuxième, en troisième. La taille et le poids doivent l'imposer.
Chaque élément a besoin d'une raison pour sa position. Aligner sur la grille, ou la briser délibérément (couvertures uniquement).
Traiter l'espace blanc comme un élément de design. Lorsqu'une diapositive semble chargée, réduire le contenu. Ne jamais réduire la police en dessous du minimum.

Normes de rédaction (anti-médiocrité)

Phrases courtes et déclaratives. Une idée par phrase.
Pas de tirets cadratins. Pas de constructions « non seulement X, mais aussi Y ». Pas de triades forcées.
Pas d'ouverture passe-partout ni de vocabulaire IA : « explorer », « débloquer », « élever », « une tapisserie », « un game-changer », « dans le monde actuel en constante évolution ».
Voix active. Mots simples : « utiliser », pas « utiliser au maximum ».
Les accroches utilisent l'un des trois motifs : un écart de curiosité, un chiffre spécifique ou une adresse directe.
Le sous-titre fait une promesse, pas un résumé. Il dit ce que le lecteur gagne en faisant défiler.
Pas d'émojis décoratifs dans les titres. Pas de titres en majuscules.

Principes de mise en page

Hiérarchie : le titre est l'élément le plus grand et le plus audacieux. Un mot ou une phrase de couleur d'accent par titre, rien de plus.
Contraste : le texte sur les photos repose sur un voile ou une carte semi-solide. Jamais directement sur une photo chargée.
Alignement : une marge intérieure cohérente partout. Aligné à gauche par défaut ; les couvertures centrent délibérément.
Typographie : deux familles de polices maximum. Chaque police doit se charger ; le contrôle de rendu rejette tout carrousel avec une police de secours.

Contrôle final avant livraison

Lire chaque diapositive à voix haute. Si une phrase sonne contre nature, la réécrire.
Vérifier que la progression des diapositives raconte une histoire complète. La première diapositive accroche, les diapositives du milieu construisent, la dernière donne une action.
Vérifier que chaque image est nette et recadrée correctement. Si une image ne peut pas être recadrée proprement, la remplacer.
Tester le rendu avec --check-fonts activé. Ne jamais livrer sans que tous les contrôles soient verts.

Structure des fichiers

carousels/
  <slug>/
    index.html
    images/
    provenance.log
templates/
  NN-slug/
    template.json
    tokens.css
    sample.html
design-systems/
  <system-name>/
    system.css
    patterns.html
    last-used.json
design-system/
  system.css
  patterns.html
design-system/PATTERNS.md
scripts/
  render_carousel.py
fonts/
  fonts.css
  (fichiers de polices)

Carouso

Qu'est-ce que Carouso ?

Demander à votre IA préférée

Aperçu

Documentation