guizang-social-card-skill: Agent-Driven Xiaohongshu Carousels and WeChat Covers

What guizang-social-card-skill Solves and Who It Targets

Producing formatted social media graphics for Chinese platforms like Xiaohongshu (also known as Rednote) and WeChat is tedious when done manually in design tools. A writer working in an AI agent environment has to break out of their workflow, switch to Figma or Canva, apply templates, and export images. guizang-social-card-skill eliminates that context switch by letting an agent generate the card graphics directly as part of a writing or research task.

The skill targets two groups. The first is developers and power users already running Claude Code or Codex who publish technical content, product reviews, or research threads on Xiaohongshu or in WeChat public accounts. The second is content creators who have an AI agent with file system access and want to produce polished social card sets from their existing text, screenshots, or video clips without learning a design tool.

The skill does not require a frontend build chain. It produces single-file HTML and uses Playwright to render the HTML to PNG, which means the output is a set of image files in an output/ directory that can be posted directly. The repository README lists the last push as 2026-07-01, and the project is not archived.

The Single-File HTML to PNG Rendering Pipeline

The core mechanism is that the agent writes a single HTML file per card set, then calls node render.mjs to capture screenshots via Playwright. Each HTML file uses CSS Grid with fixed canvas dimensions defined on specific classes: .poster.xhs sets 1080x1440 pixels for the Xiaohongshu 3:4 format, .poster.wide sets 2100x900 for the WeChat 21:9 header, and .poster.square sets 1080x1080 for the WeChat 1:1 share card.

This design choice is deliberate. HTML and CSS are text, which means the agent can write, read, and modify the file programmatically. The agent can verify overflows, font sizes, and footer collisions by running validate-social-deck.mjs, which uses Playwright to perform real DOM measurements rather than estimating from text. The README describes the validator as checking for text overflow, font size limits, density of horizontal bands, and footer collisions.

The image sourcing priority for cards that need photos is: user-supplied images first, then Unsplash, Pexels, Flickr CC, Wallhaven, and direct search as fallbacks. When external images are used, the skill writes a SOURCES.md file in the task folder logging the image origins.

Installing the Skill and Triggering Card Generation

The recommended installation is a single command:

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

Alternatively, you can clone directly:

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

After either method, verify that SKILL.md, assets/, and references/ are present in ~/.claude/skills/guizang-social-card-skill. Those three items confirm the skill is fully installed.

Once installed, Claude Code discovers the skill automatically. Trigger phrases include asking to make a Xiaohongshu graphic set, a Rednote carousel, a WeChat 21:9 header plus 1:1 share card, or a Swiss-style product review. The README gives concrete examples: asking for a Swiss-style 5-card set in IKB blue from an article, or a full-image magazine style for travel content.

The skill follows a seven-step workflow: intake (collecting platform, style, content, and images), style and theme selection, layout selection from the 28 templates, asset preparation, HTML composition and rendering, delivery and review, and a final release of PNG files.

Editorial and Swiss: Two Distinct Visual Systems

The skill bundles two visual systems that share the same underlying workflow but produce different aesthetics.

The Editorial system is modelled on restrained magazine design, referencing Monocle, Kinfolk, and Cereal as style anchors. It has 16 layout templates labelled M01 through M16. These include Image-Led Cover, Pipeline, and Before/After layouts, suited to narrative content: travel, lifestyle, personal observation, book and film reviews. The Editorial system has six theme presets: Ink Classic, Indigo Porcelain, Forest Ink, Kraft, Dune, and Midnight Ink (a dark variant).

The Swiss system uses grid structures, a single anchor colour, sharp hairlines, and high contrast in type sizing. It has 12 layout templates labelled S01 through S12, including KPI Tower, H-Bar Chart, and Matrix plus Hero. These fit structured content: product reviews, data summaries, methodology write-ups, and tool tutorials. The Swiss system has four anchor colour presets: IKB Klein Blue, Lemon Yellow, Lime Green, and Safety Orange.

The README is explicit that custom hex values are not allowed. Theme selection is restricted to the ten listed presets. This keeps visual output consistent and prevents the agent from drifting into arbitrary colour choices, but it also means brand-specific colours are only possible through the commercial licence arrangement documented in COMMERCIAL_LICENSING.md.

Live Photo Cards and the Limits of the Video Pipeline

Beyond static cards, the skill supports generating Live Photo cards for Xiaohongshu and WeChat. The input for this branch is always a user-supplied video clip. The skill does not fetch public video content for card creation.

Four structural options exist: a single video cropped to the 3:4 canvas, grid layouts combining two, three, or four clips into one Live Photo, a triple-panel layout for showing three parallel results, and a diagnostic mode for long videos that generates a contact sheet to help select which segment to use.

The platform timing constraints are defined in the README: Xiaohongshu requires 5-second clips and WeChat public account articles require 3-second clips. The output for the video branch is a JPG preview, a MOV file, and a .pvt package. The README notes that the .pvt package must be transferred to an iPhone and published from the corresponding app, because desktop web interfaces on these platforms generally cannot publish Live Photos.

The static card requirement applies first: the first frame of any video must read as a well-composed static card before the live element adds value. The README calls this a prerequisite check.

What guizang-social-card-skill Cannot Do

The README defines an explicit out-of-scope list. The skill does not produce horizontal slide decks for presentations; that is the territory of the sister project guizang-ppt-skill, which the README links directly. It does not handle long video editing or full film production. It does not replace photo retouching tools. When content has no layout requirement, pure text editing is outside the skill's purpose.

Three categories of Xiaohongshu content are flagged as outside the skill's capability circle: OOTD photo shoots that depend on real photography, dreamcore aesthetics, and film-grain colour grading that requires post-processing software. The README recommends the agent decline these rather than attempt them poorly.

Platform support also has a practical ceiling. The skill works well in Claude Code and Codex, and can run in Cursor or other local agents that have shell access and can read and write files. Standard chatbot interfaces that lack a filesystem and a way to execute node render.mjs cannot produce output reliably. A developer who wants to use the skill must be in an agent environment with shell execution capability.

The validate-social-deck.mjs script catches layout errors automatically, but it runs after rendering. An agent that skips validation may produce cards with text overflows or font sizes outside the allowed range.

Licence, Commercial Use, and the Sister Project

guizang-social-card-skill is released under AGPL-3.0. This licence requires any modified version distributed as a service to release its source code under the same terms. The repository includes a COMMERCIAL_LICENSING.md file, indicating the author provides a separate commercial licence for organisations that cannot comply with the AGPL. Teams integrating the skill into a proprietary product pipeline should read that file before deploying.

The closest alternative for the same workflow space is guizang-ppt-skill by the same author. The two projects share what the README calls the same aesthetic language, but guizang-ppt-skill targets horizontal slide decks for presentations while guizang-social-card-skill targets static image feeds and cover pairs for social platforms. They are described as independent but compatible.

For teams whose needs go beyond either skill, Canva and Figma are design tools that also produce social media graphics with template libraries. Neither integrates as an agent skill that an LLM can write and modify programmatically; they require manual human interaction in their interfaces. The agent-driven HTML-to-PNG approach in guizang-social-card-skill is its distinguishing characteristic: the output is code the agent can inspect and revise, not a black-box design export.

The package.json lists playwright as a production dependency, which adds a browser binary download on install. Factor this into the installation footprint if disk space is a constraint.

Editorial conclusion

guizang-social-card-skill is a practical fit for developers and content creators who work inside Claude Code or Codex and produce Xiaohongshu or WeChat content regularly. The 28-layout system covers most use cases from product reviews to travel narratives. Projects that need horizontal slide decks should use the sister project guizang-ppt-skill instead. Commercial deployments must review COMMERCIAL_LICENSING.md because the repository is AGPL-3.0 licensed and the README names a separate commercial licence path. Before adopting, verify that your agent environment can read and write files and execute shell commands, because ordinary chat interfaces without a filesystem cannot run the Playwright render step.

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