design-youtube-thumbnail — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited design-youtube-thumbnail (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
DESIGN.md exists for the brand./design/<brand-slug>/artifacts/youtube-YYYY-MM-DD-<slug>.html
test -f ./design/<brand-slug>/tokens.cssAsk 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.
Pick ONE archetype before any other axis. YouTube thumbnails have specific archetypes that work at small sizes; pick from these.
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:
centered-bold | left-anchored | split-diagonal | corner-stamp | full-text-takeovermonolithic-display (one huge word) | stacked-words (words on own lines) | display-with-mono-captionsingle-accent-block | inverted-canvas | monochrome | duotone-splitAvoid: 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/).
<!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>Imagine the canvas scaled to 240×135px (a YouTube mobile feed thumbnail). At that 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.
EP. 01 cosplay), and 8 (no animations).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.
Governed by three shared canonical references — read them, do not restate them:
Forbidden (fast scan — the references hold the full list):
hsl(230–280) family on a near-white surface. The single loudest AI tell.Required variation (every invocation):
Authenticity: prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders.
var(--*) except 1px borders and the canvas pixel dimensions.../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.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.