# Illustration Generator

> Generate prompts for blog illustrations in dev.to articles using hand-drawn infographic style. Use when creating concept diagrams, workflows, visual explanations, or in-article graphics.

- Skill: `ihatesea69/illustration-generator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ihatesea69/illustration-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ihatesea69/illustration-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: ihatesea69 (https://skillmd.com/u/ihatesea69)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/ihatesea69/illustration-generator

---


# 🖼️ Illustration Generator for dev.to Blog

This skill helps generate prompts for AI image generators to create illustrations within dev.to blog article content.

## 📐 Technical Specifications

- **Recommended Sizes**: 
  - Full-width: 800x450 (16:9)
  - Square: 600x600 (1:1)  
  - Diagram: 800x600 (4:3)
- **Style**: Hand-drawn infographic on notebook/whiteboard
- **Output Format**: Text prompt for AI image generators

## 🎯 When to Use

- Illustrating a concept/idea in an article
- Drawing workflow diagrams, architecture diagrams
- Creating visual comparisons between options
- Making step-by-step visual guides
- Creating summary infographics

## 📝 Basic Prompt Template

```
Generate one single image of a physical, hand-drawn infographic on a large white notebook page or whiteboard.

**Content Type**: [TYPE: concept, diagram, workflow, comparison, step-by-step]

**Topic**: [TOPIC TO ILLUSTRATE]

**Key Elements to Include**:
[LIST ELEMENTS TO DRAW]

**Style & Medium (Very Important)**:
- The image must look like a real photograph of an actual notebook page or whiteboard
- All content must appear hand-drawn using colored marker pens (black, blue, red, green) and highlighters (yellow, orange)
- Lines should be slightly imperfect, wobbly, and show natural ink texture on the surface
- No digital or printed appearance

**Text Rules**:
- No digital fonts
- All text, titles, and bullet points must look handwritten or hand-printed with pencil
- Handwriting should be clear, large, and easy to read, but naturally imperfect

**Layout & Resolution**:
- Image size: [SIZE]
- Structure the layout like a well-organized infographic
- Use multiple colors to highlight key sections
- Overall style must feel organic, casual, and realistic, as if drawn by hand

**Final Mandatory Text (Bottom of the Page)**:
Include the following handwritten sentence at the bottom of the image, in the same hand-drawn marker style:
"Follow Nghi Danh AI Content Creator for more helpful content"
```

## 🎨 Illustration Types and Templates

### 1️⃣ Concept Explanation

```
Generate one single image of a physical, hand-drawn infographic explaining [CONCEPT NAME].

**Content**: Visual explanation of [CONCEPT]

**Key Visual Elements**:
- Central concept as main heading with decorative underline
- 3-4 key components around the center with connecting arrows
- Simple icons representing each component
- Brief handwritten labels for each element
- Color coding: main concept in BLUE, components in GREEN, connections in RED

**Style & Medium**:
- Real photograph of notebook page with marker drawings
- Hand-drawn using colored markers (black, blue, green, red, orange highlighter)
- Slightly imperfect, wobbly lines with natural ink texture
- No digital fonts or graphics

**Layout**: 800x600, mind-map style arrangement

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

### 2️⃣ Workflow/Process Diagram

```
Generate one single image of a physical, hand-drawn workflow diagram on a white notebook page.

**Process Name**: [PROCESS NAME]

**Steps to Visualize**:
1. [Step 1]
2. [Step 2]
3. [Step 3]
4. [Step 4]

**Key Visual Elements**:
- Numbered boxes/circles for each step
- Arrows showing flow direction
- Small icons in each step box
- Color progression from start (GREEN) to end (BLUE)
- Decision diamonds if applicable (YELLOW)

**Style & Medium**:
- Real photograph of whiteboard with marker drawings
- Hand-drawn with black outlines, colored fills
- Wobbly arrows and imperfect shapes
- No digital appearance

**Layout**: 800x450, left-to-right or top-to-bottom flow

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

### 3️⃣ Comparison Chart

```
Generate one single image of a physical, hand-drawn comparison chart on notebook paper.

**Comparing**: [OPTION A] vs [OPTION B]

**Comparison Criteria**:
- [Criterion 1]
- [Criterion 2]
- [Criterion 3]
- [Criterion 4]

**Key Visual Elements**:
- Two-column layout with clear headers
- Checkmarks (✓) and crosses (✗) in green/red markers
- Highlighting for winner in each category (yellow highlighter)
- Summary section at bottom

**Style & Medium**:
- Real photograph of lined notebook page
- Hand-drawn table with marker pens
- Wobbly lines, natural imperfections
- Highlighted cells with marker highlighter

**Layout**: 600x600, table format

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

### 4️⃣ Architecture Diagram

```
Generate one single image of a physical, hand-drawn architecture diagram on a whiteboard.

**System Name**: [SYSTEM NAME]

**Components to Include**:
- [Component 1]: [Description]
- [Component 2]: [Description]
- [Component 3]: [Description]

**Connections**:
- [Component A] → [Component B]: [Description]
- [Component B] ↔ [Component C]: [Description]

**Key Visual Elements**:
- Boxes representing services/components
- Cylinders for databases
- Clouds for external services
- Arrows with labels for data flow
- Color coding by layer (frontend: BLUE, backend: GREEN, database: ORANGE)

**Style & Medium**:
- Real photograph of whiteboard
- Hand-drawn with multiple marker colors
- Labels in handwritten text
- Natural shadows and imperfections

**Layout**: 800x600, layered architecture view

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

### 5️⃣ Step-by-Step Guide

```
Generate one single image of a physical, hand-drawn step-by-step guide on notebook paper.

**Task**: [TASK NAME]

**Steps**:
1. [Step 1 description]
2. [Step 2 description]
3. [Step 3 description]
4. [Step 4 description]

**Key Visual Elements**:
- Large numbered circles (1, 2, 3, 4) in sequence
- Small illustration for each step
- Brief handwritten instruction below each
- Arrows connecting steps
- Final result highlighted with star/checkmark

**Style & Medium**:
- Real photograph of notebook with grid/dots
- Hand-drawn with fine-tip markers
- Colored numbers and highlights
- Sketch-style illustrations

**Layout**: 800x600, vertical or snake layout

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

### 6️⃣ List/Tips Infographic

```
Generate one single image of a physical, hand-drawn tips list on notebook paper.

**Title**: [NUMBER] Tips for [TOPIC]

**Tips List**:
1. [Tip 1]
2. [Tip 2]
3. [Tip 3]
4. [Tip 4]
5. [Tip 5]

**Key Visual Elements**:
- Decorative title with underline
- Numbered bullet points with icons
- Small illustrations for key tips
- Highlighted important words (yellow/orange)
- Decorative borders or frames

**Style & Medium**:
- Real photograph of notebook page
- Hand-drawn with markers and highlighters
- Mix of print and cursive handwriting
- Doodles and decorative elements

**Layout**: 600x800 (vertical) or 800x450 (horizontal)

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

## 🎨 Color Palette by Topic

| Topic | Primary Color | Accent Color | Highlight |
|-------|---------------|--------------|-----------|
| **Frontend** | Blue (#3498db) | Orange (#e67e22) | Yellow |
| **Backend** | Green (#27ae60) | Blue (#2980b9) | Orange |
| **Database** | Orange (#e67e22) | Green (#27ae60) | Yellow |
| **DevOps** | Purple (#9b59b6) | Blue (#3498db) | Orange |
| **Security** | Red (#e74c3c) | Black (#2c3e50) | Yellow |
| **AI/ML** | Purple (#9b59b6) | Pink (#e91e63) | Blue |
| **General** | Black (#2c3e50) | Blue (#3498db) | Yellow |

## 🔄 Illustration Creation Process

### Step 1: Identify illustration type needed
- Concept? Workflow? Comparison? Architecture? Steps? List?

### Step 2: List main elements
- What MUST be in the image
- What should NOT be included

### Step 3: Choose appropriate size
- Full-width for complex diagrams
- Square for simple concepts
- Vertical for lists/steps

### Step 4: Select template and fill in details
- Use appropriate template above
- Customize for specific content

### Step 5: Review and adjust
- Check if text is too much
- Ensure visual is not overly complex
- Confirm watermark text at bottom

## ⚠️ Important Notes

1. **One illustration = One concept**: Don't cram too much information
2. **Minimal text**: Helps AI image generator produce better results
3. **Consistent colors**: Keep color palette throughout the article
4. **MUST have watermark**: "Follow Nghi Danh AI Content Creator for more helpful content"
5. **Check file size**: Ensure under 5MB when uploading to dev.to

## 📚 Practical Example

### Example: REST API vs GraphQL Illustration

```
Generate one single image of a physical, hand-drawn comparison chart on a white notebook page.

**Comparing**: REST API vs GraphQL

**Comparison Criteria**:
- Data Fetching: REST (multiple endpoints) vs GraphQL (single endpoint)
- Over-fetching: REST (common issue) vs GraphQL (you get what you ask)
- Under-fetching: REST (needs multiple calls) vs GraphQL (one query)
- Learning Curve: REST (easier) vs GraphQL (steeper)

**Key Visual Elements**:
- Two-column table with "REST" and "GraphQL" headers
- Hand-drawn API icons at top of each column
- Checkmarks and crosses for pros/cons
- Yellow highlight on "winner" for each row
- Small diagram showing data flow difference

**Style & Medium**:
- Real photograph of lined notebook page
- Hand-drawn with black, blue, green, red markers
- Yellow highlighter for emphasis
- Wobbly table lines, natural look

**Layout**: 800x600, comparison table with summary

**Bottom Text**: "Follow Nghi Danh AI Content Creator for more helpful content"
```

## 🔗 Best Practices

1. **Consistency**: Keep style consistent within the same article
2. **Readability**: Prioritize clarity over aesthetics
3. **Relevance**: Each image must add value to content
4. **Alt text**: Always prepare alt text for SEO
5. **File naming**: `illustration-[topic]-[type].png`