flyanx/xiaohongshu-card

Générateur de cartes Xiaohongshu (xiaohongshu-card)

Transforme un article de vulgarisation → un jeu complet de cartes graphiques Xiaohongshu (JPG multi-images), en suivant des standards éprouvés. Convient aux articles WeChat, Sohu, revues, etc., pour une adaptation à Xiaohongshu.

1. Spécifications de sortie (fixes)

Élément	Standard
Dimensions de la carte	1080 × 1440 (3:4, ratio recommandé par Xiaohongshu)
Format d'export	JPG qualité 95, nommé sémantiquement (01-couverture.jpg, 02-aperçu-5-étapes.jpg…10-fermeture.jpg)
Livrable	Uniquement JPG ; le HTML est un fichier de travail interne (conservé dans le répertoire du projet pour modifications et réexportations)
Taille de police mobile	Corps 29-30px / Titre principal 60-92px / Titre d'étape 40px / Valeurs de paramètres 46px / Légendes 20px (à 1080 de large, reste lisible après réduction sur mobile)

2. Structure des pages (template fixe + nombre d'étapes adaptatif)

Couverture → Aperçu → Pages d'étapes STEP (une page par étape, STEP 0N / nombre total d'étapes) → Pièges à éviter → FAQ → Fermeture

• Couverture : Composition centrée en texte uniquement (ligne de tags + sous-titre + titre principal + sous-titre 2), avec espacement design.
• Aperçu : Grille des trois avantages + principe en une phrase + table des matières des cinq étapes (numéro STEP + nom + résumé en une phrase).
• Pages d'étapes : En-tête rouge « STEP 0N / 05 » + titre principal de l'étape + bloc de contenu (points clés/liste de processus/fiche de paramètres) + image originale de l'article.
• Page « Pièges à éviter » : Rappels clés en grands caractères (un par ligne ◆).
• Page FAQ : Questions fréquentes en grandes cartes, environ 4 (si insuffisant, extraire d'autres paragraphes de l'article – ne pas inventer).
• Fermeture : FIN → Merci d'avoir lu / Merci de votre attention → Logo de la marque → ＋ Suivre → « Marque · Plus de contenu à venir » (le contenu provient de la configuration de la marque).
• Si le nombre d'étapes ≠ 5, il s'adapte automatiquement (le nombre total d'étapes suit) ; si les images/le contenu sont trop denses, diviser la page (1 à 2 blocs d'information par page est idéal).

3. Stratégie d'image (priorité aux images de l'article original)

1. Priorité aux images originales : Récupérer les images de l'article original et vérifier leur emplacement dans l'article pour garantir la correspondance texte-image. En cas de non-correspondance, déplacer la page ou en informer l'utilisateur.
2. Déchiffrement AES Sohu : Les images des articles Sohu ont un data-src crypté en AES-ECB-PKCS7, clé www.sohu.com6666. Utiliser scripts/decrypt-sohu.py pour déchiffrer et obtenir l’URL réelle //qX.itc.cn/.... Lors du téléchargement, inclure le Referer (URL de la page d'article) et un User-Agent de navigateur pour éviter le hotlink protection.
3. Absence d'image dans l'article original : Seulement dans ce cas, autoriser une image générée par IA comme substitut – fond blanc, palette monochrome (polyvalent), et obligatoirement marquer « Cette image est générée par IA ».
4. Images de type capture d'écran en paysage (par ex. 1080×289) : Utiliser un conteneur .fig de hauteur fixe avec object-fit: contain ; superposer verticalement (.fig-col) / aligner horizontalement (.fig-row).

4. Vérification qualité (obligatoire, avant livraison)

Utiliser scripts/verify.js (Playwright) pour une vérification automatisée. En cas d'échec, itérer automatiquement en ajustant la taille de police/l'espacement/la hauteur d'image :

• Taux de remplissage de la page de contenu 80-100 % (espace vide ≤ 20 %, la page ne doit pas être trop vide).
• Aucun débordement (le bas de l'élément le plus profond ≤ hauteur de la carte).
• Toutes les images chargées avec succès (naturalWidth > 0).
• Les pages de couverture et de fermeture, conçues avec un espacement esthétique, sont exemptées de la vérification du taux de remplissage.

5. Système de styles (3 styles intégrés, par défaut : Manuel de laboratoire rationnel)

Style	Visuel	Utilisation
A – Manuel de laboratoire rationnel (par défaut)	Fond blanc texte noir + accent rouge #E63946, grille suisse, blocs numérotés, identifiant STEP	Contenu professionnel, type procédure expérimentale
B – Espacement haut de gamme	Fond blanc cassé + or chaud #D4A574, graisse légère, beaucoup d'espace	Scénarios haut de gamme, minimalistes
C – Vulgarisation douce	Fond beige #f6f2ea + vert naturel #7a8a72, cartes arrondies	Comptes de vulgarisation accessibles

Ajouter un nouveau style : ajouter une classe CSS (ex. .X) dans le template et l'enregistrer dans la configuration STYLES.

6. Configuration de la marque

assets/brand-config.example.json définit : nom de la marque, chemin du logo, texte de fermeture, style par défaut. Configuration par défaut intégrée pour IgiBio (logo : assets/logo-ige.png). Pour d'autres marques, copier le fichier et modifier les champs.

7. Règles strictes (non-respect = reprise)

• Supprimer les informations redondantes/limitations de la plateforme : source du contenu, appels à l'action « J'aime »/« Favori », instructions « glisser vers la gauche », etc., ne doivent pas apparaître.
• Ne pas inventer de contenu : Toute information provient de l'article original ; les informations complémentaires (comme la FAQ) doivent être extraites d'autres paragraphes de l'article.
• Les images doivent correspondre exactement au texte : Vérifier l'emplacement dans l'article original ; pas d'image si l'article n'en a pas (remplir avec du texte) ou marquer « généré par IA ».
• Anti-AI slop : Pas d'émojis décoratifs, pas de dégradé violet, pas de coins arrondis avec bordure colorée à gauche, pas de fausses images SVG, pas de polices système par défaut comme police d'affichage.

8. Flux de travail (9 étapes)

1. Récupérer l'article : WebFetch/curl pour obtenir le contenu complet (titre, compte WeChat, date, corps, images), sauvegarder le HTML original.
2. Extraire l'essentiel : Organiser selon la structure de la page – concepts/principes, étapes (avec paramètres), notes, FAQ.
3. Récupérer les images : Analyser les images de l'article original (pour Sohu, utiliser scripts/decrypt-sohu.py), télécharger et enregistrer l'emplacement de chaque image dans l'article.
4. Déterminer la structure de la page : Couverture/Aperçu/Page d'étape N/Pièges à éviter/FAQ/Fermeture, déterminer le nombre d'étapes.
5. Générer le HTML : Copier assets/card-template.html, remplir les données dans le tableau PAGES du JS (voir les commentaires du template), placer les images dans le répertoire imgs/ du projet.
6. Itérer la vérification : Ouvrir avec Playwright → exécuter scripts/verify.js → ajuster la taille de police/l'espacement/la hauteur d'image jusqu'à obtenir 10/10 PASS.
7. Exporter en JPG : Modifier le tableau NAMES dans scripts/export-jpg.js → exécuter l'export (1080×1440 qualité 95).
8. Confirmation utilisateur : Afficher toutes les cartes → ajuster selon les retours (texte/couleurs/logo/fermeture) → réexporter.
9. Livrer : Lister les fichiers JPG + conseils de publication (titre/hashtags de référence).

9. Instructions d'utilisation du template (card-template.html)

• Fichier HTML unique + vanilla JS piloté par les données : le tableau PAGES contient une page par entrée, le tableau blocks contient un bloc de contenu par entrée.
• Types de blocs : {t, p} bloc texte / {t, lines:[['a)','texte'],...]} liste de processus / {params:[[valeur,étiquette],...]} fiche paramètre / {step:{t,d}} explication d'étape / {img} {imgs, col} image / {faq} FAQ / {notes} notes / {dir} table des matières des cinq étapes / {why} grille des avantages / {tip} astuce / {recape} mémo rapide.
• Trois types de pages : type:'cover' (couverture), type:'step' (page d'étape, avec step: N), type:'content' (aperçu/pièges/FAQ), type:'end' (fermeture).

10. Dépendances d'environnement

• Node.js + Playwright (dans le projet : npm i playwright)
• Python3 + pycryptodome (uniquement pour le déchiffrement Sohu)