Article Illustrator
Analyze articles, identify optimal illustration positions, and generate images using a Type x Style consistency system.
Installation
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install article-illustrator
NEVER Do
- Illustrate metaphors literally (e.g., if article says "chainsaw cutting watermelon," visualize the underlying concept instead)
- Generate generic decorative images that don't connect to content
- Skip the settings confirmation step (Step 3)
- Begin generating before confirming type, density, and style with the user
- Create illustrations without justifying each position by content needs
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, editorial, scientific |
Types and styles combine freely: --type infographic --style blueprint
Type Selection Guide
| 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 Selection Guide
| 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 style specs and compatibility matrix: references/styles.md
Auto Selection by Content
| 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
Step 1: Pre-check
- Determine input type — file path or pasted content
- Determine output directory — check preferences or ask user:
{article-dir}/ — same directory
{article-dir}/illustrations/ — illustrations subdirectory (recommended)
illustrations/{topic-slug}/ — independent directory
- Check existing images — if images exist, ask: supplement / overwrite / regenerate
- Confirm article update method (file input only) — update original or create
{name}-illustrated.md copy
- Load preferences — check for EXTEND.md in project or user home
Step 2: 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 |
Illustrate: core arguments (required), abstract concepts, data comparisons, processes/workflows.
Skip: literal metaphors, decorative scenes, generic illustrations.
Step 3: Confirm Settings (Required)
Use a structured question with 3-4 questions in ONE call:
- Q1 — Type: recommended option + alternatives
- Q2 — Density: minimal (1-2), balanced (3-5, recommended), rich (6+)
- Q3 — Style: recommended based on type/content compatibility matrix
- Q4 — Language (only if source language differs from user language)
Step 4: Generate Outline
Save as outline.md with YAML frontmatter (type, density, style, count) and per-illustration details: position, purpose, visual content, filename.
Step 5: Generate Images
- Create prompts following references/prompt-construction.md
- Save prompts to
prompts/illustration-{slug}.md
- Generate sequentially, reporting progress after each
- On failure: retry once, then log and continue
Step 6: Finalize
Insert image references after corresponding paragraphs:

Output a summary with article path, settings, image count, and positions.
Output Structure
illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── outline.md
├── prompts/
│ └── illustration-{slug}.md
└── NN-{type}-{slug}.png
Prompt Construction Principles
Good illustration prompts must include:
- Layout structure first — describe composition, zones, flow direction
- Specific data/labels — use actual numbers, terms from the article
- Visual relationships — how elements connect to each other
- Semantic colors — meaning-based choices (red=warning, green=efficient)
- Style characteristics — line treatment, texture, mood
- Aspect ratio — end with ratio and complexity level
Avoid: vague descriptions, literal metaphor illustrations, missing labels, generic decorative elements.
Full templates by type: references/prompt-construction.md
Type x Style Compatibility
|
notion |
warm |
minimal |
blueprint |
watercolor |
elegant |
editorial |
scientific |
| infographic |
++ |
+ |
++ |
++ |
+ |
++ |
++ |
++ |
| scene |
+ |
++ |
+ |
- |
++ |
+ |
+ |
- |
| flowchart |
++ |
+ |
+ |
++ |
- |
+ |
++ |
+ |
| comparison |
++ |
+ |
++ |
+ |
+ |
++ |
++ |
+ |
| framework |
++ |
+ |
++ |
++ |
- |
++ |
+ |
++ |
| timeline |
++ |
+ |
+ |
+ |
++ |
++ |
++ |
+ |
++ highly recommended | + compatible | - not recommended
Usage Examples
# Auto-select type and style
illustrate path/to/article.md
# Specify type
illustrate path/to/article.md --type infographic
# Specify type and style
illustrate path/to/article.md --type flowchart --style notion
# Specify density
illustrate path/to/article.md --density rich
Extension Support
Custom configurations via EXTEND.md files:
- Project level:
.article-illustrator/EXTEND.md
- User level:
$HOME/.config/article-illustrator/EXTEND.md
Supports: watermark, preferred type/style, custom styles, language, output directory.
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, options, input modes |
| references/styles.md |
Style gallery, compatibility matrix, auto-selection |
| references/prompt-construction.md |
Prompt templates for each illustration type |
references/styles/<style>.md |
Full specifications for each visual style |
references/config/preferences-schema.md |
EXTEND.md configuration schema |
references/config/first-time-setup.md |
First-time preference setup flow |
| prompts/system.md |
System prompt reference |
1---2name: article-illustrator-23description: When the user wants to add illustrations to an article or blog post. Triggers on: "illustrate article", "add images to article", "generate illustrations", "article images", or requests to visually enhance written content. Analyzes article structure, identifies positions for visual aids, and generates illustrations using a Type x Style two-dimension approach.4---5
6# Article Illustrator
7
8Analyze articles, identify optimal illustration positions, and generate images using a Type x Style consistency system.
9
10
11## Installation
12
13### OpenClaw / Moltbot / Clawbot
14
15```bash
16npx clawhub@latest install article-illustrator
17```
18
19
20## NEVER Do
21
22- Illustrate metaphors literally (e.g., if article says "chainsaw cutting watermelon," visualize the underlying concept instead)
23- Generate generic decorative images that don't connect to content
24- Skip the settings confirmation step (Step 3)
25- Begin generating before confirming type, density, and style with the user
26- Create illustrations without justifying each position by content needs
27
28## Two Dimensions
29
30| Dimension | Controls | Examples |
31|-----------|----------|----------|
32| **Type** | Information structure, layout | infographic, scene, flowchart, comparison, framework, timeline |
33| **Style** | Visual aesthetics, mood | notion, warm, minimal, blueprint, watercolor, elegant, editorial, scientific |
34
35Types and styles combine freely: `--type infographic --style blueprint`
36
37### Type Selection Guide
38
39| Type | Best For |
40|------|----------|
41| `infographic` | Data, metrics, technical articles |
42| `scene` | Narratives, personal stories, emotional content |
43| `flowchart` | Tutorials, workflows, processes |
44| `comparison` | Side-by-side, before/after, options |
45| `framework` | Methodologies, models, architecture |
46| `timeline` | History, progress, evolution |
47
48### Style Selection Guide
49
50| Style | Best For |
51|-------|----------|
52| `notion` (Default) | Knowledge sharing, SaaS, productivity |
53| `elegant` | Business, thought leadership |
54| `warm` | Personal growth, lifestyle, education |
55| `minimal` | Philosophy, core concepts |
56| `blueprint` | Architecture, system design |
57| `watercolor` | Lifestyle, travel, creative |
58| `editorial` | Tech explainers, journalism |
59| `scientific` | Academic, technical research |
60
61Full style specs and compatibility matrix: [references/styles.md](references/styles.md)
62
63### Auto Selection by Content
64
65| Content Signals | Type | Style |
66|-----------------|------|-------|
67| API, metrics, data, numbers | infographic | blueprint, notion |
68| Story, emotion, journey | scene | warm, watercolor |
69| How-to, steps, workflow | flowchart | notion, minimal |
70| vs, pros/cons, before/after | comparison | notion, elegant |
71| Framework, model, architecture | framework | blueprint, notion |
72| History, timeline, progress | timeline | elegant, warm |
73
74## Workflow
75
76### Step 1: Pre-check
77
781. **Determine input type** — file path or pasted content
792. **Determine output directory** — check preferences or ask user:
80 - `{article-dir}/` — same directory
81 - `{article-dir}/illustrations/` — illustrations subdirectory (recommended)
82 - `illustrations/{topic-slug}/` — independent directory
833. **Check existing images** — if images exist, ask: supplement / overwrite / regenerate
844. **Confirm article update method** (file input only) — update original or create `{name}-illustrated.md` copy
855. **Load preferences** — check for EXTEND.md in project or user home
86
87### Step 2: Analyze Content
88
89| Analysis | Description |
90|----------|-------------|
91| Content type | Technical / Tutorial / Methodology / Narrative |
92| Core arguments | 2-5 main points to visualize |
93| Visual opportunities | Positions where illustrations add value |
94| Recommended type | Based on content signals |
95| Recommended density | Based on length and complexity |
96
97**Illustrate:** core arguments (required), abstract concepts, data comparisons, processes/workflows.
98
99**Skip:** literal metaphors, decorative scenes, generic illustrations.
100
101### Step 3: Confirm Settings (Required)
102
103Use a structured question with 3-4 questions in ONE call:
104
105- **Q1 — Type**: recommended option + alternatives
106- **Q2 — Density**: minimal (1-2), balanced (3-5, recommended), rich (6+)
107- **Q3 — Style**: recommended based on type/content compatibility matrix
108- **Q4 — Language** (only if source language differs from user language)
109
110### Step 4: Generate Outline
111
112Save as `outline.md` with YAML frontmatter (type, density, style, count) and per-illustration details: position, purpose, visual content, filename.
113
114### Step 5: Generate Images
115
1161. Create prompts following [references/prompt-construction.md](references/prompt-construction.md)
1172. Save prompts to `prompts/illustration-{slug}.md`
1183. Generate sequentially, reporting progress after each
1194. On failure: retry once, then log and continue
120
121### Step 6: Finalize
122
123Insert image references after corresponding paragraphs:
124
125```markdown
126
127```
128
129Output a summary with article path, settings, image count, and positions.
130
131## Output Structure
132
133```
134illustrations/{topic-slug}/
135├── source-{slug}.{ext}
136├── outline.md
137├── prompts/
138│ └── illustration-{slug}.md
139└── NN-{type}-{slug}.png
140```
141
142## Prompt Construction Principles
143
144Good illustration prompts must include:
145
1461. **Layout structure first** — describe composition, zones, flow direction
1472. **Specific data/labels** — use actual numbers, terms from the article
1483. **Visual relationships** — how elements connect to each other
1494. **Semantic colors** — meaning-based choices (red=warning, green=efficient)
1505. **Style characteristics** — line treatment, texture, mood
1516. **Aspect ratio** — end with ratio and complexity level
152
153Avoid: vague descriptions, literal metaphor illustrations, missing labels, generic decorative elements.
154
155Full templates by type: [references/prompt-construction.md](references/prompt-construction.md)
156
157## Type x Style Compatibility
158
159| | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
160|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
161| infographic | ++ | + | ++ | ++ | + | ++ | ++ | ++ |
162| scene | + | ++ | + | - | ++ | + | + | - |
163| flowchart | ++ | + | + | ++ | - | + | ++ | + |
164| comparison | ++ | + | ++ | + | + | ++ | ++ | + |
165| framework | ++ | + | ++ | ++ | - | ++ | + | ++ |
166| timeline | ++ | + | + | + | ++ | ++ | ++ | + |
167
168`++` highly recommended | `+` compatible | `-` not recommended
169
170## Usage Examples
171
172```bash
173# Auto-select type and style
174illustrate path/to/article.md
175
176# Specify type
177illustrate path/to/article.md --type infographic
178
179# Specify type and style
180illustrate path/to/article.md --type flowchart --style notion
181
182# Specify density
183illustrate path/to/article.md --density rich
184```
185
186## Extension Support
187
188Custom configurations via EXTEND.md files:
189
190- **Project level**: `.article-illustrator/EXTEND.md`
191- **User level**: `$HOME/.config/article-illustrator/EXTEND.md`
192
193Supports: watermark, preferred type/style, custom styles, language, output directory.
194
195## Modification
196
197| Action | Steps |
198|--------|-------|
199| **Edit** | Update prompt, regenerate, update reference |
200| **Add** | Identify position, create prompt, generate, update outline, insert |
201| **Delete** | Delete files, remove reference, update outline |
202
203## References
204
205| File | Content |
206|------|---------|
207| [references/usage.md](references/usage.md) | Command syntax, options, input modes |
208| [references/styles.md](references/styles.md) | Style gallery, compatibility matrix, auto-selection |
209| [references/prompt-construction.md](references/prompt-construction.md) | Prompt templates for each illustration type |
210| `references/styles/<style>.md` | Full specifications for each visual style |
211| `references/config/preferences-schema.md` | EXTEND.md configuration schema |
212| `references/config/first-time-setup.md` | First-time preference setup flow |
213| [prompts/system.md](prompts/system.md) | System prompt reference |