guizang-social-card-skill : une chaîne de production pour cartes Xiaohongshu et couvertures WeChat

Transformer un long article en cartes sociales est rarement difficile à cause du titre. Le plus lent, c’est de faire en sorte que chaque carte respecte à la fois le format, les marges, la typographie, les assets, l’export et la relecture. Une personne en charge du contenu extrait cinq idées en quelques minutes, puis bloque sur des formats concrets : le canevas 3:4 de Xiaohongshu, l’en-tête 21:9 de WeChat, la carte de partage 1:1. Un prompt ponctuel dépanne, mais au contenu suivant, le style, les espacements et la densité des titres dérivent à nouveau.

guizang-social-card-skill répond exactement à ce problème. Il emballe la production de cartes Xiaohongshu et de couvertures WeChat dans un skill que Claude Code et Codex peuvent appeler. Le dépôt n’est pas un prompt du genre « rends ça plus haut de gamme », mais tout un flux contenant SKILL.md, des gabarits HTML de base, des références visuelles, des règles d’assets, le rendu Playwright et des scripts de vérification. Sa tâche naturelle : transformer articles, notes produit, tutoriels en captures, sous-titres ou photos en un jeu itérable de cartes PNG.

L’essentiel d’abord

• guizang-social-card-skill vise les environnements d’agents comme Claude Code et Codex, et produit des carrousels Xiaohongshu ainsi que des paires de couvertures WeChat en 21:9 et 1:1.
• Le README GitHub indique deux systèmes visuels intégrés, Editorial et Swiss, couvrant 28 squelettes de gabarit, 10 thèmes prédéfinis et 3 formats de canevas.
• La livraison se fait en HTML mono-fichier rendu en PNG avec Playwright ; l’agent peut lire et écrire directement le HTML / CSS, puis exécuter node render.mjs pour exporter les images.
• Il est fait pour produire de façon stable une « première version de cartes présentable », pas pour remplacer la validation design de marque, la retouche photo ou la revue de publication de la plateforme.
• La licence est AGPL-3.0. Avant qu’une équipe ne modifie, redistribue ou en fasse un service en ligne, elle doit clarifier les obligations open source.

Ce qu’il résout, c’est la réutilisation des gabarits

Beaucoup de cartes générées par IA échouent non pas parce que le modèle ne sait pas écrire, mais parce qu’il n’y a pas de limite de gabarit réutilisable. Un jour le modèle met le titre en haut à gauche, le lendemain il l’étale plein écran ; un jour un bleu sobre, le lendemain un dégradé saturé ; dès que le titre s’allonge, le footer, le numéro de page et le sujet principal se chevauchent.

Ce skill range les facteurs instables dans un flux fixe. Les trois canevas du README sont clairs : .poster.xhs fait 1080x1440 pour le 3:4 Xiaohongshu, .poster.wide fait 2100x900 pour le 21:9 WeChat, .poster.square fait 1080x1080 pour les cartes de partage WeChat. Une fois le format fixé, la tâche de l’agent passe de « concevoir librement » à « dans un conteneur fixe, choisir un gabarit, condenser le texte, remplacer les assets, lancer l’export ».

Les deux systèmes visuels réduisent aussi la charge de décision. Editorial ressemble à un magazine numérique sobre, adapté au voyage, à la lecture, au lifestyle et aux contenus narratifs. Swiss met l’accent sur la grille, les couleurs d’ancrage et la hiérarchie d’information, ce qui convient aux tests d’outils, aux bilans de données, aux explications de produits IA et aux découpages de tutoriels. Une équipe de contenu n’a souvent pas besoin d’inventer un style à chaque fois, mais de faire tomber des sujets variés dans quelques systèmes maîtrisés.

Installation et premier prompt

La méthode d’installation recommandée par le README GitHub tient en une ligne :

Vultr - Serveur cloud NVMe haute performance, 32 emplacements mondiaux, déploiement Docker en un clic

Voir les tarifs →Pub

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Vous pouvez aussi cloner le dépôt dans le dossier de skills personnel de Claude Code :

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Après l’installation, n’écrivez pas seulement « fais-moi un carrousel Xiaohongshu ». Plus fiable : préciser cinq choses, à savoir la source de contenu, le format de plateforme, le nombre de cartes, le système visuel et la stratégie d’assets. Par exemple :

À partir de ce test d'outil IA, crée un jeu Xiaohongshu 3:4 de cinq cartes.
Utilise le système visuel Swiss et le thème bleu IKB.
Privilégie les captures produit de l'article ; s'il manque des images adaptées, dis-moi d'abord quels assets manquent.
Garde une idée principale par carte et, avant l'export PNG, montre-moi la structure HTML et le plan de compression des titres.

L’important n’est pas d’empiler les adjectifs, mais de donner à l’agent des entrées vérifiables. Le format de plateforme détermine le canevas, le nombre de cartes la densité d’information, le système visuel le pool de gabarits, la stratégie d’assets l’appel ou non à des sources externes, et l’aperçu avant export repère tôt les titres trop longs et les sujets masqués.

Le déroulé du workflow

Le README découpe le workflow en Intake, Style & Theme, Layout Selection, Asset Prep, Compose & Render, Deliver & Review et Iterate. En production réelle, on peut le comprendre dans l’ordre suivant.

D’abord, recueillir le besoin. La plateforme cible est-elle Xiaohongshu ou WeChat, l’utilisateur a-t-il des images d’origine, le contenu est-il un tutoriel, un test ou une note de voyage ? Ces informations influent sur le gabarit et les assets.

Ensuite, choisir le système visuel. Outils IA, méthodologies et bilans de données vont plutôt à Swiss ; histoires de personnes, voyages et notes de lecture vont mieux à Editorial. Ne remplissez pas les couleurs de thème au hasard : le dépôt fixe les 10 préréglages comme limite ferme, pour éviter une nouvelle palette à chaque fois.

Puis choisir les squelettes de gabarit. Le projet intègre 16 gabarits Editorial et 12 Swiss. Pour une équipe de contenu, c’est plus précieux qu’une « conception libre », car les squelettes limitent la longueur des titres, le nombre de blocs d’information et la proportion de blanc.

Le traitement des assets mérite une étape à part. Le README fixe une priorité de sources : d’abord les images de l’utilisateur, sinon Unsplash, Pexels, Flickr CC, Wallhaven et la recherche directe, le tout enregistré localement dans SOURCES.md. Avant publication, il faut tout de même vérifier licence et source, surtout pour les comptes commerciaux, les visuels publicitaires et les contenus de partenariat de marque.

Composition et export utilisent un HTML mono-fichier. Le skill place le contenu dans des gabarits de base, génère le HTML, puis sort les PNG via node render.mjs. HTML et CSS sont du texte, donc faciles à manier pour Claude Code et Codex ; l’interlettrage, les marges et la position des images se modifient ensuite précisément.

🔥 Ne perdez plus des mois sur des produits sans demande ! Validez vos promesses SaaS avec Adsterra à petit budget ➡️

Tester l'MVP →Pub

Enfin, relecture et itération. Le README écrit volontairement « pas de vérification automatique par défaut » dans le flux, car chaque passage du validateur ajoute de l’attente. Le meilleur rythme : regarder d’abord les PNG, confirmer la direction, puis lancer validate-social-deck.mjs pour repérer débordements, collisions de footer, éléments sortant du cadre et problèmes de graisse Swiss.

Où ça s’inscrit

Ce tableau aide à poser des limites. guizang-social-card-skill ne transforme personne en designer du jour au lendemain ; il confie plutôt à l’agent la production de cartes répétable, structurée et modélisable. Là où il faut un jugement esthétique fin, une appréciation du risque de marque et une décision de publication, l’humain doit toujours reprendre la main.

QA : exportable ne veut pas dire publiable

Les cartes sociales déraillent souvent sur de petits détails : quelques caractères de trop dans le titre, et l’aperçu mobile devient confus ; la source en bas est masquée et invisible dans la capture ; un masque recouvre un visage, l’image reste mais la confiance s’en va.

Avant publication, vérifiez au moins ces points :

• Une seule idée principale par carte ; n’y collez pas des paragraphes entiers de l’article.
• Condensez les titres d’abord, surtout pour la carte de partage WeChat 1:1, en préservant la marge de sécurité.
• Sur une image pleine page avec masque, placez le texte loin des visages, des sujets produit et des zones de texte dense de l’image d’origine.
• Footer, numéro de page et mention de source ne doivent pas entrer en collision avec le bloc de contenu.
• Pour les images externes, notez la source et vérifiez la licence de la banque avant tout usage commercial.
• Dans les gabarits Swiss, n’associez pas une grande taille de police à une graisse trop forte, pour éviter un mur de titres noirs et gras.
• Après validate-social-deck.mjs, ne regardez pas seulement pass / fail, mais aussi si les avertissements pointent de vrais problèmes visuels.

L’essai le plus sûr consiste à générer d’abord trois à cinq cartes à partir d’un ancien article. Une fois le gabarit, la taille de police et le chemin d’export stables, traitez un lot de sujets en série. Tout lui jeter d’un coup, une semaine de contenu, concentre la pression de relecture sur le dernier tour et finit par ralentir.

Comment se répartir le travail avec prompts et outils de design

L’avantage du prompt simple, c’est la vitesse. Dans une fenêtre de chat, le modèle écrit des titres, dégage des idées et suggère des couleurs en quelques minutes. Mais ses faiblesses sont nettes : les gabarits ne se reproduisent pas de façon stable, les sources d’images locales s’intègrent mal, l’export dépend des captures, et le bilan a posteriori est difficile.

Les outils de design comme Figma et Canva conviennent mieux à la finition. Chartes de marque, bibliothèques de composants, relecture à plusieurs et gestion des assets y sont plus matures. Le frein : une équipe de contenu doit sortir chaque semaine beaucoup d’assets intermédiaires « assez bons et cohérents », et tout faire à la main casse le rythme.

guizang-social-card-skill se situe plutôt dans cette couche intermédiaire. Le prompt sert à diverger, les outils de design à finir, et le skill fige les gestes répétés sous une esthétique fixe : choisir le canevas, prendre un squelette, condenser le titre, placer les assets, rendre, vérifier. Gabarits, scripts, documents de référence et commandes de rendu vivent dans le dossier du skill, et Claude Code ou Codex produisent par ce chemin du HTML et des PNG modifiables. Pour les blogueurs tech, les développeurs indépendants et les petites équipes, cette couche intermédiaire est très utile.

KiloClaw - OpenClaw managé pour l’entreprise : orchestration d’agents IA et routage intelligent

Commencer →Pub

L’intégrer à votre propre processus de contenu

Un déroulé fiable ressemble à ceci :

1. Condensez le long article en cinq à sept idées, chacune ne gardant qu’un titre principal et deux ou trois informations d’appui.
2. Installez le skill avec Claude Code ou Codex, puis vérifiez la présence de SKILL.md, assets/ et references/.
3. Générez trois cartes de test à partir d’un ancien article, sans banque d’images externe, uniquement avec des captures ou une mise en page pure.
4. Vérifiez l’aperçu mobile et notez les problèmes de longueur de titre, de blanc, de masques d’images et de numéros de page.
5. Lancez le validateur et corrigez débordements, collisions de footer et éléments sortant du cadre.
6. Étendez à un carrousel de cinq à neuf cartes ou à des paires de couvertures WeChat.

Cet ordre maîtrise le risque. Le skill fige le flux, l’humain juge si l’information mérite d’être publiée, si le visuel convient et si les sources sont propres.

Un détail souvent négligé : archivez le résultat de chaque essai. Par exemple : quel thème, quels gabarits, l’écart de titre avant et après compression, quelles images ont été remplacées, quels avertissements a signalés le validateur. Au bout de trois ou quatre passages, vous obtenez une petite « charte graphique » adaptée à votre compte. Ensuite, il suffit de réutiliser ces notes pour les nouveaux contenus : la génération s’accélère et la relecture s’aligne plus facilement.

Si plusieurs personnes participent, mieux vaut placer l’article d’origine, le HTML des cartes, les PNG exportés, SOURCES.md et les retours dans un même dossier de tâche. Le design voit ainsi pourquoi l’agent a choisi telle image, l’équipe peut relier chaque carte à l’idée d’origine, et le responsable peut vérifier licence et risques de texte avant publication. Le skill résout le flux de production, la discipline de dossier le flux de collaboration ; c’est l’association des deux qui tient.

Pour aller plus loin

Si les skills de Claude Code vous sont nouveaux, commencez par le guide de démarrage des Skills Claude Code pour comprendre pourquoi SKILL.md est plus stable que des prompts copiés. Pour que l’outil colle durablement aux règles du projet, lisez ensuite le guide d’écriture de CLAUDE.md. Si vous voulez plus tard répartir choix des sujets, rédaction, graphisme et contrôle de publication entre plusieurs rôles, lisez le guide pratique des sous-agents Claude.

guizang-social-card-skill vaut l’essai, mais ne le prenez pas pour une machine à contenus viraux. C’est plutôt une petite chaîne de production : elle fixe format, gabarit, couleurs, rendu et vérification, pour que l’humain remette son énergie dans le jugement de contenu et l’esthétique finale. Commencez par un ancien article, trois cartes et une couleur de thème ; une fois que ça tourne, branchez-le sur votre flux de contenu quotidien.