Guizang Social Card Skill
Generate Xiaohongshu and WeChat cover cards with Claude Code / Codex agents, built-in editorial and Swiss visual systems.
- Source repo
- op7418/guizang-social-card-skill
- Stars
- ★ 7.6k
- Last updated
- 3mo ago
- License
- AGPL-3.0
- Primary language
- HTML
- FA score
- 65/100 · Some gaps
At a glance
- How it runs
- Works with
- Platform-specificCodex · Claude Code
- Cost
- Free, no paid service needed
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- Content creators converting long articles into Xiaohongshu carousels with consistent visual style.
- Not a fit if
- Ordinary chatbot users: no filesystem or render pipeline means unstable output.
- Teams in sandboxed or fully offline environments: needs local filesystem, shell, and network image fetching.
- Closed-source commercial projects: AGPL-3.0 requires derivative works, including SaaS, to be open-sourced.
- Source review
- 65/100 · Some gaps
What does this agent do, and when should you use it?
This agent skill is designed for Claude Code / Codex environments to create Xiaohongshu (Rednote) carousels, Live Photo motion cards, and WeChat 21:9 + 1:1 cover pairs from articles, screenshots, product notes, subtitles, photos, or user videos. It includes two visual systems (editorial magazine style and Swiss International Style) with 28 layout skeletons and 10 theme presets, all rendered via single-file HTML to PNG using Playwright, eliminating the need for a frontend build chain. The skill ships with a full workflow documentation, validation scripts, Live Photo production guide, and extensive references, suitable for individuals or teams needing stable, high-quality social card output.
The skill reads user-provided articles, copy, screenshots, or videos and follows a 7-step workflow (Intake → Style & Theme → Layout Selection → Asset Prep → Compose & Render → Deliver & Review → Iterate) to generate social cards. It supports three canvas sizes (Xiaohongshu 3:4, WeChat 21:9, WeChat 1:1) with corresponding CSS classes. It can source images from Unsplash, Pexels, Flickr CC, Wallhaven, or direct search, downloading locally and recording sources in SOURCES.md. It uses seed templates (assets/template-editorial-card.html and assets/template-swiss-card.html) to populate content and renders PNGs via node render.mjs with Playwright. For Live Photo requests, it first assesses information load, then outputs JPG + MOV + .pvt packages with platform limitations. It also provides validate-social-deck.mjs with 9 rules for overflow, font size, density, and collision detection.
- Content creators converting long articles into Xiaohongshu carousels with consistent visual style.
- Product teams publishing reviews or tool roundups needing Swiss-style data cards with KPIs and comparisons.
- Travel bloggers turning photos and narratives into magazine-style posts emphasizing atmosphere and storytelling.
- WeChat operators generating both 21:9 header and 1:1 share cards with visual consistency.
- Video creators transforming short clips into Xiaohongshu Live Photo cards with guidance on editing and publishing.
- Tutorial authors beautifying screenshots and packaging them into explanatory cards using screenshot assets and utility classes.
How do you install or deploy this agent?
Recommended one-liner: npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill. Alternatively, clone directly: git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill. Verify SKILL.md, assets/, and references/ exist.
How do you use this agent?
After installation, simply say to the agent, e.g., "Create a 5-card Swiss-style Xiaohongshu carousel from this article in IKB blue." The agent executes the 7-step workflow: confirm platform, style, content, and user images; choose from 10 theme presets; pick from 28 layouts; prepare images and download locally; render HTML to PNG; show results for confirmation; iterate based on feedback. For Live Photo requests, the agent assesses information load, selects a structure, outputs JPG + MOV + .pvt, and reminds about platform time limits.
What are this agent's strengths and limitations?
- Dual visual systems cover narrative and data scenarios with a shared workflow, reducing configuration overhead.
- 28 layout skeletons and 10 theme presets ensure stable, style-consistent output; disallowing custom hex protects design integrity.
- Single-file HTML with Playwright rendering is agent-editable, requires no frontend build, and yields simple PNG delivery.
- Validated via Playwright-based real rendering checks, enabling automated quality control.
- Live Photo production is well-documented, covering single video, grid, triple, and long-video diagnosis with platform-specific time limits and publishing paths.
- Only explicitly supports Claude Code and Codex; not recommended for ordinary chatbots, limiting deployment environments.
- Requires local filesystem, shell execution, and network (for image downloads), precluding sandboxed environments.
- Theme colors are limited to preset palettes; no custom hex, which may not accommodate specific brand colors.
- Live Photo publishing typically requires iPhone for final posting, adding a step for desktop users.
- AGPL-3.0 license requires derivative works to be open-sourced, unsuitable for closed-source commercial projects.
How does this agent compare with similar options?
Sister project guizang-ppt-skill focuses on landscape slide presentations; this skill focuses on static in-feed graphics. They share design language but are maintained independently.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Guizang Social Card Skill This agent | 65 · Some gaps | Agent plugin / skillFree | ★ 7.6k | 3mo ago | HTML | Codex · Claude Code |
| Guizang PPT Skill | 40 · Major gaps | Agent plugin / skillFree + model costs | ★ 28k | 2mo ago | HTML | Codex · Claude Code |
| Monocolor Editorial Print | 43 · Major gaps | Agent plugin / skillFree + model costs | ★ 3.4k | 1mo ago | Python | Claude Code |
| HTML Video Studio | 53 · Major gaps | CLIFree + model costs | ★ 4.7k | 3mo ago | HTML | Codex · Claude Code · Claude API |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence shows: the skill requires user confirmation (e.g., 'ask whether to credit sources'), but does not require user confirmation for all external actions; data flow transparency is partial: SOURCES.md records image sources, but does not explain how data is processed or transmitted; sensitive data handling: no user sensitive data involved, but not explicitly stated; dependency security: only depends on playwright, but no version pinning or security audit; external effects: downloads images and calls external APIs, but no explicit restrictions or disclosure; rollback: provides git pull for updates, but no version rollback mechanism; source attribution: has SOURCES.md and copyright notices, but not all external content attribution is clear.
Self-consistency: documentation is internally consistent, but no test results provided; dependency availability: depends on playwright, but version compatibility not stated; failure messages: no explicit error handling or user prompts.
Audience and scenarios: clearly lists applicable and non-applicable scenarios, covering multiple platforms; capability boundaries: explicitly declares non-applicable scenarios (e.g., long-form video editing); trigger precision: provides trigger phrases, but trigger conditions not explicit; environment fit: supports multiple agent environments, but specific version requirements not stated.
Information architecture: clear directory structure, comprehensive documentation; install notes: multiple installation methods provided; naming stability: version numbers exist, but naming conventions not stated; examples and FAQ: rich examples and FAQ provided; known limitations: explicitly lists non-applicable scenarios; license: AGPL-3.0, but package.json says ISC, inconsistency; versioning and changelog: has HANDOFF.md and PRODUCT.md, but no explicit CHANGELOG; maintenance responsibility: contribution guidelines provided, but maintainers not explicit.
Output usability: outputs PNG and Live Photo, formats clear; marginal value: provides multiple layouts and themes, high value; cost-benefit: requires Playwright and external APIs, but cost not assessed.
Claim traceability: documentation references references files, but no specific evidence; cross-source corroboration: no external verification; fact-inference separation: documentation distinguishes facts and design decisions, but not explicitly labeled.
- License inconsistency: package.json says ISC, README says AGPL-3.0.
- Dependency only declares playwright without version pinning, posing supply chain risk.
- External image downloads and API calls are not explicitly restricted, potentially raising privacy and security concerns.
- No explicit rollback mechanism; issues after update may be hard to recover.