跳到正文
cccskills
免费在 GitHub 公开

youtube-thumbnail-design

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

中文简介正在准备中。当前显示原文说明。

集成工具YouTube

实测评分 未实测

查看安装方法

包含的文件(2)

  • SKILL.md9.4 KB
  • skill-report.json32.7 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

SpecValue
Dimensions1280 x 720 px (minimum)
Recommended1920 x 1080 px
Aspect ratio16:9
Max file size2 MB
FormatsJPG, 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

CombinationMoodBest For
Yellow + BlackUrgency, attentionTech, business, lists
Red + WhiteEnergy, excitementEntertainment, reactions
Blue + OrangeProfessional contrastEducation, tutorials
Green + WhiteGrowth, moneyFinance, success stories
Purple + YellowPremium, creativeDesign, art, creativity
White + DarkClean, minimalLuxury, 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

RuleReason
Max 6 wordsReadability at thumbnail size
Min 60pt equivalentMust be legible at 120px width
Bold sans-serif fontThin fonts disappear at small sizes
Contrast stroke/shadowEnsures readability on any background
No small textIf it's not readable small, cut it

Face Expression Psychology

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

ExpressionCTR ImpactBest For
Surprise/shockHighestReaction, reveal, discovery content
CuriosityHighTutorial, how-to, tips
ExcitementHighUnboxing, reviews, announcements
Concern/worryMedium-highWarning, mistake, problem content
ConfidenceMediumExpert advice, authority content
NeutralLowestAvoid 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:

VariableTest A vs B
Face vs No faceSame composition, with/without person
ExpressionSurprise vs curiosity
Color schemeWarm vs cool palette
Text vs No textWith/without text overlay
BackgroundBright vs dark
CompositionLeft-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

MistakeProblemFix
Too much textUnreadable at thumbnail sizeMax 6 words or no text
Low contrastDisappears in the feedUse complementary colors
Cluttered compositionEye doesn't know where to lookOne focal point
Generic stock photo feelNo personality, gets skippedAuthentic expressions, unique angles
Tiny detailsLost at 120pxBold, simple shapes
Same style every videoViewer fatigueVary within brand guidelines
Misleading thumbnailKills trust, hurts retentionMatch 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 store

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace4432026年10月25日 更新

Trigger for: explaining current FAR, DFARS, or agency-supplement text; determining documented acquisition-policy status for an agency and FAR part; comparing codified text, RFO model text, and agency deviations; tracing acquisition rulemaking; finding procurement comment periods; analyzing public comments; refreshing prior policy analysis; or producing an Acquisition Policy Impact Brief. Use published federal sources and supplied policy documents without making legal or procurement-specific applicability determinations. Do not use for clause selection, market research execution, opportunities, pricing, grants, or cooperative agreements.

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace4432026年10月25日 更新

Systematic framework for extracting actionable items from documents and organizing them into prioritized, trackable checklists. Use when converting reports, meeting notes, audits, or any document with embedded action items into structured TODO lists.

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace4432026年10月25日 更新

Browser automation for AI agents via inference.sh. Navigate web pages, interact with elements using @e refs, take screenshots, record video. Capabilities: web scraping, form filling, clicking, typing, drag-drop, file upload, JavaScript execution. Use for: web automation, data extraction, testing, agent browsing, research. Triggers: browser, web automation, scrape, navigate, click, fill form, screenshot, browse web, playwright, headless browser, web agent, surf internet, record video

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace4432026年10月25日 更新

This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace4432026年10月25日 更新

Run AI apps via inference.sh CLI - image generation, video creation, LLMs, search, 3D, Twitter automation. Models: FLUX, Veo, Gemini, Grok, Claude, Seedance, OmniHuman, Tavily, Exa, OpenRouter, and many more. Use when running AI apps, generating images/videos, calling LLMs, web search, or automating Twitter. Triggers: inference.sh, infsh, ai model, run ai, serverless ai, ai api, flux, veo, claude api, image generation, video generation, openrouter, tavily, exa search, twitter api, grok

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace4432026年10月25日 更新

查看 aiskillstore 的全部技能

报告此技能的问题