illustration-generator

name	illustration-generator
description	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.
license	MIT
metadata	{"author":"nghi-danh-ai","version":"1.0.0"}

🖼️ 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