guizang-social-card-skill: A Reusable Pipeline for Rednote Cards and WeChat Covers

Turning a long post into social cards is rarely hard because of the headline alone. The slow part is making every card respect the canvas, spacing, typography, assets, export format, and review checklist. A content operator may extract five usable points in minutes, then lose an hour fitting them into a Rednote 3:4 carousel, a WeChat 21:9 cover, and a square share image. One-off prompts help, but the next asset set often drifts in spacing, color, and title density.

guizang-social-card-skill is useful because it turns that work into a reusable Skill for Claude Code and Codex. The repository is not a loose request to make something look premium. It contains SKILL.md, HTML seed templates, visual references, asset rules, Playwright rendering, and validation scripts. Its natural job is to turn articles, product notes, screenshot tutorials, subtitles, or photos into editable PNG card assets.

The Short Version

• guizang-social-card-skill targets Claude Code, Codex, and similar agent environments. It generates Rednote carousel cards and paired WeChat 21:9 plus 1:1 cover images.
• The GitHub README says it includes Editorial and Swiss visual systems, 28 layout skeletons, 10 theme presets, and 3 canvas sizes.
• Delivery is a single HTML file rendered to PNG with Playwright, so an agent can edit HTML and CSS directly before running node render.mjs.
• It is strongest at repeatable first-pass cards. Brand review, photo retouching, and final publishing review still need people.
• The repository is licensed under AGPL-3.0, so teams should review obligations before modified redistribution or service-style reuse.

The Problem Is Layout Reuse

Many AI-generated social cards fail because the model has no reusable layout boundary. One run puts the title in the top-left corner; the next fills the entire canvas. One run uses restrained blue; the next goes into a saturated gradient. Add a longer Chinese title and the footer, page number, and hero image start colliding.

This Skill pulls those variables into a fixed workflow. The README lists three clear canvases: .poster.xhs at 1080x1440 for Rednote-style 3:4 cards, .poster.wide at 2100x900 for WeChat 21:9 covers, and .poster.square at 1080x1080 for square share cards. Once the canvas is fixed, the agent’s job changes from free-form design to choosing a layout, compressing copy, placing assets, and rendering output inside a known container.

The two visual systems also reduce decision fatigue. Editorial feels like a restrained digital magazine, better for travel, reading, lifestyle, and narrative content. Swiss emphasizes grids, anchor colors, and information hierarchy, which suits tool reviews, data recaps, AI product explainers, and tutorial breakdowns. A content workflow usually benefits from a few stable systems more than from a new visual style every time.

Install It and Write a Better First Prompt

The README’s recommended install path is:

Vultr - High-performance NVMe VPS with 32 global locations, one-click Docker deploy

View Pricing →Ad

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

You can also clone the repository into Claude Code’s personal skills directory:

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

After installation, avoid a vague request like “make a Rednote carousel.” Give the agent five inputs: source content, platform size, card count, visual system, and asset policy.

Use this AI tool review to create five Rednote 3:4 cards.
Use the Swiss visual system and the IKB blue theme.
Prefer product screenshots from the article. If the screenshots are insufficient, tell me what assets are missing first.
Keep one core idea per card. Before exporting PNGs, show me the HTML structure and title-compression plan.

The important part is not decorative language. Platform size determines the canvas, card count determines density, visual system determines the layout pool, asset policy controls image sourcing, and pre-export review catches long titles or blocked subjects early.

How the Workflow Runs

The README breaks the workflow into Intake, Style & Theme, Layout Selection, Asset Prep, Compose & Render, Deliver & Review, and Iterate. In day-to-day production, it feels like this.

First, collect the task. Is the output for Rednote or WeChat? Does the user already have images? Is the source a tutorial, review, or travel note? These answers affect layout and assets.

Next, choose the visual system. AI tools, methods, and data recaps usually fit Swiss. People stories, travel, and reading notes often fit Editorial. Theme colors should come from the repository’s presets instead of being invented each time.

Then choose layout skeletons. The project includes 16 Editorial layouts and 12 Swiss layouts. This matters because layout skeletons constrain title length, information blocks, and white space.

Asset prep deserves its own pass. The README prioritizes user images first, then Unsplash, Pexels, Flickr CC, Wallhaven, and search, while writing local sources to SOURCES.md. Production use still needs source and license review, especially for commercial accounts, ads, and partner content.

Composition and export use a single HTML file. The Skill places content into seed templates, generates HTML, and renders PNGs through node render.mjs. HTML and CSS are text, which makes them friendly to Claude Code and Codex. Spacing, image positions, and typography can be patched precisely.

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

Get Started →Ad

Review comes before deeper validation. The README intentionally says validation is not automatic by default, because every validator run adds time. A better rhythm is to look at the PNGs first, confirm the direction, then run validate-social-deck.mjs to catch overflow, footer collisions, frame overflow, and Swiss weight issues.

Where It Fits

This boundary keeps expectations sane. guizang-social-card-skill does not turn the agent into a design director. It moves repeatable, structured, template-friendly card production into an agent workflow. Taste, brand risk, and publishing judgment remain human responsibilities.

QA: Exported PNGs Are Not Automatically Publishable

Social cards often fail in small ways: a title is a few characters too long; the mobile preview becomes dense; the source note disappears under the footer; a mask covers a face and weakens trust.

Before publishing, check at least these items:

• One main idea per card. Avoid pasting long article paragraphs into the canvas.
• Compress Chinese titles early, especially for square WeChat share cards.
• For full-bleed images, make sure masks do not cover faces, products, or dense text areas.
• Footer, page number, and source notes should not collide with body content.
• External images need source records and license checks before commercial use.
• In Swiss templates, large type should avoid heavy weights.
• After running validate-social-deck.mjs, read warnings instead of only looking at pass or fail.

The safest trial is an old post and three to five cards. Once layout, title length, and export behavior look stable, expand to a full carousel. Throwing a week of content at the Skill on day one only moves review pressure to the final pass.

Prompts, Design Tools, and This Middle Layer

Prompting is fast. A chat window can generate headlines, extract points, and suggest colors in minutes. The tradeoff is repeatability: layouts drift, local assets are awkward, export often depends on screenshots, and review history is thin.

Figma and Canva are better for refinement. Brand systems, shared components, collaborative review, and asset management are mature there. The friction appears when a team needs many “good enough and consistent” middle assets every week.

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

Get 15% Discount →Ad

guizang-social-card-skill sits in that middle layer. Prompts help exploration, design tools help final polish, and the Skill captures repeatable production steps: choose canvas, pick skeleton, compress title, place assets, render, validate. Templates, scripts, references, and commands live in the Skill directory, so Claude Code or Codex can produce editable HTML and PNGs through a controlled path.

Add It to Your Content Workflow

A steady rollout can look like this:

1. Compress a long post into five to seven points. Each point gets one main title and two or three supporting lines.
2. Install the Skill in Claude Code or Codex, then confirm SKILL.md, assets/, and references/ exist.
3. Generate three test cards from an old post, using screenshots or text-only layouts before external image sourcing.
4. Review mobile previews, title length, white space, masks, and page numbers.
5. Run the validator and fix overflow, footer collision, and frame overflow.
6. Expand to a five-to-nine-card carousel or paired WeChat covers.

Keep a small log for each trial: theme used, layouts selected, before-and-after title lengths, replaced images, and validator warnings. After a few runs, that log becomes a practical mini style guide for your account.

For team use, place the source post, card HTML, exported PNGs, SOURCES.md, and feedback notes in the same task folder. Designers can see why an asset was chosen, operators can trace each card back to the source point, and the owner can review licensing and copy risks before publishing.

Further Reading

If Claude Code Skills are new to you, start with Claude Code Skill guide. For project-level instructions, read CLAUDE.md writing guide. For splitting planning, drafting, design, and QA across roles, read Claude Subagent guide.

guizang-social-card-skill is worth testing, as long as it is treated as a compact production line rather than an automatic viral-content machine. Let it fix canvas, layout, color, rendering, and validation. Keep content judgment and final taste in human hands.