Article Illustrator

Analyze articles, identify illustration positions, generate images with Type × Style consistency.

Two Dimensions

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

Type Gallery

Style Gallery

Full styles: references/styles.md

Auto Selection

Workflow

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

1.2 Determine Output Directory (file path input only)

Check default_output_dir in preferences:

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)

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

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

Step 2: Setup & Analyze

2.1 Analyze Content

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/<style>.md

Q4 (only if source ≠ user language):

• Language: Source / User language

Step 4: Generate Outline

Save as outline.md:

---
type: infographic
density: balanced
style: blueprint
image_count: 4
---

## Illustration 1

**Position**: [section] / [paragraph]
**Purpose**: [why this helps]
**Visual Content**: [what to show]
**Type Application**: [how type applies]
**Filename**: 01-infographic-concept-name.png

## Illustration 2
...

Requirements:

• Each position justified by content needs
• Type applied consistently
• Style reflected in descriptions
• Count matches density

Step 5: Generate Images

5.1 Create Prompts

Follow references/prompt-construction.md. Save to prompts/illustration-{slug}.md.

5.2 Select Generation Skill

Check available skills. If multiple, ask user.

5.3 Apply Watermark (if enabled)

Add: Include a subtle watermark "[content]" at [position].

5.4 Generate

1. Generate sequentially
2. After each: "Generated X/N"
3. On failure: retry once, then log and continue

Step 6: Finalize

6.1 Update Article

Insert after corresponding paragraph:

![description](illustrations/{slug}/NN-{type}-{slug}.png)

Alt text: concise description in article's language.

6.2 Output Summary

Article Illustration Complete!

Article: [path]
Type: [type] | Density: [level] | Style: [style]
Location: [directory]
Images: X/N generated

Positions:
- 01-xxx.png → After "[Section]"
- 02-yyy.png → After "[Section]"

[If failures]
Failed:
- NN-zzz.png: [reason]

Output Directory

illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── outline.md
├── prompts/
│   └── illustration-{slug}.md
└── NN-{type}-{slug}.png

Slug: 2-4 word topic in kebab-case. Conflict: Append -YYYYMMDD-HHMMSS if exists.

Modification

IMPORTANT: When updating illustrations, ALWAYS update the prompt file (prompts/illustration-{slug}.md) FIRST before regenerating. This ensures:

1. Changes are documented and reproducible
2. The prompt reflects the new requirements
3. Future regeneration uses the correct prompt

References

Extension Support

Custom configurations via EXTEND.md. See Step 1.5 for paths and supported options.