Guizang Social Card Skill – Open-Source Xiaohongshu & WeChat Image Card Skill

1. What Is Guizang Social Card Skill

Guizang Social Card Skill is an open-source skill by independent developer Guizang (op7418) for Claude Code, Codex, and similar AI agent environments. It generates magazine-quality social image cards from single-file HTML + CSS rendered with Playwright—Xiaohongshu 3:4 verticals, WeChat Official Account 21:9 headers, and 1:1 share cards. Two visual systems (Editorial and Swiss), 28 layout skeletons, and 10 theme presets drive a structured seven-step workflow from content input to finished PNG—fixing the "AI look" and layout chaos common in social graphics.

Technical positioning and domain: Agent toolchain for content creation and visual design—encoding Monocle/Kinfolk/Cereal-style typography as agent-callable HTML/CSS templates instead of diffusion models or manual design apps. Structured text lets agents control grids, color, tracking, and image safe zones end-to-end.

Development background: Guizang is an active open-source contributor in AI apps and agent skills. Motivation: strong LLM copy, weak social visuals—manual design or crude templates lack consistent aesthetics. A programmable layout system lets agents ship on-brand cards with content.

Core value: (1) Reduces generic "AI slop" via restrained palettes, precise typography, and grids that stand out in feeds. (2) Category-aware routing—travel vs reviews vs food pick layouts and tones automatically. (3) Reliable text-on-image via subject avoidance, luminance sampling, and adaptive line breaks—no text over faces or unreadable contrast.

Technical characteristics: Plain HTML/CSS agents can edit—no frontend build chain; CSS Grid hierarchy without decorative shadows; image-overlay avoid zones; dynamic font sizing; SKILL.md orchestrates the full pipeline.

2. Key Features

• Dual visual systems: Editorial (narrative, travel, lifestyle—full-bleed photos, airy type) vs Swiss (reviews, data, methodology—grids, device frames, spec comparisons)—switch by style name.

• Three canvas sizes: Native Xiaohongshu 3:4, WeChat 21:9 header, 1:1 share—auto-selected per platform, no manual crop.

• 28 layout skeletons: Editorial M01–M16 (covers, pipelines, before/after, quotes); Swiss S01–S12 (KPI towers, bar charts, matrix + hero)—agent picks by content type.

• 10 theme presets + smart color: Editorial six themes (ink classic, indigo porcelain, forest ink, kraft, dune, midnight ink); Swiss four anchors (Klein blue, lemon yellow, lime, safety orange)—fixed palettes (no custom hex) for consistency; mood-based theme suggestions.

• Three-step text-on-image: (1) image-overlay marks faces/products/text as avoid; (2) luminance sampling in safe zones picks B/W text and overlay depth; (3) dynamic font size and wrap—force deeper overlay if contrast <4.5.

• Auto image sourcing: Unsplash → Pexels → Flickr CC → Wallhaven with auto SOURCES.md for licensing.

• Maps and screenshot polish: MapLibre + OSM tiles with pins/routes; nine WebP texture backgrounds; .frame-shot, .device-browser, .device-phone for product shots.

• WebGL ink hero + 11 category rules: Dynamic ink backgrounds on Editorial heroes; auto routing for travel, career, film, reviews, books, food, games, makeup, fitness, home, fashion.

3. How to Use

1. Requirements: Node.js 18+, Playwright Chromium (npx playwright install chromium). Linux/macOS preferred; agent needs shell access.

2. Install skill:

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

   Or manual:

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

3. Author content: Create Markdown under content/ per SKILL.md, e.g.:

   ---
   platform: xiaohongshu
   style: editorial
   theme: ink-classic
   layout: M03
   images:
     - https://example.com/photo.jpg
   ---
   # Title
   Body...
   

4. Render: node render.mjs—Playwright screenshots HTML templates to output/ PNG with avoidance and theming applied.

5. Validate: validate-social-deck.mjs checks overflow, font caps, footer collisions, etc.

6. Notes: Network needed first run for browser and stock images; use ≥1200px-wide custom photos; themes lock hex values; maps need online OSM tiles.

4. Pros and Cons

5. Comparison with Similar Tools

Selection advice: Xiaohongshu/WeChat magazine look with category smarts—Guizang. Broader Instagram/OG brand memory—Brand Social Design (heavier setup). Simple Twitter/LinkedIn cards—SocialScreenshots (lighter, fewer features).

6. Editor's Review

Guizang isn't another image model—it's a programmable design system. Magazine rules as HTML/CSS give agents pixel control without diffusion text glitches—ideal for high-volume, consistent social matrix content.

It collapses "write post + design images" into one agent pass with text-on-image quality rivals lack. Category routing and stock automation help non-designers.

Audience: agent power users, social ops, reviewers, travel creators, WeChat editors; integrators chaining RAG → cards.

Future: more platforms/skeletons via community; offline LLM + local assets would widen adoption.

— −0.5 for agent dependency, CJK fine-tuning, rigid themes; still strongly recommended for CN social workflows.

7. Use Cases

• Long article → Xiaohongshu carousel: Split analysis or book notes into 3–9 Editorial or Swiss slides in one agent run.

• Product reviews: Swiss + Klein blue—device frames, KPI bars, spec matrices for gadgets/beauty/home.

• Travel guides: Editorial full-bleed + MapLibre pins/routes from place lists.

• WeChat covers: Simultaneous 21:9 header and 1:1 share from one content file.

• Brand matrix: One copy → platform-sized, on-brand batches for Xiaohongshu + Official Account.

8. FAQ

Q: Instagram/Twitter support?
A: Native CN platforms only; extend by changing canvas CSS—community templates TBD.

Q: GPU required?
A: No—Playwright CPU screenshots; 4GB+ RAM recommended.

Q: Custom colors/fonts?
A: Themes lock hex for consistency; edit CSS variables at your own risk. System fonts default; web fonts need extra loading.

Q: Output resolution?
A: Xiaohongshu 1080×1440; WeChat header 1920×822; share 1080×1080—tweak viewport in render.mjs carefully.

Q: Uneven Chinese spacing?
A: Prefer short lines (~20 chars) or adjust word-spacing/letter-spacing; CJK engine improvements planned.

Q: Stock licensing?
A: Unsplash/Pexels/Flickr CC/Wallhaven—verify SOURCES.md and each license for commercial use.

9. Project Links

• GitHub: https://github.com/op7418/guizang-social-card-skill