Article Illustrations — Grav Hand-Drawn Style

Overview

Generate 16:9 landscape hand-drawn illustrations for articles, blog posts, and technical content. Each illustration captures one cognitive anchor point from an article and turns it into a clean, absurd, memorable whiteboard-sketch explanation.

The skill uses a recurring character IP called Grav: a small, round, always-floating figure with dot eyes and a thin antenna. Grav participates in the core action of every illustration — never just decoration.

Repository: vipin-si/article-illustrations

When to Use This Skill

Use when writing articles, blog posts, or documentation that need inline illustrations
Use when you want to turn abstract concepts into concrete visual metaphors
Use when you want a consistent visual language across multiple articles
Use when you need hand-drawn explanation sketches, not PPT infographics

How It Works

Step 1: Digest the Article

Read the article and identify cognitive anchor points — core judgments, turning points, input/output loops, before/after contrasts, and common pitfalls. Don't distribute illustrations evenly; prioritize moments that benefit from visual explanation.

Step 2: Plan a Shot List

For each illustration, define:

Placement: After which section
Theme: What this image is about
Core Meaning: The one idea it conveys
Structure Type: One of 8 composition patterns (Workflow, System Closeup, Before/After, Role States, Conceptual Metaphor, Layered Method, Map Route, Mini Comic)
Grav's Action: What Grav is doing in the scene
Annotation Labels: 3–5 short English labels

Step 3: Generate Images

Use the generate_image tool with the built-in prompt template. Each image follows strict style rules:

Pure white background, no textures
Black hand-drawn line art with slight wobble
Sparse red/orange/blue handwritten annotations
Grav always floating (never touching surfaces)
One core idea per image
40–60% canvas usage, 35%+ whitespace

Step 4: QA Check

Verify each image against the QA checklist: correct format, Grav present and active, original metaphor, clean composition, sparse annotations, correct color usage.

Examples

Example 1: Plan illustrations for an article

Analyze this article and create a shot list of 5 illustrations.
Don't generate images yet — just plan which cognitive anchor points
deserve illustrations and what each image should convey.

<paste article>

Example 2: Generate illustrations directly

Generate 4 Grav-style illustrations for this article.
Requirements: 16:9 landscape, pure white background, black hand-drawn
line art, sparse red/orange/blue English annotations.

<paste article>

Example 3: Single concept illustration

Generate one 16:9 illustration for this concept:
"Trust isn't declared — it's built one piece of evidence at a time."
Grav must perform the core action. Maximum 5 annotation labels.

Example 4: Iterate on a result

This illustration is on the right track, but Grav feels like decoration.
Keep the core meaning but regenerate: make Grav the one actually
driving the structure.

Visual Style

Element	Rule
Background	Pure white — no cream, texture, gradients, or shadows
Line art	Black, hand-drawn, slightly wobbly, not mechanical
Whitespace	Main subject 40–60% of canvas, 35%+ empty space
Annotations	Handwritten English, 2–5 words each, max 5–8 per image
Color: Black	Main line art, characters, structures, objects
Color: Red	Key highlights, problems, warnings, results
Color: Orange	Main flow, paths, arrows, direction
Color: Blue	Supplementary notes, feedback, system state
Prohibited	Green, purple, yellow, pink, gradients, drop shadows, 3D, realistic UI

Character: Grav

Small round body (pebble/potato shape)
Two dot eyes (slightly asymmetric)
One thin bent antenna with tiny circle tip
Thin stick legs that dangle without touching surfaces
Always hovering — visible gap between Grav and any surface
Expression: calm, focused, deadpan
Role: active participant in the system, never decoration

Best Practices

✅ Start with a shot list before generating images
✅ Invent a new metaphor for every illustration — never reuse compositions
✅ Make Grav the action protagonist, not a bystander
✅ Keep it absurd but structurally clear
✅ Use color sparingly — when in doubt, use black
❌ Don't make PPT infographics or formal flowcharts
❌ Don't add title bars or decorative frames
❌ Don't let Grav touch the ground or stand on surfaces
❌ Don't make Grav cute, smiling, or emoji-like

Limitations

Requires access to an image-generation tool that can follow composition, line-art, and annotation constraints.
The recurring Grav character style can drift between generations; verify every output against the QA checklist.
Text in generated images may be misspelled or distorted, so short labels and post-generation review are required.
The style is intended for explanatory article illustrations, not photorealistic product imagery or brand-final artwork.

Common Pitfalls

Problem: Illustration looks like a PPT slide Solution: Remove 30% of elements, increase whitespace, make it weirder
Problem: Grav is just standing next to the action Solution: Redesign so Grav IS the mechanism — becomes the funnel, dangles from the lever, is suspended inside the machine
Problem: Same metaphor as a previous illustration Solution: Replace the physical object entirely — same concept, different analogy

Additional Resources

Full skill with prompt templates and QA checklist
Example illustrations

Article Illustrations