git404hub

what is guizang-social-card-skill fr?

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

Analysis updated 2026-05-18

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

tl;dr

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

vibe map

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 make with this?

VIBE 1

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

VIBE 2

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

VIBE 3

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

VIBE 4

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

what's the stack?

HTMLCSSPlaywrightNode.js

how it stacks up fr

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 i run it?

Difficulty · easy time til it works · 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.

in plain english

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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.