About baoyu-cover-image
A skill that creates article cover images from Markdown or other supplied sources. It combines choices for composition, visual style, text density, and mood, with automatic selection or explicit options.
Key features
- 01Article-based cover generation
- 02Six composition types
- 03Twenty built-in visual styles
- 04Text density and mood controls
- 05Multiple aspect ratios
- 06Automatic dimension selection
Use cases
- 01Creating a cover for a blog article
- 02Matching imagery to a technical article
- 03Generating a text-free visual cover
- 04Preparing covers in different aspect ratios
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ jst-well-dan/ skill-box --skill baoyu-cover-imageAfter installing, type/baoyu-cover-imagein Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/base-prompt.mdreferences/config/first-time-setup.mdpreferences-schema.mdwatermark-guide.mdreferences/dimensions/mood.mdtext.mdreferences/styles/blueprint.mdbold-editorial.mdchalkboard.mddark-atmospheric.mdeditorial-infographic.mdelegant.mdfantasy-animation.mdflat-doodle.mdintuition-machine.mdminimal.mdnature.mdnotion.mdpixel-art.mdplayful.mdretro.mdsketch-notes.mdvector-illustration.mdvintage.mdwarm.mdwatercolor.mdDetails
From the project READMECover Image Generator
Generate elegant cover images for articles with 4-dimensional customization.
Usage
# Auto-select all dimensions based on content
/baoyu-cover-image path/to/article.md
# Quick mode: skip confirmation, use auto-selection
/baoyu-cover-image article.md --quick
# Specify dimensions
/baoyu-cover-image article.md --type conceptual --style blueprint
/baoyu-cover-image article.md --text title-subtitle --mood bold
# Visual only (no title text)
/baoyu-cover-image article.md --no-title
# Direct content input
/baoyu-cover-image
[paste content]
# Direct input with options
/baoyu-cover-image --style notion --aspect 1:1 --quick
[paste content]
Options
| Option | Description |
|---|---|
--type <name> | Cover type: hero, conceptual, typography, metaphor, scene, minimal |
--style <name> | Cover style (see Style Gallery) |
--text <level> | Text density: none, title-only, title-subtitle, text-rich |
--mood <level> | Emotional intensity: subtle, balanced, bold |
--aspect <ratio> | 16:9 (default), 2.35:1, 4:3, 3:2, 1:1, 3:4 |
--lang <code> | Title language (en, zh, ja, etc.) |
--no-title | Alias for --text none |
--quick | Skip confirmation, use auto-selection for missing dimensions |
Four Dimensions
| Dimension | Controls | Values | Default |
|---|---|---|---|
| Type | Visual composition, information structure | hero, conceptual, typography, metaphor, scene, minimal | auto |
| Style | Visual aesthetics, colors, technique | 20 built-in styles | auto |
| Text | Text density, information hierarchy | none, title-only, title-subtitle, text-rich | title-only |
| Mood | Emotional intensity, visual weight | subtle, balanced, bold | balanced |
Dimensions can be freely combined. Example: --type conceptual --style blueprint --text title-only --mood subtle creates a calm technical concept visualization.
Type Gallery
| Type | Description | Best For |
|---|---|---|
hero | Large visual impact, title overlay | Product launch, brand promotion, major announcements |
conceptual | Concept visualization, abstract core ideas | Technical articles, methodology, architecture design |
typography | Text-focused layout, prominent title | Opinion pieces, quotes, insights |
metaphor | Visual metaphor, concrete expressing abstract | Philosophy, growth, personal development |
scene | Atmospheric scene, narrative feel | Stories, travel, lifestyle |
minimal | Minimalist composition, generous whitespace | Zen, focus, core concepts |
Auto Type Selection
When --type is omitted, select based on content signals:
| Signals | Type |
|---|---|
| Product, launch, announcement, release, reveal | hero |
| Architecture, framework, system, API, technical, model | conceptual |
| Quote, opinion, insight, thought, headline, statement | typography |
| Philosophy, growth, abstract, meaning, reflection | metaphor |
| Story, journey, travel, lifestyle, experience, narrative | scene |
| Zen, focus, essential, core, simple, pure | minimal |
Style Gallery
| Style | Description |
|---|---|
elegant (default) | Refined, sophisticated |
blueprint | Technical schematics |
bold-editorial | Magazine impact |
chalkboard | Chalk on blackboard |
dark-atmospheric | Cinematic dark mode |
editorial-infographic | Visual storytelling |
fantasy-animation | Ghibli/Disney inspired |
flat-doodle | Pastel, cute shapes |
intuition-machine | Technical, bilingual |
minimal | Ultra-clean, zen |
nature | Organic, earthy |
notion | SaaS dashboard |
pixel-art | Retro 8-bit |
playful | Fun, whimsical |
retro | Halftone, vintage |
sketch-notes | Hand-drawn, warm |
vector-illustration | Flat vector |
vintage | Aged, expedition |
warm | Friendly, human |
watercolor | Soft hand-painted |
Style definitions: references/styles/
Auto Style Selection
When --style is omitted, select based on content signals:
| Signals | Style |
|---|---|
| Architecture, system design | blueprint |
| Product launch, marketing | bold-editorial |
| Education, tutorial | chalkboard |
| Entertainment, premium | dark-atmospheric |
| Tech explainer, research | editorial-infographic |
| Fantasy, children | fantasy-animation |
| Technical docs, bilingual | intuition-machine |
| Personal story, emotion | warm |
| Zen, focus, essential | minimal |
| Fun, beginner, casual | playful |
| Nature, wellness, eco | nature |
| SaaS, dashboard | notion |
| Workflow, productivity | flat-doodle |
| Gaming, retro tech | pixel-art |
| Knowledge sharing | sketch-notes |
| Creative proposals | vector-illustration |
| History, exploration | vintage |
| Lifestyle, travel | watercolor |
| Business, professional | elegant |
Text Dimension
| Value | Title | Subtitle | Tags | Use Case |
|---|---|---|---|---|
none | - | - | - | Pure visual, no text |
title-only | ✓ (≤8字) | - | - | Simple headline (default) |
title-subtitle | ✓ | ✓ (≤15字) | - | Title + supporting context |
text-rich | ✓ | ✓ | ✓ (2-4) | Information-dense |
Full guide: references/dimensions/text.md
Auto Text Selection
When --text is omitted, select based on content signals:
| Signals | Text Level |
|---|---|
| Visual-only, photography, abstract, art | none |
| Article, blog, standard cover | title-only |
| Series, tutorial, technical with context | title-subtitle |
| Announcement, features, multiple points, infographic | text-rich |
Default: title-only
Mood Dimension
| Value | Contrast | Saturation | Weight | Use Case |
|---|---|---|---|---|
subtle | Low | Muted | Light | Corporate, thought leadership |
balanced | Medium | Normal | Medium | General articles (default) |
bold | High | Vivid | Heavy | Announcements, promotions |
Full guide: references/dimensions/mood.md
Auto Mood Selection
When --mood is omitted, select based on content signals:
| Signals | Mood Level |
|---|---|
| Professional, corporate, thought leadership, academic, luxury | subtle |
| General, educational, standard, blog, documentation | balanced |
| Launch, announcement, promotion, event, gaming, entertainment | bold |
Default: balanced
Compatibility Matrices
Type × Style
| elegant | blueprint | notion | warm | minimal | watercolor | bold-editorial | dark-atmospheric | |
|---|---|---|---|---|---|---|---|---|
| hero | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
| conceptual | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✓ | ✓ |
| typography | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
| metaphor | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
| scene | ✓ | ✗ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
| minimal | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | ✓ |
Type × Text
| none | title-only | title-subtitle | text-rich | |
|---|---|---|---|---|
| hero | ✓ | ✓✓ | ✓✓ | ✓ |
| conceptual | ✓✓ | ✓✓ | ✓ | ✓ |
| typography | ✗ | ✓ | ✓✓ | ✓✓ |
| metaphor | ✓✓ | ✓ | ✓ | ✗ |
| scene | ✓✓ | ✓ | ✓ | ✗ |
| minimal | ✓✓ | ✓✓ | ✓ | ✗ |
Type × Mood
| subtle | balanced | bold | |
|---|---|---|---|
| hero | ✓ | ✓✓ | ✓✓ |
| conceptual | ✓✓ | ✓✓ | ✓ |
| typography | ✓ | ✓✓ | ✓✓ |
| metaphor | ✓✓ | ✓✓ | ✓ |
| scene | ✓✓ | ✓✓ | ✓ |
| minimal | ✓✓ | ✓✓ | ✗ |
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
File Structure
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 # Generation prompt
└── cover.png # Output image
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-futureexists →ai-future-20260118-143052
Source Files:
Copy all sources with naming source-{slug}.{ext}:
source-article.md,source-reference.png, etc.- Multiple sources supported: text, images, files from conversation
Workflow
Progress Checklist
Copy and track progress:
Cover Image Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] Step 1: Analyze content
- [ ] Step 2: Confirm options (4 dimensions) ⚠️ REQUIRED unless --quick or all specified
- [ ] Step 3: Create prompt
- [ ] Step 4: Generate image
- [ ] Step 5: Completion report
Flow
Input → [Step 0: Preferences/Setup] → Analyze → [Confirm: 4 Dimensions] → Prompt → Generate → Complete
↓
(skip if --quick or all dimensions specified)
Step 0: Load Preferences (EXTEND.md) ⚠️
Purpose: Load user preferences or run first-time setup. Do NOT skip setup if EXTEND.md not found.
Use Bash to check EXTEND.md existence (priority order):
# Check project-level first
test -f .baoyu-skills/baoyu-cover-image/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user"
┌──────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├──────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-cover-image/EXTEND.md │ Project directory │ ├──────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md │ User home │ └──────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, display preferences summary (see below) → Continue to Step 1 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │ └───────────┴───────────────────────────────────────────────────────────────────────────┘
Preferences Summary (when EXTEND.md found):
Display loaded preferences:
Preferences loaded from [project/user]:
• Watermark: [enabled/disabled] [content if enabled]
• Type: [preferred_type or "auto"]
• Style: [preferred_style or "auto"]
• Text: [preferred_text or "title-only"]
• Mood: [preferred_mood or "balanced"]
• Aspect: [default_aspect]
• Quick mode: [enabled/disabled]
• Language: [language or "auto"]
First-Time Setup (when EXTEND.md not found):
Language: Use user's input language or saved language preference.
Use AskUserQuestion with ALL questions in ONE call:
Q1: Watermark
header: "Watermark"
question: "Watermark text for generated cover images?"
options:
- label: "No watermark (Recommended)"
description: "Clean covers, can enable later in EXTEND.md"
Q2: Preferred Type
header: "Type"
question: "Default cover type preference?"
options:
- label: "Auto-select (Recommended)"
description: "Choose based on content analysis each time"
- label: "hero"
description: "Large visual impact - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
Q3: Preferred Style
header: "Style"
question: "Default cover style preference?"
options:
- label: "Auto-select (Recommended)"
description: "Choose based on content analysis each time"
- label: "elegant"
description: "Refined, sophisticated - professional business"
- label: "notion"
description: "SaaS dashboard - productivity/tech content"
Q4: Default Aspect Ratio
header: "Aspect"
question: "Default aspect ratio for cover images?"
options:
- label: "16:9 (Recommended)"
description: "Standard widescreen - YouTube, presentations, versatile"
- label: "2.35:1"
description: "Cinematic widescreen - article headers, blog posts"
- label: "1:1"
description: "Square - Instagram, WeChat, social cards"
- label: "3:4"
description: "Portrait - Xiaohongshu, Pinterest, mobile content"
Note: More ratios (4:3, 3:2) available during generation. This sets the default recommendation.
Q5: Quick Mode
header: "Quick"
question: "Enable quick mode by default?"
options:
- label: "No (Recommended)"
description: "Confirm dimension choices each time"
- label: "Yes"
description: "Skip confirmation, use auto-selection"
Q6: Save Location
header: "Save"
question: "Where to save preferences?"
options:
- label: "Project (Recommended)"
description: ".baoyu-skills/ (this project only)"
- label: "User"
description: "~/.baoyu-skills/ (all projects)"
After setup: Create EXTEND.md with user choices, then continue to Step 1.
Full setup details: references/config/first-time-setup.md
EXTEND.md Supports: Watermark | Preferred type | Preferred style | Preferred text | Preferred mood | Default aspect ratio | Quick mode | Custom style definitions | Language preference
Schema: references/config/preferences-schema.md
Step 1: Analyze Content
Read source content, save it if needed, and perform analysis.
Actions:
- Save source content (if not already a file):
- If user provides a file path: use as-is
- If user pastes content: save to
source.mdin target directory
- Read source content
- Content analysis:
- Extract: topic, core message, tone, keywords
- Identify visual metaphor opportunities
- Detect content type (technical/personal/business/creative)
- Language detection:
- Detect source content language
- Note user's input language (from conversation)
- Compare with language preference in EXTEND.md
Step 2: Confirm Options ⚠️
Purpose: Validate all 4 dimensions + aspect ratio.
Skip Conditions:
| Condition | Skipped Questions | Still Asked |
|---|---|---|
--quick flag | Type, Style, Text, Mood | Aspect Ratio (unless --aspect specified) |
All 4 dimensions + --aspect specified | All | None |
quick_mode: true in EXTEND.md | Type, Style, Text, Mood | Aspect Ratio (unless --aspect specified) |
| Otherwise | None | All 5 questions |
Important: Aspect ratio is ALWAYS asked unless explicitly specified via --aspect CLI flag. User presets in EXTEND.md are shown as recommended option, not auto-selected.
Quick Mode Output (when skipping 4 dimensions):
Quick Mode: Auto-selected dimensions
• Type: [type] ([reason])
• Style: [style] ([reason])
• Text: [text] ([reason])
• Mood: [mood] ([reason])
[Then ask Question 5: Aspect Ratio]
Confirmation Flow (when NOT skipping):
Language: Auto-determined (user's input language > saved preference > source language). No need to ask.
Present options using AskUserQuestion:
Question 1: Type (if not specified via --type)
- Show recommended type based on content analysis + preferred type from EXTEND.md
header: "Type"
question: "Which cover type?"
multiSelect: false
options:
- label: "[auto-recommended type] (Recommended)"
description: "[reason based on content signals]"
- label: "hero"
description: "Large visual impact, title overlay - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
- label: "typography"
description: "Text-focused layout - opinions, quotes"
Question 2: Style (if not specified via --style)
- Based on selected Type, show compatible styles (✓✓ first from compatibility matrix)
- Format:
[style name] - [why it fits this content]
header: "Style"
question: "Which cover style?"
multiSelect: false
options:
- label: "[best compatible style] (Recommended)"
description: "[reason based on type + content]"
- label: "[style2]"
description: "[reason]"
- label: "[style3]"
description: "[reason]"
Question 3: Text (if not specified via --text)
- Based on selected Type, show compatible text levels (✓✓ first from compatibility matrix)
header: "Text"
question: "Text density level?"
multiSelect: false
options:
- label: "title-only (Recommended)"
description: "Simple headline, ≤8 characters"
- label: "none"
description: "Pure visual, no text elements"
- label: "title-subtitle"
description: "Title + supporting context"
- label: "text-rich"
description: "Title + subtitle + keyword tags"
Question 4: Mood (if not specified via --mood)
- Based on content analysis, show recommended mood
header: "Mood"
question: "Emotional intensity?"
multiSelect: false
options:
- label: "balanced (Recommended)"
description: "Medium contrast and saturation, versatile"
- label: "subtle"
description: "Low contrast, muted colors, calm"
- label: "bold"
description: "High contrast, vivid colors, dynamic"
Question 5: Aspect Ratio (ALWAYS ask unless --aspect specified via CLI)
Note: Even if user has a preset in EXTEND.md, still ask this question. The preset is shown as the recommended option.
header: "Aspect"
question: "Cover aspect ratio?"
multiSelect: false
options:
- label: "[user preset or 16:9] (Recommended)"
description: "[based on preset or default: Standard widescreen, versatile]"
- label: "2.35:1"
description: "Cinematic widescreen - article headers, blog posts"
- label: "4:3"
description: "Traditional screen - PPT slides, classic displays"
- label: "3:2"
description: "Photography ratio - blog articles, Medium posts"
- label: "1:1"
description: "Square - Instagram, WeChat moments, social cards"
- label: "3:4"
description: "Portrait - Xiaohongshu, Pinterest, mobile-first content"
After response: Proceed to Step 3 with confirmed dimensions.
Step 3: Create Prompt
Save to prompts/cover.md:
# Content Context
Article title: [full original title from source]
Content summary: [2-3 sentence summary of key points and themes]
Keywords: [5-8 key terms extracted from content]
# Visual Design
Cover theme: [2-3 words visual interpretation]
Type: [confirmed type]
Style: [confirmed style]
Text level: [confirmed text level]
Mood: [confirmed mood]
Aspect ratio: [confirmed ratio]
Language: [confirmed language]
# Text Elements
[Based on text level:]
- none: "No text elements"
- title-only: "Title: [max 8 chars headline]"
- title-subtitle: "Title: [headline] / Subtitle: [max 15 chars context]"
- text-rich: "Title: [headline] / Subtitle: [context] / Tags: [2-4 keywords]"
# Mood Application
[Based on mood level:]
- subtle: "Use low contrast, muted colors, light visual weight, calm aesthetic"
- balanced: "Use medium contrast, normal saturation, balanced visual weight"
- bold: "Use high contrast, vivid saturated colors, heavy visual weight, dynamic energy"
# Composition
Type composition:
- [Type-specific layout and structure]
Visual composition:
- Main visual: [metaphor derived from content meaning]
- Layout: [positioning based on type and aspect ratio]
- Decorative: [style elements that reinforce content theme]
Color scheme: [primary, background, accent from style, adjusted by mood]
Type notes: [key characteristics from type definition]
Style notes: [key characteristics from style definition]
[Watermark section if enabled]
Content-Driven Design:
- Article title and summary inform the visual metaphor choice
- Keywords guide decorative elements and symbols
- The skill controls visual style; the content drives meaning
Type-Specific Composition:
| Type | Composition Guidelines |
|---|---|
hero | Large focal visual (60-70% area), title overlay on visual, dramatic composition |
conceptual | Abstract shapes representing core concepts, information hierarchy, clean zones |
typography | Title as primary element (40%+ area), minimal supporting visuals, strong hierarchy |
metaphor | Concrete object/scene representing abstract idea, symbolic elements, emotional resonance |
scene | Atmospheric environment, narrative elements, mood-setting lighting and colors |
minimal | Single focal element, generous whitespace (60%+), essential shapes only |
Title guidelines (when text level includes title):
- Max 8 characters, punchy headline
- Use hooks: numbers, questions, contrasts
- Match confirmed language
Watermark Application (if enabled in preferences): Add to prompt:
Include a subtle watermark "[content]" positioned at [position]
with approximately [opacity*100]% visibility. The watermark should
be legible but not distracting from the main content.
Reference: references/config/watermark-guide.md
Step 4: Generate Image
Backup Existing Cover (if regenerating):
If cover.png already exists in the output directory:
- Rename to
cover-backup-YYYYMMDD-HHMMSS.png
Image Generation Skill Selection:
- Check available image generation skills
- If multiple skills available, ask user preference
- Call selected skill with:
- Prompt file path
- Output image path:
cover.png - Aspect ratio parameter
On failure: Auto-retry once before reporting error.
Step 5: Completion Report
Cover Generated!
Topic: [topic]
Type: [type name]
Style: [style name]
Text: [text level]
Mood: [mood level]
Aspect: [ratio]
Title: [title text or "visual only"]
Language: [lang]
Watermark: [enabled/disabled]
Location: [directory path]
Files:
✓ source-{slug}.{ext}
✓ prompts/cover.md
✓ cover.png
[✓ cover-backup-{timestamp}.png (if regenerated)]
Image Modification
| Action | Steps |
|---|---|
| Regenerate | Backup existing → Update prompt → Regenerate with same settings |
| Change type | Backup existing → Confirm new type → Update prompt → Regenerate |
| Change style | Backup existing → Confirm new style → Update prompt → Regenerate |
| Change text | Backup existing → Confirm new text level → Update prompt → Regenerate |
| Change mood | Backup existing → Confirm new mood → Update prompt → Regenerate |
| Change aspect | Backup existing → Confirm new aspect → Update prompt → Regenerate |
All modifications automatically backup the existing cover.png before regenerating.
Notes
- Cover must be readable at small preview sizes
- Visual metaphors > literal representations
- Title: max 8 chars, readable, impactful
- Two confirmation points: Step 0 (first-time setup if no EXTEND.md) + Step 2 (options) - can skip Step 2 with
--quick - Use confirmed language for title text
- Maintain watermark consistency if enabled
- Check compatibility matrices when selecting combinations
--no-titleis preserved as alias for--text none
References
Dimensions:
references/dimensions/text.md- Text density dimensionreferences/dimensions/mood.md- Mood intensity dimension
Styles: references/styles/<name>.md - Style definitions
Config:
references/config/preferences-schema.md- EXTEND.md schemareferences/config/first-time-setup.md- First-time setup flowreferences/config/watermark-guide.md- Watermark configuration
Extension Support
Custom configurations via EXTEND.md. See Step 0 for paths and supported options.