Summary

This project provides an AI-driven skill for generating visually consistent social media graphics, specifically Xiaohongshu carousels and WeChat cover pairs, directly from textual content. It targets AI agents like Claude Code and Codex, offering a streamlined workflow for users who need to quickly produce professional, aesthetically cohesive visual assets without manual design intervention. The core benefit is the automation of complex design tasks into a structured, template-based process.

How It Works

The skill operates using a single HTML file with CSS for layout, rendered into PNG images via Playwright. This approach avoids the need for traditional frontend build chains, making it highly compatible with AI agents. It features two distinct visual systems: "Editorial," inspired by lifestyle magazines, and "Swiss Internationalism," based on grid systems and high contrast. These are supported by 28 pre-defined layout skeletons and 10 curated theme presets, ensuring consistent branding and design. An automated image sourcing pipeline with fallbacks and an integrated validation script further enhance usability and quality control.

Quick Start & Requirements

• Installation: Execute npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill. Manual installation via git clone is also supported.
• Prerequisites: A Node.js environment is required for npx and rendering scripts. The user needs an AI agent capable of file system operations and shell command execution.
• Dependencies: Playwright is implicitly required for rendering and validation processes.
• Documentation: Comprehensive guides are available within the repository, notably SKILL.md and various files in the references/ directory.

Highlighted Details

• Offers two distinct visual systems: Editorial (narrative, lifestyle) and Swiss (data, methodology).
• Provides 28 layout skeletons (16 Editorial, 12 Swiss) to accommodate diverse content structures.
• Features 10 theme presets with fixed color palettes to maintain aesthetic integrity.
• Includes an automated image sourcing pipeline that pulls from platforms like Unsplash, Pexels, and Wallhaven, saving images locally and tracking sources.
• Integrates a validation script (validate-social-deck.mjs) using Playwright to automatically check for layout overflows, type constraints, and other visual issues.
• Supports multiple output aspect ratios, including Xiaohongshu 3:4, WeChat 21:9, and 1:1.
• Includes advanced features such as optional WebGL backgrounds, screenshot beautification assets, and a MapLibre map component.

Maintenance & Community

The project is primarily maintained by op7418. While the README outlines a roadmap for future development, specific community channels (like Discord/Slack) or detailed contributor information beyond the primary author are not explicitly detailed.

Licensing & Compatibility

• License: GNU AGPL-3.0.
• Restrictions: This license mandates that any modifications, forks, or derivative works must be publicly released under the same AGPL-3.0 license, including full source code availability. It strictly prohibits closed-source or proprietary commercialization, even for network services.

Limitations & Caveats

This skill is not designed for generating horizontal-scrolling presentations, long videos, or performing basic image editing. Certain niche content categories heavily reliant on specific photography or editing styles are explicitly outside its scope. Custom color selection is disallowed to preserve predefined aesthetic consistency. The AGPL-3.0 license imposes significant restrictions on commercial use and closed-source development.