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 |
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 |
| 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:
- Extract main topic from content (2-4 words, kebab-case)
- 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
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
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
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
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
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:
- Check available image generation skills
- 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):
.baoyu-skills/baoyu-cover-image/EXTEND.md (project)
~/.baoyu-skills/baoyu-cover-image/EXTEND.md (user)
If found, load before Step 1. Extension content overrides defaults.
1---2name: baoyu-cover-image3description: Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article".4---56# Cover Image Generator78Generate hand-drawn style cover images for articles with multiple style options.910## Usage1112```bash13# From markdown file (auto-select style based on content)14/baoyu-cover-image path/to/article.md1516# Specify a style17/baoyu-cover-image path/to/article.md --style blueprint18/baoyu-cover-image path/to/article.md --style warm19/baoyu-cover-image path/to/article.md --style dark-atmospheric2021# Without title text22/baoyu-cover-image path/to/article.md --no-title2324# Combine options25/baoyu-cover-image path/to/article.md --style minimal --no-title2627# From direct text input28/baoyu-cover-image29[paste content or describe the topic]3031# Direct input with style32/baoyu-cover-image --style playful33[paste content]34```3536## Options3738| Option | Description |39|--------|-------------|40| `--style <name>` | Specify cover style (see Style Gallery below) |41| `--aspect <ratio>` | Aspect ratio: 2.35:1 (cinematic, default), 16:9 (widescreen), 1:1 (social) |42| `--lang <code>` | Output language for title text (en, zh, ja, etc.) |43| `--no-title` | Generate cover without title text (visual only) |4445## Style Gallery4647| Style | Description |48|-------|-------------|49| `elegant` (Default) | Refined, sophisticated, understated |50| `blueprint` | Technical schematics, engineering precision |51| `bold-editorial` | Magazine cover impact, dramatic typography |52| `chalkboard` | Black chalkboard, colorful chalk drawings |53| `dark-atmospheric` | Cinematic dark mode, glowing accents |54| `editorial-infographic` | Magazine explainer, visual storytelling |55| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm |56| `intuition-machine` | Technical briefing, bilingual labels |57| `minimal` | Ultra-clean, zen-like, focused |58| `nature` | Organic, calm, earthy |59| `notion` | Clean SaaS dashboard, productivity styling |60| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic |61| `playful` | Fun, creative, whimsical |62| `retro` | Halftone dots, vintage badges, classic |63| `sketch-notes` | Hand-drawn, educational, warm |64| `vector-illustration` | Flat vector, black outlines, retro colors |65| `vintage` | Aged paper, historical, expedition style |66| `warm` | Friendly, approachable, human-centered |67| `watercolor` | Soft hand-painted, natural warmth |6869Detailed style definitions: `references/styles/<style>.md`7071## Auto Style Selection7273When no `--style` is specified, the system analyzes content to select the best style:7475| Content Signals | Selected Style |76|----------------|----------------|77| Architecture, system design, engineering | `blueprint` |78| Product launch, keynote, marketing, brand | `bold-editorial` |79| Education, classroom, tutorial, teaching | `chalkboard` |80| Entertainment, creative, premium, cinematic | `dark-atmospheric` |81| Technology explainer, science, research | `editorial-infographic` |82| Storytelling, children, fantasy, magical | `fantasy-animation` |83| Technical docs, academic, bilingual | `intuition-machine` |84| Personal story, emotion, growth, life | `warm` |85| Simple, zen, focus, essential | `minimal` |86| Fun, easy, beginner, casual | `playful` |87| Nature, eco, wellness, health, organic | `nature` |88| Pop culture, 80s/90s nostalgia, badges | `retro` |89| Product, SaaS, dashboard, productivity | `notion` |90| Gaming, retro tech, developer, 8-bit | `pixel-art` |91| Educational, tutorial, knowledge sharing | `sketch-notes` |92| Creative proposals, brand, toy-like | `vector-illustration` |93| History, exploration, heritage, biography | `vintage` |94| Lifestyle, travel, food, personal | `watercolor` |95| Business, professional, strategy, analysis | `elegant` |9697## File Management9899### Output Directory100101Each session creates an independent directory named by content slug:102103```104cover-image/{topic-slug}/105├── source-{slug}.{ext} # Source files (text, images, etc.)106├── prompts/107│ └── cover.md108└── cover.png109```110111**Slug Generation**:1121. Extract main topic from content (2-4 words, kebab-case)1132. Example: "The Future of AI" → `future-of-ai`114115### Conflict Resolution116117If `cover-image/{topic-slug}/` already exists:118- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`119- Example: `ai-future` exists → `ai-future-20260118-143052`120121### Source Files122123Copy all sources with naming `source-{slug}.{ext}`:124- `source-article.md` (main text content)125- `source-logo.png` (image from conversation)126127Multiple sources supported: text, images, files from conversation.128129## Workflow130131### Step 1: Analyze Content1321331. **Save source content** (if not already a file):134 - If user provides a file path: use as-is135 - If user pastes content: save to `source.md` in target directory1361372. **Extract key information**:138 - **Main topic**: What is the article about?139 - **Core message**: What's the key takeaway?140 - **Tone**: Serious, playful, inspiring, educational?141 - **Keywords**: Identify style-signaling words1421433. **Language detection**:144 - Detect **source language** from content145 - Detect **user language** from conversation context146 - Note if source_language ≠ user_language (will ask in Step 3)147148### Step 2: Determine Options1491501. **Style selection**:151 - If `--style` specified, use that style152 - Otherwise, scan content for style signals and auto-select 3 candidates153 - Default to `elegant` if no clear signals1541552. **Aspect ratio**:156 - If `--aspect` specified, use that ratio157 - Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)158159### Step 3: Confirm Options160161**Purpose**: Let user confirm all options in a single step before generation.162163**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.164165**Determine which questions to ask**:166167| Question | When to Ask |168|----------|-------------|169| Style | Always (required) |170| Aspect ratio | Always (offer common options) |171| Language | Only if `source_language ≠ user_language` |172173**Present options** (use AskUserQuestion with all applicable questions):174175**Question 1 (Style)** - always:176- Style A (recommended): [style name] - [brief description]177- Style B: [style name] - [brief description]178- Style C: [style name] - [brief description]179- Custom: Provide custom style reference180181**Question 2 (Aspect)** - always:182- 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic183- 16:9 Widescreen - standard video/presentation184- 1:1 Square - social media optimized185186**Question 3 (Language)** - only if source ≠ user language:187- [Source language] (matches content)188- [User language] (your preference)189190**Language handling**:191- If source language = user language: Just inform user (e.g., "Title will be in Chinese")192- If different: Ask which language to use for title text193194### Step 4: Generate Cover Concept195196Create a cover image concept based on selected style:197198**Title** (if included, max 8 characters):199- Distill the core message into a punchy headline200- Use hooks: numbers, questions, contrasts, pain points201- Skip if `--no-title` flag is used202203**Visual Elements**:204- Style-appropriate imagery and icons205- 1-2 symbolic elements representing the topic206- Metaphors or analogies that fit the style207208### Step 5: Create Prompt File209210Save prompt to `prompts/cover.md` with confirmed options.211212**All prompts are written in the user's confirmed language preference.**213214**Prompt Format**:215216```markdown217Cover theme: [topic in 2-3 words]218Style: [selected style name]219Aspect ratio: [confirmed aspect ratio]220221[If title included:]222Title text: [8 characters or less, in confirmed language]223Subtitle: [optional, in confirmed language]224225Visual composition:226- Main visual: [description matching style]227- Layout: [positioning based on title inclusion and aspect ratio]228- Decorative elements: [style-appropriate elements]229230Color scheme:231- Primary: [style primary color]232- Background: [style background color]233- Accent: [style accent color]234235Style notes: [specific style characteristics to emphasize]236237[If no title:]238Note: No title text, pure visual illustration only.239```240241### Step 6: Generate Image242243**Image Generation Skill Selection**:2441. Check available image generation skills2452. If multiple skills available, ask user to choose246247**Generation**:248Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.249250### Step 7: Output Summary251252```253Cover Image Generated!254255Topic: [topic]256Style: [style name]257Aspect: [aspect ratio]258Title: [cover title] (or "No title - visual only")259Language: [confirmed language]260Location: [output path]261262Preview the image to verify it matches your expectations.263```264265## Notes266267- Cover should be instantly understandable at small preview sizes268- Title (if included) must be readable and impactful269- Visual metaphors work better than literal representations270- Maintain style consistency throughout the cover271- Image generation typically takes 10-30 seconds272- Title text uses user's confirmed language preference273- Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media274275## Extension Support276277Custom styles and configurations via EXTEND.md.278279**Check paths** (priority order):2801. `.baoyu-skills/baoyu-cover-image/EXTEND.md` (project)2812. `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` (user)282283If found, load before Step 1. Extension content overrides defaults.