Skip to content
Content
Skill

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

BOOST
From plugin
canghe-skills
46431 skills
Install
$ npx -y skills add freestylefly/canghe-skills --skill canghe-article-illustrator --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/canghe-article-illustrator

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

canghe-article-illustrator.SKILL.md
name: canghe-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 | infographic, scene, flowchart, comparison, framework, timeline | | **Style** | Visual aesthetics | notion, warm, minimal, blueprint, watercolor, elegant |

Combine freely: `--type infographic --style blueprint`

Types

| Type | Best For | |------|----------| | `infographic` | Data, metrics, technical | | `scene` | Narratives, emotional | | `flowchart` | Processes, workflows | | `comparison` | Side-by-side, options | | `framework` | Models, architecture | | `timeline` | History, evolution |

Styles

See [references/styles.md](references/styles.md) for Core Styles, full gallery, and Type × Style compatibility.

Workflow

- [ ] Step 1: Pre-check (EXTEND.md, references, config)
- [ ] Step 2: Analyze content
- [ ] Step 3: Confirm settings (AskUserQuestion)
- [ ] Step 4: Generate outline
- [ ] Step 5: Generate images
- [ ] Step 6: Finalize

Step 1: Pre-check

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

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

| Result | Action | |--------|--------| | Found | Read, parse, display summary | | Not found | ⛔ Run [first-time-setup](references/config/first-time-setup.md) |

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

Step 2: Analyze

| Analysis | Output | |----------|--------| | Content type | Technical / Tutorial / Methodology / Narrative | | Purpose | information / visualization / imagination | | Core arguments | 2-5 main points | | Positions | Where illustrations add value |

**CRITICAL**: Metaphors → visualize underlying concept, NOT literal image.

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

Step 3: Confirm Settings ⚠️

**ONE AskUserQuestion, max 4 Qs. Q1-Q3 REQUIRED.**

| Q | 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 `outline.md` with frontmatter (type, density, style, image_count) and entries:

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

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

Step 5: Generate Images

⛔ **BLOCKING: Prompt files MUST be saved before ANY image generation.**

1. For each illustration, create a prompt file per [references/prompt-construction.md](references/prompt-construction.md) 2. Save to `prompts/NN-{type}-{slug}.md` with YAML frontmatter 3. Prompts **MUST** use type-specific templates with structured sections (ZONES / LABELS / COLORS / STYLE / ASPECT) 4. LABELS **MUST** include article-specific data: actual numbers, terms, metrics, quotes 5. **DO NOT** pass ad-hoc inline prompts to `--prompt` without saving prompt files first 6. Select generation skill, process references (`direct`/`style`/`palette`) 7. Apply watermark if EXTEND.md enabled 8. Generate from saved prompt files; retry once on failure

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

Step 6: Finalize

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

Article Illustration Complete!
Article: [path] | Type: [type] | Density: [level] | Style: [style]
Images: X/N generated

Output Directory

illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── references/           # if provided
├── outline.md
├── prompts/
└── NN-{type}-{slug}.png

**Slug**: 2-4 words, kebab-case. **Conflict**: append `-YYYYMMDD-HHMMSS`.

Modification

| Action | Steps | |--------|-------| | Edit | Update prompt → Regenerate → Update reference | | Add | Position → Prompt → Generate → Update outline → Insert | | Delete | Delete files → Remove reference → Update outline |

References

| File | Content | |------|---------| | [references/workflow.md](references/workflow.md) | Detailed procedures | | [references/usage.md](references/usage.md) | Command syntax | | [references/styles.md](references/styles.md) | Style gallery | | [references/prompt-construction.md](references/prompt-construction.md) | Prompt templates | | [references/config/first-time-setup.md](references/config/first-time-setup.md) | First-time setup |

Read more
Ships withcanghe-skills

Skills shared by Canghe for improving daily work efficiency with Claude Code.

Get the whole plugin

Other skills on canghe-skills.