baoyu-skills/skills/baoyu-article-illustrator/SKILL.md

---
name: baoyu-article-illustrator
description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style two-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
---

# Article Illustrator

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

## Two Dimensions

| 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`

## Illustration Purpose

Auto-detected during content analysis. Influences type/style recommendations.

| Purpose | Description | Best Types |
|---------|-------------|------------|
| **information** | Help understand abstract concepts | infographic, flowchart, comparison |
| **visualization** | Turn abstract ideas into concrete visuals | framework, comparison, infographic |
| **imagination** | Create atmosphere, spark imagination | scene, timeline |

## Type Gallery

| 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 |

## Styles

See [references/styles.md](references/styles.md) for:
- **Core Styles**: Simplified tier for quick selection (vector, minimal-flat, sci-fi, hand-drawn, editorial, scene)
- **Style Gallery**: Full 20+ style options with descriptions
- **Auto Selection**: Content signals → Type/Style recommendations
- **Compatibility Matrix**: Type × Style combinations

## Workflow

```
Progress:
- [ ] Step 1: Pre-check
  - [ ] 1.5 Load preferences (EXTEND.md) ⛔ BLOCKING
  - [ ] 1.0 Reference images ⚠️ (if provided)
  - [ ] 1.2-1.4 Config questions (1 AskUserQuestion, max 4 Qs)
- [ ] Step 2: Setup & Analyze
- [ ] Step 3: Confirm Settings (1 AskUserQuestion, max 4 Qs)
  - [ ] Q1: Type ⚠️
  - [ ] Q2: Density ⚠️ MUST ASK
  - [ ] Q3: Style ⚠️
- [ ] Step 4: Generate Outline
- [ ] Step 5: Generate Images
- [ ] Step 6: Finalize
```

### Step 1: Pre-check

**1.5 Load Preferences (EXTEND.md) ⛔ BLOCKING**

**CRITICAL**: If EXTEND.md not found, MUST complete first-time setup before ANY other steps.

```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 → Continue |
| Not found | ⛔ Run first-time setup ([references/config/first-time-setup.md](references/config/first-time-setup.md)) |

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

**1.0-1.4**: Handle reference images, determine input type, ask config questions.

Full procedures: [references/workflow.md](references/workflow.md#step-1-pre-check)

---

### Step 2: Setup & Analyze

| Analysis | Description |
|----------|-------------|
| Content type | Technical / Tutorial / Methodology / Narrative |
| Illustration purpose | information / visualization / imagination |
| Core arguments | 2-5 main points to visualize |
| Visual opportunities | Positions where illustrations add value |

**CRITICAL**: If article uses metaphors, do NOT illustrate literally. Visualize the **underlying concept**.

Full procedures: [references/workflow.md](references/workflow.md#step-2-setup--analyze)

---

### Step 3: Confirm Settings ⚠️

**Do NOT skip.** Use ONE AskUserQuestion call with max 4 questions. **Q1, Q2, Q3 are ALL REQUIRED.**

| Question | Options |
|----------|---------|
| **Q1: Type** ⚠️ | [Recommended], infographic, scene, flowchart, comparison, framework, timeline, mixed |
| **Q2: Density** ⚠️ | minimal (1-2), balanced (3-5), per-section (Recommended), rich (6+) |
| **Q3: Style** ⚠️ | [Recommended], minimal-flat, sci-fi, hand-drawn, editorial, scene, Other |
| **Q4: Language** | When article language ≠ EXTEND.md setting |

Full procedures: [references/workflow.md](references/workflow.md#step-3-confirm-settings-)

---

### Step 4: Generate Outline

Save as `outline.md` with frontmatter (type, density, style, image_count, references) and illustration entries:

```yaml
## Illustration 1
**Position**: [section] / [paragraph]
**Purpose**: [why this helps]
**Visual Content**: [what to show]
**Filename**: 01-infographic-concept-name.png
```

Full template: [references/workflow.md](references/workflow.md#step-4-generate-outline)

---

### Step 5: Generate Images

1. **Create Prompts**: Follow [references/prompt-construction.md](references/prompt-construction.md)
2. **Select Generation Skill**: Check available skills
3. **Process References**: Handle `direct`/`style`/`palette` usage
4. **Apply Watermark**: If enabled in EXTEND.md
5. **Generate**: Sequential, retry once on failure

Full procedures: [references/workflow.md](references/workflow.md#step-5-generate-images)

---

### Step 6: Finalize

**Update Article**: Insert `![description](path/NN-{type}-{slug}.png)` after corresponding paragraphs.

**Output Summary**:
```
Article Illustration Complete!
Article: [path] | Type: [type] | Density: [level] | Style: [style]
Images: X/N generated
Positions:
- 01-xxx.png → After "[Section]"
```

---

## Output Directory

```
illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── references/                    # Only if references provided
│   └── NN-ref-{slug}.png
├── 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

| Action | Steps |
|--------|-------|
| **Edit** | Update prompt file FIRST → Regenerate → Update reference |
| **Add** | Identify position → Create prompt → Generate → Update outline → Insert |
| **Delete** | Delete files → Remove reference → Update outline |

## References

| File | Content |
|------|---------|
| [references/workflow.md](references/workflow.md) | Detailed workflow procedures |
| [references/usage.md](references/usage.md) | Command syntax and options |
| [references/styles.md](references/styles.md) | Style gallery & compatibility |
| [references/prompt-construction.md](references/prompt-construction.md) | Prompt templates |
| `references/styles/<style>.md` | Full style specifications |
| `references/config/preferences-schema.md` | EXTEND.md schema |
| `references/config/first-time-setup.md` | First-time setup flow |