guizang-social-card-skill: Generate Social Cards with Claude Code

When you turn a 5,000-character technical article into nine Rednote cards, the slow part is usually not extracting the ideas. It is placing each card: which line gets the title, which color preset to use, whether the cover pair should share one visual system. Those repeated layout decisions eat most of the time. guizang-social-card-skill moves that workflow into Claude Code. You tell the agent what content to generate, it outputs a single HTML file, and Playwright renders PNGs locally. This guide covers the supported canvas sizes, the difference between the two visual systems, installation and execution, render scripts, validation rules, and the compliance boundary created by AGPL-3.0.

Project Fit: Should You Use It?

guizang-social-card-skill is not an AI image prompt. It is a local rendering pipeline. Its core job is to let Claude Code, Codex, or a similar agent environment batch-generate Rednote carousel cards and WeChat cover pairs, output single-file HTML, and render PNGs through Playwright. The layout skeletons and theme presets are fixed; the agent fills content and adjusts parameters.

This table is the quick fit check:

If you only need fast, visually consistent cover drafts and you accept the AGPL-3.0 obligations, it can save a lot of manual layout work. If you need tighter brand control, closed-source commercial reuse, or a complex approval workflow, the constraints may not fit.

Two Visual Systems and Three Canvases

Editorial vs Swiss: Style Differences

The project includes two visual systems for different content types:

Editorial leans toward magazine-style layouts and works well for text-led cards. Swiss feels closer to data graphics and works better for comparison content or information that needs a strong structure. Together, the two systems provide 28 layout skeletons and 10 theme presets, enough for most Rednote card sets and WeChat cover workflows.

Three Canvas Sizes

The canvas controls the output image ratio:

KiloClaw - Managed OpenClaw for enterprise, enabling AI Agent orchestration and smart model routing

Get Started →Ad

WeChat usually needs both the wide and square covers. Rednote carousel cards use 1080x1440. These sizes come from the README’s canvas definitions; they are not official Rednote or WeChat review rules. Check the current platform requirements before publishing.

Installation: CLI or Local Clone

Option 1: CLI Install (Recommended)

The prerequisite is that Claude Code or Codex is already installed and can call agents normally. Run:

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

This command installs the Skill into Claude Code’s personal directory. After installation, you can call /guizang-social-card-skill directly in Claude Code or let the agent discover and use it during related tasks.

If the Skill concept is still new, start with this primer: Claude Code Skill guide.

Option 2: Clone Locally

If you need to edit templates or customize layouts, clone the project:

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

The cloned directory roughly looks like this:

guizang-social-card-skill/
├── SKILL.md
├── templates/
├── scripts/
│   ├── render.mjs
│   └── validate-social-deck.mjs
└── references/

The benefit of local customization is direct control over templates, font sizes, and color choices. The modified version still falls under AGPL-3.0, so redistribution or network-service use requires source availability.

Rendering and Validation: From HTML to PNG

How to Use the Render Script

After the agent outputs single-file HTML, render it to PNG with Playwright. The project provides the render script:

node render.mjs

The script reads the HTML file in the current task directory, starts a headless Playwright browser, and outputs PNG files to the same directory. Common rendering issues include:

• Playwright is not installed: run npx playwright install chromium first
• The HTML path is wrong: check whether the agent output filename matches what the script expects
• Fonts are missing: Chinese text needs suitable local fonts, otherwise the output may appear blank or broken

After rendering, inspect the images manually. Long Chinese titles, overlay masks, face-safe placement, and footer collisions are the kinds of issues that scripts cannot fully judge.

Alibaba Cloud - Top choice for developers, exclusive 15% off for Lighthouse servers

Get 15% Discount →Ad

How to Use the Validation Script

The project also provides a quality validation script:

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

The validation rules cover these 6 checks:

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

The validation script helps you locate layout issues quickly, but it does not fix them. Return to the HTML template or the agent output, adjust the parameters, and render again.

If you want the agent to output more predictable HTML, use this configuration guide as a next step: CLAUDE.md writing guide.

Asset Sources and Licensing Risk

Image-Source Workflow

The project supports multiple image sources:

• Unsplash: free high-quality images, often usable commercially
• Pexels: free images, but check the specific license terms
• Flickr CC: Creative Commons images that may require attribution and license labels
• Wallhaven: wallpaper-style images; confirm commercial rights before use
• Search results: general search-engine images with uncertain licensing status

The agent can choose a source based on your request, but it will not automatically verify licensing. Before publishing, check the source and license terms for every image, especially in commercial scenarios. If an image is marked “non-commercial” or “attribution required,” keep that information with the card.

AGPL-3.0 License Reading

The project uses AGPL-3.0, which is stricter than MIT or Apache. The core requirements are:

If your team needs closed-source reuse or plans to integrate this tool into a closed product, review compliance before commercial use. AGPL-3.0 requires source availability when the modified program is offered over a network, which can be a blocker for some commercial teams.

Railway - Modern deployment platform, zero-config, go live in minutes

Start Now →Ad

Risk Notes

Keep these boundaries explicit:

• The project generates PNG assets; it does not provide batch publishing or automatic publishing
• Canvas sizes come from README definitions and are not official Rednote or WeChat review rules
• Stars and forks change over time and should not be treated as the core value signal
• Asset licensing requires human review; the agent cannot complete it automatically

If you need more context about agent licensing and team workflows, read Claude Subagent guide.

Further Reading

For a broader view of Claude Code Skills and agent tooling, start with these articles:

• Claude Code Skill guide: the Skill concept and why it is more stable than copying prompts
• CLAUDE.md writing guide: using CLAUDE.md to constrain agent output
• Claude Subagent guide: subagent structure and multi-agent collaboration

These are practical Claude Code workflow notes and help explain where Skills fit inside agent work.

Conclusion

guizang-social-card-skill puts the Rednote card and WeChat cover layout workflow inside Claude Code, so an agent can batch-generate visually consistent cards. It includes two visual systems, three canvas sizes, 28 layout skeletons, and 10 theme presets, which covers many content-operations scenarios.

Its boundary is just as clear: it generates PNG assets, not published posts; asset licensing still needs human review; AGPL-3.0 requires an open-source obligation check before commercial use. If you need photo retouching, complex brand approval, or closed-source commercial reuse, the tool may not fit.

The next step is simple: open the GitHub repository, install the Skill with the CLI command, and generate the first card set. If rendering fails, check the Playwright installation and font configuration first. The validation script can locate most layout errors.