Smart Article Illustration Skill

Analyze article structure and content, identify positions requiring visual aids, and generate illustrations with flexible style options.

Usage

# Auto-select style based on content
/baoyu-article-illustrator path/to/article.md

# Specify a style
/baoyu-article-illustrator path/to/article.md --style tech
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style minimal

# Combine with other options
/baoyu-article-illustrator path/to/article.md --style playful

Options

Style Gallery

1. elegant

Refined, sophisticated, professional

• Colors: Soft coral, muted teal, dusty rose, cream background
• Elements: Delicate line work, subtle icons, balanced composition
• Best for: Professional articles, thought leadership, business topics

2. tech

Modern, futuristic, digital

• Colors: Deep blue, electric cyan, purple, dark backgrounds
• Elements: Geometric shapes, circuit patterns, data visualizations, tech icons
• Best for: AI, programming, technology, digital transformation articles

3. warm

Friendly, approachable, human-centered

• Colors: Warm orange, golden yellow, terracotta, cream
• Elements: Rounded shapes, friendly characters, sun/light motifs, hearts
• Best for: Personal growth, lifestyle, education, human interest stories

4. bold

High contrast, impactful, energetic

• Colors: Vibrant red/orange, deep black, bright yellow accents
• Elements: Strong shapes, dramatic contrast, dynamic compositions
• Best for: Opinion pieces, important warnings, call-to-action content

5. minimal

Ultra-clean, zen-like, focused

• Colors: Black, white, single accent color
• Elements: Maximum whitespace, single focal element, simple lines
• Best for: Philosophy, minimalism, focused explanations

6. playful

Fun, creative, whimsical

• Colors: Pastel rainbow, bright pops, light backgrounds
• Elements: Doodles, quirky characters, speech bubbles, emoji-style icons
• Best for: Tutorials, beginner guides, casual content, fun topics

7. nature

Organic, calm, earthy

• Colors: Forest green, earth brown, sky blue, sand beige
• Elements: Plant motifs, natural textures, flowing lines, organic shapes
• Best for: Sustainability, wellness, outdoor topics, slow living

8. sketch

Raw, authentic, notebook-style

• Colors: Pencil gray, paper white, occasional color highlights
• Elements: Rough lines, sketch marks, handwritten notes, arrows
• Best for: Ideas in progress, brainstorming, thought processes

9. notion (Default)

Minimalist hand-drawn line art, intellectual

• Colors: Black outlines, white background, 1-2 pastel accents
• Elements: Simple line doodles, geometric shapes, hand-drawn wobble, maximum whitespace
• Best for: Knowledge sharing, concept explanations, SaaS content, productivity articles

Auto Style Selection

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

File Management

Save illustrations to imgs/ subdirectory in the same folder as the article:

path/to/
├── article.md
└── imgs/
    ├── outline.md
    ├── prompts/
    │   ├── illustration-concept-a.md
    │   ├── illustration-concept-b.md
    │   └── ...
    ├── illustration-concept-a.png
    ├── illustration-concept-b.png
    └── ...

Workflow

Step 1: Analyze Content & Select Style

1. Read article content
2. If --style specified, use that style
3. Otherwise, scan for style signals and auto-select
4. Extract key information:
   • Main topic and themes
   • Core messages per section
   • Abstract concepts needing visualization

Step 2: Identify Illustration Positions

Three Purposes of Illustrations:

1. Information Supplement: Help understand abstract concepts
2. Concept Visualization: Transform abstract ideas into concrete visuals
3. Imagination Guidance: Create atmosphere, enhance reading experience

Content Suitable for Illustrations:

• Abstract concepts needing visualization
• Processes/steps needing diagrams
• Comparisons needing visual representation
• Core arguments needing reinforcement
• Scenarios needing imagination guidance

Illustration Count:

• Consider at least 1 image per major section
• Prioritize core arguments and abstract concepts
• Principle: More is better than fewer

Step 3: Generate Illustration Plan

# Illustration Plan

**Article**: [article path]
**Style**: [selected style]
**Illustration Count**: N images

---

## Illustration 1

**Insert Position**: [section name] / [paragraph description]
**Purpose**: [why illustration needed here]
**Visual Content**: [what the image should show]
**Filename**: illustration-[slug].png

---

## Illustration 2
...

Step 4: Create Prompt Files

Save prompts to prompts/ directory with style-specific details.

Prompt Format:

Illustration theme: [concept in 2-3 words]
Style: [style name]

Visual composition:
- Main visual: [description matching style]
- Layout: [element positioning]
- Decorative elements: [style-appropriate decorations]

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

Text content (if any):
- [Any labels or captions in content language]

Style notes: [specific style characteristics]

Step 5: Generate Images

Image Generation Skill Selection:

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

Generation Flow:

1. Call selected image generation skill with prompt file and output path
2. Generate images sequentially
3. After each image, output progress: "Generated X/N"
4. On failure, auto-retry once
5. If retry fails, log reason, continue to next

Step 6: Update Article

Insert generated images at corresponding positions:

![illustration description](imgs/illustration-[slug].png)

Insertion Rules:

• Insert image after corresponding paragraph
• Leave one blank line before and after image
• Alt text uses concise description in article's language

Step 7: Output Summary

Article Illustration Complete!

Article: [article path]
Style: [style name]
Generated: X/N images successful

Illustration Positions:
- illustration-xxx.png → After section "Section Name"
- illustration-yyy.png → After section "Another Section"
...

[If any failures]
Failed:
- illustration-zzz.png: [failure reason]

Style Reference Details

elegant

Colors: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
Background: Warm cream (#F5F0E6), soft beige
Accents: Gold (#C9A962), copper
Elements: Delicate lines, refined icons, subtle gradients, balanced whitespace

tech

Colors: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
Background: Dark gray (#1A202C), near-black (#0D1117)
Accents: Neon green (#00FF88), bright white
Elements: Circuit patterns, data nodes, geometric grids, glowing effects

warm

Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
Background: Cream (#FFFAF0), soft peach (#FED7AA)
Accents: Deep brown (#744210), soft red