Gbro Social Cover Generator

gbro Social Cover Generator

Skill by ara.so — Design Skills collection.

An AI agent skill that reads article content, conducts a three-round interactive interview, and outputs production-ready cover image prompts. Fixed 3:4 vertical format with 10 built-in composition styles, face consistency support, and automatic title generation.

Based on oh-my-cover-design (MIT) with compressed workflow, style templates, few-shot examples, and first-run configuration guide.

Installation

git clone https://github.com/pyang5166/gbro-cover-design.git \
  ~/.claude/skills/gbro-cover-design

Important: The skill requires the complete repository structure. The references/ directory contains:

• style-XX-*.md — 10 composition style templates
• examples.md — 8 full example prompts for few-shot learning
• Style templates are loaded on-demand based on user selection

Project Structure

gbro-cover-design/
├── SKILL.md              # Main skill definition
├── config.md             # User configuration (created on first run)
├── assets/
│   ├── my-face.png       # Default face reference (user-provided)
│   └── examples/         # Sample output images
└── references/
    ├── style-01-dark-gradient.md
    ├── style-02-flat-color.md
    ├── style-03-product-visual.md
    ├── style-04-comparison-card.md
    ├── style-05-minimal-whitespace.md
    ├── style-06-poster-collage.md
    ├── style-07-side-portrait.md
    ├── style-08-back-view.md
    ├── style-09-partial-appearance.md
    ├── style-10-frontal-gaze.md
    └── examples.md

First-Run Configuration

On first use, the skill guides the user through setup (no API keys required):

1. Face Reference Image

   • Prepare a clear front-facing photo
   • Save to assets/my-face.png as default reference
   • Alternative: upload per-session

2. Image Generation Model

   • Confirm model supports multi-reference input
   • Compatible: 即梦/Seedream 4.0, Nano Banana, GPT-Image
   • Required for face consistency feature

Configuration is saved to config.md and not asked again.

Workflow

The skill executes a three-round interactive interview:

Round 1: Style & Title

• Agent analyzes article content
• Recommends composition style based on content type
• User selects from 10 styles (see below)
• User approves or modifies suggested title

Round 2: Reference Assets

• Face reference image (uses assets/my-face.png or user upload)
• Additional assets: product screenshots, UI mockups, brand elements
• All uploaded as reference images to the generation model

Round 3: Fine Details

• Facial expression (e.g., confident, thoughtful, energetic)
• Background color tone (e.g., warm gradient, cool blue, vibrant)
• Font style (e.g., bold sans-serif, modern geometric)
• Text color (e.g., white with shadow, gradient gold)
• Any unspecified details left to model discretion

After three rounds, the skill outputs a complete, production-ready prompt.

10 Composition Styles

Each style template includes:

• Composition guidelines
• Safe zone definitions (3:4 ratio)
• Lighting and color recommendations
• Typography placement rules

Example Usage

Basic Workflow

# User provides article content
"Generate a cover for this article: [article text]"

# Round 1: Style selection
Agent: "Based on your content about AI productivity tools, I recommend:
1. Product Visual (style-03) - showcases UI screenshots
2. Dark Gradient (style-01) - professional tech aesthetic
Which style do you prefer?"

User: "Style 3"

Agent: "Suggested title: '3 AI Skills Replace an Entire Marketing Team'
Approve or modify?"

User: "Approved"

# Round 2: Assets
Agent: "Upload reference images:
1. Your face (or use default assets/my-face.png)
2. Product screenshots or additional assets"

User: [uploads 2 images]

# Round 3: Details
Agent: "Final details:
- Expression? (e.g., confident, excited)
- Background tone? (e.g., tech blue gradient)
- Font style? (e.g., bold modern sans)
- Text color? (e.g., white with glow)"

User: "Confident, cool blue gradient, bold sans, white text"

# Output
Agent: [generates complete prompt with all specifications]

Output Format

The skill produces prompts in this structure:

[COMPOSITION STYLE]
3:4 vertical format, [specific layout from selected style template]

[SUBJECT & FACE CONSISTENCY]
Main subject: [description maintaining face consistency with reference image 1]
Expression: [user-specified or default]
Pose: [style-specific positioning]

[BACKGROUND & ENVIRONMENT]
Background: [user-specified tone and style template defaults]
Lighting: [style-specific lighting setup]

[TYPOGRAPHY]
Title text: "[user-approved title]"
Font: [user-specified or default]
Color: [user-specified or default]
Placement: [safe zone compliance per style]

[ADDITIONAL ELEMENTS]
[Product screenshots, UI elements, props as specified in round 2]

[REFERENCE IMAGES]
Image 1: [face reference for consistency]
Image 2-N: [additional user assets]

[TECHNICAL SPECS]
Aspect ratio: 3:4 (1080x1440px recommended)
Safe zone: [style-specific margins]
Model: [user's confirmed model from config.md]

Style Template Example

From references/style-03-product-visual.md:

# Style 03: Product Visual

## Composition
- Product screenshot occupies 60-70% of frame
- Portrait positioned in lower-left or upper-right corner
- Portrait size: 25-30% of frame
- Title text in remaining negative space

## Layout Grid (3:4, 1080x1440px)
- Top safe zone: 0-180px (avoid critical elements)
- Product zone: 180-900px (primary focus)
- Portrait zone: overlaps product edge
- Title zone: 900-1440px or integrated overlay
- Side margins: 80px minimum

## Background
- Subtle gradient matching product UI colors
- Or solid color from product brand palette
- Avoid competing with product details

## Typography
- Title: 72-96pt bold sans-serif
- Position: below product or as overlay with transparency
- Shadow/outline for legibility over product

## Lighting
- Soft studio lighting on portrait
- Product receives own lighting (from screenshot)
- Ensure portrait doesn't cast shadow on product

Face Consistency Implementation

The skill maintains face consistency by:

1. Reference Image Processing

   • Uses assets/my-face.png or user upload as Image 1
   • Instructs model to preserve facial features: bone structure, eye shape, nose, mouth proportions
   • Does NOT attempt to preserve clothing, hair style, or background

2. Prompt Structure

   Main subject: [gender], [age range], maintaining exact facial features from reference image 1
   - Bone structure: match reference
   - Eyes: match shape, color, spacing from reference
   - Nose: match proportions from reference
   - Mouth: match shape from reference
   - Hair and clothing: [new description per cover context]
   

3. Compatible Models

   • 即梦/Seedream 4.0
   • Nano Banana
   • GPT-Image
   • Any model supporting multi-image input with feature transfer

Configuration File

config.md is auto-generated on first run:

# gbro-cover-design Configuration

## Face Reference
- Default path: `assets/my-face.png`
- Status: [configured/not-configured]

## Image Generation Model
- Model: [user's model name]
- Multi-reference support: [confirmed/not-confirmed]

## Preferences
- Default style: [style number if user has preference]
- Language: [zh-CN/en-US]

Last updated: [timestamp]

Few-Shot Examples

The skill loads examples from references/examples.md to guide prompt generation. Example structure:

## Example 1: "让AI做我老板"

**Style**: Dark Gradient (style-01)
**Article topic**: AI delegation and productivity

**Full Prompt**:
[complete working prompt that produced assets/examples/01-让AI做我老板.webp]

**Reference Images Used**:
- Image 1: Professional headshot, confident expression
- Image 2: None

**Key Features**:
- Strong visual hierarchy
- High contrast white text on dark gradient
- Portrait centered with slight upward gaze

Troubleshooting

Face Consistency Issues

Problem: Generated face doesn't match reference

• Check: Model supports multi-image input (verify in config.md)
• Fix: Use clear, well-lit front-facing reference photo
• Fix: Ensure reference image is high resolution (min 512x512px)
• Fix: Avoid references with heavy makeup, glasses, or facial hair if not desired in output

Text Legibility Problems

Problem: Title text is hard to read

• Check: Style template's safe zone guidelines
• Fix: Use contrasting background tone
• Fix: Add text shadow or outline in round 3
• Fix: Switch to style with cleaner text placement (style-05 or style-07)

Aspect Ratio Errors

Problem: Generated image is not 3:4

• Fix: Explicitly include "3:4 aspect ratio, 1080x1440px" in final prompt
• Fix: Check if model defaults to square - override in generation settings

Style Template Not Loading

Problem: Skill can't find style template

• Check: Full repository was cloned (not just SKILL.md)
• Fix: Verify references/style-XX-*.md files exist
• Fix: Re-clone repository to correct location

Advanced Usage

Custom Style Templates

Create new styles in references/:

# Create new style file
touch references/style-11-custom-name.md

Template structure:

# Style 11: Custom Name

## Composition
[layout guidelines]

## Layout Grid (3:4, 1080x1440px)
[zone definitions]

## Background
[color/gradient specs]

## Typography
[font, size, placement]

## Lighting
[lighting setup]

## Best For
[content types]

Update skill logic to recognize new style number.

Batch Processing

Process multiple articles:

# Prepare articles in articles/ directory
for article in articles/*.txt; do
  echo "Processing $article"
  # Provide article content to agent
  # Agent runs three-round workflow
  # Save output prompt to prompts/$(basename $article .txt).md
done

Integration with Image Generation

Chain with image generation tools:

# After skill outputs prompt
PROMPT=$(cat output-prompt.md)

# Generate with Seedream CLI (example)
seedream generate \
  --prompt "$PROMPT" \
  --reference assets/my-face.png \
  --reference assets/product-screenshot.png \
  --aspect-ratio 3:4 \
  --output covers/final-cover.png

Environment Variables

The skill itself requires no API keys, but image generation models may need:

# Example for hypothetical model integration
export IMAGE_MODEL_API_KEY="your-key-here"
export IMAGE_MODEL_ENDPOINT="https://api.example.com/generate"

Set in .env or shell profile, never hardcode in skill files.

Best Practices

1. Reference Image Quality

   • Use 1000x1000px minimum for face reference
   • Ensure even lighting, neutral background
   • Front-facing, clear facial features

2. Style Selection

   • Match style to content tone (professional vs. casual)
   • Product-heavy content → style-03
   • Emotional content → style-10 or style-08
   • Complex multi-topic → style-06

3. Title Guidelines

   • Keep under 15 characters (Chinese) or 30 characters (English)
   • Use action words or numbers for impact
   • Verify readability against background in round 3

4. Asset Preparation

   • Product screenshots: crop to key features, remove clutter
   • Transparent PNGs work best for layering
   • Max 4-5 reference images total to avoid confusion

License

MIT License - Based on oh-my-cover-design by feitangyuan.