Guizang Social Card Skill: Xiaohongshu Carousels and WeChat Cover Pairs from an Agent

Who needs an agent that lays out social cards

The project targets a narrow but real gap: producing a set of social images from written content without opening a design tool. The README frames it as a skill for Claude Code and Codex that generates Xiaohongshu carousels, Live Photo motion cards and WeChat 21:9 plus 1:1 cover pairs from articles, copy, screenshots, product notes, subtitles, photos or user video.

The intended user is someone who already works inside an agent session and wants the output to be a folder of PNG files. The README lists the scenarios it considers a fit: carousel sets, motion cards, WeChat cover pairs, Moments covers, article illustrations, tutorial breakdown pages, data recaps, travel guides, product reviews and annotated screenshots. It is explicit about what it is not for: horizontal slide decks (the sibling guizang-ppt-skill covers those), long-form video editing, pure photo retouching, and plain text editing with no layout requirement.

That split matters. This is a layout engine dressed as a skill, not a general image tool. If your task is "make this paragraph prettier in a document", the skill has nothing to offer.

Two visual systems, 28 layout skeletons, one workflow

The skill ships two design languages that share a single content-to-image pipeline. The Editorial system is described as restrained magazine layout in the manner of Monocle, Kinfolk and Cereal, aimed at narrative, lifestyle, travel, reading, film and personal observation. The Swiss system uses grids, a single anchor colour, hairline rules and extreme type-size contrast, aimed at product reviews, data, methodology, tutorials and AI tools.

The layout inventory is concrete: 16 Editorial skeletons labelled M01 to M16 (including Image-Led Cover, Pipeline and Before/After) and 12 Swiss skeletons labelled S01 to S12 (including KPI Tower, H-Bar Chart and Matrix + Hero). Ten theme presets sit on top: six Editorial (including Midnight Ink, the dark one) and four Swiss anchor colours (IKB Klein Blue, lemon yellow, lemon green, safety orange).

Output sizes are fixed CSS classes rather than free dimensions: .poster.xhs at 1080x1440 for the 3:4 Xiaohongshu format, .poster.wide at 2100x900 for the 21:9 WeChat header, and .poster.square at 1080x1080 for the 1:1 share card. The pairs matter: the README says a single piece of content can be rendered into both the wide and square boards so the two stay visually consistent.

The image sourcing workflow has a stated priority order: user images first, then Unsplash, Pexels, Flickr CC, Wallhaven and finally direct search. Downloaded images are stored locally and a SOURCES.md file is written automatically, which is the kind of detail that suggests the author has been burned by unattributed assets before.

Installing the skill and rendering a first deck

The README gives three install paths. The recommended one is a single command:

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

If you prefer to do it by hand, the manual route clones into the Claude Code skills directory:

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

After either route, the README says a listing of the directory should show SKILL.md, assets/ and references/. Those three entries are the check the project itself uses to confirm the install worked.

The skill depends on Playwright, which the package.json pins at ^1.60.0, so rendering happens through a real browser rather than a headless layout approximation. The project provides two npm scripts: npm run validate calls node validate-social-deck.mjs, and npm run test:docs calls node scripts/check-skill-docs.mjs.

Once installed, you drive it in natural language. The README gives this example prompt:

帮我基于这篇文章做一套瑞士风小红书图文,5 张,IKB 蓝。

That asks for a five-image Swiss-style Xiaohongshu set in IKB blue. A cover-pair request looks similar but names both boards. The README states that rendering runs through node render.mjs and produces PNG files under output/, with no front-end build step and no export tool.

What the validator actually checks, and where it stops

validate-social-deck.mjs is the most interesting part of the repository, because it turns layout quality into a measurable check. According to the README it detects overflow, type-size ceilings, four-band density and footer collisions, and it does this by running Playwright against the real DOM rather than estimating from the markup.

That is a meaningful design choice: an agent writing HTML can produce something that looks plausible in source and breaks in the browser. Measuring the rendered box is the only way to catch a headline that overflows its grid cell or a footer that lands on top of a caption.

The limits are worth stating plainly. The validator checks geometric properties, not taste. It cannot tell you that a Swiss card with twelve small elements reads as noise, or that an Editorial cover chose a bad crop. The README also does not document any automatic repair step, so a failing validation appears to mean the agent edits the HTML and re-renders, not that the script fixes anything.

A second constraint is the rendering dependency itself. Playwright downloads browser binaries, which the README does not discuss. On a locked-down machine or a CI image without those binaries, node render.mjs will not produce anything, and the skill's whole output path stops there.

Live Photo cards are a container format, not a video editor

The Live Photo branch deserves separate treatment because it is the part most likely to be misunderstood. The README defines its role narrowly: putting a user-supplied video into a social card layout. It is not for having the agent find public videos, and it is not long-form editing.

The design rule is that the first frame must work as a static card on its own, and only then does the 3s or 5s of motion add information. Duration is platform-bound: 5s for Xiaohongshu, 3s for WeChat article embeds. The README's own guidance says a 3s clip suits one action or one state change, 5s can hold a short process, and a three-panel montage suits three parallel results rather than a story that must be understood in order.

Structures listed include single-video motion cards, two-, three- and four-panel grids, a three-clip montage, a long-video diagnostic that samples frames into a contact sheet, and a publishing package that outputs JPG plus MOV plus a .pvt bundle. The README is honest about the last mile: the .pvt usually has to be transferred to an iPhone as a package and published from the app, because desktop and web clients generally cannot post Live Photos directly.

If your material needs explanation, audio or a full tutorial to make sense, the README says it should not be forced into a Live Photo. That is a self-imposed boundary, and a sensible one.

Categories the skill declines, and the alternative to consider

references/category-cookbook.md sorts eleven Xiaohongshu categories into three tiers. Travel, workplace and recommendations (once a subcategory is specified) are described as strong end to end, meaning text, structure and imagery all fall inside the skill's capability. Game, film, food (recipe direction), makeup (tutorial direction), fitness, home and outfit (curated direction) are strong on text and structure but depend on the user or a search source for images. The third tier is explicitly out of scope: OOTD real-shot streams, dreamcore, film-simulation colour grading and genuine skin-testing beauty content, all of which depend heavily on photography or post-processing.

That refusal is the most useful thing in the README. A tool that claims every category is a tool you cannot trust on any of them.

For horizontal slide decks, the project points at its sibling, guizang-ppt-skill, which the README says shares the aesthetic language but is maintained independently. The difference in approach is the format itself: slides are for a paged talk, this skill is for a static feed. If your real output is a presentation, installing this one will not get you there.

For teams that already have a design system in Figma or a component library, the honest comparison is not another agent skill but your existing templates. The skill's advantage is that layout is text the agent can read, write, modify and verify, and that images can pull from Unsplash, Pexels, Wallhaven, Mapbox or OSM. Its disadvantage is that you inherit someone else's grid, type scale and ten presets rather than your own brand rules.

Licence, maintenance and what to verify before you commit

The repository is licensed AGPL-3.0, and the top-level file list includes COMMERCIAL_LICENSING.md alongside LICENSE. The README does not spell out the terms of that commercial document, so anyone planning to use the output inside a paid product should read COMMERCIAL_LICENSING.md directly rather than assume the AGPL terms are the whole story. This is not legal advice; it is a pointer to the file that answers the question.

On maintenance, the last push was on 2026-07-01. The repository is not archived, and no releases were retrieved, so there is no versioned changelog to read. Upgrade cost is low by construction: the install is a git clone into ~/.claude/skills/guizang-social-card-skill, and the README's own update instruction is to enter that directory and run git pull. The single runtime dependency is Playwright, so a major Playwright change is the main thing that could break rendering.

What to verify first is narrow and testable. Render one card with node render.mjs and confirm a PNG appears under output/. Run node validate-social-deck.mjs on it and see whether the checks pass. Then check whether the .pvt workflow matches how you actually publish, because the README is clear that desktop publishing generally does not work. If any of those three fail, the skill's value drops sharply regardless of how good the layouts look.

Editorial conclusion

Adopt it if you already write in Claude Code or Codex, publish to Xiaohongshu or WeChat, and want layout decisions to be reproducible HTML rather than hand-placed pixels. Do not adopt it for horizontal slide decks, long-form video editing, photo retouching, or if you have no shell access for the agent. Before committing, run node render.mjs on one real card and node validate-social-deck.mjs on the result, and read COMMERCIAL_LICENSING.md if the output is tied to a paid product.

Frequently asked questions

Official sources

1. Issues
2. License: AGPL-3.0
3. op7418/guizang-social-card-skill on GitHub
4. Project website
5. README