Compétence Agent Carte Sociale

Une compétence d'agent pour Claude Code, Codex et les environnements d'agents de codage similaires. Elle génère des images carrousel Xiaohongshu / Rednote et des paires de couverture WeChat 21:9 + 1:1 à partir d'articles, de textes, de captures d'écran, de notes de produits, de sous-titres ou de photos.

Deux systèmes visuels partagent un même flux de travail :

• Éditorial. Des mises en page sobres dans l'esprit de Monocle / Kinfolk / Cereal. Idéal pour le storytelling, le lifestyle, les voyages, la lecture, le cinéma et les observations personnelles.
• Suisse International. Grille d'abord, une couleur d'ancrage unique, filets fins, contraste typographique extrême. Idéal pour les critiques de produits, les données, les frameworks, les tutoriels et les outils d'IA.

Projet frère de guizang-ppt-skill. Langage visuel partagé, maintenance séparée. PPT résout les « discussions à balayage horizontal » ; celui-ci résout les « images statiques de flux ».

Démarrage en 30 secondes

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

Ou collez ceci à un agent IA avec accès shell :

Installe guizang-social-card-skill pour moi. Clone https://github.com/op7418/guizang-social-card-skill dans ~/.claude/skills/guizang-social-card-skill, puis vérifie que SKILL.md, assets/ et references/ existent.

Si vous l'avez déjà installé, mettez à jour avec :

Mets à jour guizang-social-card-skill pour moi. Va dans ~/.claude/skills/guizang-social-card-skill, exécute git pull, puis indique-moi le dernier commit.

Puis demandez à votre agent :

Fais-moi un carrousel Xiaohongshu de style Suisse à partir de cet article, 5 cartes, bleu IKB.

Autres invites utiles :

Fais-moi un ensemble Xiaohongshu 3:4 à partir de cette critique de produit, avec des titres de style éditorial.
Transforme cet article en une paire de couvertures WeChat : héros 21:9 + carte de partage 1:1, visuellement cohérentes.
J'ai 3 photos de camping — fais-moi un carrousel Xiaohongshu axé sur les images.
Transforme ce texte de guide de jeu en un ensemble Xiaohongshu ; récupère quelques artworks du jeu sur Wallhaven.

Ce que vous obtenez

• 🖋 Deux systèmes visuels : Éditorial pour l'atmosphère et la narration, Suisse pour les faits et la structure, partageant un même flux de travail
• 📐 3 tailles de canevas : .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 squelettes de mise en page : 16 Éditorial (M01-M16, y compris Image-Led Cover, Pipeline, Avant/Après) + 12 Suisse (S01-S12, y compris KPI Tower, H-Bar Chart, Matrix + Hero)
• 🎨 10 préréglages de thèmes : 6 Éditorial (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, Midnight Ink sombre) + 4 couleurs d'ancrage Suisse (IKB Klein Blue, Lemon, Lemon Green, Safety Orange)
• 🖼 Flux de travail d'approvisionnement d'images : images de l'utilisateur d'abord ; sinon cascade via Unsplash → Pexels → Flickr CC → Wallhaven → recherche directe, téléchargées localement avec SOURCES.md généré automatiquement
• 🌫 Arrière-plan d'encre fluide WebGL : les pages héros éditoriales peuvent embarquer une animation d'encre en direct ; peut être désactivée pour les appareils à faible puissance ou le mode capture d'écran
• 🪧 Superposition d'image + sécurité des visages : les images en pleine page doivent porter un masque ; les zones de texte doivent éviter le sujet. Règles strictes dans references/image-overlay.md
• 🧰 Ressources d'embellissement de captures d'écran : 9 arrière-plans WebP à texture réelle (5 Éditorial / 4 Suisse), associés à des utilitaires .frame-shot / .device-browser / .device-phone
• 🗺 Composant carte : MapLibre + tuiles OSM réelles, multi-épingles + connecteurs, conçu pour les guides de voyage
• ✅ Validateur : validate-social-deck.mjs détecte automatiquement les débordements, les violations de plafond de type, les lacunes de densité à 4 bandes et les collisions de pied de page
• 📄 Rendu HTML mono-fichier + Playwright : pas de pipeline de build frontend ; node render.mjs produit directement le PNG

Convient / Ne convient pas

✅ Convient : carrousels Xiaohongshu / paires de couverture WeChat / couvertures Moments / couvertures Channels / visuels d'articles / pages de tutoriel / résumés de données / guides de voyage / critiques de produits / explicateurs de captures d'écran

❌ Ne convient pas : diaporamas à balayage horizontal (utilisez guizang-ppt-skill) / génération vidéo longue / retouche photo pure / édition de texte brut sans mise en page

11 catégories Xiaohongshu

Hiérarchisées par « cercle de compétence » — voir references/category-cookbook.md :

Fortes de bout en bout (texte / structure / images toutes dans le périmètre) :

• Voyages, carrière, recommandations (après spécification d'un sous-genre)

Fortes en texte et structure, images dépendent de l'utilisateur ou d'art sourcé :

• Jeux, cinéma, nourriture (orientée recettes), maquillage (orienté tutoriels), fitness, maison, mode (sélections organisées)

Hors périmètre, annoncé d'emblée (ne sera pas forcé) :

• Photos en direct OOTD / dreamcore / étalonnage d'émulation de pellicule / maquillage avec test cutané réel — tout ce qui dépend fortement de la photographie ou de la post-production

Scénarios courants

Pourquoi HTML mono-fichier vers PNG

• Convivial pour les agents : HTML + CSS est du texte — les agents peuvent écrire, lire, modifier et valider directement
• Précision de mise en page : CSS Grid + règles strictes de typographie / marges / grille dépassent de loin la portée de mise en page de Markdown
• Approvisionnement ouvert d'images : connexion à Unsplash / Pexels / Wallhaven / Mapbox / OSM / toute ressource web
• Qualité vérifiable : validate-social-deck.mjs exécute une mesure DOM Playwright, pas des conjectures
• Livraison simple : output/*.png expédié directement — pas de déploiements, pas d'outils d'exportation

Support des plateformes

Installation

Option 1 : Installation en une ligne (recommandée)

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

Option 2 : Collez ceci à une IA

Installe la compétence guizang-social-card-skill Claude Code pour moi. Étapes :

1. Assure-toi que ~/.claude/skills/ existe (crée-le sinon)
2. Exécute git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
3. Vérifie : ls ~/.claude/skills/guizang-social-card-skill/ devrait afficher SKILL.md, assets/, references/
4. Informe-moi quand c'est fait. Plus tard, dire des choses comme « fais-moi un carrousel Xiaohongshu » déclenchera cette compétence.

Collez le bloc ci-dessus dans Claude Code / Cursor / tout agent IA avec accès shell.

Option 3 : CLI manuel

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

Comment la déclencher

Une fois installé, Claude Code détecte automatiquement la compétence. Phrases déclencheurs :

• « Fais-moi un carrousel Xiaohongshu / Rednote »
• « Fais-moi des cartes Rednote »
• « Fais une couverture WeChat 21:9 + carte de partage 1:1 »
• « Génère des cartes sociales / cartes sociales de style magazine »
• « Transforme cet article en carrousel tutoriel »
• « Fais une critique Xiaohongshu de style Suisse / cartes de style IKB »

Flux de travail

La compétence est un flux de travail structuré. L'agent parcourt 7 étapes :

1. Collecte — capture 4 choses : plateforme cible / style / contenu source / images de l'utilisateur. Quand aucune image n'est disponible, présenter A/B/C une fois (prenez les vôtres / générées par IA / sourcées en ligne) ; ne pas re-proposer
2. Style et thème — choisir Éditorial ou Suisse, puis choisir l'un des 10 préréglages de thème. Les valeurs hexadécimales personnalisées ne sont pas autorisées
3. Sélection de mise en page — choisir / coller / adapter le texte des 28 squelettes de mise en page. 16 Éditorial / 12 Suisse
4. Préparation des ressources — sourcer des images (Unsplash / Pexels / Flickr CC / Wallhaven / recherche directe), télécharger localement + écrire SOURCES.md ; demander s'il faut créditer les sources
5. Composer et rendre — copier le modèle de départ → remplacer <!-- POSTERS_HERE --> → node render.mjs
6. Livrer et réviser — montrer d'abord les PNG, demander « regardez-les vous-même, ou voulez-vous que j'exécute le validateur ? » — ne pas auto-valider
7. Itérer — appliquer les retours de l'utilisateur, modifier les styles en ligne ou échanger les mises en page / images, re-rendre

Spécification complète dans SKILL.md. Détails approfondis dans les fichiers references/*.md correspondants.

Validateur

node validate-social-deck.mjs path/to/task-dir

6 règles, basées sur la mesure de rendu réel Playwright, pas sur l'analyse statique :

• R1 Débordement — toute section débordant de .poster échoue immédiatement
• R2 Plafonds de type — les combinaisons de taille + poids .h-xl / .h-display dépassant les définitions de départ
• R3 Collision de pied de page — contenu empiétant sur le pied de page / numéro de page inférieur
• R4 Densité à 4 bandes — canevas de 1440 de haut divisé en 4 bandes horizontales ; chacune doit contenir du contenu ou avoir une raison déclarée pour l'espace blanc
• R5 Débordement de cadre — enfants .frame-img / .frame-shot débordant du cadre
• R6 Identité Suisse — les modèles Suisses avec font-weight >= 700 en ligne avertissent (viole « plus grand signifie plus fin »)

L'étape 7 de SKILL.md indique explicitement le validateur ne s'exécute pas automatiquement — attendez que l'utilisateur regarde d'abord les images, économisant des dizaines de secondes par tour.

Préréglages de thèmes

Choisissez dans references/theme-presets.md. Les valeurs hexadécimales personnalisées ne sont pas autorisées — protéger l'esthétique importe plus que la liberté de choix.

Éditorial (6)

Suisse (4)

Pour changer de thème, remplacez simplement l'attribut <section class="poster" data-theme="..."> sur le modèle de départ ; tout le CSS se résout via var(--...).

Répertoire

guizang-social-card-skill/
├── SKILL.md                              ← Fichier principal de compétence : flux de travail en 7 étapes
├── README.md                             ← README en chinois
├── README.en.md                          ← Ce fichier
├── HANDOFF.md                            ← Document de passation : faits + historique des versions
├── PRODUCT.md                            ← Document produit : réflexion + décisions + feuille de route
├── validate-social-deck.mjs              ← Validateur de mise en page Playwright
├── assets/
│   ├── template-editorial-card.html      ← Base Éditorial (6 thèmes / 3 canevas)
│   ├── template-swiss-card.html          ← Base Suisse (4 accents / 3 canevas)
│   ├── magazine-bg-webgl.js              ← Arrière-plan d'encre fluide WebGL
│   └── screenshot-backgrounds/           ← 9 arrière-plans de scène de capture d'écran (WebP)
│       ├── style-a/                      ←   5 Éditorial
│       └── style-b/                      ←   4 Suisse
└── references/
    ├── platform-specs.md                 ← Plateforme × résolution × nommage
    ├── style-system.md                   ← Règles strictes et anti-patrons pour les deux styles
    ├── theme-presets.md                  ← Les 10 palettes en détail
    ├── layout-recipes.md                 ← 28 squelettes de mise en page (M01-M16 + S01-S12)
    ├── components.md                     ← Typographie / cartes / espacement / icônes
    ├── background-systems.md             ← Systèmes d'encre fluide / grille / couches de papier
    ├── portrait-fill.md                  ← Stratégie d'espace blanc pour le tableau 3:4
    ├── content-planning.md               ← Accroches / découpage de pages / compression de texte
    ├── category-cookbook.md              ← Table de routage des 11 catégories Xiaohongshu
    ├── image-overlay.md                  ← Règles de masque d'image en pleine page + sécurité des visages
    ├── screenshot-treatment.md           ← Utilitaires `.frame-shot` + embellissement de captures d'écran
    ├── map-component.md                  ← Carte MapLibre `.map-block`
    ├── title-shortener.md                ← Stratégie de titre court pour la couverture 1:1
    ├── production-workflow.md            ← Pipeline de rendu Playwright
    └── qa-checklist.md                   ← Liste de contrôle qualité

Principes fondamentaux de conception

1. Sobriété avant exubérance — les palettes sobres se démarquent dans un flux saturé
2. Structure avant décoration — la typographie / le contraste / la grille portent la hiérarchie, pas les ombres ou les cartes
3. Mises en page avant liberté — choisissez d'abord, adaptez ensuite ; n'inventez pas de pages en dehors des 28 squelettes
4. Images de l'utilisateur d'abord — à la collecte, présentez A/B/C une fois ; ne re-proposez pas de prendre les vôtres
5. Masque + éviter — les images en pleine page portent toujours un masque ; les zones de texte doivent dégager le sujet (visages / produits / régions riches en texte)
6. Plus grand signifie plus fin — la taille .h-xl suisse augmente → le poids doit diminuer. L'éditorial suit la même règle
7. Pas d'auto-validation — laissez l'utilisateur regarder d'abord, puis demandez avant de valider ; économise des dizaines de secondes par tour
8. Une compétence est un produit, pas une invite — a un PRODUCT.md, des numéros de version, un CHANGELOG, des limites de capacité
9. Les tests locaux restent en dehors de git — toutes les démos / tests de fumée vivent sous local-tests/, gitignorés

Références visuelles

• Mises en page et espacement des lettres des magazines Monocle / Kinfolk / Cereal
• Systèmes de grille de Massimo Vignelli / Helvetica Forever / Style typographique international suisse
• Rapports image-texte et portraits humains d'Apartamento / The Gentlewoman
• Échantillons « la sobriété gagne le flux » de Xiaohongshu / Rednote
• Pratique de cartes sociales de Guizang

Feuille de route

• Plus de tests de fumée pour les cas limites de plafond de type avec un contenu éditorial long
• Plus de mises en page de données suisses (squelettes de graphiques supplémentaires)
• Après la génération d'image : demander activement s'il faut faire des corrections locales / régénérer l'image entière
• Plus de packs de mise en page recommandés spécifiques aux catégories (actuellement 7 sur 11 sont forts de bout en bout)
• Version WorkBuddy prête pour le marché

Contribution

Bugs, problèmes de mise en page, nouvelles demandes de mise en page — Issues et PRs bienvenus. Priorités pour les modifications :

• Lors de la modification des modèles de départ, mettez également à jour la table de correspondance de references/components.md (tailles / espacements / poids)
• Lors de l'ajout de mises en page, ajoutez la recette complète à references/layout-recipes.md (plafonds de copie + densité minimale)
• Lors de l'ajout de couleurs de thème, mettez également à jour le bloc [data-theme="..."] du modèle de départ + references/theme-presets.md
• Lors de l'ajout de règles suisses, mettez également à jour la règle correspondante dans validate-social-deck.mjs
• Les erreurs que vous avez rencontrées vont dans references/qa-checklist.md
• Les tests et démos vivent sous local-tests/ — ne polluez pas la racine de la compétence

Licence

AGPL-3.0 © 2026 op7418

Ce projet est sous licence GNU AGPL-3.0. Points clés :

1. Attribution requise — Conservez l'avis de droit d'auteur
2. Les dérivés doivent être open-source — Toute version modifiée, fork ou redistribution doit être publiée sous AGPL-3.0 (ou une licence compatible), avec le code source complet mis à disposition
3. L'utilisation en réseau est une distribution — Même si vous exécutez uniquement une version modifiée en tant que SaaS / service web sans distribuer le code, vous devez quand même publier les sources (c'est ce qui rend l'AGPL plus stricte que la GPL)
4. Pas de distribution propriétaire, fermée ou payante uniquement

Conditions complètes dans LICENSE.