flyanx/xiaohongshu-card

小红书卡片生成器 (xiaohongshu-card)

Verwandle einen populärwissenschaftlichen Artikel in ein komplettes Set von Xiaohongshu-Bildkarten (JPG-Mehrfachbilder), ausgeführt nach einem in der Praxis erprobten Standard. Geeignet für Artikel von WeChat Official Accounts, Sohu, Zeitschriften etc. zur Xiaohongshu-Aufbereitung.

1. Ausgabespezifikationen (fest)

Element	Standard
Kartengröße	1080 × 1440 (3:4, Xiaohongshu-Empfehlung)
Exportformat	JPG Quality 95, benannt nach Semantik (01-Cover.jpg, 02-Übersicht.jpg…10-Endseite.jpg)
Liefergegenstand	Nur JPG; HTML dient nur als interne Arbeitsdatei (bleibt im Projektverzeichnis für spätere Überarbeitungen)
Mobile Schriftgröße	Fließtext 29-30px / Überschriften 60-92px / Schritttitel 40px / Parameterwerte 46px / Bildunterschriften 20px (bei 1080 Breite nach Skalierung auf dem Handy noch lesbar)

2. Seitenstruktur (festes Template + anpassbare Schrittzahl)

Cover → Übersicht → STEP-Seiten (eine Seite pro Schritt, STEP XX/Gesamtschritte) → Tipps → FAQ → Endseite

• Cover: Reine Text-Mittenzentrierung (Tag-Zeile + Untertitel + Haupttitel + zweiter Untertitel), gestalterischer Weißraum
• Übersicht: Drei Vorteilskarten + Ein-Satz-Prinzip + Fünf-Schritte-Inhaltsverzeichnis (STEP-Nr. + Name + Ein-Satz-Zusammenfassung)
• Schrittseite: Oben rote „STEP XX / 05“-Markierung + Schrittname als Haupttitel + Inhaltsblöcke (Punkte/Ablauflisten/Parameterkarten) + Originalbild(er)
• Tipps-Seite: Wichtige Hinweise in großer Schrift (jede Zeile mit ◆)
• FAQ-Seite: Häufige Fragen als große Karten, ca. 4 Stück (bei Bedarf aus anderen Absätzen des Originalartikels extrahieren, nicht erfinden)
• Endseite: FIN → Danke fürs Lesen / Danke für die Aufmerksamkeit → Marken-LOGO → ＋ Folgen → „Marke · Mehr Inhalte unterwegs“ (Inhalt aus der Markenkonfiguration)
• Bei abweichender Schrittzahl (≠ 5) automatische Anpassung (Gesamtschritte folgen); bei Überfüllung von Bildern/Inhalten Seiten aufteilen (am besten 1-2 Informationsblöcke pro Seite)

3. Bildstrategie (Originalbilder bevorzugt)

1. Originalbilder bevorzugt: Originalbilder des Artikels abrufen und deren Position im Artikel prüfen – sicherstellen, dass sie eins zu eins mit dem Text korrespondieren (ansonsten Seite verschieben oder dem Benutzer erklären)
2. Sohu AES-Entschlüsselung: Die data-src der Sohu-Artikelbilder sind AES-ECB-PKCS7-verschlüsselt, Schlüssel www.sohu.com6666. Mit scripts/decrypt-sohu.py entschlüsseln, um die echte URL //qX.itc.cn/... zu erhalten. Beim Herunterladen Referer (Artikel-URL) + Browser-UA gegen Hotlinking-Schutz setzen
3. Original hat wirklich keine Bilder: Nur dann erlaubt, KI-generierte Schema-Bilder zu verwenden – weißer Hintergrund, einfarbig (plattformübergreifend nutzbar), und der Benutzer muss mit „Dieses Bild ist KI-generiert“ markiert werden
4. Querformat-Screenshot-Bilder (z.B. 1080×289): Behälter mit fester Höhe .fig + object-fit: contain; mehrere Bilder vertikal stapeln (.fig-col) / nebeneinander (.fig-row)

4. Qualitätsprüfung (obligatorisch, vor Auslieferung)

Programmatische Prüfung mit scripts/verify.js (Playwright). Bei Nichterfüllung automatische iterative Anpassung von Schriftgröße/Abständen/Bildhöhe:

• Befüllungsrate der Inhaltsseiten 80-100% (Leerraum ≤ 20%, Seite nicht zu leer)
• Kein Überlauf (tiefstes Inhaltselement bottom ≤ Kartenhöhe)
• Alle Bilder erfolgreich geladen (naturalWidth > 0)
• Cover/Endseite sind gestalterische Weißraumseiten, daher von der Befüllungsprüfung ausgenommen

5. Stilsystem (3 integrierte Stile, Standard: Rationales Laborhandbuch)

Stil	Visuell	Verwendung
A Rationales Laborhandbuch (Standard)	Weißer Hintergrund, schwarze Schrift + rote #E63946 Akzente, Schweizer Raster, nummerierte Blöcke, STEP-Markierung	Fachliche Inhalte, experimentelle Anleitungen
B Edler Weißraum	Cremeweißer Hintergrund + warmer Goldton #D4A574, sehr leichte Schriftgewichte, viel Weißraum	Hochwertige, minimalistische Szenarien
C Sanfte Wissenschaft	Beiger Hintergrund #f6f2ea + natürliches Grün #7a8a72, abgerundete Karten	Freundliche Wissenschaftskanäle

Neuen Stil hinzufügen: Einfach eine Stilklasse (z.B. .X) in das Template-CSS einfügen und in der STYLES-Konfiguration registrieren.

6. Markenkonfiguration

assets/brand-config.example.json definiert: Markenname, LOGO-Pfad, Endseitentext, Standardstil. Standardmäßig ist die Konfiguration für AIGI Bio enthalten (LOGO: assets/logo-ige.png). Andere Marken kopieren die Datei und ändern die Felder.

7. Rote Linien (Verstoß = Nacharbeit)

• Plattformabhängige/redundante Informationen entfernen: Inhaltsquellen, Like-Sammel-CTAs, „Wischen nach links“-Aufforderungen etc. erscheinen nicht
• Keine Inhalte erfinden: Alle Informationen stammen aus dem Originaltext; ergänzende Informationen (wie FAQ) müssen aus anderen Absätzen des Originals extrahiert werden
• Bilder müssen eins zu eins mit dem Text korrespondieren: Position im Original prüfen; wenn das Original kein Bild hat, kein Bild einfügen (Textlayout füllt aus) oder als KI-generiert kennzeichnen
• Anti-KI-Slop: Keine Emoji-Dekorationen, keine lila Farbverläufe, keine abgerundeten Ecken mit linkem Farbbalken, keine SVG-Schemabilder, keine Systemschriftarten als Darstellungsschriftarten

8. Arbeitsablauf (9 Schritte)

1. Artikel abrufen: WebFetch/curl zum Abrufen des vollständigen Artikels (Titel, WeChat Official Account, Datum, Text, Bilder), HTML-Original speichern
2. Essenz extrahieren: Nach Seitenstruktur organisieren – Konzepte/Prinzipien, Schritte (mit Parametern), Hinweise, FAQ
3. Bilder abrufen: Originalbilder parsen (bei Sohu über scripts/decrypt-sohu.py), herunterladen und Position jedes Bildes im Originaltext notieren
4. Seitenstruktur festlegen: Cover/Übersicht/STEP N-Seiten/Tipps/FAQ/Endseite, Schrittzahl bestimmen
5. HTML generieren: assets/card-template.html kopieren, Inhalte in das JS-PAGES-Datenarray einfügen (siehe Template-Kommentare), Bilder in das imgs/-Verzeichnis des Projekts legen
6. Prüfung & Iteration: Playwright öffnen → scripts/verify.js ausführen → Anpassung von Schriftgröße/Abständen/Bildhöhe basierend auf den Ergebnissen, bis 10/10 PASS
7. JPG exportieren: NAMES-Array in scripts/export-jpg.js anpassen → Export ausführen (1080×1440, Quality 95)
8. Benutzerbestätigung: Alle Karten anzeigen → Feedback einholen (Text/Farben/LOGO/Endseite anpassen) → erneut exportieren
9. Auslieferung: JPG-Liste + Veröffentlichungshinweise (Titel/Hashtag-Referenzen) bereitstellen

9. Vorlagenanleitung (card-template.html)

• Single-File HTML + Vanilla JS datengetrieben: PAGES-Array, jedes Element eine Seite, blocks-Array, jedes Element ein Inhaltsblock
• Block-Typen: {t, p} Textblock / {t, lines:[['a)','text'],...]} Ablauf-/Listenblock / {params:[[wert,label],...]} Parameterkarte / {step:{t,d}} Schritterklärung / {img} {imgs, col} Bilder / {faq} / {notes} / {dir} Fünf-Schritte-Inhaltsverzeichnis / {why} Vorteilskarte / {tip} Hinweiskarte / {recape} Kurznotiz-Karte
• Drei Seitentypen: type:'cover' (Cover), type:'step' (Schrittseite, step: N), type:'content' (Übersicht/Tipps/FAQ), type:'end' (Endseite)

10. Abhängigkeiten

• Node.js + Playwright (im Projekt npm i playwright)
• Python3 + pycryptodome (nur für Sohu-Entschlüsselung)