# Compétence Agent Carte Sociale > Générez des cartes sociales visuellement époustouflantes pour les carrousels Xiaohongshu et les paires de couverture WeChat à partir de diverses sources de contenu. Tirez parti des systèmes de conception éditoriale ou suisse pour créer des visuels attrayants pour vos articles et publications. - Canonical: https://nanoskill.ai/fr/skills/social-card-generation - Markdown: https://nanoskill.ai/fr/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: fr - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About La compétence Guizang Social Card est une capacité d'agent avancée conçue pour simplifier la génération de cartes sociales pour des plateformes comme Xiaohongshu et WeChat. Elle permet aux utilisateurs de transformer divers contenus - articles, notes de produits, captures d'écran et photos - en visuels soignés, optimisés pour la plateforme. En proposant des systèmes de conception distincts éditorial et international suisse, la compétence garantit que, que votre objectif soit la narration narrative ou l'explication basée sur les données, vos cartes sociales seront à la fois attrayantes et esthétiquement cohérentes, prêtes à capter l'attention du public. Cette compétence se distingue par son flux de travail structuré, offrant 28 squelettes de mise en page et 10 préréglages de thème pour guider la présentation du contenu. Elle automatise l'approvisionnement en images à partir de plateformes populaires et inclut un validateur robuste basé sur Playwright pour maintenir la qualité visuelle en détectant les problèmes de mise en page courants. Le résultat est fourni sous forme de fichier HTML unique, rendu directement en PNG, ce qui le rend hautement compatible avec les environnements d'agents de codage comme Claude Code et Codex. Les utilisateurs peuvent exploiter la compétence Guizang Social Card pour une variété de cas d'usage, tels que la création de carrousels Xiaohongshu à plusieurs cartes à partir d'articles longs, la conception de paires harmonieuses de héros 21:9 et de carte de partage 1:1 pour WeChat, ou la production de visuels de tutoriel clairs à partir de captures d'écran. Ses principes de conception privilégient la retenue, la structure et la gestion d'images centrée sur l'utilisateur, garantissant un contenu de médias sociaux professionnel et percutant sans nécessiter d'expertise approfondie en conception. ## Key features - **Systèmes visuels doubles**: Choisissez entre un style Editorial pour le storytelling (Monocle, Kinfolk) ou un style Swiss International pour les données et la structure (grille d'abord, lignes fines et nettes) pour correspondre au ton de votre contenu. - **Tailles de canevas multiples**: Prend en charge Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) et WeChat 1:1 (1080x1080) pour une présence polyvalente sur les réseaux sociaux. - **Squelettes de mise en page étendus**: Accédez à 28 squelettes de mise en page préconçus (16 Editorial, 12 Swiss) comprenant des couvertures axées sur l'image, des tours de KPI et des diagrammes à barres horizontales pour une structuration rapide du contenu. - **Approvisionnement d'images automatisé**: Recherche automatiquement des images sur Unsplash, Pexels, Flickr CC, Wallhaven ou via une recherche directe, en les téléchargeant localement avec un fichier SOURCES.md généré automatiquement. - **Validateur de mise en page**: Comprend un validateur basé sur Playwright pour détecter les débordements, les violations de limite de texte, les lacunes de densité et les collisions de pied de page, garantissant une génération de cartes sociales de haute qualité. ## Use cases - **Créer des carrousels Xiaohongshu**: Transformez de longs articles, des évaluations de produits ou des guides de voyage en carrousels multi-cartes attrayants pour Xiaohongshu, en utilisant le design Editorial ou Swiss. - **Concevoir des paires de couvertures WeChat**: Générez des images principales 21:9 visuellement cohérentes et des cartes de partage 1:1 pour les Moments et les Chaînes WeChat à partir de n'importe quelle source de contenu. - **Produire des visuels de tutoriel**: Convertissez des tutoriels par captures d'écran, des guides de jeu ou des présentations d'outils en cartes sociales structurées avec des captures d'écran embellies et des mises en page claires. - **Résumer les données et les évaluations**: Présentez des évaluations de produits, des récapitulatifs de données ou du contenu de bilan annuel en utilisant des mises en page de style Swiss avec des graphiques et des matrices pour une communication claire. ## Result preview Explorez un carrousel de médias sociaux professionnel propulsé par cette compétence. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Installer Ajoutez la compétence de génération de cartes sociales à votre agent IA. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Décrire le contenu Fournissez le contenu, le sujet ou le message clé que vous souhaitez transformer en cartes de médias sociaux. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Générer des cartes sociales Créez des designs de cartes visuellement attrayants, optimisés pour la plateforme, avec une hiérarchie de l'information claire, un flux narratif fort et des mises en page prêtes à être publiées. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition 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](https://github.com/op7418/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 ». ![Aperçu de Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## Démarrage en 30 secondes ```bash 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 : ```text 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 : ```text 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 : ```text Fais-moi un carrousel Xiaohongshu de style Suisse à partir de cet article, 5 cartes, bleu IKB. ``` Autres invites utiles : ```text 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](https://github.com/op7418/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`](./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 | Tâche | Flux recommandé | |------|------------------| | Article long → carrousel Xiaohongshu | Extraire les points clés ; Éditorial pour le rythme narratif, Suisse pour les décompositions de données | | Critique de produit / récapitulatif d'outil | Suisse + bleu IKB, préférer `S09 KPI Tower` / `S10 H-Bar Chart` | | Voyage / lifestyle | Éditorial + Midnight Ink ou Dune, `M16 Image-Led Cover` pour héros en pleine page | | Paire de couverture WeChat | Rendre le même contenu deux fois : `.poster.wide` 21:9 + `.poster.square` 1:1, visuellement cohérent | | Tutoriel par captures d'écran / présentation d'outil | `.frame-shot` + `.device-browser`, préférer une base de grille Suisse | | Guide de jeu / récapitulatif de film | Éditorial + Midnight Ink, récupérer des artworks du jeu sur Wallhaven pour le héros en pleine page | | Récapitulatif de données / rétrospective annuelle | Suisse + Lemon ou Safety Orange, combinaison matrice + registre | ## 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 | Plateforme | Statut | Notes | |----------|--------|-------| | Claude Code | Supporté | Flux de travail natif Skill, idéal pour générer + itérer des cartes | | Codex | Supporté | Bon pour la génération de cartes longues, l'approvisionnement d'images, l'assurance qualité visuelle | | Cursor / autres agents locaux | Fonctionne | Nécessite lecture/écriture du système de fichiers + exécution shell | | Chatbot simple | Non recommandé | Sans système de fichiers et pipeline de rendu, impossible de livrer des images de manière fiable | ## Installation ### Option 1 : Installation en une ligne (recommandée) ```bash 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 ```bash 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 `` → `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`](./SKILL.md). Détails approfondis dans les fichiers `references/*.md` correspondants. ## Validateur ```bash 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`](./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) | Thème | Tons | Idéal pour | |-------|-------|----------| | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea` | Valeur par défaut générale, sujets commerciaux, en cas de doute | | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5` | Tech, recherche, IA, écriture technique | | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8` | Nature, durabilité, plein air, non-fiction | | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7` | Nostalgie, sciences humaines, lecture, littérature | | 🌙 **Dune** | `#1f1a14` / `#f0e6d2` | Art, design, création, mode | | ⚫ **Midnight Ink** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Art clé de jeu / scènes nocturnes / couvertures cinématographiques / thèmes sombres à la Black Myth · Elden Ring | ### Suisse (4) | Thème | Ancrage | Idéal pour | |-------|--------|----------| | 🔵 **IKB Klein Blue** | `#002FA7` | Valeur par défaut générale, lancements commerciaux, produits IA, frameworks | | 🟡 **Lemon** | `#FFD500` | Jeunesse, sports, vente au détail, consommation, Y2K | | 🟢 **Lemon Green** | `#C5E803` | Écologie, santé, Gen Z, marques vertes | | 🟠 **Safety Orange** | `#FF6B35` | Alertes, actualités, industriel, thèmes énergiques | Pour changer de thème, remplacez simplement l'attribut `
` 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](https://github.com/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`](./LICENSE). ## FAQ ### Qu'est-ce que la compétence Guizang Social Card ? La compétence Guizang Social Card est une compétence d'agent pour Claude Code, Codex et des environnements d'agents de codage similaires qui génère des carrousels Xiaohongshu et des paires de couvertures WeChat à partir de diverses entrées de contenu comme des articles, des notes ou des photos, en utilisant des systèmes de conception visuelle distincts. ### Quel type de contenu puis-je utiliser pour générer des cartes sociales ? Vous pouvez utiliser des articles, du texte, des captures d'écran, des notes de produit, des sous-titres ou des photos comme contenu source pour générer des cartes sociales. La compétence s'adapte à diverses entrées pour créer des résultats visuellement attrayants. ### Quels sont les deux systèmes visuels disponibles pour la génération de cartes sociales ? La compétence propose deux systèmes visuels : « Editorial » pour le storytelling, le style de vie et le contenu narratif, et « Swiss International » pour les évaluations de produits, les données, les frameworks et les tutoriels, caractérisé par une approche axée sur la grille. ### Puis-je utiliser des couleurs personnalisées pour mes cartes sociales ? Non, les valeurs hexadécimales personnalisées ne sont pas autorisées. La compétence fournit 10 préréglages de thème (6 Editorial, 4 Swiss) pour maintenir la cohésion visuelle et la qualité. Vous pouvez changer de thème en mettant à jour l'attribut data-theme sur le modèle de départ. ### Comment installer la compétence Guizang Social Card ? Vous pouvez l'installer en utilisant \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` ou en clonant le dépôt dans le répertoire des compétences de votre agent. ### La compétence prend-elle en charge le contenu en anglais ? Oui, la compétence prend en charge le contenu en anglais. Les polices Editorial (Playfair Display + Noto Serif) et Swiss (Inter + Helvetica) couvrent le chinois et l'anglais, et les squelettes de mise en page sont indépendants de la langue.