← all repositories
op7418/guizang-social-card-skill

Your AI agent now has a graphic design intern

A Claude Code skill that turns raw text into polished Xiaohongshu carousels and WeChat cover pairs using locked-down editorial design systems.

3.1k stars HTML Coding Assistants
guizang-social-card-skill
Velocity · 7d
+262
★ / day
Trend
steady
star history

What it does

Guizang is a “skill” you install into Claude Code or Codex. Feed it an article, product notes, screenshots, or photos, and it generates social-media-ready image sets: 3:4 carousels for Xiaohongshu (Rednote) and matched 21:9 + 1:1 cover pairs for WeChat official accounts. It renders everything to PNG via single-file HTML and Playwright—no build chain, no design software.

The interesting bit

The author treats aesthetic discipline as a feature, not a bug. Ten color themes are hardcoded; custom hex values are explicitly rejected (“protecting aesthetics matters more than freedom”). Two visual systems—Editorial (Monocle/Kinfolk vibes) and Swiss (grid, single anchor color, hairline rules)—share one workflow but serve different content types. A Playwright-based validator enforces six layout rules including “Swiss Identity” (no inline font-weight ≥ 700, because “bigger means thinner”).

Key highlights

  • 28 layout skeletons: 16 Editorial, 12 Swiss, with names like “KPI Tower” and “Image-Led Cover”
  • Auto image sourcing with fallback chain: user uploads → Unsplash → Pexels → Flickr CC → Wallhaven → direct search, all logged to SOURCES.md
  • MapLibre + OSM integration for travel-guide pins and routes
  • Screenshot framing utilities (.frame-shot, .device-browser, .device-phone) with 9 WebP texture backgrounds
  • WebGL ink-flow backgrounds for Editorial hero pages, toggleable for low-performance runs

Caveats

  • Requires a file-system-capable agent (Claude Code, Codex, or Cursor with shell); plain chatbots won’t work
  • Validator is off by default to save time, so broken layouts may reach you before they’re caught
  • Some categories (OOTD photography, dreamcore aesthetics, film-emulation color grading) are explicitly out of scope

Verdict

Worth installing if you regularly produce Chinese social content and want consistent, non-generic visuals without touching Figma or Canva. Skip it if you need fine-grained creative control or work outside the Xiaohongshu/WeChat ecosystem.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.