New: Earn 20% as an AgentAlley affiliate. Share your link and earn on every sale you refer. Join now New: Earn 20% as an affiliate. Join now

Generate a branded YouTube thumbnail from a video title

by charlie947 · MIT license · ★ 3,652 on GitHub · updated Sep 15

Youtube thumbnail cover

Generate a branded YouTube thumbnail from a video title. Uses a reference photo of the creator, high-CTR thumbnail principles, and brand colours to produce a ready-to-generate image prompt for Gemini.

---
name: youtube-thumbnail
description: >
  Generate a branded YouTube thumbnail from a video title. Uses a reference photo of the creator, high-CTR thumbnail principles, and brand colours to produce a ready-to-generate image prompt for Gemini. Use this skill whenever the user says "thumbnail", "youtube thumbnail", "build me a thumbnail", or wants a video cover image before writing the script. The thumbnail-first workflow mirrors the graphic-first approach for LinkedIn: sells the video before anyone hears a word of the script.
---

# YouTube Thumbnail

## Codex and Claude runtime

- Use this skill in Codex or Claude with the tools actually available in the current task. `AskUserQuestion` examples describe the questions, not a required API: use an available question tool within its limits, or ask in chat. Reuse answers and source material already supplied.
- Work in the user-selected project. Read its `about-me.md`, `voice.md` and relevant brand files before personalised work. Confirm the intended author if files conflict or contain starter defaults. Ask for missing facts or run `voice-builder`; never inherit the maintainer's identity, accounts or private files.
- Resolve bundled `references/` relative to this skill folder. For an explicitly requested profile refresh, read and update the canonical `about-me.md`, `voice.md` or `newsletter-voice.md` in place, preserving unrelated user facts and rules. Consumers must reread those canonical files. Use a new filename only for new deliverables that would collide with unrelated existing files. Installation alone never starts an interview or writes files. Do not write persistent learnings unless requested.
- Use supplied evidence first. Verify external claims through available search/source tools when needed. If a source or integration is unavailable, name the missing capability and offer supplied text/export input. Never invent facts, first-person experience, metrics or a successful tool run.
- Connect only services needed for the chosen route through the user's existing account. Never print credentials or overwrite connections. Drafting, saving and reviewing do not authorise publishing, sending messages or changing accounts.

## Visual completion state

Overview

This skill's image prompts are prompt-ready, not generated or visually reviewed assets. Keep its named Gemini workflow unless the user requests another generator. A missing image service does not block writing a prompt. When images are supplied or generated, open and inspect each export at full size and feed size (about 360px wide, 320px for thumbnails). Check exact copy, dimensions, clipping, legibility, brand colours, font appearance, logos and reference fidelity. Fix and re-inspect failed exports. Record any unavailable export or inspection as pending. An image prompt or raster export is not an editable design file.

Manual install (npx, ZIP)
Claude Codenpx skills add charlie947/social-media-skills --skill youtube-thumbnail -g -a claude-code
Claude Code (manual)mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/charlie947/social-media-skills/tar.gz/8cefb5b6d037 \ | tar -xz -C ~/.claude/skills --strip-components=2 social-media-skills-8cefb5b6d037/skills/youtube-thumbnail
Windows (PowerShell)New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/a4ac3788b6a13ff94eb2/youtube-thumbnail.zip" -OutFile "$env:TEMP\youtube-thumbnail.zip"; Expand-Archive "$env:TEMP\youtube-thumbnail.zip" -DestinationPath "$HOME\.claude\skills" -Force
Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.
Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

  • SKILL.md7.5 KB
Read the files here
charlie947/8cefb5b1 file
SKILL.md
Show the full text147 lines

YouTube Thumbnail

Codex and Claude runtime

  • Use this skill in Codex or Claude with the tools actually available in the current task. AskUserQuestion examples describe the questions, not a required API: use an available question tool within its limits, or ask in chat. Reuse answers and source material already supplied.
  • Work in the user-selected project. Read its about-me.md, voice.md and relevant brand files before personalised work. Confirm the intended author if files conflict or contain starter defaults. Ask for missing facts or run voice-builder; never inherit the maintainer's identity, accounts or private files.
  • Resolve bundled references/ relative to this skill folder. For an explicitly requested profile refresh, read and update the canonical about-me.md, voice.md or newsletter-voice.md in place, preserving unrelated user facts and rules. Consumers must reread those canonical files. Use a new filename only for new deliverables that would collide with unrelated existing files. Installation alone never starts an interview or writes files. Do not write persistent learnings unless requested.
  • Use supplied evidence first. Verify external claims through available search/source tools when needed. If a source or integration is unavailable, name the missing capability and offer supplied text/export input. Never invent facts, first-person experience, metrics or a successful tool run.
  • Connect only services needed for the chosen route through the user's existing account. Never print credentials or overwrite connections. Drafting, saving and reviewing do not authorise publishing, sending messages or changing accounts.

Visual completion state

This skill's image prompts are prompt-ready, not generated or visually reviewed assets. Keep its named Gemini workflow unless the user requests another generator. A missing image service does not block writing a prompt. When images are supplied or generated, open and inspect each export at full size and feed size (about 360px wide, 320px for thumbnails). Check exact copy, dimensions, clipping, legibility, brand colours, font appearance, logos and reference fidelity. Fix and re-inspect failed exports. Record any unavailable export or inspection as pending. An image prompt or raster export is not an editable design file.

CRITICAL: Auto-start on load

When this skill triggers, go straight to Step 1.

Step 1. Gather inputs

Check the project for a reference photo config. Look in this order:

  1. thumbnail-config.md in the project root
  2. brand-kit.md — look for a reference image path and brand colours
  3. about-me.md — for the creator's name and positioning

If a reference photo path is stored, pre-fill it. Otherwise ask:

Upload or provide the path to the reference photo of yourself you want used in the thumbnail. Ideally a clear headshot with distinctive lighting and expression you plan to reuse across videos for brand consistency.

Then call AskUserQuestion:

[
  {
    "question": "What is the video title?",
    "header": "Title",
    "multiSelect": false,
    "options": [
      {"label": "I will type the title", "description": "Type the full working title"},
      {"label": "Suggest one", "description": "Given the topic, propose 3 click-worthy titles first"}
    ]
  },
  {
    "question": "Emotional tone?",
    "header": "Tone",
    "multiSelect": false,
    "options": [
      {"label": "Shock / surprise", "description": "Wide eyes, open mouth, bold reaction"},
      {"label": "Curious / thinking", "description": "Slight smirk, raised eyebrow, gaze off-frame"},
      {"label": "Confident / direct", "description": "Eye contact, calm, assertive"},
      {"label": "Frustrated / strong take", "description": "Intense gaze, hand gesture, tension"}
    ]
  }
]

Confirm the title and promise against the video’s supplied content. Do not invent a result, imply a demonstration exists, or use an unprovided face or brand mark. A missing reference photo leaves photo-based generation pending, while a composition brief can still be drafted.

Step 2. Apply thumbnail best practices

Every thumbnail must follow these rules:

  • Face fills 30 to 50 percent of the frame. Readable at small sizes.
  • 3 to 5 words maximum of large text. 6 if absolutely necessary.
  • Two colours dominate. Brand primary + one high-contrast accent (yellow, red, cyan work well).
  • One clear focal element besides the face. Tool logo, bold number, arrow, or prop.
  • High contrast between face, text, and background. Test by squinting.
  • Text is not a sentence. It is a hook phrase. Examples: "I fired my team", "Claude can now...", "Don't do this".
  • No small text, no logos bottom-right (watch time icon sits there).

Step 3. Build the thumbnail brief

Output a concise brief the user can review:

THUMBNAIL BRIEF: [video title]

Composition: [face position, % of frame, direction of gaze]
Text: "[hook phrase, 3-5 words]"
Text placement: [left, right, top, wraps around face]
Colour palette: [primary hex], [accent hex], [background hex]
Supporting element: [logo / prop / arrow / number]
Emotional tone: [tone from Step 1]

Then ask:

Here's the brief. Say "generate" to output the image prompt or tell me what to change.

Step 4. Output the Gemini prompt

Once approved, output the image generation prompt in a code block:

Using the attached reference photo of me, generate a YouTube thumbnail at 1280 x 720 pixels (16:9).

Composition:
- Place me [left / right / centre] filling [30-50]% of the frame
- My expression: [tone details — e.g., shocked with wide eyes and open mouth]
- My gaze: [direction — e.g., looking directly at camera / looking off-frame toward the text]

Text:
- Display "[hook phrase]" in large bold sans-serif typography
- Text colour: [hex]
- Text outline: [colour, thickness for readability]
- Text placement: [specific area]

Colour palette:
- Primary: [hex]
- Accent: [hex]
- Background: [hex] — [describe treatment: flat, gradient, blurred scene, etc.]

Supporting element: [specific description of the supporting visual]

Constraints:
- Face must be clear and sharp
- Text must be readable at 320px wide (YouTube mobile size)
- No watermarks, no YouTube UI elements, no bottom-right corner text
- High contrast between face, text, and background

Tell the user:

Paste this into a new Gemini chat, attach your reference photo, enable Create Image, and select Nano Banana. Generate at 1280x720.

Step 5. Offer the next move

Want me to outline the video next? Hook, mid, CTA from the thumbnail.

Rules

  • 1280x720 pixels (16:9). YouTube's native thumbnail size.
  • Never include the reference photo path in the prompt itself — the user attaches the photo separately.
  • Never allow more than 6 words of text, 5 is ideal, 3 is best.
  • Face must always be a visible focal point. No face-hidden compositions.
  • Never use em dashes.
  • British English unless voice.md specifies otherwise.
  • If brand-kit.md is in the project, read it and use exact brand colours.
  • Recommend the user keep a consistent thumbnail style across videos for channel recognition.
1---
2name: youtube-thumbnail
3description: >
4 Generate a branded YouTube thumbnail from a video title. Uses a reference photo of the creator, high-CTR thumbnail principles, and brand colours to produce a ready-to-generate image prompt for Gemini. Use this skill whenever the user says "thumbnail", "youtube thumbnail", "build me a thumbnail", or wants a video cover image before writing the script. The thumbnail-first workflow mirrors the graphic-first approach for LinkedIn: sells the video before anyone hears a word of the script.
5---
6 
7# YouTube Thumbnail
8 
9## Codex and Claude runtime
10 
11- Use this skill in Codex or Claude with the tools actually available in the current task. `AskUserQuestion` examples describe the questions, not a required API: use an available question tool within its limits, or ask in chat. Reuse answers and source material already supplied.
12- Work in the user-selected project. Read its `about-me.md`, `voice.md` and relevant brand files before personalised work. Confirm the intended author if files conflict or contain starter defaults. Ask for missing facts or run `voice-builder`; never inherit the maintainer's identity, accounts or private files.
13- Resolve bundled `references/` relative to this skill folder. For an explicitly requested profile refresh, read and update the canonical `about-me.md`, `voice.md` or `newsletter-voice.md` in place, preserving unrelated user facts and rules. Consumers must reread those canonical files. Use a new filename only for new deliverables that would collide with unrelated existing files. Installation alone never starts an interview or writes files. Do not write persistent learnings unless requested.
14- Use supplied evidence first. Verify external claims through available search/source tools when needed. If a source or integration is unavailable, name the missing capability and offer supplied text/export input. Never invent facts, first-person experience, metrics or a successful tool run.
15- Connect only services needed for the chosen route through the user's existing account. Never print credentials or overwrite connections. Drafting, saving and reviewing do not authorise publishing, sending messages or changing accounts.
16 
17## Visual completion state
18 
19This skill's image prompts are **prompt-ready**, not generated or visually reviewed assets. Keep its named Gemini workflow unless the user requests another generator. A missing image service does not block writing a prompt. When images are supplied or generated, open and inspect each export at full size and feed size (about 360px wide, 320px for thumbnails). Check exact copy, dimensions, clipping, legibility, brand colours, font appearance, logos and reference fidelity. Fix and re-inspect failed exports. Record any unavailable export or inspection as pending. An image prompt or raster export is not an editable design file.
20 
21## CRITICAL: Auto-start on load
22 
23When this skill triggers, go straight to Step 1.
24 
25## Step 1. Gather inputs
26 
27Check the project for a reference photo config. Look in this order:
28 
291. `thumbnail-config.md` in the project root
302. `brand-kit.md` — look for a reference image path and brand colours
313. `about-me.md` — for the creator's name and positioning
32 
33If a reference photo path is stored, pre-fill it. Otherwise ask:
34 
35> Upload or provide the path to the reference photo of yourself you want used in the thumbnail. Ideally a clear headshot with distinctive lighting and expression you plan to reuse across videos for brand consistency.
36 
37Then call AskUserQuestion:
38 
39```json
40[
41 {
42 "question": "What is the video title?",
43 "header": "Title",
44 "multiSelect": false,
45 "options": [
46 {"label": "I will type the title", "description": "Type the full working title"},
47 {"label": "Suggest one", "description": "Given the topic, propose 3 click-worthy titles first"}
48 ]
49 },
50 {
51 "question": "Emotional tone?",
52 "header": "Tone",
53 "multiSelect": false,
54 "options": [
55 {"label": "Shock / surprise", "description": "Wide eyes, open mouth, bold reaction"},
56 {"label": "Curious / thinking", "description": "Slight smirk, raised eyebrow, gaze off-frame"},
57 {"label": "Confident / direct", "description": "Eye contact, calm, assertive"},
58 {"label": "Frustrated / strong take", "description": "Intense gaze, hand gesture, tension"}
59 ]
60 }
61]
62```
63 
64Confirm the title and promise against the video’s supplied content. Do not invent a result, imply a demonstration exists, or use an unprovided face or brand mark. A missing reference photo leaves photo-based generation pending, while a composition brief can still be drafted.
65 
66## Step 2. Apply thumbnail best practices
67 
68Every thumbnail must follow these rules:
69 
70- **Face fills 30 to 50 percent** of the frame. Readable at small sizes.
71- **3 to 5 words maximum** of large text. 6 if absolutely necessary.
72- **Two colours dominate**. Brand primary + one high-contrast accent (yellow, red, cyan work well).
73- **One clear focal element** besides the face. Tool logo, bold number, arrow, or prop.
74- **High contrast** between face, text, and background. Test by squinting.
75- **Text is not a sentence**. It is a hook phrase. Examples: "I fired my team", "Claude can now...", "Don't do this".
76- **No small text, no logos bottom-right** (watch time icon sits there).
77 
78## Step 3. Build the thumbnail brief
79 
80Output a concise brief the user can review:
81 
82```
83THUMBNAIL BRIEF: [video title]
84 
85Composition: [face position, % of frame, direction of gaze]
86Text: "[hook phrase, 3-5 words]"
87Text placement: [left, right, top, wraps around face]
88Colour palette: [primary hex], [accent hex], [background hex]
89Supporting element: [logo / prop / arrow / number]
90Emotional tone: [tone from Step 1]
91```
92 
93Then ask:
94 
95> Here's the brief. Say "generate" to output the image prompt or tell me what to change.
96 
97## Step 4. Output the Gemini prompt
98 
99Once approved, output the image generation prompt in a code block:
100 
101```
102Using the attached reference photo of me, generate a YouTube thumbnail at 1280 x 720 pixels (16:9).
103 
104Composition:
105- Place me [left / right / centre] filling [30-50]% of the frame
106- My expression: [tone details — e.g., shocked with wide eyes and open mouth]
107- My gaze: [direction — e.g., looking directly at camera / looking off-frame toward the text]
108 
109Text:
110- Display "[hook phrase]" in large bold sans-serif typography
111- Text colour: [hex]
112- Text outline: [colour, thickness for readability]
113- Text placement: [specific area]
114 
115Colour palette:
116- Primary: [hex]
117- Accent: [hex]
118- Background: [hex] — [describe treatment: flat, gradient, blurred scene, etc.]
119 
120Supporting element: [specific description of the supporting visual]
121 
122Constraints:
123- Face must be clear and sharp
124- Text must be readable at 320px wide (YouTube mobile size)
125- No watermarks, no YouTube UI elements, no bottom-right corner text
126- High contrast between face, text, and background
127```
128 
129Tell the user:
130 
131> Paste this into a new Gemini chat, attach your reference photo, enable Create Image, and select Nano Banana. Generate at 1280x720.
132 
133## Step 5. Offer the next move
134 
135> Want me to outline the video next? Hook, mid, CTA from the thumbnail.
136 
137## Rules
138 
139- 1280x720 pixels (16:9). YouTube's native thumbnail size.
140- Never include the reference photo path in the prompt itself — the user attaches the photo separately.
141- Never allow more than 6 words of text, 5 is ideal, 3 is best.
142- Face must always be a visible focal point. No face-hidden compositions.
143- Never use em dashes.
144- British English unless voice.md specifies otherwise.
145- If brand-kit.md is in the project, read it and use exact brand colours.
146- Recommend the user keep a consistent thumbnail style across videos for channel recognition.
147 
View all files on GitHub →

Details

Updated
Sep 15, 2026
License
MIT
Stars on the repo
★ 3,652
Checked
Source
charlie947/social-media-skills ↗
Creator
charlie947 · 17 listings
View creator

Similar skills

See all →
SkillDesign a high-CTR YouTube thumbnailMuapi youtube thumbnailSamurAIGPT/Generative-Media-Skills · by SamurAIGPTDesign a high-CTR YouTube thumbnail — striking imagery, bold text placement, and emotional face/subject if needed.★ 4.3k GitHub starsSkillGenerate article or newsletter thumbnail candidatesThumbnail Creator Skill (via Gemini)mohitagw15856/pm-claude-skills · by mohitagw15856Generate article or newsletter thumbnail candidates using the Gemini API from inside Claude Code. Claude reads article copy, proposes composition concepts, writes image generation prompts incorporating brand specs, calls Gemini to generate the images, evaluates the results via computer vision, and returns ranked candidates with rationale. Use when asked to create thumbnails, generate cover images, or produce visual candidates for an article or newsletter.★ 1.4k GitHub starsSkillPlan, write, and publish for YouTube and YouTube ShortsYouTube Marketing Skillssergebulaev/youtube-skills · by sergebulaevPlan, write, and publish for YouTube and YouTube Shorts. Use when the user wants high-CTR video titles, an SEO description with chapters and links, a first-30-seconds retention script (or a 3-second Shorts hook), a designer-ready thumbnail brief, a community-tab post or poll, or a weekly upload plan. The user supplies the video; the skills produce the title, description, hook, and thumbnail brief, then on approval upload and schedule via the Publora API.★ 36 GitHub starsSkillTurn a YouTube video idea into a designer-ready thumbnailYouTube Thumbnail Briefsergebulaev/youtube-skills · by sergebulaevTurn a YouTube video idea into a designer-ready thumbnail brief: focal subject, face and emotion, a text overlay of 4 words or fewer that the title does not repeat, contrast and composition, and 2 to 3 A/B concepts for Test and Compare. Built on 2026 principles (one focal point, legible at 120 pixels, complements the title). Outputs the brief plus the Publora attach step (the image upload itself is out of band). Use to plan a thumbnail. Not for title words (use yt-title-optimizer).★ 36 GitHub starsSkillGenerate high-CTR YouTube thumbnails using Nano Banana ProGenerate youtube thumbnailnovoads/agent-skills · by novoadsGenerate high-CTR YouTube thumbnails using Nano Banana Pro via the Novoads API. Handles reference image upload, character likeness alignment, proven CTR-tested prompt formulas, and bounded batch generation. Use when the user asks to create a YouTube thumbnail, video thumbnail, A/B test thumbnail variations, or refers to thumbnail design with their face, brand assets, or product photos.★ 23 GitHub starsPromptA vertical social media thumbnail comparing an impressionistYouTube Thumbnail - AI Realism Thumbnail: Girls with LanternsYouMind-OpenLab/awesome-gpt-image-2 · by VideoProc AIA vertical social media thumbnail comparing an impressionist oil painting of two girls with lanterns to its photorealistic AI-generated recreation.New listing

More from charlie947

SkillTurn a LinkedIn Analytics exportAnalytics dashboardcharlie947/social-media-skills · by charlie947Turn a LinkedIn Analytics export into an interactive dark-themed React dashboard plus a written strategic analysis with 5 data-backed content recommendations. Reads every sheet in the export, builds charts for engagement trend, follower growth, post performance scatter, day-of-week heatmap, and audience breakdown. Use this skill whenever the user says "analyse my linkedin", "linkedin analytics", "build my dashboard", "review my performance", or uploads a LinkedIn Analytics export file. Requires the user's LinkedIn Analytics export (xlsx) as input.★ 3.7k GitHub starsSkillGenerate 24 to 40 LinkedIn post ideas in a single tableContent matrixcharlie947/social-media-skills · by charlie947Generate 24 to 40 LinkedIn post ideas in a single table by pairing the user's content pillars with 8 proven content formats. Based on the Justin Welsh content matrix. Use this skill whenever the user says "give me post ideas", "content matrix", "what should I post about", "generate post ideas", "content ideation", or "map out my content for the month". Pulls from about-me.md and voice.md if they exist, otherwise asks for pillars and context.★ 3.7k GitHub starsSkillGenerate a branded slide-by-slide LinkedIn carouselGemini carouselcharlie947/social-media-skills · by charlie947Generate a branded slide-by-slide LinkedIn carousel using Gemini. Takes source content, builds a design brief, waits for approval, then outputs per-slide image generation prompts. 1080x1350 vertical format. Use this skill whenever the user says "carousel", "build a carousel", "turn this into a carousel", "gemini carousel", or wants multi-slide LinkedIn content. Always includes an approval gate between brief and image generation.★ 3.7k GitHub starsSkillGenerate a hand-drawn whiteboard infographic promptGemini infographiccharlie947/social-media-skills · by charlie947Generate a hand-drawn whiteboard infographic prompt. Takes source content (a post, newsletter, blog, research note) and returns a complete Gemini image generation prompt with a structured brief. Use this skill whenever the user says "whiteboard infographic", "gemini infographic", "hand-drawn graphic", "turn this into a whiteboard", or wants an AI-generated infographic for a post.★ 3.7k GitHub starsSkillCreate LinkedIn post graphicsGraphic designercharlie947/social-media-skills · by charlie947Create LinkedIn post graphics. Decides between an HTML/CSS structured graphic or an AI-generated infographic based on the post content. Use this skill whenever the user says "design a graphic", "create a visual", "make an image", "graphic for my post", "LinkedIn image", or wants any visual content to pair with a LinkedIn post. Also trigger when the user finishes writing a post and wants a matching graphic.★ 3.7k GitHub starsSkillGenerate 6 clickbait-style LinkedIn hook variations for anyHook generatorcharlie947/social-media-skills · by charlie947Generate 6 clickbait-style LinkedIn hook variations for any topic. Two-line hooks built on the formula: a 40-char opening line, a 40-char bold contrast line. Uses supplied numbers and genuine first-person experience when available. Use this skill whenever the user says "write me hooks", "hook ideas", "generate hooks", "I need a hook for a post about...", or pastes a topic and asks for openers. Fast output, no preamble.★ 3.7k GitHub stars