youtube-thumbnail-design — Claude Code skill: YouTube thumbnails
A skill for YouTube thumbnail design: sizes, contrast, safe zones, and image generation through the belt CLI.
npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a claude-codeWhat youtube-thumbnail-design does
The skill pins down what keeps a thumbnail readable. Dimensions are 1280 x 720 px minimum (1920 x 1080 recommended), 16:9, up to 2 MB, in JPG, GIF or PNG. The core test is 120 px: that is roughly how wide a thumbnail shows up on mobile, and at that size the mood, the subject and any text still have to be legible.
A safe-zone map comes with it. Keep key elements out of the bottom-right corner (duration badge), the bottom-left (chapter markers) and the edges, since cropping shifts between devices. Other sections cover high-contrast colour pairs, text rules (6 words max, bold sans-serif with a stroke) and face expression psychology, where surprise ranks highest for CTR and neutral ranks lowest. Prompt templates for tutorials, before/after, product comparisons and listicles are included.
Images are generated with belt app run … calls to models such as falai/flux-dev-lora and bytedance/seedream-4-5. You need the belt CLI and a belt login first; the skill ships alongside the belt skill from belt-sh/cli.
What it helps with
- generate a tutorial or review thumbnail from a ready prompt
- check whether a thumbnail survives the 120 px mobile view
- pick a contrasting colour pair that matches the video's mood
- place text and face so the duration badge does not cover them
- choose a facial expression for the content type
Example prompts for the agent
- Generate a thumbnail for my laptop review video with
belt app run falai/flux-dev-lora, 1280 x 720 - Run the 120 px test on my thumbnail and tell me what to fix
- Make a before/after thumbnail: messy desk on the left, tidy on the right
How to install youtube-thumbnail-design
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a claude-code2Manually: put the files in place
~/.claude/skills/youtube-thumbnail-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/youtube-thumbnail-design/
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a codex2Manually: put the files in place
.agents/skills/youtube-thumbnail-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a cursor2Manually: put the files in place
.cursor/skills/youtube-thumbnail-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install 101-skills/superpowers youtube-thumbnail-design2Manually: put the files in place
.github/skills/youtube-thumbnail-design/SKILL.md1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/101-skills/superpowers --path guides/design/youtube-thumbnail-designManually: put the files in place
.devin/skills/youtube-thumbnail-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about youtube-thumbnail-design
How to install youtube-thumbnail-design in Claude?
Run npx skills add 101-skills/superpowers --skill youtube-thumbnail-design -a claude-code. The skill file lands at ~/.claude/skills/youtube-thumbnail-design/SKILL.md.
What does youtube-thumbnail-design do?
It sets out how to build a YouTube thumbnail: sizes and formats, safe zones, colour contrast, text rules and facial expressions. It also supplies prompts for image generation via belt.
What do I need to generate thumbnails?
The belt CLI and a belt login. The ready-made commands call falai/flux-dev-lora and bytedance/seedream-4-5.
