Merged Social + Poster Skill
A combined skill merging guizang-social-card (Playwright rendering, 28 layouts, 10 themes) with magazine-poster (article illustrations, magazine-style HTML).
Capabilities
| Feature | Source | Description |
|---|---|---|
| Playwright → PNG | guizang | 1080×1440 / 1080×1080 / 2100×900 |
| 28 Layout Recipes | guizang | Editorial M01-M16 + Swiss S01-S12 |
| 10 Theme Presets | guizang | 6 Editorial + 4 Swiss |
| Magazine Templates | magazine-poster | Article illustration system |
| Validation | guizang | 6-rule QA checklist |
Workflow
- Intake — platform, style, content, images
- Style Selection — Editorial or Swiss, pick theme
- Layout — Choose from 28 recipes or magazine templates
- Asset Prep — Source images (Unsplash/Pexels/user)
- Compose — HTML + CSS in single file
- Render —
node render.mjs→ PNG - QA — Run
validate-social-deck.mjs(optional)
Quick Start
帮我基于这篇文章做一套瑞士风小红书图文，5张，IKB蓝。
做一个西安文旅的杂志风海报，森林墨主题。
把这篇产品测评做成公众号封面对：21:9 + 1:1。
Theme Presets
Editorial (6)
- Ink Classic
#0a0a0b/#f1efea— 通用默认 - Indigo Porcelain
#0a1f3d/#f1f3f5— 科技/AI - Forest Ink
#1a2e1f/#f5f1e8— 自然/户外 - Kraft Paper
#2a1e13/#eedfc7— 怀旧/人文 - Dune
#1f1a14/#f0e6d2— 艺术/设计 - Midnight Ink
#0e0d0c/#ece2cf— 暗色/游戏
Swiss (4)
- IKB Klein Blue — 科技/产品
- Lemon — 数据/教程
- Lemon Green — 健康/运动
- Safety Orange — 警示/活力
File Structure
merged-skill/
├── SKILL.md # This file
├── assets/
│ ├── template-editorial-card.html
│ ├── template-swiss-card.html
│ └── magazine-templates/ # From magazine-poster
├── references/
│ ├── layout-recipes.md
│ ├── theme-presets.md
│ ├── style-system.md
│ └── ...
├── render.mjs # Playwright renderer
└── validate-social-deck.mjs # QA validator
Rendering
node render.mjs path/to/task-dir
Outputs PNG files to output/ directory.
Validation
node validate-social-deck.mjs path/to/task-dir
6 rules: overflow, type caps, footer collision, 4-band density, frame overflow, Swiss identity.