social-cover-image

name	social-cover-image
description	Generates social cover images for articles, banners, and social posts with 5 dimensions (type, palette, rendering, text, mood) combining 10 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create social cover", "make banner", or "make cover".
version	2.0.0

Social Cover Image Generator

Generate elegant social cover images with 5-dimensional customization.

Usage

# Auto-select dimensions based on content
/social-cover-image path/to/article.md

# Quick mode: skip confirmation
/social-cover-image article.md --quick

# Specify dimensions
/social-cover-image article.md --type conceptual --palette warm --rendering flat-vector

# Style presets (shorthand for palette + rendering)
/social-cover-image article.md --style blueprint

# With reference images
/social-cover-image article.md --ref style-ref.png

# Direct content input
/social-cover-image --palette mono --aspect 1:1 --quick
[paste content]

Options

Option	Description
--type <name>	hero, conceptual, typography, metaphor, scene, minimal
--palette <name>	warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone
--rendering <name>	flat-vector, hand-drawn, painterly, digital, pixel, chalk, screen-print
--style <name>	Preset shorthand (see Style Presets)
--text <level>	none, title-only, title-subtitle, text-rich
--mood <level>	subtle, balanced, bold
--font <name>	clean, handwritten, serif, display
--aspect <ratio>	16:9 (default), 2.35:1, 5:2, 4:3, 3:2, 1:1, 3:4
--lang <code>	Title language (en, zh, ja, etc.)
--no-title	Alias for --text none
--quick	Skip confirmation, use auto-selection
--ref <files...>	Reference images for style/composition guidance

Platform Aspect Guide

Use platform-specific aspect ratios when the publication target is known:

Platform	Recommended Ratio	Notes
WeChat article header	2.35:1	Best fit for WeChat public account article covers and blog headers
X header / social banner	5:2	Auto: generates at 2.35:1 with safe-zone prompt, then crops to 5:2 via ImageMagick
General-purpose cover	16:9	Good default for mixed channels, slides, and thumbnails
Square social card	1:1	Best for square-first social placements

Examples:

# WeChat public account article cover
/social-cover-image article.md --aspect 2.35:1

# X article cover (auto generates 2.35:1 + crops to 5:2)
/social-cover-image article.md --aspect 5:2

Five Dimensions

Dimension	Values	Default
Type	hero, conceptual, typography, metaphor, scene, minimal	auto
Palette	warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone	auto
Rendering	flat-vector, hand-drawn, painterly, digital, pixel, chalk, screen-print	auto
Text	none, title-only, title-subtitle, text-rich	title-only
Mood	subtle, balanced, bold	balanced
Font	clean, handwritten, serif, display	clean

Auto-selection rules: references/auto-selection.md

Galleries

Types: hero, conceptual, typography, metaphor, scene, minimal → Details: references/types.md

Palettes: warm, elegant, cool, dark, earth, vivid, pastel, mono, retro, duotone → Details: references/palettes/

Renderings: flat-vector, hand-drawn, painterly, digital, pixel, chalk, screen-print → Details: references/renderings/

Text Levels: none (pure visual) | title-only (default) | title-subtitle | text-rich (with tags) → Details: references/dimensions/text.md

Mood Levels: subtle (low contrast) | balanced (default) | bold (high contrast) → Details: references/dimensions/mood.md

Fonts: clean (sans-serif) | handwritten | serif | display (bold decorative) → Details: references/dimensions/font.md

File Structure

Output directory per default_output_dir preference:

• imgs-subdir (default): {article-dir}/imgs/{article-title}/
• same-dir: {article-dir}/
• independent: cover-image/{topic-slug}/

<output-dir>/
├── source-{slug}.{ext}    # Source files
├── refs/                  # Reference images (if provided)
│   ├── ref-01-{slug}.{ext}
│   └── ref-01-{slug}.md   # Description file
├── prompts/cover.md       # Generation prompt
└── cover.png              # Output image

Slug: 2-4 words, kebab-case. Conflict: append -YYYYMMDD-HHMMSS

Workflow

Progress Checklist

Cover Image Progress:
- [ ] Step 0: Check preferences (config.yaml) ⛔ BLOCKING
- [ ] Step 1: Analyze content + save refs + determine output dir
- [ ] Step 2: Confirm options (6 dimensions) ⚠️ unless --quick
- [ ] Step 3: Create prompt
- [ ] Step 4: Generate image
- [ ] Step 5: Completion report

Flow

Input → [Step 0: Preferences] ─┬─ Found → Continue
                               └─ Not found → First-Time Setup ⛔ BLOCKING → Save config.yaml → Continue
        ↓
Analyze + Save Refs → [Output Dir] → [Confirm: 6 Dimensions] → Prompt → Generate → Complete
                                              ↓
                                     (skip if --quick or all specified)

Step 0: Load Preferences ⛔ BLOCKING

Check config.yaml existence in skill directory:

SKILL_DIR="$(dirname "$(readlink -f "$0")")"  # or known skill path
test -f "${SKILL_DIR}/config.yaml" && echo "found"

The config file is located at: .claude/skills/social-cover-image/config.yaml

Result	Action
Found	Load, display summary → Continue
Not found	⛔ Run first-time setup (references/config/first-time-setup.md) → Save → Continue

CRITICAL: If not found, complete setup BEFORE any other steps or questions.

Step 1: Analyze Content

1. Save reference images (if provided) → references/workflow/reference-images.md
2. Save source content (if pasted, save to source.md)
3. Analyze content: topic, tone, keywords, visual metaphors
4. Deep analyze references ⚠️: Extract specific, concrete elements (see reference-images.md)
   • If references contain people → set usage: direct so model sees reference image, describe character features for stylized preservation (see reference-images.md § Character Analysis)
5. Detect language: Compare source, user input, config.yaml preference
6. Determine output directory: Per File Structure rules

Step 2: Confirm Options ⚠️

Full confirmation flow: references/workflow/confirm-options.md

Condition	Skipped	Still Asked
--quick or quick_mode: true	6 dimensions	Aspect ratio (unless --aspect)
All 6 + --aspect specified	All	None

Step 3: Create Prompt

Save to prompts/cover.md. Template: references/workflow/prompt-template.md

CRITICAL - References in Frontmatter:

• Files saved to refs/ → Add to frontmatter references list
• Style extracted verbally (no file) → Omit references, describe in body
• Before writing → Verify: test -f refs/ref-NN-{slug}.{ext}

Reference elements in body MUST be detailed, prefixed with "MUST"/"REQUIRED", with integration approach.

Step 4: Generate Image

1. Backup existing cover.png if regenerating
2. Use image-gen skill for image generation:

   IMAGE_GEN_SKILL=".claude/skills/image-gen"
   npx -y bun ${IMAGE_GEN_SKILL}/scripts/main.ts \
     --promptfiles prompts/cover.md \
     --image <output_path>/cover.png \
     --ar <ratio> \
     --quality 2k
   

   • image-gen manages its own API keys via ~/.skills/.env
   • Provider auto-detection: Google → OpenAI → DashScope
3. Process references from prompt frontmatter:
   • direct usage → pass via --ref flag to image-gen
   • style/palette → extract traits, append to prompt
4. 5:2 aspect ratio handling (X article cover):
   • Step 3 prompt: Append safe-zone instruction to prompt body:

     CRITICAL LAYOUT CONSTRAINT: All text, titles, and key visual elements MUST be
     placed within the vertical center 70% of the image. Leave the top 15% and bottom
     15% as decorative margins only (background patterns, gradients, or empty space).
     This is required because the image will be cropped to 5:2 aspect ratio.
     

   • Generate at --ar 2.35:1 (closest native ratio to 5:2)
   • Crop to 5:2 with ImageMagick:

     magick <output_path>/cover.png -gravity center -crop "%[fx:w]x%[fx:w*2/5]+0+0" +repage <output_path>/cover.png
     

5. On failure: auto-retry once

Step 5: Completion Report

Cover Generated!

Topic: [topic]
Type: [type] | Palette: [palette] | Rendering: [rendering]
Text: [text] | Mood: [mood] | Font: [font] | Aspect: [ratio]
Title: [title or "visual only"]
Language: [lang] | Watermark: [enabled/disabled]
References: [N images or "extracted style" or "none"]
Location: [directory path]

Files:
✓ source-{slug}.{ext}
✓ prompts/cover.md
✓ cover.png

Image Modification

Action	Steps
Regenerate	Backup → Update prompt file FIRST → Regenerate
Change dimension	Backup → Confirm new value → Update prompt → Regenerate

Composition Principles

• Whitespace: 40-60% breathing room
• Visual anchor: Main element centered or offset left
• Characters: Simplified silhouettes; NO realistic humans
• Title: Use exact title from user/source; never invent

Configuration

User preferences stored in config.yaml within the skill directory (.claude/skills/social-cover-image/config.yaml).

Supports: Watermark | Preferred dimensions | Default aspect/output | Quick mode | Custom palettes | Language

Schema: references/config/preferences-schema.md

References

Dimensions: text.md | mood.md | font.md Palettes: references/palettes/ Renderings: references/renderings/ Types: references/types.md Auto-Selection: references/auto-selection.md Style Presets: references/style-presets.md Compatibility: references/compatibility.md Visual Elements: references/visual-elements.md Workflow: confirm-options.md | prompt-template.md | reference-images.md Config: preferences-schema.md | first-time-setup.md | watermark-guide.md