baoyu-article-illustrator

| Dimension | Controls | Examples |

|-----------|----------|----------|

| Type | Information structure, layout | infographic, scene, flowchart, comparison, framework, timeline |

| Style | Visual aesthetics, mood | notion, warm, minimal, blueprint, watercolor, elegant |

Type × Style can be freely combined. Example: --type infographic --style blueprint

| Type | Best For |

|------|----------|

| infographic | Data, metrics, technical articles |

| scene | Narratives, personal stories, emotional content |

| flowchart | Tutorials, workflows, processes |

| comparison | Side-by-side, before/after, options |

| framework | Methodologies, models, architecture |

| timeline | History, progress, evolution |

| Style | Best For |

|-------|----------|

| notion (Default) | Knowledge sharing, SaaS, productivity |

| elegant | Business, thought leadership |

| warm | Personal growth, lifestyle, education |

| minimal | Philosophy, core concepts |

| blueprint | Architecture, system design |

| watercolor | Lifestyle, travel, creative |

| editorial | Tech explainers, journalism |

| scientific | Academic, technical research |

Full styles: [references/styles.md](references/styles.md)

| Content Signals | Type | Style |

|-----------------|------|-------|

| API, metrics, data, numbers | infographic | blueprint, notion |

| Story, emotion, journey | scene | warm, watercolor |

| How-to, steps, workflow | flowchart | notion, minimal |

| vs, pros/cons, before/after | comparison | notion, elegant |

| Framework, model, architecture | framework | blueprint, notion |

| History, timeline, progress | timeline | elegant, warm |

Copy this checklist and track progress:

```

Progress:

• [ ] Step 1: Pre-check
• [ ] Step 2: Setup & Analyze
• [ ] Step 3: Confirm Settings ⚠️ REQUIRED
• [ ] Step 4: Generate Outline
• [ ] Step 5: Generate Images
• [ ] Step 6: Finalize

```

---

Step 1: Pre-check

1.1 Determine Input Type

| Input | Output Directory | Next |

|-------|------------------|------|

| File path | Ask user (1.2) | → 1.2 |

| Pasted content | illustrations/{topic-slug}/ | → 1.4 |

1.2 Determine Output Directory (file path input only)

Check default_output_dir in preferences:

| Preference Value | Action |

|------------------|--------|

| same-dir | Use {article-dir}/, display "Output: {path}" |

| imgs-subdir | Use {article-dir}/imgs/, display "Output: {path}" |

| illustrations-subdir | Use {article-dir}/illustrations/, display "Output: {path}" |

| independent | Use illustrations/{topic-slug}/, display "Output: {path}" |

| Not configured | MUST ask with AskUserQuestion ↓ |

AskUserQuestion (when no preference):

• {article-dir}/ - Same directory as article
• {article-dir}/imgs/ - Images subdirectory
• {article-dir}/illustrations/ - Illustrations subdirectory (Recommended)
• illustrations/{topic-slug}/ - Independent directory
• Save as default - Remember this choice for future runs

1.3 Check Existing Images

Scan target directory for .png/.jpg/.webp files.

If images exist → AskUserQuestion: How to handle?

• supplement - Keep existing, generate only new positions
• overwrite - Overwrite same-name files
• regenerate - Clear all and regenerate

1.4 Confirm Article Update Method (file path input only)

AskUserQuestion: How to update article?

• update - Modify original file directly
• copy - Create {name}-illustrated.md copy

1.5 Load Preferences (EXTEND.md)

```bash

test -f .baoyu-skills/baoyu-article-illustrator/EXTEND.md && echo "project"

test -f "$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md" && echo "user"

```

| Result | Action |

|--------|--------|

| Found | Read, parse, display summary |

| Not found | Ask with AskUserQuestion (see references/config/first-time-setup.md) |

Supports: Watermark | Preferred type/style | Custom styles | Language | Output directory

---

Step 2: Setup & Analyze

2.1 Analyze Content

| Analysis | Description |

|----------|-------------|

| Content type | Technical / Tutorial / Methodology / Narrative |

| Core arguments | 2-5 main points to visualize |

| Visual opportunities | Positions where illustrations add value |

| Recommended type | Based on content signals |

| Recommended density | Based on length and complexity |

2.2 Extract Core Arguments

• Main thesis
• Key concepts reader needs
• Comparisons/contrasts
• Framework/model proposed

CRITICAL: If article uses metaphors (e.g., "电锯切西瓜"), do NOT illustrate literally. Visualize the underlying concept.

2.3 Identify Positions

Illustrate:

• Core arguments (REQUIRED)
• Abstract concepts
• Data comparisons
• Processes, workflows

Do NOT Illustrate:

• Metaphors literally
• Decorative scenes
• Generic illustrations

---

Step 3: Confirm Settings ⚠️

Do NOT skip. Use AskUserQuestion with 3-4 questions in ONE call.

Q1: Illustration Type

• [Recommended based on analysis] (Recommended)
• infographic / scene / flowchart / comparison / framework / timeline / mixed

Q2: Density

• minimal (1-2) - Core concepts only
• balanced (3-5) (Recommended) - Major sections
• rich (6+) - Comprehensive support

Q3: Style (ALWAYS ask, even with preferred_style in EXTEND.md)

If EXTEND.md has preferred_style:

• [Custom style name + brief description] (Recommended)
• [Top compatible built-in style 1]
• [Top compatible built-in style 2]
• [Top compatible built-in style 3]

If no preferred_style:

• [Best compatible from matrix] (Recommended)
• [Other ✓✓ style 1]
• [Other ✓✓ style 2]
• [Other ✓ style]

Style selection based on Type × Style compatibility matrix (references/styles.md).

Full specs: references/styles/