guizang-social-card-skill: Xiaohongshu-Posts und WeChat-Cover als Fließband

Einen Langtext in Social-Media-Karten zu verwandeln, ist selten wegen des Titels mühsam. Aufwendig ist, dass jede Karte gleichzeitig Format, Weißraum, Schrift, Assets, Export und Review erfüllen muss. Eine Redakteurin zieht in wenigen Minuten fünf Aussagen heraus, bleibt dann aber an konkreten Formaten hängen: dem Xiaohongshu-3:4-Board, dem WeChat-21:9-Header, der 1:1-Share-Karte. Ein Ad-hoc-Prompt hilft in der Not, doch beim nächsten ähnlichen Inhalt driften Stil, Abstände und Titeldichte wieder auseinander.

guizang-social-card-skill setzt genau hier an. Es verpackt die Produktion von Xiaohongshu-Karten und WeChat-Covern in einen Skill, den Claude Code und Codex aufrufen können. Im Repository steht kein Prompt nach dem Motto „bitte etwas hochwertiger gestalten”, sondern ein kompletter Ablauf mit SKILL.md, HTML-Seed-Vorlagen, Visualreferenzen, Asset-Regeln, Playwright-Rendering und Prüfskripten. Seine passende Aufgabe ist es, Artikel, Produktnotizen, Screenshot-Tutorials, Untertitel oder Fotos in ein iterierbares Set von PNG-Karten zu überführen.

Das Fazit zuerst

• guizang-social-card-skill richtet sich an Agent-Umgebungen wie Claude Code und Codex und liefert Xiaohongshu-Kartensets sowie WeChat-Cover-Paare in 21:9 und 1:1.
• Die GitHub-README nennt zwei eingebaute Visualsysteme, Editorial und Swiss, mit insgesamt 28 Layout-Skeletten, 10 Theme-Presets und 3 Board-Formaten.
• Geliefert wird als Single-File-HTML mit Playwright-PNG-Rendering; der Agent kann HTML und CSS direkt lesen und schreiben und exportiert die Bilder dann mit node render.mjs.
• Es eignet sich, um zuverlässig eine „vorzeigbare erste Kartenversion” zu erzeugen, ersetzt aber keine Marken-Design-Freigabe, keine Foto-Retusche und keine Publishing-Prüfung der Plattform.
• Die Lizenz ist AGPL-3.0. Bevor ein Team modifiziert, weitergibt oder einen Online-Dienst baut, sollte es die Open-Source-Pflichten klären.

Es löst das Problem der Layout-Wiederverwendung

Viele KI-erzeugte Karten scheitern nicht daran, dass das Modell keine Texte schreiben kann, sondern daran, dass es keine wiederverwendbare Layout-Grenze gibt. Heute setzt das Modell den Titel nach links oben, morgen über die ganze Fläche; heute ein zurückhaltendes Blau, morgen ein gesättigter Verlauf; wird der Titel länger, kollidieren Footer, Seitenzahl und Hauptmotiv.

Dieser Skill fasst die instabilen Faktoren in einem festen Ablauf zusammen. Die drei Boards der README sind eindeutig: .poster.xhs ist 1080x1440 für Xiaohongshu 3:4, .poster.wide ist 2100x900 für WeChat 21:9, .poster.square ist 1080x1080 für WeChat-Share-Karten. Sobald das Format feststeht, ändert sich die Aufgabe des Agenten von „frei gestalten” zu „im festen Container das Layout wählen, Text kürzen, Assets ersetzen, Export ausführen”.

Auch die zwei Visualsysteme senken die Entscheidungslast. Editorial wirkt wie ein zurückhaltendes Digitalmagazin und passt zu Reise-, Lese-, Lifestyle- und Erzählinhalten. Swiss betont Raster, Ankerfarben und Informationshierarchie und passt zu Tool-Reviews, Datenrückblicken, KI-Produkterklärungen und Tutorial-Aufschlüsselungen. Content-Teams brauchen meist keinen neuen Stil pro Mal, sondern unterschiedliche Themen, die stabil in wenige kontrollierbare Systeme fallen.

Installation und der erste Prompt

Die empfohlene Installation der GitHub-README ist eine einzeilige Eingabe:

Railway - Moderne Deployment-Plattform, ohne DevOps-Aufwand, in Minuten live

Jetzt starten →Anzeige

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

Sie können das Repository auch in das persönliche Skill-Verzeichnis von Claude Code klonen:

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

Schreiben Sie nach der Installation nicht nur „mach mir ein Xiaohongshu-Kartenset”. Stabiler ist, fünf Dinge klar zu benennen: Inhaltsquelle, Plattformformat, Kartenzahl, Visualsystem und Asset-Strategie. Zum Beispiel:

Erstelle aus dieser KI-Tool-Review ein Xiaohongshu-3:4-Set mit fünf Karten.
Nutze das Visualsystem Swiss und das Theme IKB-Blau.
Bevorzuge Produkt-Screenshots aus dem Text; fehlen passende Bilder, sag mir zuerst, welche Assets fehlen.
Halte pro Karte eine Kernaussage und zeig mir vor dem PNG-Export die HTML-Struktur und den Titelkürzungsplan.

Der Kern dieses Prompts sind nicht viele Adjektive, sondern prüfbare Eingaben für den Agenten. Das Plattformformat bestimmt das Board, die Kartenzahl die Informationsdichte, das Visualsystem den Layout-Pool, die Asset-Strategie, ob externe Bildquellen genutzt werden, und die Vorschau vor dem Export erkennt zu lange Titel und verdeckte Motive frühzeitig.

Der Workflow im Detail

Die README zerlegt den Workflow in Intake, Style & Theme, Layout Selection, Asset Prep, Compose & Render, Deliver & Review und Iterate. In der Praxis lässt sich das in der folgenden Reihenfolge verstehen.

Zuerst die Anforderungen sammeln. Ist die Zielplattform Xiaohongshu oder WeChat, hat der Nutzer eigene Bilder, ist der Inhalt ein Tutorial, eine Review oder eine Reisenotiz – das beeinflusst Layout und Assets.

Dann das Visualsystem wählen. KI-Tools, Methoden und Datenrückblicke passen eher zu Swiss; Personengeschichten, Reisen und Lesenotizen eher zu Editorial. Themenfarben nicht spontan eintragen – das Repository setzt die 10 Presets als harte Grenze, damit nicht jedes Mal eine neue Farbpalette entsteht.

Danach die Layout-Skelette wählen. Das Projekt bringt 16 Editorial- und 12 Swiss-Layouts mit. Für Content-Teams ist das wertvoller als „freies Design”, weil die Skelette Titellänge, Anzahl der Infoblöcke und Weißraumanteil begrenzen.

Die Asset-Verarbeitung verdient einen eigenen Blick. Die README legt eine Bildquellen-Priorität fest: zuerst Nutzerbilder, sonst Unsplash, Pexels, Flickr CC, Wallhaven und direkte Suche, jeweils lokal abgelegt und in SOURCES.md vermerkt. Vor der Veröffentlichung müssen Lizenz und Quelle dennoch geprüft werden, besonders bei kommerziellen Accounts, Werbematerial und Markenkooperationen.

Komposition und Export nutzen ein Single-File-HTML. Der Skill setzt den Inhalt in eine Seed-Vorlage, erzeugt HTML und gibt über node render.mjs PNGs aus. HTML und CSS sind Text und damit für Claude Code und Codex gut handhabbar; Laufweite, Weißraum und Bildposition lassen sich später präzise ändern.

Alibaba Cloud - Top-Wahl für Entwickler, exklusiv 15 % Rabatt auf Lighthouse-Server

15 % Rabatt sichern →Anzeige

Zuletzt Ansicht und Iteration. Die README schreibt bewusst „standardmäßig keine automatische Prüfung” in den Ablauf, weil jeder Validator-Lauf Wartezeit kostet. Der bessere Rhythmus: zuerst die PNGs ansehen, die Richtung bestätigen und dann validate-social-deck.mjs ausführen, um Überlauf, Footer-Kollisionen, Elemente außerhalb des Rahmens und Swiss-Schriftgewicht-Probleme zu finden.

Für welche Szenarien es passt

Diese Tabelle hilft, Grenzen zu setzen. guizang-social-card-skill macht niemanden im Handumdrehen zum Designer; es übergibt eher die wiederholbare, strukturierte, vorlagenfähige Kartenproduktion an den Agenten. Wo feines ästhetisches Urteil, Markenrisiko und Veröffentlichungsentscheidung gefragt sind, muss weiterhin ein Mensch eingreifen.

QA-Checkliste: exportierbar heißt nicht veröffentlichungsreif

Social-Media-Karten scheitern oft an Kleinigkeiten: ein paar Zeichen zu viel im Titel, und die Mobilvorschau wirkt überladen; die Quelle unten wird verdeckt und ist im Screenshot nicht zu sehen; eine Maske liegt über einem Gesicht – das Bild bleibt, das Vertrauen geht.

Prüfen Sie vor der Veröffentlichung mindestens diese Punkte:

• Jede Karte trägt nur eine Hauptaussage; keine ganzen Langtext-Absätze hineinpressen.
• Titel zuerst kürzen, besonders bei der 1:1-WeChat-Share-Karte den Sicherheitsrand wahren.
• Bei Vollbild plus Maske den Text abseits von Gesichtern, Produktmotiven und textdichten Bildbereichen platzieren.
• Footer, Seitenzahl und Quellenangabe dürfen nicht mit dem Textblock kollidieren.
• Bei externen Bildern die Quelle festhalten und vor kommerzieller Nutzung die Lizenz der Bildbibliothek prüfen.
• In Swiss-Vorlagen große Schriftgrade nicht mit zu kräftigem Schriftgewicht kombinieren, sonst entsteht eine fett-schwarze Titelwand.
• Nach validate-social-deck.mjs nicht nur auf pass/fail schauen, sondern auch, ob Warnungen auf echte visuelle Probleme zeigen.

Stabiler testet man, indem man zuerst aus einem alten Beitrag drei bis fünf Karten erzeugt. Sind Layout, Schriftgrad und Export-Pfad stabil, bearbeitet man ein Themenpaket in Serie. Wirft man die ganze Wochenproduktion auf einmal hinein, ballt sich der Review-Druck in der letzten Runde – und es wird eher langsamer.

Aufgabenteilung mit Prompts und Design-Tools

Der Vorteil einfacher Prompts ist Tempo. Im Chatfenster schreibt das Modell Titel, zerlegt Aussagen und schlägt Farben vor – in Minuten gibt es eine Richtung. Die Schwächen sind aber klar: Layouts lassen sich nicht stabil reproduzieren, lokale Bildquellen sind schwer einzubinden, der Export hängt an Screenshots, und die Nachbereitung fällt schwer.

Design-Tools wie Figma und Canva eignen sich besser für die Feinarbeit. Markenrichtlinien, Komponentenbibliotheken, gemeinsames Review und Asset-Verwaltung sind dort ausgereifter. Das Problem: Content-Teams produzieren täglich viele „gut genug und konsistente” Zwischen-Assets, und alles von Hand bremst den Takt.

guizang-social-card-skill ist eher die mittlere Schicht der Content-Produktion. Prompts sorgen für Streuung, Design-Tools für die Feinpolitur, und der Skill verfestigt die wiederholten Schritte unter einer festen Ästhetik: Board wählen, Skelett auswählen, Titel kürzen, Assets platzieren, rendern, prüfen. Vorlagen, Skripte, Referenzdokumente und Render-Befehle liegen im Skill-Verzeichnis, und Claude Code oder Codex erzeugen entlang des Ablaufs editierbares HTML und PNGs. Für Tech-Blogger, Solo-Entwickler und kleine Teams ist diese mittlere Schicht sehr praktisch.

KiloClaw - Managed OpenClaw für Unternehmen: AI-Agent-Orchestrierung und smartes Modell-Routing

Jetzt starten →Anzeige

In den eigenen Content-Prozess einbinden

Ein solider Ablauf sieht so aus:

1. Den Langtext auf fünf bis sieben Aussagen verdichten, je Aussage nur ein Haupttitel und zwei bis drei Stützpunkte.
2. Den Skill mit Claude Code oder Codex installieren und prüfen, dass SKILL.md, assets/ und references/ vorhanden sind.
3. Aus einem alten Beitrag drei Testkarten erzeugen, ohne externe Bildbibliotheken, nur mit Screenshots oder reinem Layout.
4. Die Mobilvorschau manuell prüfen und Probleme bei Titellänge, Weißraum, Bildmasken und Seitenzahlen notieren.
5. Den Validator laufen lassen und Überlauf, Footer-Kollisionen und Elemente außerhalb des Rahmens beheben.
6. Auf ein Set von fünf bis neun Karten oder WeChat-Cover-Paare erweitern.

Diese Reihenfolge hält das Risiko klein. Der Skill verfestigt den Ablauf, der Mensch entscheidet, ob die Information eine Veröffentlichung wert ist, ob die Optik passt und ob die Quellen sauber sind.

Ein leicht übersehenes Detail: jeden Testlauf dokumentieren. Etwa welches Theme, welche Layouts, der Unterschied vor und nach der Titelkürzung, welche Bilder ersetzt wurden und welche Warnungen der Validator meldete. Nach drei, vier Läufen entsteht eine kleine „Grafikrichtlinie” für den eigenen Account. Bei neuen Inhalten reicht es, diese Notizen wiederzuverwenden – die Erzeugung wird schneller und das Review leichter abzustimmen.

Arbeiten mehrere Personen mit, legt man Originaltext, Karten-HTML, exportierte PNGs, SOURCES.md und Feedback am besten in dasselbe Aufgabenverzeichnis. So sieht das Design, warum der Agent ein Bild gewählt hat, das Team kann jede Karte ihrer Quellaussage zuordnen, und die Verantwortliche kann vor der Veröffentlichung Lizenz und Textrisiko prüfen. Der Skill löst den Produktionsablauf, die Verzeichnisdisziplin den Kollaborationsablauf – erst zusammen wird es stabil.

Weiterlesen

Wenn Claude Code Skills für Sie neu sind, lesen Sie zuerst den Einstieg in Claude Code Skills und verstehen, warum SKILL.md stabiler ist als kopierte Prompts. Damit das Tool dauerhaft den Projektvorgaben folgt, lesen Sie anschließend den Leitfaden zum Schreiben von CLAUDE.md. Wenn Sie später Themenwahl, Schreiben, Grafik und Publishing-Prüfung auf verschiedene Rollen verteilen wollen, lesen Sie den Praxisleitfaden zu Claude Subagents.

guizang-social-card-skill lohnt einen Test, aber behandeln Sie es nicht als automatische Viral-Maschine. Es ist eher eine kleine Produktionslinie: Sie fixiert Format, Layout, Farben, Rendering und Prüfung, damit der Mensch seine Energie wieder auf Inhaltsurteil und finale Ästhetik richten kann. Beginnen Sie mit einem alten Beitrag, drei Karten und einer Themenfarbe – läuft das rund, binden Sie es in den täglichen Content-Workflow ein.