Guizang Social Card Skill is an open-source Claude Code / Codex agent skill for generating Xiaohongshu (Rednote) carousel posts, Live Photo cards, and WeChat public-account cover pairs from articles, screenshots, photos, and video.
What is Guizang Social Card Skill?
Guizang Social Card Skill is a structured AI-agent skill created by op7418, designed to run inside Claude Code, Codex, and other shell-capable local agents. It accepts text articles, product notes, screenshots, video clips, and user photos as inputs, then composes single-file HTML posters that are rendered to PNG by a Playwright script. The skill ships with three canvas presets: 1080×1440 for Xiaohongshu 3:4 posts, 2100×900 for WeChat 21:9 headers, and 1080×1080 for WeChat 1:1 share cards. Its Live Photo branch outputs JPG + MOV + .pvt packages for publishing on mobile.
Key Features
- Dual visual systems — Editorial magazine style (16 layouts M01–M16) for narrative and lifestyle content, plus Swiss International Style (12 layouts S01–S12) for product reviews, data, and tutorials.
- 28 layout skeletons — Includes Image-Led Cover, Pipeline, Before/After, KPI Tower, H-Bar Chart, and Matrix + Hero, which agents pick, adapt, and fill with text.
- 10 theme presets — Editorial offers Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, and Midnight Ink; Swiss offers IKB Klein Blue, Lemon Yellow, Lemon Green, and Safety Orange. Custom hex colors are intentionally not allowed.
- Live Photo support — Single video, 2/3/4-grid collages, triple combo cards, and long-video diagnosis; Xiaohongshu uses 5 seconds and WeChat in-article uses 3 seconds.
- Image sourcing workflow — Falls back from user images to Unsplash → Pexels → Flickr CC → Wallhaven → direct search, saving files locally and writing a SOURCES.md attribution file.
- Validated layout quality — validate-social-deck.mjs runs 9 rules through real Playwright DOM measurements for overflow, footer collision, font readability, density, and visual bounds.
- No build chain — Single-file HTML templates render directly to PNG via node render.mjs, with screenshot beautification assets (9 WebP textures plus .frame-shot / .device-browser / .device-phone utilities).
- Map component — MapLibre + OSM real tiles support multiple pins and route lines, suited to travel guides.
Who is it for?
- Content creators and social media operators — turn long articles or raw notes into Xiaohongshu carousels and WeChat cover pairs without opening a design tool.
- Product reviewers and tool writers — use the Swiss system with IKB blue and the S09 KPI Tower or S10 H-Bar Chart layouts for data-heavy comparisons.
- Travel and lifestyle bloggers — build 3:4 full-image sets from photos, add a map block, and apply Editorial themes like Dune or Midnight Ink.
- AI-agent users — anyone running Claude Code, Codex, Cursor, or another local agent with shell access can install the skill with npx skills add and trigger it by describing a task.
What can you do with it?
- Marketing teams: turn a product spec into a 5-card Swiss-style Xiaohongshu carousel in minutes by describing the article and desired color.
- Travel creators: generate a full-image Xiaohongshu post from three camping photos, or embed a MapLibre map with pins for an itinerary.
- Game writers: pull original art from Wallhaven and build an Editorial + Midnight Ink walkthrough set for game guides.
- WeChat operators: render one content piece as both a 21:9 header and a 1:1 share card that stay visually consistent.
- Video creators: convert a coffee clip into a 5-second Live Photo card with the title placed in the quiet zone around the subject.
How does Guizang Social Card Skill work?
The skill runs a 7-step workflow: Intake captures platform, style, content, and whether user images exist; Style & Theme selects Editorial or Swiss plus one preset; Layout Selection picks from the 28 skeletons; Asset Prep sources images and writes SOURCES.md; Compose & Render copies the seed template, fills the posters placeholder, and runs node render.mjs; Deliver & Review shows PNGs and asks whether the validator should run; Iterate applies feedback by editing inline styles or swapping layouts.
Pricing
Guizang Social Card Skill is free and open source under the GNU AGPL-3.0 license. There are no paid tiers or usage limits mentioned in the repository.
Pros and cons
- Pros: HTML and CSS are text, so agents can write, read, and modify layouts directly; CSS Grid gives precise typography and spacing; image sources are open (Unsplash, Pexels, Wallhaven, OSM); output PNGs are directly publishable; the project is AGPL-3.0 open source.
- Cons: Custom hex colors are prohibited to preserve visual consistency; regular chatbots without file-system and rendering pipelines are not recommended; photography-dependent Xiaohongshu sub-categories such as OOTD real-shot flows and film-emulation are outside the skill's capability and will be declined.
FAQ
Can it batch-generate images?
Yes. A task directory's index.html can contain multiple .poster elements and node render.mjs captures each as a separate PNG. Generating 3–9 Xiaohongshu carousel images in one run is a normal workflow.
Why are custom colors not allowed?
The skill's core value is stable, consistent output. Letting users pick arbitrary colors would break the visual identity, so only the 10 theme presets are available. To change the theme you swap the data-theme attribute on the poster section.
Does it support Live Photo?
Yes. Xiaohongshu is planned at 5 seconds and WeChat in-article at 3 seconds. It supports single video, 2/3/4-grid collages, triple-combo cards, and long-video sparse-frame diagnosis. Publishing usually requires copying the .pvt package to an iPhone and posting from the app; desktop web publishing generally is not supported.
How do I update to the latest version?
Re-run the npx skills add installation command, or enter the local skill directory (for example ~/.claude/skills/guizang-social-card-skill) and run git pull.
Does the skill support English content?
Yes. Editorial uses Playfair Display + Noto Serif and Swiss uses Inter + Helvetica, both covering Chinese and English. The layout skeletons are not bound to a specific language.
