ClaudeCodeMod

All shelves / Skills

youtube-thumbnail-design

skills-shell/superpowers · 17.5k installs · 0 stars

Skill

Marked Command Execution · External Downloads · Indirect Prompt Injection

Install

In your shell
npx -y skills add skills-shell/superpowers --skill youtube-thumbnail-design --agent claude-code

Run in a terminal. Claude loads the skill when a task calls for it. Check the repo's README before you run it.

Open the repo

Files

SKILL.md

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:**
1. The mood/emotion (from colors and expression)
2. The general subject (from composition)
3. 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

```bash
# 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

  • 1280x720 minimum (1920x1080 preferred)
  • Under 2MB file size
  • Passes the 120px squint test
  • No critical elements in bottom-right (timestamp) or bottom-left (chapter)
  • Max 3 colors, high contrast
  • Text (if any) is max 6 words, bold, with contrast stroke
  • Face expression matches content energy (if applicable)
  • Doesn't duplicate the video title
  • Stands out from surrounding thumbnails (check your niche)
  • Works on both light and dark YouTube backgrounds

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

Facts

Kind
Skill
Repo
skills-shell/superpowers
Group
Uncategorized
Installs
17.5k
Stars
0

More on this shelf

  1. 1find-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.3.8M
  2. 2grill-memattpocock/skillsA relentless interview to sharpen a plan or design.1.3M
  3. 3grill-with-docsmattpocock/skillsA relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.1.1M
  4. 4agent-browservercel-labs/agent-browserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.1.1M
  5. 5improve-codebase-architecturemattpocock/skillsScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.1.1M
  6. 6tddmattpocock/skillsTest-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.1.1M