guizang-social-card-skill : g?n?rer des cartes sociales avec Claude Code

When you turn a 5,000-character technical article into social cards, the hard part is not only extracting ideas. The repeated work is layout: where the title lands, which theme is used, whether the WeChat cover pair stays visually consistent, and whether every PNG can survive review. Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Ad?quation du projet : faut-il l?utiliser ?

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Dimension	Notes
Skill	Claude Code / Codex workflow for social cards
Output	HTML mono-fichier -> PNG Playwright local
Platform	Xiaohongshu 1080x1440, WeChat 2100x900 and 1080x1080
Good fit	?quipes contenu, d?veloppeurs ind?pendants, blogueurs tech
Poor fit	Retouche photo, validation stricte de marque, redistribution closed-source
License	AGPL-3.0
Not promised	Publication en lot, publication automatique, adaptation aux r?gles de plateforme

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Deux syst?mes visuels et trois canevas

Editorial vs Swiss : diff?rences de style

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Visual system	Usage	Layout skeletons	Theme presets
Editorial	Cartes narratives, notes de voyage, partages de lecture	16	6
Swiss	Tests produit, cartes comparatives, affichage de donn?es	12	4

Trois tailles de canevas

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Canvas marker	Size	Use
.poster.xhs	1080x1440 (3:4)	Xiaohongshu / Rednote carousel
.poster.wide	2100x900 (21:9)	Couverture WeChat large
.poster.square	1080x1080 (1:1)	Couverture WeChat carr?e

Installation : CLI ou clone local

Option 1 : installation CLI (recommand?e)

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

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

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Option 2 : cloner en local

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

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

guizang-social-card-skill/
??? SKILL.md
??? templates/
??? scripts/
?   ??? render.mjs
?   ??? validate-social-deck.mjs
??? references/

Rendu et validation : du HTML au PNG

Utiliser le script de rendu

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

node render.mjs

• Playwright is missing: run npx playwright install chromium first
• The HTML path is wrong: check the generated filename
• Fonts are missing: install suitable local fonts for Chinese text

Utiliser le script de validation

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

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

1. Overflow detection: text outside the canvas is flagged
2. Font-size ceiling: oversized titles are reported
3. Footer collision: overlap between footer and content is flagged
4. Horizontal band density: dense Swiss bands produce warnings
5. Frame overflow: frames outside the canvas are reported
6. Swiss font weight: invalid weight settings are reported

Sources d?assets et risques de licence

Workflow de sources d?images

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

• Unsplash: high-quality free images, but still check commercial terms
• Pexels: free images, with license terms to review
• Flickr CC: Creative Commons images may need attribution
• Wallhaven: wallpaper-style images need commercial-rights checks
• Search results: licensing status is uncertain and needs manual review

Lecture de la licence AGPL-3.0

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

Sc?nario	Exigence
Personal use	Libre ? utiliser et modifier
Redistribution	Conserver AGPL-3.0 et fournir le code source
Network service	Publish server-side source if offered as SaaS or a network service
Commercial use	Autoris? seulement en respectant les obligations open source

Notes de risque

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

• Le projet g?n?re des PNG, pas des publications
• Les tailles de canevas viennent du README, pas des r?gles officielles de plateforme
• Les stars et forks changent et ne doivent pas ?tre le signal de valeur principal
• Les licences d?assets n?cessitent une revue humaine ; l?agent ne peut pas la terminer seul

Pour aller plus loin

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

• Claude Code Skill guide: why SKILL.md is more stable than copied prompts
• CLAUDE.md writing guide: how to constrain agent output with project rules
• Claude Subagent guide: how to split planning, writing, design, and QA across roles

Conclusion

Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Claude Code ou Codex peuvent prendre en charge le choix du canevas, le squelette de mise en page, la g?n?ration HTML, l?export PNG et la v?rification par validator. L?humain garde la densit? des titres, les droits d?image, la coh?rence de marque et la validation finale avant publication.

guizang-social-card-skill is best treated as a small production line. Let it fix canvas, layout, color, rendering, and validation. Cette section conserve les faits et le jugement du texte chinois tout en les reformulant en fran?ais pratique. Le Skill stabilise le canevas, la mise en page, le th?me, le rendu et la validation. La revue humaine reste n?cessaire pour les licences, la marque, les r?gles de plateforme et la d?cision finale de publication.