guizang-social-card-skill: Turn Articles Into Xiaohongshu Carousels and WeChat Cover Pairs

A long article deserves a polished cover and a multi-slide carousel, but hand-designing nine-to-ten layouts in Figma is rarely the highest-leverage hour of a marketing week. op7418/guizang-social-card-skill is a Claude Code and Codex skill that takes an article (or copy, screenshots, product notes, subtitles, photos) and renders it as Xiaohongshu carousels, WeChat cover pairs, and Live Photo motion cards — all from one HTML file per task.

Why This Skill Matters

The skill ships two visual systems, Editorial magazine style and Swiss International, sharing a single workflow. Twenty-eight layouts (Editorial M01–M16, Swiss S01–S12) and 10 theme presets (6 Editorial + 4 Swiss accent colors) cover most editorial and brand-system needs. Output is rendered via Playwright from a single index.html per task folder, so you can edit the HTML directly when you want a small tweak instead of regenerating from a prompt.

Three canvas sizes are exposed via data-board attributes: .poster.xhs for 1080×1440 Xiaohongshu 3:4, .poster.wide for 2100×900 WeChat 21:9, and .poster.square for 1080×1080 WeChat 1:1. The same content rendered at wide and square produces a matched cover pair — useful for WeChat Official Account posts where header and share card need to feel consistent. Live Photo motion cards (5s on Xiaohongshu, 3s inline on WeChat) ship as a JPG + MOV + .pvt package, but publishing the .pvt usually needs an iPhone-side step.

Custom hex colors are not allowed — you pick from the 10 presets. License is AGPL-3.0; commercial closed-source products need to weigh that.

Installation

The README gives one canonical install and a manual alternative:

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

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

The skill works in Claude Code and Codex natively. Cursor and other local agents can use it if they expose file read/write plus shell access. Plain chatbot interfaces (no filesystem or render pipeline) are not supported.

Real Workflow: Five-Slide Xiaohongshu Carousel From an Article

You have an article you wrote about a recent product launch and want a five-image Xiaohongshu carousel in Swiss style with the IKB Klein Blue accent. The skill has the layouts and theme already — you just point it at the article.

Step 1. Open Claude Code with the skill installed and start a session in the article directory. Ask:

Build a 5-card Swiss-style Xiaohongshu carousel from the article at
articles/launch-q3.md. Use IKB Klein Blue accent.

Step 2. The skill reads the article, picks a Swiss layout per slide (likely S01–S12), applies the IKB Blue preset, and writes one index.html per task folder under output/<task-name>/. Each slide uses the .poster.xhs data-board at 1080×1440.

Step 3. Render with Playwright:

node render.mjs output/<task-name>

You should see five PNG files written alongside the HTML. Open them in a viewer to confirm the layout, copy, and accent color match what you asked for.

Step 4. For copy tweaks that are faster in HTML than in another prompt round, edit the generated index.html directly and re-run node render.mjs. The skill's single-file HTML render path is meant to be hackable.

Real Workflow: WeChat 21:9 Header + 1:1 Share Card From the Same Article

You want the same article to ship as a WeChat Official Account post with a 21:9 header and a 1:1 share card that look like a matched set.

Step 1. Ask the skill for the pair:

Make a matched WeChat cover pair from articles/launch-q3.md: a 21:9 header
and a 1:1 share card, same visual system.

Step 2. The skill writes two posters into the same task folder: one .poster.wide at 2100×900 and one .poster.square at 1080×1080. Both reference the same theme and layout so the color and grid match.

Step 3. Render both with one command:

node render.mjs output/<task-name>

The Playwright pass produces the wide PNG and the square PNG side by side. You can upload the wide one as the article header and the square one as the share card image without further retouching.

Step 4. If you want a 3-second inline Live Photo for the WeChat article body, ask for that as an extra. The skill emits a JPG + MOV + .pvt package; you push the package to an iPhone for the final publishing step.

• Pick one visual system and stay in it. Mixing Editorial and Swiss in one carousel reads as design-by-committee.
• When the article has a strong typography hierarchy, prefer Swiss (S01–S12). When it has photo-led slides, prefer Editorial (M01–M16).
• Edit the generated index.html for small copy fixes — re-running a prompt round wastes render time.
• If you need a deck (slides for a presentation), reach for the sibling guizang-ppt-skill instead; this skill is for social cards, not landscape PPTs.
• Live Photo publishing usually needs an iPhone — desktop and web generally cannot upload .pvt directly.
• The license is AGPL-3.0; closed-source commercial products need to factor that in or pick a different skill.

When Not to Use This

If your output target is a landscape slide deck for a presentation, a long-form video edit, a pure image retouching job, a plain text post with no layout, or a niche style outside the two supported systems (the README explicitly excludes OOTD, dreamcore, film-emulation, and real skin-test beauty sub-niches), this skill is the wrong tool — use the sibling guizang-ppt-skill, a video editor, a photo editor, or just write the post. The skill's value is precise card layout rendering; outside that envelope the setup overhead loses.

See the leaderboard for more design and social-card skills.