B

baoyu-article-illustrator

Verified

by JimLiu · Updated Apr 16, 2026

claude-opus-4-6
22in16.7Kout
$1.346m 26s

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-illustrationmarkdownimage-promptscontent-designdocumentation

See It In Action

1 turns·claude
The project codebase is in your current working directory. Explore the files to understand the code before making changes. need this launch post illustrated and ready for review this afternoon — add the visuals into the article and give me the finished version

Now I have a clear picture. The article has several key sections that need visuals, and the skill config specifies the brand style (blue #2563EB accent, neutral grays, clean white backgrounds, minimal/modern). Let me create the diagrams and integrate them.

Now let me verify all images were created and then update the article with the embedded visuals:

Good. Now let me update the article to embed all the visuals:

Now let me verify the final article reads correctly:

The article is fully illustrated and ready for review. Here's a summary of what I did:


5 SVG diagrams created in imgs/, all following the brand style from EXTEND.md (blue #2563EB accent, neutral grays, clean white backgrounds, sans-serif typography, 16:9-ish aspect ratios, minimal/modern style):

FileSectionWhat it shows
hero-architecture.svgThe Orchestrator PatternFull end-to-end flow — user request → orchestrator (3 phases: Decompose, Schedule, Synthesize) → parallel agents (Web Search, Code Exec, File Gen) → final deliverable
artifact-store.svgAgent Communication ProtocolAgent A publishing to the versioned artifact store, Agent B consuming — with the three artifact types (Data/Content/Reference) visualized inside the store
fault-tolerance.svgFault Tolerance and RecoveryThree-layer diagram — retry with exponential backoff (1s→4s→16s), subtask redistribution (Agent X → Agent Y), and partial completion (3/4 tasks succeed) — with a progress bar showing the 94% auto-recovery rate
trace-viewer.svgObservability StackA mock trace viewer UI with sidebar metrics, a dependency graph (Decompose → parallel Research/Extract/CodeGen → Synthesis), color-coded status, and a Gantt-style timeline
whats-next-roadmap.svgWhat's NextA horizontal timeline with three numbered milestones for Q3: Adaptive Model Routing, Streaming Synthesis, User-Defined Workflows

Each diagram is embedded in the article right below its section heading with descriptive alt text. The article text is untouched — only the image references were added. Ready for your review.

Claude Sonnet 4.6

Permissions

ScopeDescription
filesystem:read
filesystem:write

SKILL.md

Article Illustrator

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

Two Dimensions

DimensionControlsExamples
TypeInformation structureinfographic, scene, flowchart, comparison, framework, timeline
StyleVisual aestheticsnotion, warm, minimal, blueprint, watercolor, elegant

Combine freely: --type infographic --style blueprint

Or use presets: --preset tech-explainer → type + style in one flag. See Style Presets.

Types

TypeBest For
infographicData, metrics, technical
sceneNarratives, emotional
flowchartProcesses, workflows
comparisonSide-by-side, options
frameworkModels, architecture
timelineHistory, evolution

Styles

See 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

# macOS, Linux, WSL, Git Bash
test -f .baoyu-skills/baoyu-article-illustrator/EXTEND.md && echo "project"
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-article-illustrator/EXTEND.md" && echo "xdg"
test -f "$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md" && echo "user"
# PowerShell (Windows)
if (Test-Path .baoyu-skills/baoyu-article-illustrator/EXTEND.md) { "project" }
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
if (Test-Path "$xdg/baoyu-skills/baoyu-article-illustrator/EXTEND.md") { "xdg" }
if (Test-Path "$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md") { "user" }
ResultAction
FoundRead, parse, display summary
Not found⛔ Run first-time-setup

Full procedures: references/workflow.md

Step 2: Analyze

AnalysisOutput
Content typeTechnical / Tutorial / Methodology / Narrative
Purposeinformation / visualization / imagination
Core arguments2-5 main points
PositionsWhere illustrations add value

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

Full procedures: references/workflow.md

Step 3: Confirm Settings ⚠️

ONE AskUserQuestion, max 4 Qs. Q1-Q2 REQUIRED. Q3 required unless preset chosen.

QOptions
Q1: Preset or Type[Recommended preset], [alt preset], or manual: infographic, scene, flowchart, comparison, framework, timeline, mixed
Q2: Densityminimal (1-2), balanced (3-5), per-section (Recommended), rich (6+)
Q3: Style[Recommended], minimal-flat, sci-fi, hand-drawn, editorial, scene, poster, Other — skip if preset chosen
Q4: LanguageWhen article language ≠ EXTEND.md setting

Full procedures: references/workflow.md

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

Step 5: Generate Images

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

Execution strategy: When multiple illustrations have saved prompt files and the task is now plain generation, prefer baoyu-imagine batch mode (build-batch.ts--batchfile) over spawning subagents. Use subagents only when each image still needs separate prompt iteration or creative exploration.

  1. For each illustration, create a prompt file per 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

Step 6: Finalize

Insert ![description]({relative-path}/NN-{type}-{slug}.png) after paragraphs. Path computed relative to article file based on output directory setting.

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

Output Directory

Output directory is determined by default_output_dir in EXTEND.md (set during first-time setup):

default_output_dirOutput PathMarkdown Insert Path
imgs-subdir (default){article-dir}/imgs/imgs/NN-{type}-{slug}.png
same-dir{article-dir}/NN-{type}-{slug}.png
illustrations-subdir{article-dir}/illustrations/illustrations/NN-{type}-{slug}.png
independentillustrations/{topic-slug}/illustrations/{topic-slug}/NN-{type}-{slug}.png (relative to cwd)

All auxiliary files (outline, prompts) are saved inside the output directory:

{output-dir}/
├── outline.md
├── prompts/
│   └── NN-{type}-{slug}.md
└── NN-{type}-{slug}.png

When input is pasted content (no file path), always uses illustrations/{topic-slug}/ with source-{slug}.{ext} saved alongside.

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

Modification

ActionSteps
EditUpdate prompt → Regenerate → Update reference
AddPosition → Prompt → Generate → Update outline → Insert
DeleteDelete files → Remove reference → Update outline

References

FileContent
references/workflow.mdDetailed procedures
references/usage.mdCommand syntax
references/styles.mdStyle gallery
references/style-presets.mdPreset shortcuts (type + style)
references/prompt-construction.mdPrompt templates
references/config/first-time-setup.mdFirst-time setup

FAQ

What does baoyu-article-illustrator do?

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

When should I use baoyu-article-illustrator?

Use it when you need a repeatable workflow that produces image output, code diff.

What does baoyu-article-illustrator output?

In the evaluated run it produced image output, code diff.

How do I install or invoke baoyu-article-illustrator?

Ask the agent to use this skill when the task matches its documented workflow.

Which agents does baoyu-article-illustrator support?

Agent support is inferred from the source, but not explicitly declared.

What tools, channels, or permissions does baoyu-article-illustrator need?

It uses no extra tools; channels commonly include image, diff; permissions include filesystem:read, filesystem:write.

Is baoyu-article-illustrator safe to install?

Static analysis marked this skill as medium risk; review side effects and permissions before enabling it.

How is baoyu-article-illustrator different from an MCP or plugin?

A skill packages instructions and workflow conventions; tools, MCP servers, and plugins are dependencies the skill may call during execution.

Does baoyu-article-illustrator outperform not using a skill?

About baoyu-article-illustrator

When to use baoyu-article-illustrator

When you want to add structured illustrations to a markdown article or blog post. When you need prompt files, image filenames, and insertion points organized consistently for multiple visuals. When revising an existing article to include diagrams, scenes, or explanatory graphics.

When baoyu-article-illustrator is not the right choice

When you only need general writing advice and do not want image assets or file modifications. When image generation is not part of the task and no article file or pasted article content is being processed.

What it produces

Produces image output and code diff.