# Social-Media-Karten-Agenten-Skill > Erstellen Sie visuell beeindruckende Social-Media-Karten für Xiaohongshu-Karussells und WeChat-Cover-Paare aus verschiedenen Inhaltsquellen. Nutzen Sie redaktionelle oder Schweizer Designsysteme, um ansprechende visuelle Darstellungen für Ihre Artikel und Beiträge zu erstellen. - Canonical: https://nanoskill.ai/de/skills/social-card-generation - Markdown: https://nanoskill.ai/de/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: de - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About Die Guizang Social-Media-Karten-Fähigkeit ist eine fortschrittliche Agentenfähigkeit, die darauf ausgelegt ist, die Erstellung von Social-Media-Karten für Plattformen wie Xiaohongshu und WeChat zu optimieren. Sie ermöglicht es Benutzern, vielfältige Inhalte – von Artikeln und Produktnotizen bis hin zu Screenshots und Fotos – in ausgefeilte, plattformoptimierte visuelle Darstellungen zu verwandeln. Durch die Bereitstellung unterschiedlicher redaktioneller und schweizerisch-internationaler Designsysteme stellt die Fähigkeit sicher, dass Ihre Social-Media-Karten sowohl ansprechend als auch ästhetisch konsistent sind und bereit, die Aufmerksamkeit des Publikums zu erregen, unabhängig davon, ob Ihr Ziel narratives Storytelling oder datengesteuerte Erklärungen sind. Diese Fähigkeit zeichnet sich durch ihren strukturierten Workflow aus und bietet 28 Layout-Skelette und 10 Themen-Voreinstellungen, um die Inhaltspräsentation zu leiten. Sie automatisiert die Bildbeschaffung von beliebten Plattformen und enthält einen robusten, auf Playwright basierenden Validator, um die visuelle Qualität durch Erkennung häufiger Layout-Probleme aufrechtzuerhalten. Die Ausgabe erfolgt als Einzeldatei-HTML, die direkt in PNG gerendert wird, was sie hochkompatibel mit Coding-Agent-Umgebungen wie Claude Code und Codex macht. Benutzer können die Guizang Social-Media-Karten-Fähigkeit für eine Vielzahl von Anwendungsfällen nutzen, z. B. zur Erstellung von mehrkartigen Xiaohongshu-Karussells aus langen Artikeln, zur Gestaltung visuell harmonischer WeChat 21:9-Hero- und 1:1-Share-Card-Paare oder zur Erstellung klarer Tutorial-Visuals aus Screenshots. Ihre Designprinzipien priorisieren Zurückhaltung, Struktur und benutzerzentrierte Bildbehandlung und gewährleisten professionelle und wirkungsvolle Social-Media-Inhalte, ohne dass umfangreiches Design-Know-how erforderlich ist. ## Key features - **Zwei visuelle Systeme**: Wählen Sie zwischen einem Editorial-Stil für Storytelling (Monocle, Kinfolk) oder einem Swiss-International-Stil für Daten und Struktur (Grid-First, scharfe Haarstriche), um den Ton Ihres Inhalts zu treffen. - **Mehrere Leinwandgrößen**: Unterstützt Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) und WeChat 1:1 (1080x1080) für eine vielseitige Social-Media-Präsenz. - **Umfangreiche Layout-Grundgerüste**: Zugriff auf 28 vorgefertigte Layout-Grundgerüste (16 Editorial, 12 Swiss), einschließlich bildgeführter Cover, KPI-Türme und H-Balkendiagramme zur schnellen Inhaltsstrukturierung. - **Automatisierte Bildbeschaffung**: Beschafft automatisch Bilder von Unsplash, Pexels, Flickr CC, Wallhaven oder über direkte Suche und lädt sie lokal mit einer automatisch generierten SOURCES.md-Datei herunter. - **Layout-Validator**: Enthält einen Playwright-basierten Validator, der Überläufe, Zeichenbegrenzungsverstöße, Dichtelücken und Fußzeilenkollisionen erkennt, um eine qualitativ hochwertige Social-Card-Generierung sicherzustellen. ## Use cases - **Erstellen Sie Xiaohongshu-Karussells**: Verwandeln Sie lange Artikel, Produktbewertungen oder Reiseführer mit Editorial- oder Swiss-Design in ansprechende mehrkartige Karussells für Xiaohongshu. - **Gestalten Sie WeChat-Cover-Paare**: Generieren Sie visuell konsistente 21:9-Hero-Bilder und 1:1-Share-Karten für WeChat Moments und Channels aus beliebigen Inhalten. - **Erstellen Sie Tutorial-Visuals**: Konvertieren Sie Screenshot-Tutorials, Spieleanleitungen oder Tool-Walkthroughs in strukturierte Social Cards mit verschönerten Screenshots und klaren Layouts. - **Fassen Sie Daten und Bewertungen zusammen**: Präsentieren Sie Produktbewertungen, Datenzusammenfassungen oder Jahresrückblicke mit Swiss-Layouts, Diagrammen und Matrizen für eine klare Kommunikation. ## Result preview Erkunden Sie ein professionelles Social-Media-Karussell, das von dieser Fähigkeit angetrieben wird. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Installieren Fügen Sie die Social-Media-Karten-Generierungsfähigkeit Ihrem KI-Agenten hinzu. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Inhalt beschreiben Geben Sie den Inhalt, das Thema oder die Kernbotschaft an, die Sie in Social-Media-Karten umwandeln möchten. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Social-Media-Karten generieren Erstellen Sie visuell ansprechende, plattformoptimierte Kartendesigns mit klarer Informationshierarchie, starkem Storytelling-Fluss und publikationsreifen Layouts. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition 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](https://github.com/op7418/guizang-ppt-skill). Gemeinsame visuelle Sprache, getrennte Wartung. PPT löst „horizontale Wischvorträge“; dieses hier löst „statische Feed-Bilder“. ![Guizang Social Card Skill Vorschau](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30-Sekunden-Start ```bash 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: ```text 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: ```text 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: ```text Erstelle mir ein Karussell im Swiss-Stil für Xiaohongshu aus diesem Artikel, 5 Karten, IKB-Blau. ``` Weitere nützliche Prompts: ```text 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](https://github.com/op7418/guizang-ppt-skill)) / Langformat-Videoproduktion / reine Fotoretusche / reine Textbearbeitung ohne Layout ## 11 Xiaohongshu-Kategorien Abgestuft nach „Kompetenzkreis“ – siehe [`references/category-cookbook.md`](./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 | Aufgabe | Empfohlener Ablauf | |------|------------------| | Langer Artikel → Xiaohongshu-Karussell | Kernaussagen extrahieren; Editorial für narratives Tempo, Swiss für Datenaufschlüsselungen | | Produktbewertung / Tool-Zusammenfassung | Swiss + IKB-Blau, bevorzugt `S09 KPI-Turm` / `S10 H-Balkendiagramm` | | Reisen / Lifestyle | Editorial + Mitternachtstinte oder Düne, `M16 Bildgeführtes Cover` für vollflächigen Hero | | WeChat-Cover-Paar | Denselben Inhalt zweimal rendern: `.poster.wide` 21:9 + `.poster.square` 1:1, visuell konsistent | | Screenshot-Tutorial / Tool-Durchlauf | `.frame-shot` + `.device-browser`, bevorzugt Swiss-Rasterbasis | | Spiele-Guide / Filmzusammenfassung | Editorial + Mitternachtstinte, Spielekunst von Wallhaven für vollflächigen Hero holen | | Datenrückblick / Jahresrückblick | Swiss + Zitrone oder Sicherheitsorange, Matrix- + Ledger-Kombination | ## 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 | Plattform | Status | Hinweise | |----------|--------|-------| | Claude Code | Unterstützt | Nativer Skill-Workflow, ideal zum Generieren + Iterieren von Karten | | Codex | Unterstützt | Gut für die Generierung von Langformat-Karten, Bildbeschaffung, visuelle QA | | Cursor / andere lokale Agenten | Funktioniert | Erfordert Dateisystem-Lese-/Schreibzugriff + Shell-Ausführung | | Reiner Chatbot | Nicht empfohlen | Ohne Dateisystem und Rendering-Pipeline können Bilder nicht zuverlässig geliefert werden | ## Installation ### Option 1: Einzeilige Installation (empfohlen) ```bash 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 ```bash 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 → `` 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`](./SKILL.md). Tiefe Details in den passenden `references/*.md`. ## Validator ```bash 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`](./references/theme-presets.md). **Benutzerdefinierte Hex-Werte sind nicht erlaubt** – die Ästhetik zu schützen ist wichtiger als Wahlfreiheit. ### Editorial (6) | Thema | Töne | Am besten für | |-------|-------|----------| | 🖋 **Tintenklassik** | `#0a0a0b` / `#f1efea` | Allgemeiner Standard, kommerzielle Themen, im Zweifelsfall | | 🌊 **Indigo-Porzellan** | `#0a1f3d` / `#f1f3f5` | Technik, Forschung, KI, technisches Schreiben | | 🌿 **Waldtinte** | `#1a2e1f` / `#f5f1e8` | Natur, Nachhaltigkeit, Outdoor, Sachbücher | | 🍂 **Kraftpapier** | `#2a1e13` / `#eedfc7` | Nostalgie, Geisteswissenschaften, Lesen, Literatur | | 🌙 **Düne** | `#1f1a14` / `#f0e6d2` | Kunst, Design, Kreativität, Mode | | ⚫ **Mitternachtstinte** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Spiel-Key-Art / Nachtszenen / filmische Cover / Black Myth · Elden Ring-artige dunkle Themen | ### Swiss (4) | Thema | Akzent | Am besten für | |-------|--------|----------| | 🔵 **IKB Klein-Blau** | `#002FA7` | Allgemeiner Standard, kommerzielle Einführungen, KI-Produkte, Frameworks | | 🟡 **Zitrone** | `#FFD500` | Jugend, Sport, Einzelhandel, Konsum, Y2K | | 🟢 **Zitronengrün** | `#C5E803` | Öko, Gesundheit, Gen Z, grüne Marken | | 🟠 **Sicherheitsorange** | `#FF6B35` | Warnungen, Nachrichten, Industrie, energiegeladene Themen | Um Themen zu wechseln, ersetze einfach das Attribut `
` 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](https://github.com/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`](./LICENSE). ## FAQ ### Was ist die Guizang Social Card Skill? Die Guizang Social Card Skill ist eine Agent-Fähigkeit für Claude Code, Codex und ähnliche Coding-Agent-Umgebungen, die Xiaohongshu-Karussells und WeChat-Cover-Paare aus verschiedenen Inhalten wie Artikeln, Notizen oder Fotos mit klar unterscheidbaren visuellen Designsystemen generiert. ### Welche Art von Inhalten kann ich verwenden, um Social Cards zu generieren? Sie können Artikel, Texte, Screenshots, Produktnotizen, Untertitel oder Fotos als Quellinhalt für die Generierung von Social Cards verwenden. Die Fähigkeit passt sich verschiedenen Eingaben an, um visuell ansprechende Ergebnisse zu erzeugen. ### Welche beiden visuellen Systeme stehen für die Social-Card-Generierung zur Verfügung? Die Fähigkeit bietet zwei visuelle Systeme: 'Editorial' für Storytelling, Lifestyle und narrative Inhalte und 'Swiss International' für Produktbewertungen, Daten, Frameworks und Tutorials, gekennzeichnet durch einen Grid-First-Ansatz. ### Kann ich eigene Farben für meine Social Cards verwenden? Nein, benutzerdefinierte Hex-Werte sind nicht erlaubt. Die Fähigkeit stellt 10 Themenvoreinstellungen (6 Editorial, 4 Swiss) zur Verfügung, um visuelle Kohärenz und Qualität zu gewährleisten. Sie können die Themen wechseln, indem Sie das data-theme-Attribut auf der Seed-Vorlage aktualisieren. ### Wie installiere ich die Guizang Social Card Skill? Sie können sie mit \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` installieren, oder indem Sie das Repository in das Skills-Verzeichnis Ihres Agenten klonen. ### Unterstützt die Fähigkeit englische Inhalte? Ja, die Fähigkeit unterstützt englische Inhalte. Sowohl die Editorial-Schriftarten (Playfair Display + Noto Serif) als auch die Swiss-Schriftarten (Inter + Helvetica) decken Chinesisch und Englisch ab, und die Layout-Grundgerüste sind sprachunabhängig.