Guizang Social Card Skill · Xiaohongshu Carousels / WeChat Cover Pairs

中文 README

An agent skill for Claude Code, Codex, and similar coding-agent environments. It generates Xiaohongshu / Rednote carousel images, Live Photo motion cards, and WeChat 21:9 + 1:1 cover pairs from articles, copy, screenshots, product notes, subtitles, photos, or user-supplied videos.

Two visual systems share one workflow:

• Editorial. Restrained layouts in the spirit of Monocle / Kinfolk / Cereal. Best for storytelling, lifestyle, travel, reading, film, and personal observation.
• Swiss International. Grid-first, single anchor color, sharp hairlines, extreme type contrast. Best for product reviews, data, frameworks, tutorials, and AI tools.

Sister project to guizang-ppt-skill. Shared visual language, separate maintenance. PPT solves "horizontal swipe talks"; this one solves "static feed images."

30-second start

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

Or paste this to an AI agent with shell access:

Install guizang-social-card-skill for me. Clone https://github.com/op7418/guizang-social-card-skill into ~/.claude/skills/guizang-social-card-skill, then verify that SKILL.md, assets/, and references/ exist.

If you already installed it, update with:

Update guizang-social-card-skill for me. Go to ~/.claude/skills/guizang-social-card-skill, run git pull, then tell me the latest commit.

Then ask your agent:

Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue.

Other useful prompts:

Make me a 3:4 Xiaohongshu set from this product review, with editorial-style titles.
Turn this article into a WeChat cover pair: 21:9 hero + 1:1 share card, visually consistent.
I have 3 camping photos — make me an image-led Xiaohongshu carousel.
Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallhaven.
I have a coffee video — make it a 5-second Xiaohongshu Live Photo card with text in a quiet zone.
Turn these three game clips into a triple Live Photo collage with Swiss-style guide copy.

What you get

• 🖋 Two visual systems: Editorial for atmosphere and narrative, Swiss for facts and structure, sharing one workflow
• 📐 3 canvas sizes: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🎬 Live Photo motion cards: single video, two-grid, three-grid, four-grid, triple collage, and low-cost long-video diagnosis; 5s for Xiaohongshu, 3s for WeChat Official Account articles
• 🧩 28 layout skeletons: 16 Editorial (M01-M16, including Image-Led Cover, Pipeline, Before/After) + 12 Swiss (S01-S12, including KPI Tower, H-Bar Chart, Matrix + Hero)
• 🎨 10 theme presets: 6 Editorial (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, Midnight Ink dark) + 4 Swiss anchor colors (IKB Klein Blue, Lemon, Lemon Green, Safety Orange)
• 🖼 Image sourcing workflow: user images first; otherwise waterfall through Unsplash → Pexels → Flickr CC → Wallhaven → direct search, downloaded locally with auto-generated SOURCES.md
• 🌫 WebGL ink-flow background: editorial hero pages can ship a live ink animation; can be disabled for low-power devices or screenshot mode
• 🪧 Text-on-image + subject safety: full-bleed images require quiet-zone and subject mapping first; add only localized tint when needed, not a default full-canvas mask
• 🧰 Screenshot beautification assets: 9 real-texture WebP backgrounds (5 Editorial / 4 Swiss), paired with .frame-shot / .device-browser / .device-phone utilities
• 🗺 Map component: MapLibre + OSM real tiles, multi-pin + connectors, made for travel guides
• ✅ Validator: validate-social-deck.mjs auto-detects overflow, type cap violations, 4-band density gaps, and footer collisions
• 📄 Single-file HTML + Playwright rendering: no frontend build pipeline; node render.mjs outputs PNG directly

Live Photo effects and layouts

In this skill, Live Photo means "put the user's video into a social-card layout." It is not random stock-video sourcing and not long-form video editing. First make the first frame work as a still card; then let 3s/5s of motion add evidence.

Layout	Effect	Best for
Single-video motion card	One video cropped to full-canvas 3:4; when text is needed, use one short headline only and follow M16 Image-Led Cover / image-overlay rules for subject safety, quiet zones, type, and localized tint	Coffee, travel, fitness moves, product states, game moments
Two-grid / three-grid / four-grid puzzle	Multiple video wells inside one Live Photo, usually with no added text so strong footage leads	Travel scenery, fashion picks, room details, food process, workout actions
Triple Live Photo collage	Three short clips in parallel, increasing information density inside the short duration; add at most one real scene headline when needed	Guide steps, before/after, multi-angle demos, model test results
Long-video diagnosis	Sparse frames / contact sheet for long source videos, then recommend trimming, speed-up, splitting, or asking the user for an exact range	1-3 minute user videos without a chosen moment
Publishing package	Debug JPG + MOV plus an iPhone-friendly .pvt package	Xiaohongshu and WeChat Official Account article Live Photos

Judge the information budget first: WeChat 3s is best for one action point or one state change; Xiaohongshu 5s can hold one compact process; triple collages are for three parallel results, not a long sequential story.

Live Photo generation guide