op7418/guizang-social-card-skill

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.