Create hand-drawn explainer graphics in SVG that look like notebook sketches with blue and red ink on ruled paper. Use for product launches, technical explainers, dev tools, AI workflows, SaaS landing pages, educational diagrams, pitch decks, and social media. Output intentionally imperfect, human-feeling sketches that prioritize clarity over polish.
Create hand-drawn explainer graphics in SVG that look like notebook sketches with blue and red ink on ruled paper. Use for product launches, technical explainers, dev tools, AI workflows, SaaS landing pages, educational diagrams, pitch decks, and social media. Output intentionally imperfect, human-feeling sketches that prioritize clarity over polish.
Hand-Drawn Explainer Graphics
Create SVG graphics that look hand-sketched on notebook paper. Think whiteboard meets notebook meets startup sketch.
Key principle: If it looks too clean, it failed.
When to Use
Product launch explainers
Developer tool overviews
AI/SaaS workflow diagrams
Educational diagrams
Pitch deck visuals
Blog featured images
Social media explainers
Internal documentation
Newsletter headers
Best for explaining systems, processes, or ideas, not emotions or branding.
Quick Reference
Pattern
Use Case
Key Elements
Explainer
Product/concept overview
Central object + radiating callouts
Workflow
Process/sequence
Left-to-right flow, task bubbles, parallel paths
Feature Breakdown
Feature highlights
Main box + callouts with checkmarks
Comparison
Before/after, options
Side-by-side boxes with annotations
Architecture
System diagrams
Boxes, arrows, icons representing components
Image Generation Prompt Template
Use this optimized prompt when generating with image_gen tools:
Hand-drawn explainer diagram on a white notebook paper background with faint ruled lines.
Blue and red ink sketch style.
Imperfect, human-drawn lines.
Casual doodles.
No vector art.
No realism.
A hand-sketched title at the top with a red underline.
In the center, a simple hand-drawn screen labeled "[MAIN CONCEPT]".
Around it, multiple hand-drawn boxes and speech bubbles connected with curved arrows.
Some arrows show parallel paths.
Some boxes are circled in red.
Include simple stick figures and minimal icons like gears or robots where relevant.
Text appears handwritten, slightly uneven, and casual.
The drawing feels like it was made quickly during a brainstorming session.
No gradients.
No shadows.
No modern UI elements.
No clean typography.
Prompt Variables
Replace [MAIN CONCEPT] with:
Product name or feature
Process being explained
System component
Additional Prompt Modifiers
For workflow diagrams, add:
Show a left-to-right flow with numbered steps.
Each step is a hand-drawn box connected by curved arrows.
Some paths branch and merge.
For feature breakdowns, add:
Central product box with feature callouts radiating outward.
Each feature has a red checkmark.
Small icons represent each feature.
For comparisons, add:
Two columns: "Before" on left, "After" on right.
Red X marks on problems, green checkmarks on solutions.
Arrows show transformation.
For architecture diagrams, add:
Multiple boxes representing system components.
Labeled with handwritten text.
Arrows show data flow direction.
Include simple icons: database cylinders, cloud shapes, server boxes.
Core Visual Rules
Canvas
White or off-white paper background (#fefefe or #f8f6f0)
Faint ruled notebook lines (horizontal, every 25-30px)
Optional: subtle paper texture, coffee stains, creases, fold marks
<!-- Thought bubble --><g><ellipsecx="200"cy="100"rx="80"ry="50"stroke="#2563eb"stroke-width="2"fill="none"/><circlecx="140"cy="150"r="8"stroke="#2563eb"stroke-width="2"fill="none"/><circlecx="120"cy="170"r="5"stroke="#2563eb"stroke-width="2"fill="none"/><circlecx="105"cy="185"r="3"stroke="#2563eb"stroke-width="2"fill="none"/></g>
<!-- Emphasis circle around element --><ellipsecx="200"cy="100"rx="60"ry="35"stroke="#dc2626"stroke-width="2.5"fill="none"transform="rotate(-5 200 100)"/><!-- Double emphasis circle (overdrawn) --><g><ellipsecx="200"cy="100"rx="58"ry="33"stroke="#dc2626"stroke-width="2"fill="none"opacity="0.5"transform="rotate(-3 200 100)"/><ellipsecx="200"cy="100"rx="62"ry="37"stroke="#dc2626"stroke-width="2"fill="none"transform="rotate(-7 200 100)"/>
<!-- Computer/Screen --><gtransform="translate(100, 100)"stroke="#2563eb"stroke-width="2"fill="none"stroke-linecap="round"><pathd="M -30 -25 Q -28 -27 0 -26 Q 28 -27 30 -25 Q 32 0 30 20 Q 28 22 0 21 Q -28 22 -30 20 Q -32 0 -30 -25"/><pathd="M -10 22 L -15 35 L 15 35 L 10 22"/><pathd="M -20 35 Q 0 37 20 35"/></g><!-- Gear/Cog --><gtransform="translate(100, 100)"stroke="#2563eb"stroke-width="2"fill="none"><circlecx="0"cy="0"r="8"/><pathd="M 0 -15 L 0 -12 M 0 12 L 0 15"/><pathd="M -15 0 L -12 0 M 12 0 L 15 0"/><pathd="M -10 -10 L -8 -8 M 8 8 L 10 10"/>< =/>
Handwritten Text
<!-- Title text --><textx="400"y="50"font-family="'Comic Sans MS', 'Marker Felt', cursive"font-size="28"fill="#2563eb"text-anchor="middle"transform="rotate(-1 400 50)">
HOW IT WORKS
</text><!-- Label text --><textx="200"y="150"font-family="'Comic Sans MS', 'Marker Felt', cursive"font-size="16"fill="#2563eb"transform="rotate(2 200 150)">
API CALLS
</text><!-- Small annotation --><textx="300"y="250"font-family="'Comic Sans MS', 'Marker Felt', cursive"font-size="12"fill="#2563eb"transform="rotate(-2 300 250)">
(this part is optional)
</text><!-- Numbered step --><g =>
1
Layout Patterns
Explainer (Central Concept)
[TITLE with red underline]
|
v
[callout] <--- [ CENTRAL ] ---> [callout]
^ [ OBJECT ] |
| | v
[detail] v [detail]
[callout]
Implementation notes:
Central object is largest (150-200px wide)
Callouts are smaller (80-120px wide)
Use curved arrows, not straight
Arrows should have slight wobble
Space callouts evenly but imperfectly
Workflow (Sequential)
[Step 1] ----> [Step 2] ----> [Step 3] ----> [Step 4]
| | | |
v v v v
(note) (note) (note) (note)
[User]
|
v
+-------+ +----------+
| API | <---> | Database |
+-------+ +----------+
|
v
+-------+
| Cache |
+-------+
Complete Example: Product Explainer
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 800 500"><defs><filterid="sketch"><feTurbulencetype="turbulence"baseFrequency="0.02"numOctaves="3"result="noise"/><feDisplacementMapin="SourceGraphic"in2="noise"scale="1.5"xChannelSelector="R"yChannelSelector="G"/></filter></defs><!-- Paper background --><rectwidth="100%"height="100%"fill="#fefefe"/><!-- Ruled lines --><gstroke="#e5e7eb"stroke-width="0.5"opacity="0.5"><linex1="0"y1= = =/>
HOW OUR API WORKS
YOUR APP
REQUEST
RESPONSE
DATABASE
USER
Fast!
Secure
Simple
Mobile-Friendly SVG Rules
All SVGs must render well on mobile (375px width and up):
Always use viewBox — never fixed width/height. Let SVGs scale responsively.
Minimum text size: 14px equivalent at viewBox scale. Handwritten text needs to be larger than clean text to remain legible.
Test at 375px wide: Verify title and key labels remain readable when scaled to mobile width.
Keep compositions simple: 5-7 main elements max. Complex sketches with many small annotations become unreadable on mobile.
Responsive embed: Use width="100%" height="auto" or CSS max-width: 100% in HTML.
Quality Checklist
Before finalizing:
Background looks like notebook paper with ruled lines
Uses only blue ink (#2563eb) and red ink (#dc2626)
All lines have natural wobble (not perfectly straight)
Text is handwritten style with slight rotation
Arrows are curved, not straight
Shapes are imperfect (not geometric)
Red is used only for emphasis (circles, checkmarks, underlines)
Could plausibly be drawn by a human
Communicates the idea clearly
Feels like a 5-minute brainstorm sketch
Automatic rejection if:
Looks like polished vector art
Has gradients, shadows, or glow effects
Uses modern UI elements
Typography is clean and professional
Lines are perfectly straight
Colors outside the blue/red palette
Negative Prompt (Must Be Applied)
When using image generation tools, always include these negative constraints:
Do NOT generate:
- Flat vector illustrations
- Corporate or SaaS illustration styles
- Clean geometric shapes
- Perfect symmetry
- Modern UI mockups
- Sans-serif digital fonts
- Gradients, shadows, or lighting effects
- Photorealistic people
- High-detail characters
- 3D renders
- Stock illustration aesthetics
If the image looks polished, glossy, or "designed," it is wrong.
Why this matters: Image generation models default to polished, professional output. Without explicit negative prompting, they will produce clean vector art instead of the intentionally imperfect notebook sketch style this skill requires.
Execution Steps
Understand the concept - What needs to be explained?
