/design-youtube-thumbnail

name: design-youtube-thumbnail
description: 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".

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: