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:
- 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| `flat-doodle` | Bold outlines, pastel colors, cute rounded shapes |51| `blueprint` | Technical schematics, engineering precision |52| `bold-editorial` | Magazine cover impact, dramatic typography |53| `chalkboard` | Black chalkboard, colorful chalk drawings |54| `dark-atmospheric` | Cinematic dark mode, glowing accents |55| `editorial-infographic` | Magazine explainer, visual storytelling |56| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm |57| `intuition-machine` | Technical briefing, bilingual labels |58| `minimal` | Ultra-clean, zen-like, focused |59| `nature` | Organic, calm, earthy |60| `notion` | Clean SaaS dashboard, productivity styling |61| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic |62| `playful` | Fun, creative, whimsical |63| `retro` | Halftone dots, vintage badges, classic |64| `sketch-notes` | Hand-drawn, educational, warm |65| `vector-illustration` | Flat vector, black outlines, retro colors |66| `vintage` | Aged paper, historical, expedition style |67| `warm` | Friendly, approachable, human-centered |68| `watercolor` | Soft hand-painted, natural warmth |6970Detailed style definitions: `references/styles/<style>.md`7172## Auto Style Selection7374When no `--style` is specified, the system analyzes content to select the best style:7576| Content Signals | Selected Style |77|----------------|----------------|78| Architecture, system design, engineering | `blueprint` |79| Product launch, keynote, marketing, brand | `bold-editorial` |80| Education, classroom, tutorial, teaching | `chalkboard` |81| Entertainment, creative, premium, cinematic | `dark-atmospheric` |82| Technology explainer, science, research | `editorial-infographic` |83| Storytelling, children, fantasy, magical | `fantasy-animation` |84| Technical docs, academic, bilingual | `intuition-machine` |85| Personal story, emotion, growth, life | `warm` |86| Simple, zen, focus, essential | `minimal` |87| Fun, easy, beginner, casual | `playful` |88| Nature, eco, wellness, health, organic | `nature` |89| Pop culture, 80s/90s nostalgia, badges | `retro` |90| Product, SaaS, dashboard, productivity | `notion` |91| Productivity, workflow, app, tools, cute | `flat-doodle` |92| Gaming, retro tech, developer, 8-bit | `pixel-art` |93| Educational, tutorial, knowledge sharing | `sketch-notes` |94| Creative proposals, brand, toy-like | `vector-illustration` |95| History, exploration, heritage, biography | `vintage` |96| Lifestyle, travel, food, personal | `watercolor` |97| Business, professional, strategy, analysis | `elegant` |9899## File Management100101### Output Directory102103Each session creates an independent directory named by content slug:104105```106cover-image/{topic-slug}/107├── source-{slug}.{ext} # Source files (text, images, etc.)108├── prompts/109│ └── cover.md110└── cover.png111```112113**Slug Generation**:1141. Extract main topic from content (2-4 words, kebab-case)1152. Example: "The Future of AI" → `future-of-ai`116117### Conflict Resolution118119If `cover-image/{topic-slug}/` already exists:120- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`121- Example: `ai-future` exists → `ai-future-20260118-143052`122123### Source Files124125Copy all sources with naming `source-{slug}.{ext}`:126- `source-article.md` (main text content)127- `source-logo.png` (image from conversation)128129Multiple sources supported: text, images, files from conversation.130131## Workflow132133### Step 1: Analyze Content1341351. **Save source content** (if not already a file):136 - If user provides a file path: use as-is137 - If user pastes content: save to `source.md` in target directory1381392. **Extract key information**:140 - **Main topic**: What is the article about?141 - **Core message**: What's the key takeaway?142 - **Tone**: Serious, playful, inspiring, educational?143 - **Keywords**: Identify style-signaling words1441453. **Language detection**:146 - Detect **source language** from content147 - Detect **user language** from conversation context148 - Note if source_language ≠ user_language (will ask in Step 3)149150### Step 2: Determine Options1511521. **Style selection**:153 - If `--style` specified, use that style154 - Otherwise, scan content for style signals and auto-select 3 candidates155 - Default to `elegant` if no clear signals1561572. **Aspect ratio**:158 - If `--aspect` specified, use that ratio159 - Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)160161### Step 3: Confirm Options162163**Purpose**: Let user confirm all options in a single step before generation.164165**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.166167**Determine which questions to ask**:168169| Question | When to Ask |170|----------|-------------|171| Style | Always (required) |172| Aspect ratio | Always (offer common options) |173| Language | Only if `source_language ≠ user_language` |174175**Present options** (use AskUserQuestion with all applicable questions):176177**Question 1 (Style)** - always:178- Style A (recommended): [style name] - [brief description]179- Style B: [style name] - [brief description]180- Style C: [style name] - [brief description]181- Custom: Provide custom style reference182183**Question 2 (Aspect)** - always:184- 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic185- 16:9 Widescreen - standard video/presentation186- 1:1 Square - social media optimized187188**Question 3 (Language)** - only if source ≠ user language:189- [Source language] (matches content)190- [User language] (your preference)191192**Language handling**:193- If source language = user language: Just inform user (e.g., "Title will be in Chinese")194- If different: Ask which language to use for title text195196### Step 4: Generate Cover Concept197198Create a cover image concept based on selected style:199200**Title** (if included, max 8 characters):201- Distill the core message into a punchy headline202- Use hooks: numbers, questions, contrasts, pain points203- Skip if `--no-title` flag is used204205**Visual Elements**:206- Style-appropriate imagery and icons207- 1-2 symbolic elements representing the topic208- Metaphors or analogies that fit the style209210### Step 5: Create Prompt File211212Save prompt to `prompts/cover.md` with confirmed options.213214**All prompts are written in the user's confirmed language preference.**215216**Prompt Format**:217218```markdown219Cover theme: [topic in 2-3 words]220Style: [selected style name]221Aspect ratio: [confirmed aspect ratio]222223[If title included:]224Title text: [8 characters or less, in confirmed language]225Subtitle: [optional, in confirmed language]226227Visual composition:228- Main visual: [description matching style]229- Layout: [positioning based on title inclusion and aspect ratio]230- Decorative elements: [style-appropriate elements]231232Color scheme:233- Primary: [style primary color]234- Background: [style background color]235- Accent: [style accent color]236237Style notes: [specific style characteristics to emphasize]238239[If no title:]240Note: No title text, pure visual illustration only.241```242243### Step 6: Generate Image244245**Image Generation Skill Selection**:2461. Check available image generation skills2472. If multiple skills available, ask user to choose248249**Generation**:250Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.251252### Step 7: Output Summary253254```255Cover Image Generated!256257Topic: [topic]258Style: [style name]259Aspect: [aspect ratio]260Title: [cover title] (or "No title - visual only")261Language: [confirmed language]262Location: [output path]263264Preview the image to verify it matches your expectations.265```266267## Notes268269- Cover should be instantly understandable at small preview sizes270- Title (if included) must be readable and impactful271- Visual metaphors work better than literal representations272- Maintain style consistency throughout the cover273- Image generation typically takes 10-30 seconds274- Title text uses user's confirmed language preference275- Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media276277## Extension Support278279Custom styles and configurations via EXTEND.md.280281**Check paths** (priority order):2821. `.baoyu-skills/baoyu-cover-image/EXTEND.md` (project)2832. `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` (user)284285If found, load before Step 1. Extension content overrides defaults.