Thumbnail generator
Skill ihatesea69/HieuNghi-AI-Skills/devto_skills/thumbnail-generator
101 curated Agent Skills for Claude Code, GitHub Copilot, Cursor, and Gemini CLI. Covers React/Next.js, Postgres, HuggingFace ML, AI research engineering (vLLM, DeepSpeed, LangChain, RAG, fine-tuning) and dev.to blog writing.
npx -y skills add ihatesea69/HieuNghi-AI-Skills --skill thumbnail-generatorAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Generate prompts for dev.to blog thumbnail/cover images in hand-drawn infographic style. Use when creating cover images, thumbnails, or featured images for blog posts. Recommended size 1000x420 pixels.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
4.6 KB, as published. Nobody here has run it
🎨 Thumbnail Generator for dev.to Blog
This skill helps generate prompts for AI image generators to create thumbnail/cover images for dev.to blog posts.
📐 Technical Specifications
- Size: 1000x420 pixels (aspect ratio 2.38:1 - optimized for dev.to)
- Style: Hand-drawn infographic on notebook/whiteboard
- Output Format: Text prompt for AI image generators (Midjourney, DALL-E, Stable Diffusion, etc.)
🎯 When to Use
- Creating cover images for new dev.to articles
- Maintaining consistent branding with "Nghi Danh AI Content Creator"
- Need professional hand-drawn style illustrations
📝 Standard Prompt Template
Generate one single image of a physical, hand-drawn infographic on a large white notebook page or whiteboard.
**Topic/Title**: [ARTICLE TITLE]
**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
**Key Visual Elements**:
[LIST 3-5 ICONS/ILLUSTRATIONS FOR THE TOPIC]
**Layout & Resolution**:
- Image size: 1000x420
- 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"
🔄 Thumbnail Creation Process
Step 1: Analyze the Article
- Identify the main topic
- List 3-5 important keywords
- Choose 3-5 relevant icons/symbols
Step 2: Choose Appropriate Colors
| Topic | Primary Color | Secondary Color |
|---|---|---|
| Tech/Code | Blue, Black | Green |
| AI/ML | Purple, Blue | Orange |
| Web Dev | Orange, Red | Blue |
| DevOps | Green, Blue | Black |
| Database | Green, Gray | Yellow |
Step 3: Create Complete Prompt
Fill in the template with specific article information.
📋 Complete Prompt Example
For article about "10 VS Code Extensions for Developers":
Generate one single image of a physical, hand-drawn infographic on a large white notebook page or whiteboard.
**Topic/Title**: "10 Must-Have VS Code Extensions"
**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
**Key Visual Elements**:
- VS Code logo (hand-drawn)
- Extension puzzle pieces
- Code brackets < / >
- Lightning bolt for productivity
- Checkmark list
**Layout & Resolution**:
- Image size: 1000x420
- Structure the layout like a well-organized infographic
- Use multiple colors to highlight key sections (blue for code, green for success, orange highlights)
- 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"
⚠️ Important Notes
- DO NOT use digital fonts - everything must be hand-drawn
- MUST include watermark/signature at the bottom
- CHECK size is 1000x420 before export
- ENSURE text in image is clear and readable
🔗 References
- dev.to Cover Image Guidelines
- Aspect ratio: ~2.38:1 (1000x420)
- Maximum file size: 5MB