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-illustrator3description: 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---56# Article Illustrator78Analyze articles, identify optimal illustration positions, and generate images using a Type x Style consistency system.91011## Installation1213### OpenClaw / Moltbot / Clawbot1415```bash16npx clawhub@latest install article-illustrator17```181920## NEVER Do2122- 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 content24- Skip the settings confirmation step (Step 3)25- Begin generating before confirming type, density, and style with the user26- Create illustrations without justifying each position by content needs2728## Two Dimensions2930| 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 |3435Types and styles combine freely: `--type infographic --style blueprint`3637### Type Selection Guide3839| 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 |4748### Style Selection Guide4950| 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 |6061Full style specs and compatibility matrix: [references/styles.md](references/styles.md)6263### Auto Selection by Content6465| 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 |7374## Workflow7576### Step 1: Pre-check77781. **Determine input type** — file path or pasted content792. **Determine output directory** — check preferences or ask user:80 - `{article-dir}/` — same directory81 - `{article-dir}/illustrations/` — illustrations subdirectory (recommended)82 - `illustrations/{topic-slug}/` — independent directory833. **Check existing images** — if images exist, ask: supplement / overwrite / regenerate844. **Confirm article update method** (file input only) — update original or create `{name}-illustrated.md` copy855. **Load preferences** — check for EXTEND.md in project or user home8687### Step 2: Analyze Content8889| 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 |9697**Illustrate:** core arguments (required), abstract concepts, data comparisons, processes/workflows.9899**Skip:** literal metaphors, decorative scenes, generic illustrations.100101### Step 3: Confirm Settings (Required)102103Use a structured question with 3-4 questions in ONE call:104105- **Q1 — Type**: recommended option + alternatives106- **Q2 — Density**: minimal (1-2), balanced (3-5, recommended), rich (6+)107- **Q3 — Style**: recommended based on type/content compatibility matrix108- **Q4 — Language** (only if source language differs from user language)109110### Step 4: Generate Outline111112Save as `outline.md` with YAML frontmatter (type, density, style, count) and per-illustration details: position, purpose, visual content, filename.113114### Step 5: Generate Images1151161. 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 each1194. On failure: retry once, then log and continue120121### Step 6: Finalize122123Insert image references after corresponding paragraphs:124125```markdown126127```128129Output a summary with article path, settings, image count, and positions.130131## Output Structure132133```134illustrations/{topic-slug}/135├── source-{slug}.{ext}136├── outline.md137├── prompts/138│ └── illustration-{slug}.md139└── NN-{type}-{slug}.png140```141142## Prompt Construction Principles143144Good illustration prompts must include:1451461. **Layout structure first** — describe composition, zones, flow direction1472. **Specific data/labels** — use actual numbers, terms from the article1483. **Visual relationships** — how elements connect to each other1494. **Semantic colors** — meaning-based choices (red=warning, green=efficient)1505. **Style characteristics** — line treatment, texture, mood1516. **Aspect ratio** — end with ratio and complexity level152153Avoid: vague descriptions, literal metaphor illustrations, missing labels, generic decorative elements.154155Full templates by type: [references/prompt-construction.md](references/prompt-construction.md)156157## Type x Style Compatibility158159| | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |160|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|161| infographic | ++ | + | ++ | ++ | + | ++ | ++ | ++ |162| scene | + | ++ | + | - | ++ | + | + | - |163| flowchart | ++ | + | + | ++ | - | + | ++ | + |164| comparison | ++ | + | ++ | + | + | ++ | ++ | + |165| framework | ++ | + | ++ | ++ | - | ++ | + | ++ |166| timeline | ++ | + | + | + | ++ | ++ | ++ | + |167168`++` highly recommended | `+` compatible | `-` not recommended169170## Usage Examples171172```bash173# Auto-select type and style174illustrate path/to/article.md175176# Specify type177illustrate path/to/article.md --type infographic178179# Specify type and style180illustrate path/to/article.md --type flowchart --style notion181182# Specify density183illustrate path/to/article.md --density rich184```185186## Extension Support187188Custom configurations via EXTEND.md files:189190- **Project level**: `.article-illustrator/EXTEND.md`191- **User level**: `$HOME/.config/article-illustrator/EXTEND.md`192193Supports: watermark, preferred type/style, custom styles, language, output directory.194195## Modification196197| 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 |202203## References204205| 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 |