Skills baoyu-article-illustrator

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 "为文章配图".

install

source · Clone the upstream repo

git clone https://github.com/erafat/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/erafat/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/baoyu-article-illustrator" ~/.claude/skills/erafat-skills-baoyu-article-illustrator && rm -rf "$T"

manifest: baoyu-article-illustrator/SKILL.md

source content

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

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

Style Gallery

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

Auto Selection

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

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

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}"
`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}/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"

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 Based on Type, suggest compatible styles from matrix:

[Best compatible] (Recommended)
[Other ✓✓ styles]
[Other ✓ styles]

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

Generate sequentially
After each: "Generated X/N"
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

Action	Steps
Edit	Update prompt → Regenerate → Update reference
Add	Identify position → Create prompt → Generate → Update outline → Insert
Delete	Delete files → Remove reference → Update outline

References

File	Content
references/usage.md	Command syntax and options
references/styles.md	Style gallery & compatibility
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

Extension Support

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