slogsdonslogsdon/skills-design/skills/design-youtube-thumbnail/SKILL.md

design-youtube-thumbnail

Skill3 starsChanged 3 months agoMITView on GitHub

Generate a YouTube thumbnail artifact — a 1280×720 HTML canvas optimized for legibility at small sizes (mobile feed, sidebar suggestions, search results). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "youtube thumbnail for X", "thumbnail for [video title]", "yt thumb", "/youtube-thumbnail".

In this repository18 other files it gives its agents.
- design-blog-heroSkill
- design-business-cardSkill
- design-carousel-slideSkill
- design-instagram-postSkill
- design-landing-pageSkill
- design-linkedin-postSkill
- design-link-in-bioSkill
- design-newsletter-headerSkill
- design-planSkill
- design-quote-cardSkill
- design-systemSkill
- design-twitter-cardSkill
- design-ui-componentsSkill
- design-youtube-channel-artSkill
- figure-auditSkill
- pdf-htmlSkill
- pdf-paginatedSkill
- screenshot-htmlSkill

The file

We split this skill into the rules it gives an agent

9 rules. About 0 are common, 8 are distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈8
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Ask in one message:
line 35
Distinctive:
If the user gives you 8+ words for thumbnail text, push back: "That's too many for legibility at mobile size.
line 45
Distinctive:
After archetype, pick from these YouTube-specific axes:
line 59
Distinctive:
Avoid: faces, arrows pointing at things, red circles around things, "MIND BLOWN" energy.
line 64
Distinctive:
If "no" to the first two, the hook is too small or contrast too low.
line 178
Distinctive:
Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1).
line 218
Distinctive:
Authenticity: prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" …
line 221
Very specific:
Token-pure: Every value via var(--*) except 1px borders and the canvas pixel dimensions.
line 228
Distinctive:
Brand mark stays small or absent: If present, max 18px font-size, corner placement.
line 229

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Skill: youtube-thumbnail

Produces a pixel-exact 1280×720 HTML canvas. The defining constraint: it must read clearly at 240×135px (typical mobile feed thumbnail) — not just at full size. Bias toward fewer words, larger type, higher contrast than other platform skills.

When to use

User has (or is about to publish) a YouTube video and wants a thumbnail asset
A DESIGN.md exists for the brand

Inputs

Required: brand slug, video title (the ACTUAL video title, not the on-thumbnail text)
Required: thumbnail text — the 2–4 words that go ON the image (this is NOT the video title; it's the visual hook)
Optional: episode/series number, supporting micro-text (max 6 words)

Output

./design/<brand-slug>/artifacts/youtube-YYYY-MM-DD-<slug>.html

Steps

1. Verify brand exists

test -f ./design/<brand-slug>/tokens.css

2. Gather the brief

Ask in one message:

1. Video title (full title that goes in YouTube's title field)
2. Thumbnail text — 2–4 words MAX that appear ON the image. This is your visual hook, not your title.
   Examples: "Built it wrong" / "Faster than you'd think" / "Why I quit Vim" / "Day 47"
3. Optional episode/series marker (e.g. "EP. 12" or "PART 3 / 5")
4. Optional supporting micro-text under the hook (max 6 words)

If the user gives you 8+ words for thumbnail text, push back: "That's too many for legibility at mobile size. Pick the 3–4 words that carry the hook." Don't proceed until they agree.

3. Pick variation — ARCHITECTURE FIRST

Pick ONE archetype before any other axis. YouTube thumbnails have specific archetypes that work at small sizes; pick from these.

Architecture archetype (pick FIRST):
- text-only — the hook is the entire artifact. No marker, no mark, no rules. Default for maximum legibility.
- single-word — one massive word fills 70%+ of canvas; everything else absent.
- number-led — a number/stat dominates (e.g. "47", "0.3s", "$11M"); hook becomes caption.
- object-of-content — looks like a screenshot/quote from the video itself (transcript line, terminal output, code fragment).
- pattern-led — repetition or grid fills canvas; one element breaks it.
- chrome-led — marker + hook + corner mark. Last resort. Use only if the brand requires consistent chrome AND no other archetype suits.

After archetype, pick from these YouTube-specific axes:

Layout: centered-bold | left-anchored | split-diagonal | corner-stamp | full-text-takeover
Type pressure: monolithic-display (one huge word) | stacked-words (words on own lines) | display-with-mono-caption
Color usage: single-accent-block | inverted-canvas | monochrome | duotone-split

Avoid: faces, arrows pointing at things, red circles around things, "MIND BLOWN" energy. Type-led restraint is the differentiator.

Cross-artifact rule: different archetype than the brand's most recent artifact (check ./design/<brand-slug>/artifacts/).

4. Generate the canvas HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — YouTube — <video title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; display: grid; place-items: center; font-family: var(--type-body-md-family); }

.canvas {
  width: 1280px;
  height: 720px;
  background: var(--color-surface);
  color: var(--color-ink);
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Justification per layout choice */
}

/* The hook text — MUST be massive. Use clamp() with high min/max */
.hook {
  font-family: var(--type-display-xl-family);
  font-weight: 700; /* even if display-xl is 600, push to 700 here for thumbnail weight */
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
  font-size: clamp(140px, 15vw, 220px);
}

/* Stacked variant: each word on its own line */
.hook--stacked .word { display: block; }

/* Episode marker */
.marker {
  font: var(--type-label-caps-weight) var(--type-label-caps-size)/var(--type-label-caps-leading) var(--type-label-caps-family);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-size: 18px;
}

/* Brand mark in corner — small, never dominates */
.mark {
  position: absolute;
  bottom: var(--space-xl);
  right: var(--space-xl);
  font: var(--type-label-caps-weight) var(--type-label-caps-size)/var(--type-label-caps-leading) var(--type-label-caps-family);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Inverted canvas variant */
.canvas--inverted { background: var(--color-ink); color: var(--color-surface); }
.canvas--inverted .marker, .canvas--inverted .mark { color: var(--color-surface); opacity: 0.7; }

/* Single-accent-block variant — one colored region */
.canvas--accent::before {
  content: "";
  position: absolute;
  background: var(--color-accent);
  /* Position varies by layout — e.g. left third, top quarter, diagonal */
  width: 30%; height: 100%;
  top: 0; left: 0;
  z-index: 0;
}
.canvas--accent > * { position: relative; z-index: 1; }

@page { size: 1280px 720px; margin: 0; }
</style>
</head>
<body>
<!--
Variation choices:
  layout: <picked>
  type-pressure: <picked>
  color: <picked>
  composition: <picked>

Video title (for YouTube field, NOT on canvas): "<title>"
Thumbnail text (on canvas): "<hook>"
-->
<article class="canvas <modifier classes>">
  <span class="marker"><episode marker, e.g. "EP. 12 — TITLE"></span>
  <h1 class="hook"><hook text — split into words for stacked variant></h1>
  <span class="mark"><Brand mark></span>
</article>
</body>
</html>

5. Test legibility (mental check)

Imagine the canvas scaled to 240×135px (a YouTube mobile feed thumbnail). At that size:

Can you read the hook text in under 1 second?
Is the contrast strong enough to pop against a busy feed?
Does the brand mark survive (or is it OK if it disappears at small size)?

If "no" to the first two, the hook is too small or contrast too low. Bump font-size up or switch to inverted canvas.

6. Verify and report

Canvas is exactly 1280×720
Architecture archetype documented AND differs from the most recent artifact in this brand
Read ../../design-anti-patterns.md and verify the artifact violates none of its rules. Pay special attention to sections 2 (type emphasis), 4 (no top-metadata-row disguised as eyebrow; vary mark placement), 5 (no EP. 01 cosplay), and 8 (no animations).
Hook text is at minimum 140px (typical: 160–280px); no more than 4 words in the hook
No face, no arrow, no red circle, no thumbnail-clickbait clichés (YouTube-specific)
Brand mark, if present, is unobtrusive (corner, eyebrow style, opacity ~0.7) — or absent entirely

YouTube thumbnail at ./design/<brand-slug>/artifacts/youtube-YYYY-MM-DD-<slug>.html.
Variation: <layout> × <type-pressure> × <color> × <composition>.
Export as PNG at exact 1280×720: open in browser → DevTools → device toolbar → 1280×720 → screenshot.
Quick legibility check: zoom out in your browser to 20% — if the hook still reads instantly, you're good.

Anti-Slop Rules

Governed by three shared canonical references — read them, do not restate them:

../../design-anti-patterns.md — the hard floor. Wins every conflict.
../../design-principles.md — the craft floor (typographic hierarchy, spatial rhythm, color theory, layout logic, visual tension).
../../design-variation-sop.md — the named-aesthetic roster + the procedure for varying every invocation.

Forbidden (fast scan — the references hold the full list):

Indigo/violet/purple as default accent or primary — the hsl(230–280) family on a near-white surface. The single loudest AI tell.
Purple→blue / "aurora" / gradient-mesh backgrounds; gradient-fill text.
Glassmorphism without an explicit AA-contrast scrim; floating gradient "blobs" as atmosphere.
The three-up icon-card feature grid; the "hero → 3 cards → CTA" median skeleton.
One global border-radius on every element; timid evenly-weighted low-contrast palette.
Inter / Roboto / Arial / Open Sans / Lato / Helvetica / system as the primary family (Space Grotesk = yellow flag). Use a category-matched stack from the variation roster.
Value-free CTAs ("Get Started", "Learn More", "Sign Up"); the two-CTA hero. Name the real action and its value.

Required variation (every invocation):

Make at least two intentional decisions that differ from the safe defaults (palette, layout structure, typographic voice, or spatial density) AND from the most recent artifact in this brand.
Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1).
Sketch three distinct directions, offer them as a one-line menu, generate the best-fit by default, all three only if asked (variation-sop Rule 3).

Authenticity: prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders.

Rules

Hook word count is hard-capped at 4. Push back on the user if they want more. The whole skill is built around small-size legibility.
No clickbait clichés (YouTube-specific). No faces, no arrows pointing at things, no red circles, no "MIND BLOWN" energy. Type-led restraint is the brand differentiator.
Pixel exact. 1280×720, no flex.
Token-pure. Every value via var(--*) except 1px borders and the canvas pixel dimensions.
Brand mark stays small or absent. If present, max 18px font-size, corner placement.
Anti-pattern compliance. This skill defers to three shared canonical references: ../../design-anti-patterns.md (the hard floor — wins every conflict), ../../design-principles.md (the craft floor), and ../../design-variation-sop.md (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list. If you find a new tell in the output, add it there.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free