# Social Card Agent Skill > Generate visually stunning social cards for Xiaohongshu carousels and WeChat cover pairs from various content sources. Leverage editorial or Swiss design systems to create engaging visuals for your articles and posts. - Canonical: https://nanoskill.ai/skills/social-card-generation - Markdown: https://nanoskill.ai/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: en - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About The Guizang Social Card Skill is an advanced agent capability designed to streamline social card generation for platforms like Xiaohongshu and WeChat. It empowers users to transform diverse content – from articles and product notes to screenshots and photos – into polished, platform-optimized visuals. By offering distinct Editorial and Swiss International design systems, the skill ensures that whether your goal is narrative storytelling or data-driven explanation, your social cards will be both engaging and aesthetically consistent, ready to capture audience attention. This skill stands out with its structured workflow, providing 28 layout skeletons and 10 theme presets to guide content presentation. It automates image sourcing from popular platforms and includes a robust Playwright-based validator to maintain visual quality by detecting common layout issues. The output is delivered as single-file HTML, rendered directly to PNG, making it highly compatible with coding-agent environments like Claude Code and Codex. Users can leverage the Guizang Social Card Skill for a variety of use cases, such as creating multi-card Xiaohongshu carousels from long articles, designing visually harmonious WeChat 21:9 hero and 1:1 share card pairs, or producing clear tutorial visuals from screenshots. Its design principles prioritize restraint, structure, and user-centric image handling, ensuring professional and impactful social media content without requiring extensive design expertise. ## Key features - **Dual Visual Systems**: Choose between an Editorial style for storytelling (Monocle, Kinfolk) or a Swiss International style for data and structure (grid-first, sharp hairlines) to match your content's tone. - **Multiple Canvas Sizes**: Supports Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900), and WeChat 1:1 (1080x1080) for versatile social media presence. - **Extensive Layout Skeletons**: Access 28 pre-designed layout skeletons (16 Editorial, 12 Swiss) including image-led covers, KPI towers, and H-bar charts for quick content structuring. - **Automated Image Sourcing**: Automatically sources images from Unsplash, Pexels, Flickr CC, Wallhaven, or direct search, downloading them locally with an auto-generated SOURCES.md file. - **Layout Validator**: Includes a Playwright-based validator to detect overflow, type cap violations, density gaps, and footer collisions, ensuring high-quality social card generation. ## Use cases - **Create Xiaohongshu Carousels**: Transform long articles, product reviews, or travel guides into engaging multi-card carousels for Xiaohongshu, using either Editorial or Swiss design. - **Design WeChat Cover Pairs**: Generate visually consistent 21:9 hero images and 1:1 share cards for WeChat Moments and Channels from any content source. - **Produce Tutorial Visuals**: Convert screenshot tutorials, game guides, or tool walkthroughs into structured social cards with beautified screenshots and clear layouts. - **Summarize Data and Reviews**: Present product reviews, data recaps, or year-in-review content using Swiss-style layouts with charts and matrices for clear communication. ## Result preview Explore a professional social media carousel powered by this Skill. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Install Add the Social Card Generation Skill to your AI agent. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Describe Content Provide the content, topic, or key message you want to transform into social media cards. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Generate Social Cards Create visually engaging, platform-optimized card designs with clear information hierarchy, strong storytelling flow, and publication-ready layouts. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition An agent skill for Claude Code, Codex, and similar coding-agent environments. It generates **Xiaohongshu / Rednote carousel images** and **WeChat 21:9 + 1:1 cover pairs** from articles, copy, screenshots, product notes, subtitles, or photos. Two visual systems share one workflow: - **Editorial**. Restrained layouts in the spirit of *Monocle* / *Kinfolk* / *Cereal*. Best for storytelling, lifestyle, travel, reading, film, and personal observation. - **Swiss International**. Grid-first, single anchor color, sharp hairlines, extreme type contrast. Best for product reviews, data, frameworks, tutorials, and AI tools. > Sister project to [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill). Shared visual language, separate maintenance. PPT solves "horizontal swipe talks"; this one solves "static feed images." ![Guizang Social Card Skill preview](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30-second start ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` Or paste this to an AI agent with shell access: ```text Install guizang-social-card-skill for me. Clone https://github.com/op7418/guizang-social-card-skill into ~/.claude/skills/guizang-social-card-skill, then verify that SKILL.md, assets/, and references/ exist. ``` If you already installed it, update with: ```text Update guizang-social-card-skill for me. Go to ~/.claude/skills/guizang-social-card-skill, run git pull, then tell me the latest commit. ``` Then ask your agent: ```text Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue. ``` Other useful prompts: ```text Make me a 3:4 Xiaohongshu set from this product review, with editorial-style titles. Turn this article into a WeChat cover pair: 21:9 hero + 1:1 share card, visually consistent. I have 3 camping photos — make me an image-led Xiaohongshu carousel. Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallhaven. ``` ## What you get - 🖋 **Two visual systems**: Editorial for atmosphere and narrative, Swiss for facts and structure, sharing one workflow - 📐 **3 canvas sizes**: `.poster.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×1080 (WeChat 1:1) - 🧩 **28 layout skeletons**: 16 Editorial (`M01-M16`, including Image-Led Cover, Pipeline, Before/After) + 12 Swiss (`S01-S12`, including KPI Tower, H-Bar Chart, Matrix + Hero) - 🎨 **10 theme presets**: 6 Editorial (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, **Midnight Ink** dark) + 4 Swiss anchor colors (IKB Klein Blue, Lemon, Lemon Green, Safety Orange) - 🖼 **Image sourcing workflow**: user images first; otherwise waterfall through Unsplash → Pexels → Flickr CC → Wallhaven → direct search, downloaded locally with auto-generated `SOURCES.md` - 🌫 **WebGL ink-flow background**: editorial hero pages can ship a live ink animation; can be disabled for low-power devices or screenshot mode - 🪧 **Image overlay + face safety**: full-bleed images must carry a mask; text drop zones must avoid the subject. Hard rules in `references/image-overlay.md` - 🧰 **Screenshot beautification assets**: 9 real-texture WebP backgrounds (5 Editorial / 4 Swiss), paired with `.frame-shot` / `.device-browser` / `.device-phone` utilities - 🗺 **Map component**: MapLibre + OSM real tiles, multi-pin + connectors, made for travel guides - ✅ **Validator**: `validate-social-deck.mjs` auto-detects overflow, type cap violations, 4-band density gaps, and footer collisions - 📄 **Single-file HTML + Playwright rendering**: no frontend build pipeline; `node render.mjs` outputs PNG directly ## Fits / Doesn't fit **✅ Fits**: Xiaohongshu carousels / WeChat cover pairs / Moments covers / Channels covers / article visuals / tutorial pages / data recaps / travel guides / product reviews / screenshot explainers **❌ Doesn't fit**: Horizontal swipe decks (use [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / long-form video generation / pure photo retouching / plain-text editing without layout ## 11 Xiaohongshu categories Tiered by "circle of competence" — see [`references/category-cookbook.md`](./references/category-cookbook.md): **End-to-end strong** (copy / structure / images all in scope): - Travel, career, recommendations (after specifying a sub-genre) **Copy and structure strong, images depend on user or sourced art:** - Gaming, film, food (recipe-oriented), makeup (tutorial-oriented), fitness, home, fashion (curated picks) **Out of scope, declared upfront** (won't force-fit): - OOTD live shots / dreamcore / film-emulation grading / real skin-test makeup — anything heavily dependent on photography or post-production ## Common scenarios | Task | Recommended flow | |------|------------------| | Long article → Xiaohongshu carousel | Extract core takeaways; Editorial for narrative pacing, Swiss for data breakdowns | | Product review / tool wrap-up | Swiss + IKB blue, prefer `S09 KPI Tower` / `S10 H-Bar Chart` | | Travel / lifestyle | Editorial + Midnight Ink or Dune, `M16 Image-Led Cover` for full-bleed hero | | WeChat cover pair | Render the same content twice: `.poster.wide` 21:9 + `.poster.square` 1:1, visually consistent | | Screenshot tutorial / tool walkthrough | `.frame-shot` + `.device-browser`, prefer Swiss grid base | | Game guide / film recap | Editorial + Midnight Ink, pull game art from Wallhaven for full-bleed hero | | Data recap / year in review | Swiss + Lemon or Safety Orange, matrix + ledger combo | ## Why single-file HTML to PNG - **Agent-friendly**: HTML + CSS is text — agents can write, read, edit, and validate directly - **Layout precision**: CSS Grid + strict type / margin / grid rules far exceed Markdown's layout reach - **Open image sourcing**: hook into Unsplash / Pexels / Wallhaven / Mapbox / OSM / any web resource - **Verifiable quality**: `validate-social-deck.mjs` runs Playwright DOM measurement, not guesswork - **Simple delivery**: `output/*.png` ships directly — no deploys, no export tools ## Platform support | Platform | Status | Notes | |----------|--------|-------| | Claude Code | Supported | Native Skill workflow, ideal for generating + iterating cards | | Codex | Supported | Good for long-form card generation, sourcing images, visual QA | | Cursor / other local agents | Works | Requires filesystem read/write + shell execution | | Plain chatbot | Not recommended | Without filesystem and rendering pipeline, can't reliably ship images | ## Install ### Option 1: One-line install (recommended) ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### Option 2: Paste this to an AI > Install the `guizang-social-card-skill` Claude Code skill for me. Steps: > > 1. Make sure `~/.claude/skills/` exists (create if not) > 2. Run `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` > 3. Verify: `ls ~/.claude/skills/guizang-social-card-skill/` should show `SKILL.md`, `assets/`, `references/` > 4. Tell me when done. Later, saying things like "make me a Xiaohongshu carousel" will trigger this skill. Paste the block above into Claude Code / Cursor / any AI agent with shell access. ### Option 3: Manual CLI ```bash git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill ``` ### How to trigger it Once installed, Claude Code auto-detects the skill. Trigger phrases: - "Make me a Xiaohongshu / Rednote carousel" - "Make me Rednote cards" - "Make a WeChat 21:9 hero + 1:1 share card" - "Generate social cards / magazine-style social cards" - "Turn this article into a tutorial carousel" - "Make a Swiss-style Xiaohongshu review / IKB-style cards" ## Workflow The skill is a structured workflow. The agent walks through 7 steps: 1. **Intake** — capture 4 things: target platform / style / source content / user images. When no images are available, present A/B/C once (shoot your own / AI generate / source online); don't re-pitch 2. **Style & Theme** — pick Editorial or Swiss, then pick one of 10 theme presets. Custom hex values are not allowed 3. **Layout Selection** — pick / paste / adapt copy from the 28 layout skeletons. 16 Editorial / 12 Swiss 4. **Asset Prep** — source images (Unsplash / Pexels / Flickr CC / Wallhaven / direct search), download locally + write `SOURCES.md`; ask whether to credit sources 5. **Compose & Render** — copy seed template → replace `` → `node render.mjs` 6. **Deliver & Review** — show PNGs first, ask "look at them yourself, or want me to run the validator?" — does not auto-validate 7. **Iterate** — apply user feedback, tweak inline styles or swap layouts / images, re-render Full spec in [`SKILL.md`](./SKILL.md). Deep details in the matching `references/*.md`. ## Validator ```bash node validate-social-deck.mjs path/to/task-dir ``` 6 rules, based on Playwright real-render measurement, not static scanning: - **R1** Overflow — any section overflowing `.poster` fails immediately - **R2** Type Caps — `.h-xl` / `.h-display` size + weight combinations exceeding seed definitions - **R3** Footer Collision — content pressing into the bottom footer / page-number - **R4** 4-Band Density — 1440-tall canvas split into 4 horizontal bands; each must hold content or have a stated reason for whitespace - **R5** Frame Overflow — `.frame-img` / `.frame-shot` children overflowing the frame - **R6** Swiss Identity — Swiss templates with inline `font-weight >= 700` warn (violates "bigger means thinner") `SKILL.md` Step 7 explicitly states **the validator does not auto-run** — wait for the user to look at the images first, saving tens of seconds per round. ## Theme presets Pick from [`references/theme-presets.md`](./references/theme-presets.md). **Custom hex values are not allowed** — protecting the aesthetic matters more than freedom of choice. ### Editorial (6) | Theme | Tones | Best for | |-------|-------|----------| | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea` | General default, commercial topics, when in doubt | | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5` | Tech, research, AI, technical writing | | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8` | Nature, sustainability, outdoors, non-fiction | | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7` | Nostalgia, humanities, reading, literature | | 🌙 **Dune** | `#1f1a14` / `#f0e6d2` | Art, design, creative, fashion | | ⚫ **Midnight Ink** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Game key art / night scenes / cinematic covers / Black Myth · Elden Ring-style dark themes | ### Swiss (4) | Theme | Anchor | Best for | |-------|--------|----------| | 🔵 **IKB Klein Blue** | `#002FA7` | General default, commercial launches, AI products, frameworks | | 🟡 **Lemon** | `#FFD500` | Youth, sports, retail, consumer, Y2K | | 🟢 **Lemon Green** | `#C5E803` | Eco, health, Gen Z, green brands | | 🟠 **Safety Orange** | `#FF6B35` | Alerts, news, industrial, energetic themes | To switch themes, just replace the `
` attribute on the seed template; all CSS resolves through `var(--...)`. ## Directory ``` guizang-social-card-skill/ ├── SKILL.md ← Main skill file: 7-step workflow ├── README.md ← Chinese README ├── README.en.md ← This file ├── HANDOFF.md ← Handoff doc: facts + version history ├── PRODUCT.md ← Product doc: thinking + decisions + roadmap ├── validate-social-deck.mjs ← Playwright layout validator ├── assets/ │ ├── template-editorial-card.html ← Editorial seed (6 themes / 3 canvases) │ ├── template-swiss-card.html ← Swiss seed (4 accents / 3 canvases) │ ├── magazine-bg-webgl.js ← WebGL ink-flow background │ └── screenshot-backgrounds/ ← 9 screenshot stage backgrounds (WebP) │ ├── style-a/ ← 5 Editorial │ └── style-b/ ← 4 Swiss └── references/ ├── platform-specs.md ← Platform × resolution × naming ├── style-system.md ← Hard rules and anti-patterns for both styles ├── theme-presets.md ← All 10 palettes in detail ├── layout-recipes.md ← 28 layout skeletons (M01-M16 + S01-S12) ├── components.md ← Type / cards / spacing / icons ├── background-systems.md ← Ink flow / grid / paper layers ├── portrait-fill.md ← Whitespace strategy for the 3:4 board ├── content-planning.md ← Hooks / page splits / copy compression ├── category-cookbook.md ← 11 Xiaohongshu category routing table ├── image-overlay.md ← Full-bleed image mask + face safety rules ├── screenshot-treatment.md ← `.frame-shot` utilities + screenshot beautification ├── map-component.md ← `.map-block` MapLibre map ├── title-shortener.md ← Short-title strategy for the 1:1 cover ├── production-workflow.md ← Playwright render pipeline └── qa-checklist.md ← Quality checklist ``` ## Core design principles 1. **Restraint over loudness** — restrained palettes stand out in a saturated feed 2. **Structure over decoration** — type / contrast / grid carries the hierarchy, not shadows or cards 3. **Layouts over freedom** — pick first, adapt later; do not invent pages outside the 28 skeletons 4. **User images first** — at intake, present A/B/C once; do not re-pitch shooting their own 5. **Mask + avoid** — full-bleed images always carry a mask; text drop zones must clear the subject (faces / products / text-dense regions) 6. **Bigger means thinner** — Swiss `.h-xl` size goes up → weight must come down. Editorial follows the same rule 7. **No auto-validation** — let the user look first, then ask before validating; saves tens of seconds per round 8. **A skill is a product, not a prompt** — has PRODUCT.md, version numbers, CHANGELOG, capability boundaries 9. **Local tests stay out of git** — all demos / smoke tests live under `local-tests/`, gitignored ## Visual references - *Monocle* / *Kinfolk* / *Cereal* magazine layouts and letter spacing - Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style grid systems - Apartamento / The Gentlewoman image-to-text ratios and human portraiture - Restrained-wins-the-feed samples from Xiaohongshu / Rednote - Guizang's social card practice ## Roadmap - More smoke tests for type-cap edge cases under long Editorial content - More Swiss data layouts (additional chart skeletons) - Post-image-generation: actively ask whether to do local fixes / regenerate the whole image - More category-specific recommended layout packs (currently 7 of 11 are end-to-end strong) - Marketplace-ready WorkBuddy version ## Contributing Bugs, layout issues, new layout requests — Issues and PRs welcome. Priorities for changes: - When editing seed templates, also update `references/components.md`'s correspondence table (sizes / spacing / weights) - When adding layouts, add the full recipe to `references/layout-recipes.md` (copy caps + minimum density) - When adding theme colors, also update the seed template's `[data-theme="..."]` block + `references/theme-presets.md` - When adding Swiss rules, also update the matching rule in `validate-social-deck.mjs` - Mistakes you've hit go into `references/qa-checklist.md` - Tests and demos live under `local-tests/` — do not pollute the skill root ## License AGPL-3.0 © 2026 [op7418](https://github.com/op7418) This project is licensed under **GNU AGPL-3.0**. Key points: 1. **Attribution required** — Retain the copyright notice 2. **Derivatives must be open-sourced** — Any modified version, fork, or redistribution must be released under AGPL-3.0 (or a compatible license), with full source code made available 3. **Network use is distribution** — Even if you only run a modified version as a SaaS / web service without distributing the code, you must still publish the source (this is what makes AGPL stricter than GPL) 4. **No closed-source, proprietary, or paid-only distribution** Full terms in [`LICENSE`](./LICENSE). ## FAQ ### What is the Guizang Social Card Skill? The Guizang Social Card Skill is an agent skill for Claude Code, Codex, and similar coding-agent environments that generates Xiaohongshu carousels and WeChat cover pairs from various content inputs like articles, notes, or photos, using distinct visual design systems. ### What kind of content can I use to generate social cards? You can use articles, copy, screenshots, product notes, subtitles, or photos as source content for generating social cards. The skill adapts to various inputs to create visually appealing outputs. ### What are the two visual systems available for social card generation? The skill offers two visual systems: 'Editorial' for storytelling, lifestyle, and narrative content, and 'Swiss International' for product reviews, data, frameworks, and tutorials, characterized by a grid-first approach. ### Can I use custom colors for my social cards? No, custom hex values are not allowed. The skill provides 10 theme presets (6 Editorial, 4 Swiss) to maintain visual cohesion and quality. You can switch themes by updating the data-theme attribute on the seed template. ### How do I install the Guizang Social Card Skill? You can install it using \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` or by cloning the repository into your agent's skills directory. ### Does the skill support English content? Yes, the skill supports English content. Both Editorial (Playfair Display + Noto Serif) and Swiss (Inter + Helvetica) fonts cover Chinese and English, and the layout skeletons are language-agnostic.