op7418/guizang-social-card-skill

Compétence Carte Sociale Guizang

Créez des packs de cartes sociales soignés pour Xiaohongshu/Rednote, les comptes officiels WeChat, les couvertures d'articles et les miniatures de plateformes.

Cette compétence est autonome. Elle emprunte des principes visuels au système de style PPT Guizang, mais ne doit pas modifier la compétence PPT d'origine, ses modèles ou ses références. Si la compétence PPT d'origine est disponible, vous pouvez la lire à titre de référence uniquement.

Le travail généré doit se trouver dans un dossier de tâche, pas dans la racine de la compétence. Par défaut, utilisez local-tests/<slug>/ dans ce référentiel, ou le dossier de sortie explicite demandé par l'utilisateur. Ne créez pas de dossiers de tâche de niveau racine comme social-card-*, livephoto-*, wechat-*, output/, ou des ressources rendues lâches à côté de SKILL.md.

Ce Qu'il Faut Produire

Utilisez cette compétence pour :

• Ensembles de cartes sociales / carrousels d'images : couverture plus pages de contenu, en particulier pour Xiaohongshu/Rednote au format 3:4.
• Cartes animées Live Photo courtes lorsque l'utilisateur demande une Live Photo / 实况照片 et fournit des preuves vidéo ou des enregistrements d'écran.
• Mises en page de puzzle Live Photo basées sur des vidéos lorsque l'utilisateur dispose d'actifs vidéo de haute qualité et souhaite des cartes animées à une seule vidéo, à deux grilles, à trois grilles ou à quatre grilles avec peu ou pas de texte ajouté.
• Collages de trois Live Photos lorsque l'utilisateur a trois courtes vidéos, trois résultats, trois points de vue ou une comparaison riche en informations qui doit rester dans une seule unité de carte image.
• Intégration de vidéos longues pour Live Photo : diagnostiquer si rogner, accélérer, diviser en un collage triple, ou demander à l'utilisateur une plage de temps spécifique avant le rendu.
• Paires de couvertures pour comptes officiels WeChat : une couverture principale 21:9 plus une couverture carrée 1:1, composées ensemble dans le même HTML pour une vérification visuelle.
• Publications produits avec nombreuses captures d'écran, couvertures d'articles, carrousels de tutoriels, notes de plein air / style de vie, explicatifs sur l'IA / les mises à jour de produits.
• Images sociales nécessitant des mises en page de style Guizang suisse ou de magazine éditorial.

N'utilisez pas cette compétence pour :

• Des présentations complètes de diapositives ou des sites web PPT horizontaux. Utilisez la compétence PPT pour cela.
• La génération de vidéos longues. Utilisez une compétence vidéo pour cela. Cette compétence ne prend en charge que les cartes Live Photo courtes et liées à une mise en page qui remplacent un emplacement d'image fixe par une vidéo.
• L'édition d'images pures sans exigence de mise en page ou d'extraction d'article.

Capacité par Catégorie Rednote (cercle de capacité)

Les 11 catégories les plus courantes de Rednote (小红书) se répartissent en trois groupes. Voir references/category-cookbook.md pour l'acheminement recette par recette.

Fort de bout en bout (texte, structure et histoire visuelle tous dans le périmètre) :

• 旅行 (Voyage), 职场 (Travail), 推荐 (Recommandé, après avoir spécifié un sous-type).

Fort sur le texte et la structure ; l'image doit venir de l'utilisateur ou d'une bibliothèque sourcée :

• 游戏 (Jeu), 影视 (Film/TV), 美食 direction de recettes (Cuisine — recettes uniquement), 彩妆 direction de tutoriels (Maquillage — tutoriels uniquement), 健身 (Fitness), 家居 (Maison), 穿搭 direction capsule/essai (Tenue — capsule/essai uniquement).

Hors périmètre — refusez honnêtement plutôt que de promettre un résultat :

• 美食 présentation de plats (photographie culinaire de démonstration).
• 穿搭 OOTD quotidien corps entier (photos de tenues quotidiennes ; nous ne pouvons pas générer ou simuler).
• 情感 style décoratif dreamcore / ambiance (dreamcore / style esthétique lumineux — entre en conflit avec les styles Éditorial et Suisse).
• Y2K / 千禧辣妹 / 哥特萝莉 / esthétiques décorées kawaii.
• Publications de photographie pure où l'image est l'ensemble de la livraison.

Lorsqu'une demande tombe dans le troisième groupe, nommez ce que nous ne pouvons pas faire lors de l'accueil — n'adaptez pas silencieusement une mise en page qui manque l'intention de l'utilisateur.

Principe Fondamental

L'expression prime. Le but n'est pas de faire entrer du texte dans des affiches ; c'est de transformer la source en un argument visuel clair.

Pour chaque page, décidez :

• Que doit comprendre le spectateur en un coup d'œil ?
• Quelle preuve, capture d'écran ou image soutient cela ?
• Quels mots doivent être grands, et lesquels peuvent devenir des légendes ou des métadonnées ?
• Que peut-on supprimer parce que cela appartient au corps du post, pas à l'image ?

Références Requises

Lisez ces fichiers selon les besoins :

• references/platform-specs.md pour les ratios exacts, les tailles de sortie et les conventions de nommage.
• references/style-system.md pour les règles visuelles Guizang éditoriales et suisses.
• references/theme-presets.md lors du choix de palettes de magazines électroniques ou de palettes d'accent suisses.
• references/layout-recipes.md lors de la sélection de structures de pages pour carrousels / cartes sociales / WeChat.
• references/components.md pour les spécifications des composants partagés : polices de caractères, échelle typographique, tailles minimales lisibles, plages de longueur des titres chinois, règle d'exclusion mutuelle de remplissage de carte suisse, classes de ratio de conteneurs d'images, espacements et règles pour les icônes Lucide.
• references/background-systems.md lors de la création de fonds WebGL/encre/papier de magazine électronique.
• references/portrait-fill.md lors de l'adaptation de mises en page au format 3:4 et pour éviter un espace vertical sous-rempli.
• references/content-planning.md pour les accroches de couverture, la répartition des pages et la compression de la copie.
• references/production-workflow.md pour le rendu HTML/CSS et la gestion des images.
• references/live-photo-production.md lorsque l'utilisateur demande une Live Photo / 实况照片 / 三连实况拼图, fournit des actifs vidéo pour une carte sociale, ou souhaite une livraison sous forme de carte animée Xiaohongshu / WeChat. Il couvre le budget d'information, Live Photo simple vs triple, l'intégration de vidéos longues et les rappels de publication sur les plateformes.
• references/image-overlay.md à chaque fois que du texte repose sur une photo : qualification de la photo, atténuation localisée et évitement des visages / sujets via un mappage multimodal du sujet.
• references/screenshot-treatment.md lorsque l'utilisateur fournit une capture d'écran d'application / web / code / tableau de bord — utilise .frame-shot au lieu de .frame-img, définit les coins / ombre / fond / encart, décide du chrome .device-browser ou .device-phone.
• references/map-component.md lorsque le contenu a des relations spatiales (itinéraire de voyage, emplacements de magasins, visite à pied) — les itinéraires réels utilisent par défaut les tuiles statiques Mapbox ou OSM ; le SVG schématique est uniquement pour les cartes conceptuelles / illustratives. Les épingles sont des superpositions HTML ; n'utilisez jamais de cartes JS en direct.
• references/title-shortener.md lorsque la tâche est une paire de couvertures WeChat 21:9+1:1, ou toute réutilisation multiplateforme — dérive le titre court 1:1 du titre long (extraction en 5 étapes, 4 motifs, anti-motifs, dimensionnement sur .poster.square).
• references/category-cookbook.md pour acheminer une catégorie Rednote nommée par l'utilisateur (旅行 / 职场 / 游戏 / 影视 / 彩妆 / 美食 / 穿搭 / 家居 / 健身 / 情感 / 推荐) vers les recettes applicables et confirmer le périmètre.
• references/qa-checklist.md avant de livrer les images finales.

Flux de Travail

1. Accueil

Recueillez uniquement les informations manquantes qui modifient la sortie :

• Plateformes et ratios cibles.

• Texte source, sous-titres, article ou titre.

• Catégorie Rednote — si l'utilisateur nomme l'un des 11 types courants (旅行 / 职场 / 游戏 / 影视 / 美食 / 彩妆 / 穿搭 / 家居 / 健身 / 情感 / 推荐), acheminez via references/category-cookbook.md pour trouver les bonnes recettes et confirmer que la demande est dans le cercle de capacité (voir "Capacité par Catégorie Rednote" ci-dessus). Si une demande atterrit dans le groupe hors périmètre, présentez cela à l'utilisateur avant de concevoir, n'adaptez pas silencieusement.

• Images/captures d'écran fournies et où chacune doit apparaître. Pour le contenu Actualités / Tutoriel / Données / Revue, demandez activement des captures d'écran ou des photos — elles sont la couche de preuve. Une affiche sans artefact réel tend à ressembler à du remplissage.

• Actifs vidéo fournis, si l'utilisateur demande une Live Photo. Traitez la vidéo fournie par l'utilisateur comme le chemin normal ; la vidéo gratuite sourcée sur le web est uniquement pour les cas de démonstration / promotion ou lorsque l'utilisateur demande explicitement du matériel sourcé. Confirmez la plateforme cible car la durée diffère : Xiaohongshu prend en charge 5s ; la Live Photo pour compte officiel WeChat doit rester à 3s et doit être téléchargée depuis un iPhone. Avant de couper, lisez references/live-photo-production.md et classifiez la demande comme Live Photo simple, collage triple ou intégration de vidéo longue. Si la source est trop longue ou contient plusieurs moments utilisables, effectuez d'abord un diagnostic à faible coût, puis demandez une fois s'il faut rogner, accélérer, diviser en plusieurs puits, ou utiliser une plage de temps spécifiée par l'utilisateur. Si la source est plus courte que la durée cible, demandez s'il faut fournir un clip plus long, accepter une Live Photo plus courte, ou autoriser explicitement un maintien / ralentissement. Si l'objet important est ambigu, suggérez des options possibles de recadrage / agrandissement mais laissez l'utilisateur décider avant d'exécuter.

• Si l'utilisateur ne fournit que du texte (aucune image du tout), demandez une fois avant de concevoir :

  这篇我需要 1-2 张图。三种走法：
  A. 你自己有照片 / 截图，传给我（推荐——最不"AI 感"）
  B. 我去 Pexels / Unsplash / Flickr 帮你找
  C. 用 AI 生成
  

  Recommandez A en une ligne — votre propre photo est ce qui fait qu'une affiche n'a pas l'air générée par IA. Acceptez ce que l'utilisateur choisit (y compris "Fais au mieux") et continuez. Ne reposez pas la question plus tard, ne poussez pas constamment vers A sur plusieurs tours. Cette question est posée une seule fois.

• Style préféré si spécifié : Style Suisse, magazine/éditorial, tech, plein air, etc.

• Contraintes strictes : texte du titre, pas d'image sur la couverture 1:1, doit inclure une photo de matériel, garder la capture d'écran lisible, etc.

Si l'utilisateur a déjà fourni suffisamment de contexte, procédez avec des hypothèses raisonnables.

Si le contenu implique des lancements de produits, politiques, prix, affirmations ou actualités en cours, vérifiez les faits instables via la navigation et citez les sources dans la réponse finale.

2. Extraire l'Histoire

Transformez la source en un plan de pages avant de concevoir.

Pour Rednote :

• La page 1 est l'accroche de couverture.
• Les pages 2 à N portent chacune une seule idée.
• Utilisez 5 à 9 pages pour la plupart des publications. Compressez ou combinez les pages lorsque les zones inférieures deviennent vides.
• Gardez le corps du post pour les nuances ; les images doivent porter les accroches, les comparaisons, les listes de contrôle et les enseignements percutants.

Pour WeChat :

• Produisez toujours un système apparié : couverture principale 21:9 et couverture carrée 1:1.
• Construisez les deux couvertures dans le même fichier HTML et ajoutez une section d'aperçu combiné afin que leur relation visuelle puisse être vérifiée ensemble.
• 21:9 conserve le titre complet ou presque complet, le sous-titre et une relation visuelle forte.
• 1:1 utilise un titre court simplifié dérivé du titre long : grand texte centré, pas d'image par défaut, pas de sous-titres serrés.

3. Choisir le Mode Stylistique

Choisissez un mode par pack. Les deux systèmes ne sont pas liés à des types de contenu spécifiques — ce qui change est la posture visuelle, pas le sujet dont vous pouvez parler. Un essai professionnel peut être Éditorial ; un carnet de voyage peut être Suisse. Choisissez en fonction de l'ambiance que vous voulez, pas d'une recherche par catégorie.

Magazine Éditorial x E-ink apporte :

• Police d'affichage Serif/Songti + corps sans sérif discret, palette papier + encre.
• Couche d'atmosphère (grain de papier / lavis d'encre / toile WebGL) sur un fond de papier chaud.
• Lignes de registre, notes marginales, citations en exergue, grands puits photo — sensation d'article de magazine.
• Meilleur lorsque vous voulez que la page semble lente, réfléchie, composée à la main.

Suisse International apporte :

• Sensation Inter / Helvetica, affichage très léger en grandes tailles, étiquettes mono en petites tailles.
• Grille strictement alignée à gauche, règles fines, un accent de haute saturation.
• Matrices de remplissage de carte, tours de KPI, graphiques à barres horizontales, déclarations numérotées — sensation système / données.
• Meilleur lorsque vous voulez que la page semble conçue, quantifiée, décisive.

Si les deux semblent viables pour un contenu, la question devient l'intention éditoriale : "est-ce un article de fond ou une note de version ?" Cela décide du mode, pas le sujet lui-même.

Ne mélangez pas les deux systèmes visuels dans le même ensemble d'images sauf si l'utilisateur demande explicitement un hybride.

Choisissez ensuite un thème :

• Magazine Éditorial x E-ink utilise l'une des 6 palettes de magazine : Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune ou Midnight Ink (la seule variante sombre ; réservée aux illustrations clés de jeux / photographie de nuit / couvertures cinématographiques).
• Suisse International utilise l'une des 4 palettes d'accent : IKB Blue, Lemon Yellow, Lemon Green ou Safety Orange.

Lisez references/theme-presets.md pour les jetons CSS exacts. N'inventez pas de couleurs arbitraires sauf si l'utilisateur a une exigence stricte de marque.

4. Planifier les Pages

Créez un plan interne concis :

Page 01 / couverture / accroche / source image / intention de mise en page
Page 02 / point / copie clé / preuve visuelle / intention de mise en page
...

Lorsque l'utilisateur demande une approbation, montrez ce plan avant le rendu. Sinon, utilisez-le en interne et continuez.

Utilisez references/layout-recipes.md pour choisir les structures de page. Évitez de faire de chaque page une mise en page répétée titre-plus-carte.

Pour les images au format 3:4, vérifiez references/portrait-fill.md avant de coder. Un tableau court ou un registre doit être étendu en une composition portrait complète avec une colonne de citation, une preuve d'image, des notes marginales, des lignes plus grandes ou une zone de fond héroïque.

La copie destinée au public doit décrire la scène réelle de l'utilisateur, pas la méthode de production. Les termes internes tels que 3s, 5s, Live Photo, triple collage, budget d'information, intégration de vidéo longue, accélération, détection de moment fort, un point d'action, ou modèle de mise en page peuvent guider la planification, les noms de fichiers, les notes QA et les résumés de livraison, mais ils ne doivent pas devenir le H1, l'accroche ou la copie principale du corps sauf si l'utilisateur fait explicitement un post pédagogique sur ces concepts. Avant le rendu, lisez chaque titre visible une fois en tant que spectateur réel : s'il ressemble à une exigence de tâche, remplacez-le par une copie spécifique à la scène.

N'ajoutez pas d'ornements non basés sur un modèle juste pour satisfaire un avertissement de densité automatique. Les règles supplémentaires, barres latérales, axes de temps pseudo, étiquettes décoratives ou badges inventés doivent provenir d'une recette de mise en page existante ou d'une demande utilisateur. Si un avertissement de densité apparaît, corrigez-le en choisissant une meilleure recette, en redimensionnant le contenu réel ou en acceptant l'avertissement avec une justification visuelle ; ne mettez pas d'interface utilisateur dénuée de sens sur la carte.

Pour les cartes Live Photo, planifiez-les d'abord comme des cartes sociales normales, puis décidez du rôle du mouvement : un point d'action, un petit processus, un changement avant/après, trois résultats parallèles, ou ambiance/preuve. Le seul changement structurel est qu'un ou plusieurs puits d'image deviennent des puits vidéo. Conservez les mêmes règles de ratio, recadrage, zone de sécurité, typographie et mode stylistique ; appliquez la logique de recadrage d'image fixe au flux vidéo. La première image doit passer les mêmes vérifications qu'une image statique : pas de recadrage excessif, l'interface utilisateur/le contenu clé reste lisible, et la carte suit toujours la recette de mise en page choisie. Lisez references/live-photo-production.md avant le rendu.

Pour les cartes puzzle Live Photo basées sur des vidéos, laissez les actifs vidéo guider. Utilisez peu ou pas de copie : la vidéo est l'histoire. Le défi est de décider le nombre de puits, les portions temporelles et l'équilibre de l'information pour que le spectateur puisse absorber le mouvement sans texte.

5. Rendu

Suivez references/production-workflow.md pour le rendu HTML/CSS et la gestion des images. Utilisez Playwright MCP pour le rendu, pas l'écran du navigateur. Chaque tâche de rendu doit appeler l'outil et passer le fichier HTML, puis réceptionner la capture d'écran générée.

Avant le rendu, lisez references/qa-checklist.md pour confirmer l'achèvement.

Transférez les Références à l'Agent de Rendu

Cette compétence s'appuie sur un répertoire references/ complet avec des fichiers distincts pour les spécifications de plateforme, le système stylistique, les préréglages de thème, les recettes de mise en page, l'infrastructure des composants, les fonds, le remplissage portrait, la planification du contenu, le workflow de production, la production Live Photo, les superpositions d'images, le traitement des captures d'écran, les cartes et la compression des titres. Avant de produire une sortie de carte sociale, vous devez lire les fichiers de référence pertinents. Ne les résumez pas dans votre propre SKILL.md — chargez et lisez les fichiers réels.

Structure du Projet

references/
  platform-specs.md
  style-system.md
  theme-presets.md
  layout-recipes.md
  components.md
  background-systems.md
  portrait-fill.md
  content-planning.md
  production-workflow.md
  live-photo-production.md
  image-overlay.md
  screenshot-treatment.md
  map-component.md
  title-shortener.md
  category-cookbook.md
  qa-checklist.md

Dépannage

• Si le rendu Playwright produit une page vierge, vérifiez que le HTML a un body et que les feuilles de style sont chargées. Les CSS externes doivent être chargées via une balise link ; les styles en ligne doivent être vérifiés pour les erreurs de syntaxe.
• Si l'image est rognée de manière inattendue, vérifiez les paramètres clip dans l'appel Playwright.
• Si la mémoire de l'agent est courte pendant les longues sessions, rappelez les fichiers de référence pertinents entre les étapes plutôt que de reposer sur la mémoire.

Historique des Versions

• v1.0 — Compétence initiale. Prend en charge les cartes sociales Xiaohongshu, les couvertures WeChat et les cartes Live Photo de base. Dépôt de références complet.