Social-Media-Karten-Agenten-Skill

Eine Agent-Fähigkeit für Claude Code, Codex und ähnliche Coding-Agent-Umgebungen. Sie erzeugt Xiaohongshu / Rednote-Karussellbilder und WeChat 21:9 + 1:1 Cover-Paare aus Artikeln, Texten, Screenshots, Produktnotizen, Untertiteln oder Fotos.

Zwei visuelle Systeme teilen sich einen Workflow:

• Editorial. Zurückhaltende Layouts im Geiste von Monocle / Kinfolk / Cereal. Am besten für Storytelling, Lifestyle, Reisen, Lesen, Film und persönliche Beobachtungen.
• Swiss International. Rasterbasiert, eine einzige Akzentfarbe, scharfe Haarlinien, extreme Typografiekontraste. Am besten für Produktbewertungen, Daten, Frameworks, Tutorials und KI-Tools.

Schwesterprojekt zu guizang-ppt-skill. Gemeinsame visuelle Sprache, getrennte Wartung. PPT löst „horizontale Wischvorträge“; dieses hier löst „statische Feed-Bilder“.

30-Sekunden-Start

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

Oder füge dies einem KI-Agenten mit Shell-Zugriff hinzu:

Installiere guizang-social-card-skill für mich. Klone https://github.com/op7418/guizang-social-card-skill nach ~/.claude/skills/guizang-social-card-skill und überprüfe dann, ob SKILL.md, assets/ und references/ existieren.

Wenn du es bereits installiert hast, aktualisiere mit:

Aktualisiere guizang-social-card-skill für mich. Gehe zu ~/.claude/skills/guizang-social-card-skill, führe git pull aus und nenne mir dann den neuesten Commit.

Dann frage deinen Agenten:

Erstelle mir ein Karussell im Swiss-Stil für Xiaohongshu aus diesem Artikel, 5 Karten, IKB-Blau.

Weitere nützliche Prompts:

Erstelle mir ein 3:4 Xiaohongshu-Set aus dieser Produktbewertung, mit editorialartigen Titeln.
Wandle diesen Artikel in ein WeChat-Cover-Paar um: 21:9-Hero + 1:1-Teilen-Karte, visuell konsistent.
Ich habe 3 Campingfotos – erstelle mir ein bildgeführtes Xiaohongshu-Karussell.
Wandle diesen Spiele-Guide-Text in ein Xiaohongshu-Set um; hole etwas Spielkunst von Wallhaven.

Was du bekommst

• 🖋 Zwei visuelle Systeme: Editorial für Atmosphäre und Erzählung, Swiss für Fakten und Struktur, die sich einen Workflow teilen
• 📐 3 Leinwandgrößen: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 Layout-Skelette: 16 Editorial (M01-M16, inklusive Bildgeführtes Cover, Pipeline, Vorher/Nachher) + 12 Swiss (S01-S12, inklusive KPI-Turm, H-Balkendiagramm, Matrix + Hero)
• 🎨 10 Themenvoreinstellungen: 6 Editorial (Tintenklassik, Indigo-Porzellan, Waldtinte, Kraftpapier, Düne, Mitternachtstinte dunkel) + 4 Swiss-Akzentfarben (IKB Klein-Blau, Zitrone, Zitronengrün, Sicherheitsorange)
• 🖼 Bildbeschaffungs-Workflow: Benutzerbilder zuerst; ansonsten Kaskade über Unsplash → Pexels → Flickr CC → Wallhaven → direkte Suche, lokal heruntergeladen mit automatisch generierter SOURCES.md
• 🌫 WebGL-Tintenfluss-Hintergrund: Editorial-Hero-Seiten können eine Live-Tintenanimation enthalten; kann für Geräte mit geringer Leistung oder im Screenshot-Modus deaktiviert werden
• 🪧 Bildüberlagerung + Gesichtssicherheit: Vollflächige Bilder müssen eine Maske tragen; Textabwurfzonen müssen das Motiv meiden. Harte Regeln in references/image-overlay.md
• 🧰 Screenshot-Verschönerungs-Assets: 9 WebP-Hintergründe mit echter Textur (5 Editorial / 4 Swiss), kombiniert mit .frame-shot / .device-browser / .device-phone-Dienstprogrammen
• 🗺 Karten-Komponente: MapLibre + OSM-Echtzeitkacheln, Multi-Pin + Verbinder, für Reiseführer gemacht
• ✅ Validator: validate-social-deck.mjs erkennt automatisch Überlauf, Schriftgrößenbeschränkungsverletzungen, 4-Band-Dichtelücken und Fußzeilenkollisionen
• 📄 Einzeldatei-HTML + Playwright-Rendering: keine Frontend-Build-Pipeline; node render.mjs gibt direkt PNG aus

Passt / Passt nicht

✅ Passt: Xiaohongshu-Karussells / WeChat-Cover-Paare / Moments-Cover / Channels-Cover / Artikelvisualisierungen / Tutorial-Seiten / Datenzusammenfassungen / Reiseführer / Produktbewertungen / Screenshot-Erklärungen

❌ Passt nicht: Horizontale Wisch-Decks (verwende guizang-ppt-skill) / Langformat-Videoproduktion / reine Fotoretusche / reine Textbearbeitung ohne Layout

11 Xiaohongshu-Kategorien

Abgestuft nach „Kompetenzkreis“ – siehe references/category-cookbook.md:

End-to-End stark (Text / Struktur / Bilder alle im Rahmen):

• Reisen, Karriere, Empfehlungen (nach Angabe eines Untergenres)

Text und Struktur stark, Bilder abhängig vom Benutzer oder bezogener Kunst:

• Gaming, Film, Essen (rezeptorientiert), Make-up (tutorialorientiert), Fitness, Zuhause, Mode (kuratierte Auswahl)

Außerhalb des Rahmens, von vornherein deklariert (wird nicht erzwungen):

• OOTD-Live-Aufnahmen / Dreamcore / Filmemulations-Grading / echte Hauttest-Make-up – alles, was stark von Fotografie oder Nachbearbeitung abhängt

Häufige Szenarien

Warum Einzeldatei-HTML zu PNG

• Agentenfreundlich: HTML + CSS ist Text – Agenten können direkt schreiben, lesen, bearbeiten und validieren
• Layout-Präzision: CSS Grid + strenge Typ-/Rand-/Rasterregeln übertreffen den Layoutumfang von Markdown bei weitem
• Offene Bildbeschaffung: Anbindung an Unsplash / Pexels / Wallhaven / Mapbox / OSM / jede Web-Ressource
• Überprüfbare Qualität: validate-social-deck.mjs führt Playwright-DOM-Messung durch, keine Schätzungen
• Einfache Lieferung: output/*.png wird direkt versendet – keine Deployments, keine Export-Tools

Plattform-Unterstützung

Installation

Option 1: Einzeilige Installation (empfohlen)

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

Option 2: Füge dies einer KI hinzu

Installiere den guizang-social-card-skill Claude Code Skill für mich. Schritte:

1. Stelle sicher, dass ~/.claude/skills/ existiert (erstellen, falls nicht)
2. Führe git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill aus
3. Überprüfe: ls ~/.claude/skills/guizang-social-card-skill/ sollte SKILL.md, assets/, references/ anzeigen
4. Sag mir Bescheid, wenn es fertig ist. Später werden Aussagen wie „Erstelle mir ein Xiaohongshu-Karussell“ diesen Skill auslösen.

Füge den obigen Block in Claude Code / Cursor / jeden KI-Agenten mit Shell-Zugriff ein.

Option 3: Manuelle CLI

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

So wird es ausgelöst

Sobald installiert, erkennt Claude Code den Skill automatisch. Auslösephrasen:

• „Erstelle mir ein Xiaohongshu / Rednote-Karussell“
• „Erstelle mir Rednote-Karten“
• „Erstelle ein WeChat 21:9-Hero + 1:1-Teilen-Karte“
• „Generiere Social Cards / magazinartige Social Cards“
• „Wandle diesen Artikel in ein Tutorial-Karussell um“
• „Erstelle eine Xiaohongshu-Bewertung im Swiss-Stil / Karten im IKB-Stil“

Workflow

Der Skill ist ein strukturierter Workflow. Der Agent durchläuft 7 Schritte:

1. Aufnahme – 4 Dinge erfassen: Zielplattform / Stil / Quellinhalt / Benutzerbilder. Wenn keine Bilder verfügbar sind, einmal A/B/C präsentieren (selbst aufnehmen / KI generieren / online beschaffen); nicht erneut anbieten
2. Stil & Thema – Editorial oder Swiss wählen, dann eine der 10 Themenvoreinstellungen auswählen. Benutzerdefinierte Hex-Werte sind nicht erlaubt
3. Layout-Auswahl – Aus den 28 Layout-Skeletten Text auswählen / einfügen / anpassen. 16 Editorial / 12 Swiss
4. Asset-Vorbereitung – Bilder beschaffen (Unsplash / Pexels / Flickr CC / Wallhaven / direkte Suche), lokal herunterladen + SOURCES.md schreiben; fragen, ob Quellen genannt werden sollen
5. Komposition & Rendering – Seed-Vorlage kopieren → <!-- POSTERS_HERE --> ersetzen → node render.mjs
6. Lieferung & Überprüfung – Zuerst PNGs zeigen, fragen: „Schaust du sie dir selbst an oder soll ich den Validator ausführen?“ – validiert nicht automatisch
7. Iteration – Benutzerfeedback anwenden, Inline-Stile optimieren oder Layouts / Bilder austauschen, erneut rendern

Vollständige Spezifikation in SKILL.md. Tiefe Details in den passenden references/*.md.

Validator

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

6 Regeln, basierend auf Playwright-Echtzeit-Rendering-Messung, nicht auf statischer Analyse:

• R1 Überlauf – Jeder Abschnitt, der über .poster hinausgeht, schlägt sofort fehl
• R2 Schriftgrößenbeschränkungen – .h-xl / .h-display Größen- + Gewichtskombinationen, die Seed-Definitionen überschreiten
• R3 Fußzeilenkollision – Inhalt, der in die untere Fußzeile / Seitennummer drückt
• R4 4-Band-Dichte – 1440-hohe Leinwand in 4 horizontale Bänder aufgeteilt; jedes muss Inhalt enthalten oder einen angegebenen Grund für Leerraum haben
• R5 Rahmenüberlauf – .frame-img / .frame-shot Kinder, die den Rahmen überlaufen
• R6 Swiss-Identität – Swiss-Vorlagen mit Inline-font-weight >= 700 warnen (verletzt „größer bedeutet dünner“)

SKILL.md Schritt 7 besagt ausdrücklich, der Validator läuft nicht automatisch – warte, bis der Benutzer sich die Bilder zuerst ansieht, was Dutzende Sekunden pro Runde spart.

Themenvoreinstellungen

Auswählen aus references/theme-presets.md. Benutzerdefinierte Hex-Werte sind nicht erlaubt – die Ästhetik zu schützen ist wichtiger als Wahlfreiheit.

Editorial (6)

Swiss (4)

Um Themen zu wechseln, ersetze einfach das Attribut <section class="poster" data-theme="..."> in der Seed-Vorlage; alle CSS-Werte werden über var(--...) aufgelöst.

Verzeichnis

guizang-social-card-skill/
├── SKILL.md                              ← Haupt-Skill-Datei: 7-Schritte-Workflow
├── README.md                             ← Chinesische README
├── README.en.md                          ← Diese Datei
├── HANDOFF.md                            ← Übergabedokument: Fakten + Versionsgeschichte
├── PRODUCT.md                            ← Produktdokument: Überlegungen + Entscheidungen + Roadmap
├── validate-social-deck.mjs              ← Playwright-Layout-Validator
├── assets/
│   ├── template-editorial-card.html      ← Editorial-Seed (6 Themen / 3 Leinwände)
│   ├── template-swiss-card.html          ← Swiss-Seed (4 Akzente / 3 Leinwände)
│   ├── magazine-bg-webgl.js              ← WebGL-Tintenfluss-Hintergrund
│   └── screenshot-backgrounds/           ← 9 Screenshot-Bühnenhintergründe (WebP)
│       ├── style-a/                      ←   5 Editorial
│       └── style-b/                      ←   4 Swiss
└── references/
    ├── platform-specs.md                 ← Plattform × Auflösung × Benennung
    ├── style-system.md                   ← Harte Regeln und Anti-Muster für beide Stile
    ├── theme-presets.md                  ← Alle 10 Paletten im Detail
    ├── layout-recipes.md                 ← 28 Layout-Skelette (M01-M16 + S01-S12)
    ├── components.md                     ← Typografie / Karten / Abstände / Symbole
    ├── background-systems.md             ← Tintenfluss / Raster / Papierschichten
    ├── portrait-fill.md                  ← Leerraumstrategie für das 3:4-Board
    ├── content-planning.md               ← Aufhänger / Seitenaufteilung / Textkompression
    ├── category-cookbook.md              ← 11 Xiaohongshu-Kategorie-Routing-Tabelle
    ├── image-overlay.md                  ← Vollflächige Bildmaske + Gesichtssicherheitsregeln
    ├── screenshot-treatment.md           ← `.frame-shot`-Dienstprogramme + Screenshot-Verschönerung
    ├── map-component.md                  ← `.map-block` MapLibre-Karte
    ├── title-shortener.md                ← Kurztitelstrategie für das 1:1-Cover
    ├── production-workflow.md            ← Playwright-Rendering-Pipeline
    └── qa-checklist.md                   ← Qualitätscheckliste

Kern-Designprinzipien

1. Zurückhaltung vor Lautstärke – zurückhaltende Paletten stechen in einem gesättigten Feed hervor
2. Struktur vor Dekoration – Typografie / Kontrast / Raster trägt die Hierarchie, nicht Schatten oder Karten
3. Layouts vor Freiheit – zuerst auswählen, später anpassen; keine Seiten außerhalb der 28 Skelette erfinden
4. Benutzerbilder zuerst – bei der Aufnahme einmal A/B/C präsentieren; nicht erneut vorschlagen, selbst zu fotografieren
5. Maske + Vermeiden – vollflächige Bilder tragen immer eine Maske; Textabwurfzonen müssen das Motiv freihalten (Gesichter / Produkte / textdichte Bereiche)
6. Größer bedeutet dünner – Swiss .h-xl-Größe steigt → Gewicht muss sinken. Editorial folgt derselben Regel
7. Keine automatische Validierung – den Benutzer zuerst schauen lassen, dann vor der Validierung fragen; spart Dutzende Sekunden pro Runde
8. Ein Skill ist ein Produkt, kein Prompt – hat PRODUCT.md, Versionsnummern, CHANGELOG, Fähigkeitsgrenzen
9. Lokale Tests bleiben außerhalb von Git – alle Demos / Smoke-Tests leben unter local-tests/, gitignoriert

Visuelle Referenzen

• Monocle / Kinfolk / Cereal Magazinlayouts und Buchstabenabstände
• Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style Rastersysteme
• Apartamento / The Gentlewoman Bild-zu-Text-Verhältnisse und menschliche Porträts
• Zurückhaltung-gewinnt-den-Feed-Beispiele von Xiaohongshu / Rednote
• Guizangs Social-Card-Praxis

Roadmap

• Weitere Smoke-Tests für Schriftgrößenbeschränkungs-Randfälle bei langen Editorial-Inhalten
• Weitere Swiss-Datenlayouts (zusätzliche Diagramm-Skelette)
• Nach der Bildgenerierung: aktiv fragen, ob lokale Korrekturen vorgenommen / das gesamte Bild neu generiert werden soll
• Weitere kategoriespezifische empfohlene Layout-Pakete (derzeit sind 7 von 11 End-to-End stark)
• Marktplatzreife WorkBuddy-Version

Beitragen

Fehler, Layout-Probleme, neue Layout-Anfragen – Issues und PRs willkommen. Prioritäten für Änderungen:

• Beim Bearbeiten von Seed-Vorlagen auch die Korrespondenztabelle in references/components.md aktualisieren (Größen / Abstände / Gewichte)
• Beim Hinzufügen von Layouts das vollständige Rezept zu references/layout-recipes.md hinzufügen (Textbegrenzungen + Mindestdichte)
• Beim Hinzufügen von Themenfarben auch den [data-theme="..."]-Block der Seed-Vorlage + references/theme-presets.md aktualisieren
• Beim Hinzufügen von Swiss-Regeln auch die entsprechende Regel in validate-social-deck.mjs aktualisieren
• Aufgetretene Fehler kommen in references/qa-checklist.md
• Tests und Demos leben unter local-tests/ – den Skill-Root nicht verschmutzen

Lizenz

AGPL-3.0 © 2026 op7418

Dieses Projekt ist unter GNU AGPL-3.0 lizenziert. Wichtige Punkte:

1. Namensnennung erforderlich – Den Urheberrechtshinweis beibehalten
2. Abgeleitete Werke müssen quelloffen sein – Jede modifizierte Version, Fork oder Weitergabe muss unter AGPL-3.0 (oder einer kompatiblen Lizenz) veröffentlicht werden, mit vollständig verfügbarem Quellcode
3. Netzwerknutzung ist Verbreitung – Selbst wenn eine modifizierte Version nur als SaaS / Webdienst betrieben wird, ohne den Code zu verbreiten, muss der Quellcode dennoch veröffentlicht werden (das macht AGPL strenger als GPL)
4. Keine geschlossene, proprietäre oder ausschließlich kostenpflichtige Verbreitung

Vollständige Bedingungen in LICENSE.