guizang-social-card-skill
Generate Guizang-style social card image sets, Live Photo motion cards, material-first Live Photo puzzle layouts, triple Live Photo collages, long-video-to-Live-Photo treatments, and WeChat official account cover pairs from articles, scripts, screenshots, product notes, subtitles, photos, or user-supplied videos. Use when the user asks for 小红书图文, Rednote/Xiaohongshu images, social cards, carousel images, 3:4 covers, Live Photo, 实况照片, 单视频实况拼图, 二宫格实况拼图, 三连实况拼图, 四宫格实况拼图, 微信公众号封面, WeChat 21:9 + 1:1 covers, Swiss Style, or magazine-style social images.
1How It Works & Mechanism
7-step workflow: Intake (ask only for information that changes the result) → extract story into page plan → select style mode and theme → arrange pages → duplicate seed template → render and inspect → deliver. Deliverables are a 'set of card images' rather than a single poster.
### 1. Intake Gather only the missing information that changes the output:
Two mutually exclusive visual systems: Editorial Magazine × E-ink (serif titles + paper/ink texture + ledger/margin notes/hero image wells) and Swiss International (Inter, ultra-thin divider lines, single high-saturation accent color, card matrix/KPI towers/bar charts); only one system is used per deliverable.
Pick one mode per package. **The two systems are not bound to specific content types** — what changes is the visual stance, not which topic you can talk about.
No hand-coded HTML from scratch: Start by copying from two seed templates (template-editorial-card.html for Editorial, template-swiss-card.html for Swiss) and modify only the `<!-- POSTERS_HERE -->` block to prevent mixing class systems.
- Editorial Magazine × E-ink → copy `assets/template-editorial-card.html` into the task folder as `index.html`.
Rendering and export rely on a local toolchain: Export `.poster` / `.cover` nodes one by one using Playwright or browser screenshot tools, followed by automated checks using the built-in validator.
Use Playwright or a browser screenshot tool to export each `.poster` or `.cover` node.
Nine machine-verifiable quality rules (overflow adaptation, footer collision, Swiss font weights, minimum font size, 4-strip density, title line limit, figure default margin drift, visual boundary/bottom whitespace, title-to-body spacing); returns exit code 1 on FAIL.
Keep `node validate-social-deck.mjs <task-dir>` available for auto-check passes. It checks overflow (R1), footer collision (R2), Swiss bold display (R3), minimum font size (R4), 4-band density (R5), `.h-xl` line caps (R6), browser-default figure margin drift (R7), visual bounds / bottom whitespace (R8), and title-to-content gaps (R9). Exit code 1 on any FAIL — fix before final delivery when auto-check is requested.
Image sourcing follows a 'fetch first, disclose later' approach: explicitly avoids pre-filtering sources by guessed licenses, pulling images sequentially from five royalty-free stock pools (Unsplash / Pexels / Flickr CC pool / Wallhaven / direct search), presenting sources to the user afterward to decide on attribution.
Policy: **grab first, disclose after, let the user decide on attribution.**
Image acquisition explicitly uses WebFetch or curl to download into the task directory assets/, specifying a source order that prioritizes Pexels for Chinese keywords.
- Use WebFetch or `curl` to download the image into the task folder's `assets/` directory.
The Live Photo branch converts static cards into 'video wells': first extracts the initial frame as a static preview check, renders paired MOVs according to platform duration (5s for Xiaohongshu, 3s for Official Accounts), and packages them into a .pvt bundle using makelive for AirDrop testing on iPhone.
Render the paired MOV at the platform duration: `5s` for Xiaohongshu, `3s` for WeChat Official Account.
Inverted delivery cadence: By default, images are presented to the user first; the validator is run only upon explicit user request (as each run takes several minutes).
**Show user first, validate on request.**
Task outputs must reside within the task directory (default: local-tests/<slug>/); generating scattered files like social-card-*/livephoto-*/wechat-* in the skill root directory is strictly prohibited.
Generated work must live in a task folder, not in the skill root.
Styles and rules are codified into 16 reference documents (platform specs, style systems, theme presets, layout recipes, component specs, background systems, portrait filling, content planning, production workflows, live photos, text-on-image, screenshot handling, map components, title shortening, classification manual, QA checklist) and loaded on demand.
## 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/live-photo-production.md` when the user asks for Live Photo / 实况照片 / 三连实况拼图, supplies video assets for a social card, or wants Xiaohongshu / WeChat motion-card delivery. It covers information budget, single vs triple Live Photo, long-video intake, and platform publishing reminders. - `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 — picks `.frame-shot` over `.frame-img`, sets corners/shadow/bg/inset, decides 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 / 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 — derives the 1:1 short title from the long one (5-step extraction, 4 patterns, anti-patterns, sizing on `.poster.square`). - `references/category-cookbook.md` to route a user-named Rednote category (旅行 / 职场 / 游戏 / 影视 / 彩妆 / 美食 / 穿搭 / 家居 / 健身 / 情感 / 推荐) to applicable recipes and to confirm scope. - `references/qa-checklist.md` before delivering final images.
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | 免版税图库检索与下载（Unsplash） |
| network | 免版税图库检索与下载（Pexels，支持中文关键词） |
| network | Flickr CC 授权池检索 |
| network | Wallhaven 壁纸检索 |
| api | Mapbox Static Images API（用户自备 access token） |
| package | playwright（npm，校验器与渲染依赖） |
| package | makelive（PyPI，经 uvx 运行，打包 .pvt） |
| cli | ffmpeg / ffprobe（抽帧、拼接、contact sheet） |
| cli | curl / WebFetch（下载图库图片） |
4Recommended Governance & Evidence
- scripts/: Local script or command execution: validate-social-deck.mjs (Node + playwright chromium, renders and measures task HTML locally)
- 网络端点: Declared external network access: Execution phase (active agent fetch): https://unsplash.com/s/photos/<keyword>, https://www.pexels.
- 本地工作目录: File I/O and artifact output: Task directory (default local-tests/<slug>/, or user-specified path): index.html, assets under assets/, rendered images under output/
5Second-Pass Verification
- [ok] 图库端点属执行期抓取（判黄依据） — SKILL.md「Web-Sourced Images (fallback when user has none)」段列出五个来源与 URL，并给出执行命令「Use WebFetch or `curl` to download the image into the task folder's `assets/` directory.」——是 agent 主动抓取，非仅产物引用。
- [ok] 模板 CDN 属产物期引用（不判级） — template-swiss-card.html 引用 https://fonts.googleapis.com/... 与 https://unpkg.com/lucide@latest/dist/umd/lucide.min.js，template-editorial-card.html 引用 fonts.googleapis.com/fonts.gstatic.com——均发生在浏览器渲染产物时，按批4 口径只写 reason/risks。
- [ok] Mapbox token 的性质 — map-component.md 中 URL 形如 `...&access_token=YOUR_TOKEN`，为使用者自备占位；skill 不读环境变量、不读配置文件，故不算凭证读取。
- [ok] 脚本依赖与外部命令 — package.json dependencies 仅 playwright ^1.60.0，scripts 定义 test:docs 与 validate；make-video-contact-sheet.py 用 subprocess 调 ffprobe/ffmpeg；package-live-photo.py 导入 makelive（文档要求 uvx --from 'makelive==0.7.0'）；validate-social-deck.mjs `import { chromium } from "playwright"`。
- [ok] references 完整性 — SKILL.md 列出的 16 份 references（platform-specs / style-system / theme-presets / layout-recipes / components / background-systems / portrait-fill / content-planning / production-workflow / live-photo-production / image-overlay / screenshot-treatment / map-component / title-shortener / category-cookbook / qa-checklist）在仓库中全部存在，无死引用。
- [ok] 校验器规则与 SKILL.md 描述一致 — validate-social-deck.mjs 头注释的 R1-R9 与 SKILL.md「It checks overflow (R1)…title-to-content gaps (R9). Exit code 1 on any FAIL」逐条对应。
- [ok] 产物放置纪律 — SKILL.md「Generated work must live in a task folder, not in the skill root.」+ AGENT.md「不要把一次性的生成案例、渲染输出、临时素材、调试脚本或下载图片直接放在 Skill 根目录。」两处一致，且 .gitignore 忽略 local-tests/。
- [ok] 版权处理流程 — 「Policy: grab first, disclose after, let the user decide on attribution.」+ 抓后模板「⚠️ 版权未经核实。请你判断是否可用。」+ SOURCES.md 溯源要求；SKILL.md 明确「we do not pull from paid stock sites（视觉中国 / Getty / 站酷海洛等）」。
6Verdict & Scenarios
e86ce5a878f51bd8…