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

Workflow

1. Intake — platform, style, content, images
2. Style Selection — Editorial or Swiss, pick theme
3. Layout — Choose from 28 recipes or magazine templates
4. Asset Prep — Source images (Unsplash/Pexels/user)
5. Compose — HTML + CSS in single file
6. Render — node render.mjs → PNG
7. 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.