Social Cover Image

Social Cover Image Generator

Generate elegant social cover images with 5-dimensional customization.

Usage

bashCopy code
# 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

Platform Aspect Guide

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

Examples:

bashCopy code
# 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

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}/

Copy code
<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

Copy code
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

Copy code
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:

bashCopy code
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

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

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:

   bashCopy code
   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:

     Copy code
     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:

     bashCopy code
     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

Copy code
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

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