youtube-thumbnail-design

Q: How do I install youtube-thumbnail-design?

Run npx skills add https://github.com/styleof/superpowers --skill youtube-thumbnail-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/youtube-thumbnail-design/ (personal) or .claude/skills/youtube-thumbnail-design/ (project).

by styleofMedia & Creative

YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A/B testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image

Installs: 140
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/styleof/superpowers --skill youtube-thumbnail-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads youtube-thumbnail-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Install the belt CLI skill: npx skills add belt-sh/cli

YouTube Thumbnail Design

Create high-CTR YouTube thumbnails with AI image generation via inference.sh CLI.

Quick Start

Requires inference.sh CLI (belt). Install instructions

belt login

# Generate a thumbnail
belt app run falai/flux-dev-lora --input '{
  "prompt": "YouTube thumbnail style, close-up of a person with surprised excited expression looking at a glowing laptop screen, vibrant blue and orange color scheme, dramatic studio lighting, shallow depth of field, high contrast, cinematic",
  "width": 1280,
  "height": 720
}'

Specifications

Spec	Value
Dimensions	1280 x 720 px (minimum)
Recommended	1920 x 1080 px
Aspect ratio	16:9
Max file size	2 MB
Formats	JPG, GIF, PNG

The 120px Test

Your thumbnail appears at roughly 120px wide on mobile — that's how most viewers first see it.

At 120px, viewers must be able to identify:

The mood/emotion (from colors and expression)
The general subject (from composition)
The text (if any — only if large enough)

Test: view your thumbnail at 120px width. If it's a muddy blur, redesign.

Safe Zones

┌─────────────────────────────────────────────┐
│                                             │
│   ✅ SAFE FOR TEXT AND KEY ELEMENTS         │
│                                             │
│                                             │
│                                             │
│                                             │
│                                       ┌───┐ │
│                                       │ ⏱ │ │ ← Timestamp overlay
│                              ┌────────┴───┘ │    (bottom-right)
│   ┌────┐                     │  DURATION    │
│   │ CH │ Chapter marker      └──────────────│
└───┴────┴────────────────────────────────────┘
     ↑ Bottom-left: chapter/progress markers

Avoid placing critical elements in:

Bottom-right corner (video duration timestamp)
Bottom-left corner (chapter markers, progress bar)
Extreme edges (cropping varies by device)

Color Strategy

High-Contrast Pairs That Work

Combination	Mood	Best For
Yellow + Black	Urgency, attention	Tech, business, lists
Red + White	Energy, excitement	Entertainment, reactions
Blue + Orange	Professional contrast	Education, tutorials
Green + White	Growth, money	Finance, success stories
Purple + Yellow	Premium, creative	Design, art, creativity
White + Dark	Clean, minimal	Luxury, minimalist channels

Color Rules

Background and text/subject should be complementary or high-contrast
Avoid same-temperature colors touching (red on orange = mud)
Use 3 colors maximum per thumbnail
Saturate more than real life — thumbnails compete with bright UI

Text on Thumbnails

When to Use Text

Lists/numbers: "7 Tips", "Top 10"
Strong opinions: "STOP Doing This"
Results: "$10K in 30 Days"
Comparisons: "vs" between two things

When NOT to Use Text

The video title already says it (redundant)
The emotion/visual tells the story
You can't make it large enough to read at 120px

Text Rules

Rule	Reason
Max 6 words	Readability at thumbnail size
Min 60pt equivalent	Must be legible at 120px width
Bold sans-serif font	Thin fonts disappear at small sizes
Contrast stroke/shadow	Ensures readability on any background
No small text	If it's not readable small, cut it

Face Expression Psychology

Thumbnails with faces get higher CTR than faceless thumbnails. Expression matters:

Expression	CTR Impact	Best For
Surprise/shock	Highest	Reaction, reveal, discovery content
Curiosity	High	Tutorial, how-to, tips
Excitement	High	Unboxing, reviews, announcements
Concern/worry	Medium-high	Warning, mistake, problem content
Confidence	Medium	Expert advice, authority content
Neutral	Lowest	Avoid unless your brand is minimalist

Face Composition Rules

Face should fill 30-50% of the thumbnail
Eyes looking toward the text or subject (directs viewer attention)
Eyes looking at camera = connection. Eyes looking at object = curiosity.
Place face on one side (usually left), text or subject on the other

# Generate a face-forward thumbnail
belt app run falai/flux-dev-lora --input '{
  "prompt": "close-up portrait of a man with genuinely surprised expression, mouth slightly open, raised eyebrows, looking at camera, left side of frame, vibrant teal background, dramatic rim lighting, YouTube thumbnail style, high contrast, cinematic",
  "width": 1280,
  "height": 720
}'

# Generate a face-looking-at-subject thumbnail
belt app run bytedance/seedream-4-5 --input '{
  "prompt": "person looking amazed at a glowing holographic chart showing upward growth, dramatic blue and green lighting, right side profile view, dark background, tech aesthetic, high energy",
  "size": "2K"
}'

Thumbnail Patterns by Content Type

Tutorial / How-To

belt app run falai/flux-dev-lora --input '{
  "prompt": "overhead flat lay of organized workspace with laptop showing code editor, colorful sticky notes, coffee cup, clean bright background, professional setup, tutorial style composition, warm lighting",
  "width": 1280,
  "height": 720
}'

Before/After

belt app run falai/flux-dev-lora --input '{
  "prompt": "split composition, left side dark and messy disorganized desk, right side bright clean organized minimalist workspace, dramatic contrast between chaos and order, clear dividing line in center, high contrast",
  "width": 1280,
  "height": 720
}'

Product Review / Comparison

belt app run falai/flux-dev-lora --input '{
  "prompt": "two products facing each other with dramatic lighting and sparks between them, competition battle concept, dark background with colorful rim lighting, versus comparison style, high energy, product photography",
  "width": 1280,
  "height": 720
}'

Listicle / Number

belt app run falai/flux-dev-lora --input '{
  "prompt": "dynamic arrangement of 7 different colorful objects floating in space against dark gradient background, each item distinct and clearly separated, energetic composition, vibrant saturated colors, studio lighting",
  "width": 1280,
  "height": 720
}'

A/B Testing

Test one variable at a time:

Variable	Test A vs B
Face vs No face	Same composition, with/without person
Expression	Surprise vs curiosity
Color scheme	Warm vs cool palette
Text vs No text	With/without text overlay
Background	Bright vs dark
Composition	Left-facing vs right-facing subject

# Generate variant A
belt app run falai/flux-dev-lora --input '{
  "prompt": "..., bright yellow background, ...",
  "width": 1280, "height": 720
}' --no-wait

# Generate variant B (same prompt, different background)
belt app run falai/flux-dev-lora --input '{
  "prompt": "..., dark navy background, ...",
  "width": 1280, "height": 720
}' --no-wait

Thumbnail Checklist

Common Mistakes

Mistake	Problem	Fix
Too much text	Unreadable at thumbnail size	Max 6 words or no text
Low contrast	Disappears in the feed	Use complementary colors
Cluttered composition	Eye doesn't know where to look	One focal point
Generic stock photo feel	No personality, gets skipped	Authentic expressions, unique angles
Tiny details	Lost at 120px	Bold, simple shapes
Same style every video	Viewer fatigue	Vary within brand guidelines
Misleading thumbnail	Kills trust, hurts retention	Match the actual content

Related Skills

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@image-upscaling
npx skills add inference-sh/skills@prompt-engineering

Browse all apps: belt app list

FAQ

What does the youtube-thumbnail-design skill do?

How do I install youtube-thumbnail-design?

Run npx skills add https://github.com/styleof/superpowers --skill youtube-thumbnail-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/youtube-thumbnail-design/ (personal) or .claude/skills/youtube-thumbnail-design/ (project).

Which AI agents can use youtube-thumbnail-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is youtube-thumbnail-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains youtube-thumbnail-design?

It is published by styleof in styleof/superpowers. It has 140 recorded installs.

More from styleof/superpowers

View all →

ai-image-generation

styleof/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative2.1K installs

ai-avatar-video

styleof/superpowers

Create AI avatar and talking head videos via inference.sh CLI. Recommended: P-Video-Avatar (fastest, cheapest, built-in TTS). Also: OmniHuman, Fabric, PixVerse. Audio: Inworld TTS-2 (100+ languages, emotion steering for characters), ElevenLabs, Kokoro. Capabilities: audio-driven avatars, text-to-avatar, lipsync videos, talking head generation, virtual presenters, UGC content. Use for: AI presenters, explainer videos, virtual influencers, dubbing, marketing videos, UGC ads, gaming avatars, NPC dialogue. Triggers: ai avatar, talking head, lipsync, avatar video, virtual presenter, ai spokesperson, audio driven video, heygen alternative, synthesia alternative, talking avatar, lip sync, video avatar, ai presenter, digital human, ugc, ugc video, ugc ad, avatar ugc

Media & Creative2.1K installs

ai-video-generation

styleof/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative2K installs

twitter-automation

styleof/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO2K installs

agent-browser

styleof/superpowers

Open the skill to read its SKILL.md instructions.

Productivity & Automation379 installs

agent-tools

styleof/superpowers

Open the skill to read its SKILL.md instructions.

285 installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Media & Creative880.3K installs

youtube-thumbnail-design

Install

Install

Describe the task

Review the result

SKILL.md

YouTube Thumbnail Design

Quick Start

Specifications

The 120px Test

Safe Zones

Color Strategy

High-Contrast Pairs That Work

Color Rules

Text on Thumbnails

When to Use Text

When NOT to Use Text

Text Rules

Face Expression Psychology

Face Composition Rules

Thumbnail Patterns by Content Type

Tutorial / How-To

Before/After

Product Review / Comparison

Listicle / Number

A/B Testing

Thumbnail Checklist

Common Mistakes

Related Skills

FAQ

More from styleof/superpowers

Popular media & creative skills