SuperAPI AI Directory
Partner with us中文AI newsFavorites
DirectoryNews and tutorials

Guizang Social Card Skill - Guizang's open-source Xiaohongshu image-text optimization Skill

Author: AI小集 · Original source: AI工具集

What is Guizang Social Card Skill

Guizang Social Card Skill is an open-source image-text card skill by Guizang, adapted for Claude Code / Codex and other Agent environments. It solves the illustration challenges for Xiaohongshu (3:4 vertical images) and WeChat Official Accounts (21:9 + 1:1 covers). The tool includes two visual systems, Editorial and Swiss, 28 layout skeletons, and 10 theme presets. Through single-file HTML + Playwright rendering, it directly outputs PNG, enabling AI Agents to generate social image-text cards with magazine-level typographic quality in one click.

Guizang Social Card Skill

Main Features of Guizang Social Card Skill

  • Dual Visual System Output: Editorial magazine style suits storytelling, travel, and lifestyle; Swiss grid style suits product reviews, data, and methodology.
  • Three Canvas Size Adaptations: Xiaohongshu 3:4, WeChat Official Account 21:9 header image, WeChat Official Account 1:1 share card.
  • 28 Layout Skeletons: Editorial 16 (M01-M16, including Image-Led Cover, Pipeline, Before/After, etc.) + Swiss 12 (S01-S12, including KPI Tower, H-Bar Chart, Matrix + Hero, etc.).
  • 10 Theme Presets: Editorial 6 (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, Midnight Ink) + Swiss 4 anchor colors (Klein Blue, Lemon Yellow, Lemon Green, Safety Orange).
  • Smart Text Over Image: A three-step method automatically identifies the subject to avoid faces/product centers, calculates the luminance at placement points to determine text color and mask, and adapts font size and line breaks to the area size.
  • Automatic Image Source Workflow: Prioritizes user images; when no image is available, fetches images in the priority order Unsplash → Pexels → Flickr CC → Wallhaven and automatically writes SOURCES.md.
  • Map Component: MapLibre + OSM real tiles, supports multiple pins + connecting lines, suitable for travel guides.
  • Screenshot Beautification Assets: 9 WebP real-texture backgrounds + .frame-shot / .device-browser / .device-phone tool categories.
  • WebGL Ink Flow Background: Magazine-style hero pages can attach dynamic ink flow effects.
  • 11 Category Adaptations: Built-in adaptation rules for travel, workplace, film and television, product reviews, reading, food, games, makeup, fitness, home, fashion, and more.
  • Layout Validation Script：validate-social-deck.mjs Based on Playwright real DOM measurement, it detects 6 rules including overflow, font size upper limit, and footer collision.

Technical Principles of Guizang Social Card Skill

  • Single-file HTML + CSS Rendering: The seed template is pure HTML/CSS, which Agents can directly read, write, and modify. It captures screenshots via node render.mjs calling Playwright to output PNG, without needing a front-end build chain.
  • CSS Grid + Strict Typographic System: Information hierarchy is supported by font size, font weight, and grid whitespace, not by shadows and card decorations, ensuring precise and controllable layouts.
  • Subject Recognition and Avoidance Algorithm: Marks avoid areas (faces, products, text-dense areas) via image-overlay rules, calculates the average color and luminance of sampling points within safe areas, and derives text color, shadow depth, and mask necessity. When contrast is below 4.5, the mask is forcibly deepened.
  • Adaptive Layout Engine: Font size is dynamically calculated based on the width and height of the safe area, and long sentences automatically wrap without overflow, rather than using hardcoded fixed pixel values.
  • Agent Structured Workflow: 7-step closed loop (Intake → Style & Theme → Layout Selection → Asset Prep → Compose & Render → Deliver & Review → Iterate), uniformly orchestrated 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
  • Have an AI Agent execute it: Send the installation command to an Agent with shell permissions, and it will 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

Core advantages of Guizang Social Card Skill

  • Magazine-grade typographic quality: Referencing the layouts and letter spacing of Monocle / Kinfolk / Cereal magazines, the restrained color palette is actually the most eye-catching in the feed, saying goodbye to the "AI feel" of large color blocks + emoji stacking.
  • Category-aware intelligent adaptation: For the same passage of text, saying "store visit" gives a magazine-style warm-toned large image, while saying "review" gives a grid-style device-frame comparison image—it is not one template applied to everything.
  • Text over images without disaster: The three-step method of subject avoidance + luminance sampling + adaptive line breaking solves the three major pain points of "text covering faces", "same color unreadable", and "banner ruining the composition".
  • Closed-loop image sourcing without anxiety: By default it connects to three free commercial-use image libraries, Pexels / Unsplash / Wallhaven, automatically saves locally + writes a source list.
  • Agent-native friendly: A pure-text HTML/CSS skill that Claude Code / Codex can directly read, write, and iterate on, with a complete SKILL.md workflow and validation scripts.

Project address of Guizang Social Card Skill

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

Comparison of Guizang Social Card Skill with similar competitors

Comparison dimension guizang-social-card-skill brand-social-design
Developer 歸藏 (op7418) Om Rajguru (omrajguru05)
Target platforms Xiaohongshu 3:4 vertical images + WeChat Official Account 21:9 header images + 1:1 share cards Instagram square posts / carousels, OG images, Featured images, email images, Story
Visual system Dual system: Editorial (magazine style) + Swiss (Swiss grid style), 28 layout skeletons Single system: dot-matrix background + embedded cards + thick borders with hard shadows + rotated labels + sticker elements
Brand adaptation 10 fixed theme presets (custom hex not allowed), protecting aesthetic consistency Brand onboarding interviewCollects color palette, fonts, and design personality, memorized and reused
Category awareness Built-in adaptation rules for 11 categories (travel, workplace, film and television, food, etc.), automatically routing layouts No category distinction; all content uniformly uses the same visual language
Text over images Three-step intelligent avoidance: identify subject → sample luminance to determine text color mask → adaptive line breaking No intelligent avoidance mechanism; text layout is relatively fixed
Image sourcing solution Automatically fetches images in priority order Unsplash → Pexels → Flickr CC → Wallhaven No built-in image sourcing workflow; users need to provide materials themselves

Application scenarios of Guizang Social Card Skill

  • Long articles to Xiaohongshu: Extract the core viewpoints of an article and automatically split them into 3–9 3:4 vertical images, with either Editorial narrative style or Swiss data style.
  • Product review publishing: Input review copy, and the Swiss grid style + IKB blue automatically generates a spec comparison graphic with a device frame, suitable for digital and tool-related content.
  • Travel guide creation: Editorial magazine-style full-bleed large image, overlaid with a MapLibre map component marking routes and check-in spots, generating shop-visit graphics and text in one click.
  • Official account cover output: The same content is rendered on dual artboards, with a 21:9 header image + 1:1 share card visually unified, ready to upload directly to the WeChat backend.