couvertures-de-reels

Couvertures de reels

Chaque reel a sa propre couverture. Elle est construite à partir de vos vraies photos et composée dans votre vraie typographie, et le texte reste dans la partie qu'Instagram affiche dans la grille du profil.

Configuration : définissez votre marque ici

Modifiez ces réglages une fois avant le premier lancement.

réglage	où	défaut
couleur d'accent	--brand dans scripts/cover.html	#3b82f6
police du titre	--display-font dans scripts/cover.html	Anton (gratuite, Google Fonts)
police du sous-titre	.sub dans scripts/cover.html	Montserrat Bold (gratuite)
sous-titre par défaut	vos couvertures	ex. "d'un Cuisinier Maison", ou rien
dossier photos	photos_dir dans library.json	<CHEMIN_VERS_VOS_PHOTOS_DE_COUVERTURE>
dossier photos Canva (optionnel)	canva_folder dans library.json	<VOTRE_ID_DE_DOSSIER_CANVA>
document maître de couverture Canva (optionnel)	référence pour votre style actuel	<VOTRE_ID_DOC_MAITRE_COUVERTURE_CANVA>
maquette Canva (optionnelle)	utilisée pour exporter les photos hors de Canva	<VOTRE_ID_MAQUETTE_CANVA>
journal des couvertures	variable d'env COVER_LOG pour pick.py	drafts/social/cover-log.json à la racine du projet
destination des couvertures finalisées	étape 8	<VOTRE_DOSSIER_VIDEO>/<Video> AAAA-MM-JJ/Covers/
mots interdits	règles hooks.md	votre liste (ex. un ancien nom d'offre)

Conçu pour Instagram. La couverture peut être utilisée sur un post IG normal + TikTok + Shorts comme vignette vidéo (par exemple le videoThumbnailUrl de Metricool). Seule la grille Instagram compte pour le design. Ne remplacez jamais une couverture qu'un post possède déjà.

Ne générez jamais l'image par IA. Les arrière-plans sont vos photos, et les mises en page sont copiées de vos couvertures. Le code les arrange seulement.

Style maison par défaut (modifiable selon vos goûts)

Référencez uniquement vos couvertures les plus récentes dans votre document maître. Les anciens styles que vous avez abandonnés ne comptent pas.

• une photo lumineuse et neutre de vous avec un accessoire pertinent (ordinateur, appareil photo, téléphone, produit), avec un mur uni là où le texte va
• le titre en police d'affichage blanche, TOUT EN MAJUSCULES à chaque fois, centré, 2 ou 3 lignes, assez petit
• un sous-titre optionnel en Montserrat Bold, avec majuscules et minuscules normales
• par défaut : pas d'ombre, pas de contour, pas de bande ni d'assombrissement derrière le texte, pas de texte de couleur d'accent
• pas d'étiquettes, pas de texte incliné, pas de polices script ou cursives, pas de mises en page avec grands chiffres ou séries
• le seul ajout : une flèche simple dessinée à la main de couleur d'accent, de temps en temps
• rien sous l'icône du reel : la grille Instagram la place dans le coin supérieur droit de chaque tuile. render.mjs prévient si quelque chose se trouve à x > 760 et y < 540.

Les règles pour les titres, types d'accroche et étiquettes se trouvent dans hooks.md. Lisez-le avant d'écrire un titre.

Fichiers

scripts/cover.html	la seule mise en page : titre + sous-titre optionnel, plus les extras arrow / inset / avatar. Configuration de marque en haut.
scripts/render.mjs	génère des JPG 1080x1920 + les deux prévisualisations, et prévient en cas de texte hors zone de sécurité ou fichiers de plus de 8 Mo
scripts/pick.py	présélectionne les photos par sujet, bloque les 9 dernières utilisées, et affiche les mises en page et types d'accroche récents
library.json	chaque photo, taguée (pose, accessoires, espace vide, point de focus). Livré avec un exemple ; construisez le vôtre.
journal des couvertures (COVER_LOG)	chaque couverture livrée. C'est ce qui les garde uniques
photos_dir	vos photos en pleine résolution (locales uniquement, gardez-les hors de git)

scripts/ nécessite puppeteer-core (npm i puppeteer-core dans scripts/, ou créez un lien symbolique scripts/node_modules vers l'installation d'une autre compétence) ainsi que Google Chrome et ffmpeg. render.mjs pointe vers le chemin Chrome par défaut sur macOS ; modifiez executablePath si le vôtre diffère.

Exécution

1. Connaître le reel. Vous avez besoin de la transcription, de la légende et de la carte texte d'ouverture de chaque reel. Nommez la promesse unique que le reel fait.

2. Titre. Choisissez un type d'accroche qui n'est pas celui de la dernière couverture (pick.py l'affiche). Écrivez 3 ou 4 options, de 3 à 8 mots chacune, et choisissez la plus forte. Il ne doit pas répéter mot pour mot la carte texte d'ouverture.

3. Photo.

python3 .claude/skills/reel-covers/scripts/pick.py "<mots du sujet>" --space top

Ensuite regardez les 3 ou 4 premières avant de choisir (construisez une planche contact avec ffmpeg). Associez l'accessoire au sujet : ordinateur pour email, systèmes ou site web ; appareil photo ou produit pour le matériel ; vous parlant pour les ventes et l'état d'esprit. Pour les témoignages clients, utilisez un encart ou un avatar du client (avec permission).

4. Mise en page. Pas la même que la dernière couverture (voir pick.py). Placez le texte dans l'espace vide de la photo (space), définissez focus pour que le visage reste dégagé, et réglez y pour que le bloc de texte se situe entre 300 et 1250.

5. Rendu.

OUT="<work>/covers" node .claude/skills/reel-covers/scripts/render.mjs covers.json

{"covers":[{"id":"3-la-fermeture-exacte","img":"<CHEMIN_VERS_VOS_PHOTOS_DE_COUVERTURE>/<fichier>.jpg",
  "data":{"head":"la fermeture exacte que j'utilise en appel commercial","sub":"d'un Cuisinier Maison","y":560,"headroom":280}}],
 "history":["<quelques derniers fichiers de couverture du journal, du plus récent au plus ancien>"]}

Développez ~ en un chemin réel ; render.mjs ne le fait pas. Un code de sortie non nul signifie un avertissement, corrigez-le avant de partager.

6. Vérifiez par vous-même d'abord. Ouvrez _proof.png et _grid-phone.png :

• Le titre est-il lisible dans la prévisualisation grille (130px de large) ? Si non, supprimez des mots.
• Le visage est-il dégagé du texte dans la couverture complète et dans le recadrage grille ?
• À côté des autres couvertures dans la grille, a-t-elle l'air différente (photo, mise en page, position du texte) mais clairement de la même série ?

7. Validation. Montrez à l'utilisateur _grid-phone.png et _proof.png, avec chaque titre et un titre alternatif. Demandez : "Ces couvertures arrêtent-elles le défilement ?" Échangez photos ou mots sur demande et refaites le rendu. Cela prend quelques secondes.

8. Après approbation :

• Copiez chaque JPG vers <VOTRE_DOSSIER_VIDEO>/<Video> AAAA-MM-JJ/Covers/, nommé comme le reel (3. la fermeture exacte.jpg).
• Ajoutez une entrée par couverture au journal : {"date":"AAAA-MM-JJ","video":"<slug-video>","reel":"3. la fermeture exacte","photo":"<fichier>","layout":"stack","hook_type":"how","head":"la fermeture exacte que j'utilise en appel commercial","file":"<chemin absolu vers le JPG des Covers>"}
• Transmettez les fichiers à votre étape de planification, qui télécharge chacun et l'attache au post Instagram.

Règles d'unicité

• Aucune photo utilisée dans les 9 dernières couvertures. pick.py l'applique.
• Jamais la même mise en page ou le même type d'accroche deux fois de suite.
• Alternez le sous-titre : aucun, centré, ou décalé à droite et incliné (subdx, subrot).
• Variez la position du texte (en haut, au milieu, aligné à gauche ou à droite) selon la photo. Ne le centrez pas toujours en haut.
• Si la bibliothèque s'épuise (chaque bonne photo utilisée récemment), dites-le et suggérez une nouvelle séance photo plutôt que d'enfreindre la règle.

Leçons de mise en page

• Le recadrage 9:16 place le visage en haut. La plupart des photos sont en 2:3. Mises à l'échelle sur 1920 de haut, elles perdent les côtés, pas le haut, donc un visage qui semble bas dans l'original se situe autour de y 600 à 800. L'échec le plus courant est le texte posé sur les cheveux du sujet. Vérifiez cela dans chaque prévisualisation avant toute autre chose.
• Corrigez avec headroom, pas en réduisant le texte. "headroom": 150-350 pousse la photo vers le bas et étire le mur uni au-dessus du sujet. C'est invisible sur des murs de studio unis. Ne l'utilisez pas sur des arrière-plans extérieurs chargés (arbres et ciel se déforment).
• Taille du titre : 104px auto pour 4 mots ou moins, 84px pour plus long, avec rétrécissement pour tenir sur 3 lignes.
• Supprimez le sous-titre s'il touche la tête. C'est une texture, pas le message.
• Placer le texte en tenant compte de l'icône du reel : soit commencez le bloc à y 560 ou plus bas (poussez la photo vers le bas avec headroom pour dégager la tête), soit gardez-le haut et utilisez align: left, right: 320. Mélangez les deux sur un lot.
• Un recadrage grille 3:4 ne cache rien au-dessus de y 240. Gardez le texte commençant à 280 ou plus bas (render.mjs prévient).

Ajout de photos

Depuis un dossier local : vérification md5 contre photos_dir pour les doublons, copie en tant que <nom>-<k>__local<MMJJ>.jpg, puis taggage.

Depuis Canva (optionnel). Canva ne télécharge pas les images directement depuis un dossier d'import. Une méthode fonctionnelle est d'utiliser une maquette dédiée aux exportations :

1. list-folder-items sur <VOTRE_ID_DE_DOSSIER_CANVA>, et différenciez les identifiants d'actifs de library.json (gardez l'id dans chaque nom de fichier après __).
2. read-design sur <VOTRE_ID_MAQUETTE_CANVA> avec open_transaction, puis un appel edit-design avec un add_page (2400x3600, titre = identifiant d'actif) pour chaque nouvelle photo. Lisez les nouveaux identifiants de page, puis un appel avec un insert_fill par page (page entière, top 0, left 0). commit.
3. export-design en PDF, export_quality: pro, puis pdfimages -j -f <première> -l <dernière> -p all.pdf ex/img. Le PDF incorpore les JPEG originaux intacts. L'export JPG fonctionne aussi, mais donne une URL par page.
4. Sauvegardez chaque photo en tant que <nom>__<idactif>.jpg dans photos_dir. Plusieurs photos peuvent partager un nom Canva, donc l'id les distingue. Ensuite, taggez-les.

Si la même photo a été importée deux fois, gardez un exemplaire ok et marquez l'autre "ok": false, "note": "doublon de N", sinon la règle de non-répétition pourrait sélectionner la même image deux fois.

Taggez chaque nouveau fichier dans library.json en l'examinant :

{"file":"photo_-13.jpg","pose":"souriant devant un ordinateur","props":["ordinateur","bureau"],"topics":["email","suivi","systèmes","site web"],
 "cap":false,"space":["top"],"focus":"50% 55%","ok":true}

space est l'endroit où le texte peut aller sans toucher le visage. Marquez les photos floues, sombres ou maladroites "ok":false au lieu de les supprimer.

Liens connexes

• video-reels : la carte texte d'ouverture, que le titre de couverture ne doit pas répéter
• une compétence de planification (optionnelle) : télécharge les couvertures et planifie les reels