---
name: guizang-social-card-skill
description: Generate Guizang-style social card image sets and WeChat cover pairs from articles, scripts, screenshots, product notes, subtitles, or photos. Use this skill for Rednote/Xiaohongshu carousels, social cards, 3:4 covers, WeChat 21:9 + 1:1 covers, Swiss Style, or magazine-style social visuals.
---

# Guizang Social Card Skill

Create polished social card packages for Xiaohongshu/Rednote, WeChat Official Account, article covers, and platform thumbnails.

This skill is self-contained. It borrows visual principles from the Guizang PPT style system, but it must not edit the original PPT skill, its templates, or its references. If the original PPT skill is available, read it for reference only. Put all generated work in the current project or in the user-requested output folder.

## What to produce

Use this skill for:

- Social card and carousel image sets: cover plus content pages, especially Xiaohongshu/Rednote 3:4.
- WeChat Official Account cover pairs: one `21:9` main cover plus one `1:1` square cover, composed together in the same HTML for visual checking.
- Screenshot-heavy product posts, article covers, tutorial carousels, outdoor and lifestyle notes, and AI/product update explainers.
- Social images that need Guizang-style Swiss or editorial magazine layouts.

Do not use this skill for:

- Full slide decks or horizontal PPT websites. Use the PPT skill for that.
- Long-form video generation. Use a video skill for that.
- Pure image editing with no layout or article extraction requirement.

### Rednote category capability

The 11 most common Rednote categories fall into three buckets. See `references/category-cookbook.md` for recipe-by-recipe routing.

**Strong end-to-end**: text, structure, and image story are all in scope.

- Travel, workplace, recommendations after specifying a subtype.

**Strong on text and structure; images must come from the user or a sourced library:**

- Games, film/TV, food recipes, makeup tutorials, fitness, home, and curated fashion picks.

**Outside scope**: push back honestly rather than promise a result.

- Food-photography showcase posts.
- Daily OOTD body shots; we cannot generate or simulate those.
- Dreamcore or aesthetic-light styling, which clashes with both Editorial and Swiss.
- Y2K, princess-core, gothic lolita, kawaii-decorated aesthetics.
- Pure photography showcase posts where the image is the entire deliverable.

If a request falls in the third bucket, call it out at intake. Do not silently retrofit a layout that misses the user's intent.

## Core principle

Expression comes first. The goal is not to squeeze text into posters; it is to turn the source into a clear visual argument.

For each page, decide:

- What should the viewer understand in one glance?
- What evidence, screenshot, or image supports it?
- Which words must be large, and which can become captions or metadata?
- What can be removed because it belongs in the post body, not the image?

## Required references

Read these files as needed:

- `references/platform-specs.md` for exact ratios, output sizes, and naming.
- `references/style-system.md` for Guizang editorial and Swiss visual rules.
- `references/theme-presets.md` when choosing electronic-magazine palettes or Swiss accent palettes.
- `references/layout-recipes.md` when selecting carousel/social-card/WeChat page structures.
- `references/components.md` for the shared component spec: font stacks, type scale, minimum readable sizes, Chinese title length bands, Swiss card-fill mutual-exclusion rule, image-container ratio classes, spacing tokens, and Lucide icon rules.
- `references/background-systems.md` when building electronic-magazine WebGL/ink/paper backgrounds.
- `references/portrait-fill.md` when adapting layouts to 3:4 and avoiding under-filled vertical space.
- `references/content-planning.md` for cover hooks, page breakdown, and copy compression.
- `references/production-workflow.md` for HTML/CSS rendering and image handling.
- `references/image-overlay.md` whenever text sits on top of a photo: photo qualification, localized tint fallback, and face / subject avoidance via multimodal subject mapping.
- `references/screenshot-treatment.md` when the user supplies an app / web / code / dashboard screenshot. Use `.frame-shot` over `.frame-img`, set corners/shadow/bg/inset, and decide on `.device-browser` or `.device-phone` chrome.
- `references/map-component.md` when the content has spatial relationships (travel route, store locations, walking tour). Real routes default to Mapbox Static or OSM static tiles; schematic SVG is only for conceptual or illustrative maps. Pins are HTML overlays; never use live JS maps.
- `references/title-shortener.md` when the task is a WeChat 21:9 + 1:1 cover pair, or any cross-platform reuse. It derives the 1:1 short title from the long one.
- `references/category-cookbook.md` to route a user-named Rednote category and confirm scope.
- `references/qa-checklist.md` before delivering final images.
