guizang-social-card-skill: Social Cards mit Claude Code erzeugen

When you turn a 5,000-character technical article into social cards, the hard part is not only extracting ideas. The repeated work is layout: where the title lands, which theme is used, whether the WeChat cover pair stays visually consistent, and whether every PNG can survive review. Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Projekt-Fit: Sollten Sie es nutzen?

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Dimension	Hinweis
Skill	Claude Code / Codex workflow for social cards
Output	Single-File-HTML -> lokales Playwright-PNG
Platform	Xiaohongshu 1080x1440, WeChat 2100x900 and 1080x1080
Good fit	Content-Teams, Solo-Entwickler, Tech-Blogger
Poor fit	Foto-Retusche, strenge Markenfreigabe, Closed-Source-Weitergabe
License	AGPL-3.0
Not promised	Massenver?ffentlichung, automatische Ver?ffentlichung, Anpassung an Plattformpr?fungen

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Zwei visuelle Systeme und drei Canvases

Editorial vs. Swiss: die Stilunterschiede

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Visual system	Einsatz	Layout skeletons	Theme presets
Editorial	Narrative Karten, Reisenotizen, Leseempfehlungen	16	6
Swiss	Produktreviews, Vergleichskarten, Datendarstellung	12	4

Drei Canvas-Gr??en

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Canvas marker	Size	Use
.poster.xhs	1080x1440 (3:4)	Xiaohongshu / Rednote carousel
.poster.wide	2100x900 (21:9)	Breites WeChat-Cover
.poster.square	1080x1080 (1:1)	Quadratisches WeChat-Cover

Installation: CLI oder lokaler Clone

Option 1: CLI-Installation (empfohlen)

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

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

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Option 2: lokal klonen

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

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

guizang-social-card-skill/
??? SKILL.md
??? templates/
??? scripts/
?   ??? render.mjs
?   ??? validate-social-deck.mjs
??? references/

Rendering und Validierung: von HTML zu PNG

So nutzen Sie das Render-Skript

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

node render.mjs

• Playwright is missing: run npx playwright install chromium first
• The HTML path is wrong: check the generated filename
• Fonts are missing: install suitable local fonts for Chinese text

So nutzen Sie das Validierungsskript

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

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

1. Overflow detection: text outside the canvas is flagged
2. Font-size ceiling: oversized titles are reported
3. Footer collision: overlap between footer and content is flagged
4. Horizontal band density: dense Swiss bands produce warnings
5. Frame overflow: frames outside the canvas are reported
6. Swiss font weight: invalid weight settings are reported

Asset-Quellen und Lizenzrisiken

Workflow f?r Bildquellen

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

• Unsplash: high-quality free images, but still check commercial terms
• Pexels: free images, with license terms to review
• Flickr CC: Creative Commons images may need attribution
• Wallhaven: wallpaper-style images need commercial-rights checks
• Search results: licensing status is uncertain and needs manual review

AGPL-3.0 richtig einordnen

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

Szenario	Anforderung
Personal use	Frei nutzbar und ?nderbar
Redistribution	AGPL-3.0 beibehalten und Quellcode bereitstellen
Network service	Publish server-side source if offered as SaaS or a network service
Commercial use	Nur unter Einhaltung der Open-Source-Pflichten erlaubt

Risikohinweise

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

• Das Projekt erzeugt PNG-Assets, keine ver?ffentlichten Beitr?ge
• Canvas-Gr??en stammen aus der README, nicht aus offiziellen Pr?fregeln
• Stars und Forks ?ndern sich und sind kein Kernargument
• Asset-Lizenzen brauchen menschliche Pr?fung; der Agent erledigt das nicht automatisch

Weiterlesen

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

• Claude Code Skill guide: why SKILL.md is more stable than copied prompts
• CLAUDE.md writing guide: how to constrain agent output with project rules
• Claude Subagent guide: how to split planning, writing, design, and QA across roles

Fazit

Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Claude Code oder Codex sollten Canvas-Auswahl, Layout-Skelett, HTML-Erzeugung, PNG-Export und Validator-Pr?fung ?bernehmen. Menschen pr?fen weiterhin Titeldichte, Bildrechte, Markenwirkung und die letzte Freigabe vor der Ver?ffentlichung.

guizang-social-card-skill is best treated as a small production line. Let it fix canvas, layout, color, rendering, and validation. Dieser Abschnitt ?bertr?gt die Fakten und die Einsch?tzung des chinesischen Originals in einen kompakten deutschen Praxisstil. Der Skill stabilisiert Canvas, Layout, Theme, Rendering und Validierung. Die menschliche Pr?fung bleibt f?r Rechte, Markenwirkung, Plattformregeln und die finale Qualit?tsentscheidung zust?ndig.