skills/jimliu/baoyu-skills/baoyu-cover-image

baoyu-cover-image

SKILL.md

Cover Image Generator

Generate hand-drawn style cover images for articles with multiple style options.

Usage

# From markdown file (auto-select style based on content)
/baoyu-cover-image path/to/article.md

# Specify a style
/baoyu-cover-image path/to/article.md --style blueprint
/baoyu-cover-image path/to/article.md --style warm
/baoyu-cover-image path/to/article.md --style dark-atmospheric

# Without title text
/baoyu-cover-image path/to/article.md --no-title

# Combine options
/baoyu-cover-image path/to/article.md --style minimal --no-title

# From direct text input
/baoyu-cover-image
[paste content or describe the topic]

# Direct input with style
/baoyu-cover-image --style playful
[paste content]

Options

Option Description
--style <name> Specify cover style (see Style Gallery below)
--aspect <ratio> Aspect ratio: 2.35:1 (cinematic, default), 16:9 (widescreen), 1:1 (social)
--lang <code> Output language for title text (en, zh, ja, etc.)
--no-title Generate cover without title text (visual only)

Style Gallery

Style Description
elegant (Default) Refined, sophisticated, understated
flat-doodle Bold outlines, pastel colors, cute rounded shapes
blueprint Technical schematics, engineering precision
bold-editorial Magazine cover impact, dramatic typography
chalkboard Black chalkboard, colorful chalk drawings
dark-atmospheric Cinematic dark mode, glowing accents
editorial-infographic Magazine explainer, visual storytelling
fantasy-animation Ghibli/Disney inspired, whimsical charm
intuition-machine Technical briefing, bilingual labels
minimal Ultra-clean, zen-like, focused
nature Organic, calm, earthy
notion Clean SaaS dashboard, productivity styling
pixel-art Retro 8-bit, nostalgic gaming aesthetic
playful Fun, creative, whimsical
retro Halftone dots, vintage badges, classic
sketch-notes Hand-drawn, educational, warm
vector-illustration Flat vector, black outlines, retro colors
vintage Aged paper, historical, expedition style
warm Friendly, approachable, human-centered
watercolor Soft hand-painted, natural warmth

Detailed style definitions: references/styles/<style>.md

Auto Style Selection

When no --style is specified, the system analyzes content to select the best style:

Content Signals Selected Style
Architecture, system design, engineering blueprint
Product launch, keynote, marketing, brand bold-editorial
Education, classroom, tutorial, teaching chalkboard
Entertainment, creative, premium, cinematic dark-atmospheric
Technology explainer, science, research editorial-infographic
Storytelling, children, fantasy, magical fantasy-animation
Technical docs, academic, bilingual intuition-machine
Personal story, emotion, growth, life warm
Simple, zen, focus, essential minimal
Fun, easy, beginner, casual playful
Nature, eco, wellness, health, organic nature
Pop culture, 80s/90s nostalgia, badges retro
Product, SaaS, dashboard, productivity notion
Productivity, workflow, app, tools, cute flat-doodle
Gaming, retro tech, developer, 8-bit pixel-art
Educational, tutorial, knowledge sharing sketch-notes
Creative proposals, brand, toy-like vector-illustration
History, exploration, heritage, biography vintage
Lifestyle, travel, food, personal watercolor
Business, professional, strategy, analysis elegant

File Management

Output Directory

Each session creates an independent directory named by content slug:

cover-image/{topic-slug}/
├── source-{slug}.{ext}    # Source files (text, images, etc.)
├── prompts/
│   └── cover.md
└── cover.png

Slug Generation:

  1. Extract main topic from content (2-4 words, kebab-case)
  2. Example: "The Future of AI" → future-of-ai

Conflict Resolution

If cover-image/{topic-slug}/ already exists:

  • Append timestamp: {topic-slug}-YYYYMMDD-HHMMSS
  • Example: ai-future exists → ai-future-20260118-143052

Source Files

Copy all sources with naming source-{slug}.{ext}:

  • source-article.md (main text content)
  • source-logo.png (image from conversation)

Multiple sources supported: text, images, files from conversation.

Workflow

Step 1: Analyze Content

  1. Save source content (if not already a file):

    • If user provides a file path: use as-is
    • If user pastes content: save to source.md in target directory
  2. Extract key information:

    • Main topic: What is the article about?
    • Core message: What's the key takeaway?
    • Tone: Serious, playful, inspiring, educational?
    • Keywords: Identify style-signaling words
  3. Language detection:

    • Detect source language from content
    • Detect user language from conversation context
    • Note if source_language ≠ user_language (will ask in Step 3)

Step 2: Determine Options

  1. Style selection:

    • If --style specified, use that style
    • Otherwise, scan content for style signals and auto-select 3 candidates
    • Default to elegant if no clear signals
  2. Aspect ratio:

    • If --aspect specified, use that ratio
    • Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)

Step 3: Confirm Options

Purpose: Let user confirm all options in a single step before generation.

IMPORTANT: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.

Determine which questions to ask:

Question When to Ask
Style Always (required)
Aspect ratio Always (offer common options)
Language Only if source_language ≠ user_language

Present options (use AskUserQuestion with all applicable questions):

Question 1 (Style) - always:

  • Style A (recommended): [style name] - [brief description]
  • Style B: [style name] - [brief description]
  • Style C: [style name] - [brief description]
  • Custom: Provide custom style reference

Question 2 (Aspect) - always:

  • 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic
  • 16:9 Widescreen - standard video/presentation
  • 1:1 Square - social media optimized

Question 3 (Language) - only if source ≠ user language:

  • [Source language] (matches content)
  • [User language] (your preference)

Language handling:

  • If source language = user language: Just inform user (e.g., "Title will be in Chinese")
  • If different: Ask which language to use for title text

Step 4: Generate Cover Concept

Create a cover image concept based on selected style:

Title (if included, max 8 characters):

  • Distill the core message into a punchy headline
  • Use hooks: numbers, questions, contrasts, pain points
  • Skip if --no-title flag is used

Visual Elements:

  • Style-appropriate imagery and icons
  • 1-2 symbolic elements representing the topic
  • Metaphors or analogies that fit the style

Step 5: Create Prompt File

Save prompt to prompts/cover.md with confirmed options.

All prompts are written in the user's confirmed language preference.

Prompt Format:

Cover theme: [topic in 2-3 words]
Style: [selected style name]
Aspect ratio: [confirmed aspect ratio]

[If title included:]
Title text: [8 characters or less, in confirmed language]
Subtitle: [optional, in confirmed language]

Visual composition:
- Main visual: [description matching style]
- Layout: [positioning based on title inclusion and aspect ratio]
- Decorative elements: [style-appropriate elements]

Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]

Style notes: [specific style characteristics to emphasize]

[If no title:]
Note: No title text, pure visual illustration only.

Step 6: Generate Image

Image Generation Skill Selection:

  1. Check available image generation skills
  2. If multiple skills available, ask user to choose

Generation: Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.

Step 7: Output Summary

Cover Image Generated!

Topic: [topic]
Style: [style name]
Aspect: [aspect ratio]
Title: [cover title] (or "No title - visual only")
Language: [confirmed language]
Location: [output path]

Preview the image to verify it matches your expectations.

Notes

  • Cover should be instantly understandable at small preview sizes
  • Title (if included) must be readable and impactful
  • Visual metaphors work better than literal representations
  • Maintain style consistency throughout the cover
  • Image generation typically takes 10-30 seconds
  • Title text uses user's confirmed language preference
  • Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media

Extension Support

Custom styles and configurations via EXTEND.md.

Check paths (priority order):

  1. .baoyu-skills/baoyu-cover-image/EXTEND.md (project)
  2. ~/.baoyu-skills/baoyu-cover-image/EXTEND.md (user)

If found, load before Step 1. Extension content overrides defaults.

Weekly Installs
266
Install
$ npx skills add jimliu/baoyu-skills --skill "baoyu-cover-image"
Installed on
claude-code233
opencode162
antigravity145
gemini-cli141
cursor120
codex97