Guizang Social Card Skill - A collection of open-source Xiaohongshu (Little Red Book) image and text optimization skills. - AiBoss

What is Guizang Social Card Skill?

Guizang Social Card Skill is an open-source image and text card tool compatible with Agent environments such as Claude Code and Codex. It solves the image selection challenges for Xiaohongshu (3:4 vertical images) and WeChat Official Accounts (21:9 + 1:1 cover). The tool incorporates two visual systems, Editorial and Swiss, 28 layout skeletons, and 10 theme presets. It directly outputs PNGs via single-file HTML + Playwright rendering, allowing the AI Agent to generate social media cards with magazine-quality layouts with a single click.

Main functions of Guizang Social Card Skill

Dual vision system outputThe editorial style is suitable for narrative, travel, and lifestyle; the Swiss grid style is suitable for product evaluation, data, and methodology.
Three drawing boards size adaptation: Xiaohongshu 3:4, WeChat Official Account 21:9 header image, WeChat Official Account 1:1 sharing card.
28 layout skeletons: 16 Editorial titles (M01-M16, including Image-Led Cover, Pipeline, Before/After, etc.) + 12 Swiss titles (S01-S12, including KPI Tower, H-Bar Chart, Matrix + Hero, etc.).
10 theme presets:6 sets of Editorial inks (Classic Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, Midnight Ink) + 4 sets of Swiss anchor colors (Klein Blue, Lemon Yellow, Lemon Green, Safe Orange).
Smart text compression imageThe three-step method automatically identifies the subject, avoiding the center of faces/products, calculates the brightness of the landing point to determine the text color and mask, and adapts the font size and line breaks to the area size.
Automated Image Source WorkflowPrioritize user images. If no images are available, select Unsplash → Pexels → Flickr CC → Wallhaven to retrieve images and automatically write them to SOURCES.md.
Map ComponentsMapLibre + OSM real tiles, supports multiple pins and connections, suitable for travel guides.
Screenshot to beautify assets9 WebP realistic texture backgrounds + .frame-shot / .device-browser / .device-phone Utility class.
WebGL Ink Flow BackgroundMagazine-style hero pages can display dynamic ink flow effects.
11 product categories are compatibleBuilt-in adaptation rules for travel, workplace, film and television, product reviews, reading, food, games, makeup, fitness, home furnishings, fashion, etc.
Layout verification script:validate-social-deck.mjs Based on Playwright's real DOM measurements, it detects six rules including overflow, font size limit, and footer collision.

The technical principles of Guizang Social Card Skill

Single-file HTML + CSS renderingThe seed template is pure HTML/CSS; the Agent can directly read, write, and modify it. node render.mjs Use Playwright to take screenshots and output PNGs without requiring a frontend build chain.
CSS Grid + Strict Layout SystemThe layout is designed to establish information hierarchy through font size, font weight, and grid spacing, without relying on shadows or card decorations, thus ensuring precise and controllable layout.
Subject recognition and avoidance algorithmThe avoid region (faces, products, dense text areas) is marked by the image-overlay rule. The average color and brightness of the sampling points are calculated within the safe area to infer the text color, shadow depth and mask necessity. When the contrast is below 4.5, the mask is forcibly deepened.
Adaptive typesetting engineThe font size is dynamically calculated based on the width and height of the safe area, and long sentences automatically wrap without overflowing, rather than using hard-coded fixed pixel values.
Agent Structured WorkflowThe 7-step closed loop (Intake → Style & Theme → Layout Selection → Asset Prep → Compose & Render → Deliver & Review → Iterate) is uniformly scheduled by SKILL.md.

How to use Guizang Social Card Skill

One-line command:npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
Let the AI Agent executeSend the installation command to an agent with shell privileges, and automatically clone to... ~/.claude/skills/guizang-social-card-skill
Manual command line:git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Guizang Social Card Skill's core advantages

Magazine-quality typographyReferencing the layout and letter spacing of Monocle, Kinfolk, and Cereal magazines, the restraint of color palettes makes them the most eye-catching element in the information flow, bidding farewell to the "AI-like" large color blocks and emoji piling up.
Category-aware intelligent adaptationThe same text is presented with magazine-style warm-toned large images when describing "store visits," and with grid-style equipment frame comparison images when describing "reviews." It's not a single template used for all.
Text overlay on images without crashingThe three-step method of subject avoidance, brightness sampling, and adaptive line breaking solves three major pain points: "text covering faces", "unreadable by the same color", and "banners ruining the composition".
Image source closed loop, no anxietyBy default, it integrates with three free commercially usable image libraries: Pexels, Unsplash, and Wallhaven, automatically saving the images locally and adding a source list.
Agent natively friendlyPlain text HTML/CSS skills; Claude Code/Codex can be directly read, written, and iterated; complete SKILL.md workflow and validation scripts are available.

Guizang Social Card Skill project address

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

Comparison of similar products with Guizang Social Card Skill

Comparison Dimensions	guizang-social-card-skill	brand-social-design
Developers	Gui Zang (op7418)	Om Rajguru (omrajguru05)
Target Platform	Xiaohongshu 3:4 vertical image + WeChat Official Account 21:9 header image + 1:1 sharing card	Instagram square posts / carousel, OG images, Featured images, email images, Stories
visual system	Dual systemEditorial (magazine style) + Swiss (Swiss grid style), 28 layout skeletons	single systemDotted background + embedded cards + thick borders and hard shadows + rotating labels + sticker elements
Brand adaptation	10 fixed theme presets (custom hexes are not allowed) to maintain aesthetic consistency.	Brand onboarding interviewCollect color palettes, fonts, and design personalities for easy memorization and reuse.
Category perception	Built-in 11 category adaptation rules (travel, workplace, film and television, food, etc.), automatic routing layout.	There is no category distinction; all content uses the same visual language.
Text overlay image	Three-step intelligent obstacle avoidance: Identify subject → Sample brightness to determine character color mask → Adaptive line breaks	There is no intelligent obstacle avoidance mechanism, and the text layout is relatively fixed.
Image source solution	Automatically prioritize image retrieval based on Unsplash → Pexels → Flickr CC → Wallhaven	There is no built-in image source workflow; users need to provide their own materials.

Application Scenarios of Guizang Social Card Skill

Long post shared on XiaohongshuExtract the core viewpoints of the article and automatically split them into 3–9 vertical charts in a 3:4 ratio, with the option of either Editorial narrative style or Swiss data style.
Product review releaseInput your review text, and the Swiss grid style + IKB blue will automatically generate a parameter comparison chart with device frames, suitable for digital and tool-related content.
Travel guide creationThe editorial magazine-style full-page images, overlaid with MapLibre map components to mark routes and check-in points, allow you to generate restaurant review photos and text with one click.
WeChat Official Account Cover OutputThe same content is rendered on two canvases, with a 21:9 header image and a 1:1 share card for visual consistency, and can be directly uploaded to the WeChat backend.