Does this skill generate actual image files?

It generates high-quality AI image prompts for Gemini and HTML/CSS templates that you can render in a browser to create finalized image assets.

Can I use my own brand colors and fonts?

Yes, the skill is designed to read from a .agents/design-context.md file to incorporate your specific brand assets and style guidelines.

What dimensions does this skill support?

It includes presets for YouTube (16:9), Shorts (9:16), Article Headers (1.91:1), Podcast covers (1:1), and Twitter Cards.

Are the designs optimized for mobile viewing?

Absolutely. The skill follows strict readability rules, such as the 3-element maximum and minimum font weights, to ensure designs work on small mobile screens.

Thumbnail Design Expert

Name: Thumbnail Design Expert
Author: ArnavPuri

byArnavPuri

•

Design Tools

Generates high-impact YouTube thumbnails, article headers, and Open Graph images optimized for click-through rates and small-scale readability.

This skill empowers developers and creators to design professional-grade visual assets directly within Claude Code. By leveraging Gemini 3.1 Flash and CSS-based design principles, it creates thumbnails that adhere to the '3-second rule,' ensuring immediate clarity and readability on mobile screens and sidebars. Whether you need an expressive YouTube cover with bold typography or a sleek article header with custom brand gradients, this skill provides the specific frameworks, AI prompts, and HTML/CSS code needed to maximize visual engagement and channel recognition.

Key Features

01Brand-aware design integration using local design-context files

02Proven composition frameworks including Curiosity Gap and Before/After

031 GitHub stars

04AI-powered image generation prompts tailored for Gemini 3.1 Flash

05Multi-format support for YouTube, Shorts, OG images, and Podcast covers

06High-contrast typography presets optimized for small-size legibility

Use Cases

01Creating click-worthy YouTube thumbnails that stand out in crowded sidebars

02Designing social media Open Graph (OG) preview images for websites

03Generating high-impact headers and hero images for blog posts and articles

Key Features

01Brand-aware design integration using local design-context files

02Proven composition frameworks including Curiosity Gap and Before/After

031 GitHub stars

04AI-powered image generation prompts tailored for Gemini 3.1 Flash

05Multi-format support for YouTube, Shorts, OG images, and Podcast covers

06High-contrast typography presets optimized for small-size legibility

Use Cases

01Creating click-worthy YouTube thumbnails that stand out in crowded sidebars

02Designing social media Open Graph (OG) preview images for websites

03Generating high-impact headers and hero images for blog posts and articles