whatisgithub

What is guizang-social-card-skill?

op7418/guizang-social-card-skill — explained in plain English

Analysis updated 2026-05-18

1,763HTMLAudience · vibe coderComplexity · 2/5Setup · easy

In one sentence

A Claude Code / Codex skill that turns articles, notes, or screenshots into Xiaohongshu carousels and WeChat cover images using 28 HTML layout templates.

Mindmap

mindmap
  root((social-card-skill))
    What it does
      Generates social cards
      HTML to PNG rendering
      Xiaohongshu carousels
      WeChat cover pairs
    Tech stack
      HTML and CSS
      Playwright
      Node.js
    Use cases
      Article to carousel
      Product review cards
      Travel and lifestyle posts
    Audience
      Chinese social media creators
      Claude Code and Codex users

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Turn a long article into a Xiaohongshu image carousel using Editorial or Swiss visual styles.

USE CASE 2

Generate a matching WeChat cover pair (wide banner plus square thumbnail) from the same content.

USE CASE 3

Build product review or data-summary cards using the Swiss grid layout templates.

USE CASE 4

Validate finished cards for text overflow or layout issues before delivering them.

What is it built with?

HTMLCSSPlaywrightNode.js

How does it compare?

op7418/guizang-social-card-skilln8n-io/n8n-docsopen-less/openless
Stars1,7631,6351,393
LanguageHTMLHTMLHTML
Setup difficultyeasymoderatemoderate
Complexity2/52/52/5
Audiencevibe coderpm foundergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Install with a single npx skills command or manual git clone into the Claude Code skills folder, README is primarily in Chinese.

The README does not clearly state a license within the visible content.

So what is it?

This project is a skill for AI coding tools like Claude Code and Codex that generates social media image cards from articles, notes, screenshots, or other text content. The output targets two Chinese platforms: Xiaohongshu (also called Rednote or Little Red Book), which is an image-and-note sharing platform, and WeChat public accounts, which use specific cover image dimensions. The skill produces multi-card carousels for Xiaohongshu and matching cover pairs (a wide banner plus a square thumbnail) for WeChat, all exported as PNG files. The visual design draws on two distinct styles. The first, called Editorial, takes its look from quiet print magazines with restrained layouts suited to storytelling, travel, lifestyle, and personal writing. The second, called Swiss, uses strict grid structures, large type-size contrasts, and a single accent color, and is better suited to product reviews, data breakdowns, tutorials, and tool summaries. Both styles share the same underlying workflow. Together they offer 28 layout templates and 10 color theme presets. The technical approach is intentionally simple. Each card is a single HTML file that a rendering script converts to a PNG image using a browser engine running in the background. There is no build system or frontend framework to install. An AI agent writes and edits the HTML directly, which makes iteration fast. A validation script checks the finished cards for real layout problems by actually rendering them, catching issues like text overflowing its container or content crowding the footer. Installing the skill takes one command, or you can clone the repository manually into a folder that Claude Code watches for skills. Once installed, the AI agent picks it up automatically when you ask for social cards, carousels, or cover images in Chinese-platform contexts. The skill follows a seven-step workflow covering intake of your content and images, style and theme selection, layout choices, image sourcing from public photo libraries, rendering, delivery, and revision. The README is primarily in Chinese. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1
Install guizang-social-card-skill and make a 5-card Swiss-style Xiaohongshu carousel from this article, using IKB blue.
Prompt 2
Turn this product review into a WeChat 21:9 cover plus 1:1 square cover with consistent visuals.
Prompt 3
Generate an Editorial-style Xiaohongshu photo set from these 3 camping photos.
Prompt 4
Run validate-social-deck.mjs on my generated cards and fix any overflow or footer collision issues.

Frequently asked questions

What is guizang-social-card-skill?

A Claude Code / Codex skill that turns articles, notes, or screenshots into Xiaohongshu carousels and WeChat cover images using 28 HTML layout templates.

What language is guizang-social-card-skill written in?

Mainly HTML. The stack also includes HTML, CSS, Playwright.

What license does guizang-social-card-skill use?

The README does not clearly state a license within the visible content.

How hard is guizang-social-card-skill to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is guizang-social-card-skill for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.