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
1---2name: article-illustrations3description: Generate hand-drawn 16:9 article illustrations with the Grav character IP, sparse annotations, and absurd but clear visual metaphors.4license: MIT5---67# Article Illustrations — Grav Hand-Drawn Style89## Overview1011Generate 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.1213The 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.1415**Repository:** [vipin-si/article-illustrations](https://github.com/vipin-si/article-illustrations)1617## When to Use This Skill1819- Use when writing articles, blog posts, or documentation that need inline illustrations20- Use when you want to turn abstract concepts into concrete visual metaphors21- Use when you want a consistent visual language across multiple articles22- Use when you need hand-drawn explanation sketches, not PPT infographics2324## How It Works2526### Step 1: Digest the Article2728Read 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.2930### Step 2: Plan a Shot List3132For each illustration, define:33- **Placement**: After which section34- **Theme**: What this image is about35- **Core Meaning**: The one idea it conveys36- **Structure Type**: One of 8 composition patterns (Workflow, System Closeup, Before/After, Role States, Conceptual Metaphor, Layered Method, Map Route, Mini Comic)37- **Grav's Action**: What Grav is doing in the scene38- **Annotation Labels**: 3–5 short English labels3940### Step 3: Generate Images4142Use the `generate_image` tool with the built-in prompt template. Each image follows strict style rules:43- Pure white background, no textures44- Black hand-drawn line art with slight wobble45- Sparse red/orange/blue handwritten annotations46- Grav always floating (never touching surfaces)47- One core idea per image48- 40–60% canvas usage, 35%+ whitespace4950### Step 4: QA Check5152Verify each image against the QA checklist: correct format, Grav present and active, original metaphor, clean composition, sparse annotations, correct color usage.5354## Examples5556### Example 1: Plan illustrations for an article5758```59Analyze this article and create a shot list of 5 illustrations.60Don't generate images yet — just plan which cognitive anchor points61deserve illustrations and what each image should convey.6263<paste article>64```6566### Example 2: Generate illustrations directly6768```69Generate 4 Grav-style illustrations for this article.70Requirements: 16:9 landscape, pure white background, black hand-drawn71line art, sparse red/orange/blue English annotations.7273<paste article>74```7576### Example 3: Single concept illustration7778```79Generate one 16:9 illustration for this concept:80"Trust isn't declared — it's built one piece of evidence at a time."81Grav must perform the core action. Maximum 5 annotation labels.82```8384### Example 4: Iterate on a result8586```87This illustration is on the right track, but Grav feels like decoration.88Keep the core meaning but regenerate: make Grav the one actually89driving the structure.90```9192## Visual Style9394| Element | Rule |95|:--------|:-----|96| Background | Pure white — no cream, texture, gradients, or shadows |97| Line art | Black, hand-drawn, slightly wobbly, not mechanical |98| Whitespace | Main subject 40–60% of canvas, 35%+ empty space |99| Annotations | Handwritten English, 2–5 words each, max 5–8 per image |100| Color: Black | Main line art, characters, structures, objects |101| Color: Red | Key highlights, problems, warnings, results |102| Color: Orange | Main flow, paths, arrows, direction |103| Color: Blue | Supplementary notes, feedback, system state |104| Prohibited | Green, purple, yellow, pink, gradients, drop shadows, 3D, realistic UI |105106## Character: Grav107108- Small round body (pebble/potato shape)109- Two dot eyes (slightly asymmetric)110- One thin bent antenna with tiny circle tip111- Thin stick legs that dangle without touching surfaces112- Always hovering — visible gap between Grav and any surface113- Expression: calm, focused, deadpan114- Role: active participant in the system, never decoration115116## Best Practices117118- ✅ Start with a shot list before generating images119- ✅ Invent a new metaphor for every illustration — never reuse compositions120- ✅ Make Grav the action protagonist, not a bystander121- ✅ Keep it absurd but structurally clear122- ✅ Use color sparingly — when in doubt, use black123- ❌ Don't make PPT infographics or formal flowcharts124- ❌ Don't add title bars or decorative frames125- ❌ Don't let Grav touch the ground or stand on surfaces126- ❌ Don't make Grav cute, smiling, or emoji-like127128## Limitations129130- Requires access to an image-generation tool that can follow composition, line-art, and annotation constraints.131- The recurring Grav character style can drift between generations; verify every output against the QA checklist.132- Text in generated images may be misspelled or distorted, so short labels and post-generation review are required.133- The style is intended for explanatory article illustrations, not photorealistic product imagery or brand-final artwork.134135## Common Pitfalls136137- **Problem:** Illustration looks like a PPT slide138 **Solution:** Remove 30% of elements, increase whitespace, make it weirder139140- **Problem:** Grav is just standing next to the action141 **Solution:** Redesign so Grav IS the mechanism — becomes the funnel, dangles from the lever, is suspended inside the machine142143- **Problem:** Same metaphor as a previous illustration144 **Solution:** Replace the physical object entirely — same concept, different analogy145146## Additional Resources147148- [Full skill with prompt templates and QA checklist](https://github.com/vipin-si/article-illustrations)149- [Example illustrations](https://github.com/vipin-si/article-illustrations#examples)
nous-hermeshub