30 Claude Prompts That Design Thumbnails

You are a YouTube thumbnail designer who studies CTR data for a living. <context> I need a 1280x720 talking-head video thumbnail built as one self-contained HTML file with inline CSS, scaled to a 16:9 frame so I can preview it instantly as an artifact and screenshot it. </context> <inputs> - Video topic / hook: [WHAT THE VIDEO PROMISES] - The 3-5 word overlay text: [BIG PUNCHY PHRASE] - Channel niche and audience: [E.G. PERSONAL FINANCE, BEGINNERS] - Emotion the face should convey: [SHOCKED / EXCITED / SERIOUS] - Brand colors: [HEX OR DESCRIBE] </inputs> <task> Build a 1280x720 thumbnail at proper aspect ratio: a face placeholder block on one side (labeled with the target expression), a bold high-contrast text overlay of the 3-5 word phrase with a heavy outline or background plate so it stays readable at small sizes, a supporting visual element or icon, and a subtle directional cue (arrow, circle, or glow) pulling the eye to the subject. Use a strong color contrast between text and background. </task> <constraints> - One self-contained HTML file, exactly 16:9, no external assets except Google Fonts. - Text must stay legible at 320px wide (mobile feed); max two text colors. - No lorem ipsum; use the real overlay phrase. Accessible contrast on the text plate. </constraints> <format> Return the full HTML in an artifact, then explain the contrast and focal-point choices and which element earns the click. </format>

You are a YouTube growth designer specializing in list-video thumbnails. <context> I need a 1280x720 thumbnail for a list video, built as one self-contained HTML file with inline CSS at 16:9 so I can preview it as an artifact and export it. </context> <inputs> - Big number to feature: [E.G. 7, 12, 100] - What the number counts: [E.G. AI TOOLS, MISTAKES, HACKS] - Short benefit phrase: [WHY WATCH] - Niche and vibe: [DESCRIBE] - Color scheme: [HEX OR DESCRIBE] </inputs> <task> Build a thumbnail where the big number is the dominant hero element (oversized, styled with a gradient or outline), paired with a short two-to-four word label of what it counts and a small benefit line. Add a simple supporting graphic or icon block. Use a layout that reads instantly: number first, label second. </task> <constraints> - One self-contained HTML file, exactly 16:9, Google Fonts only. - The number must dominate visually and stay crisp at small sizes; no more than three type sizes. - High contrast, accessible text, no filler copy. </constraints> <format> Return the full HTML in an artifact, then explain why you sized the number the way you did and one variant to test. </format>

You are a YouTube thumbnail designer who builds high-contrast transformation visuals. <context> I need a 1280x720 before-and-after split thumbnail built as one self-contained HTML file with inline CSS at 16:9, previewable instantly as an artifact. </context> <inputs> - The transformation: [E.G. MESSY ROOM TO CLEAN, BROKE TO RICH, OLD UI TO NEW] - Left (before) label: [SHORT WORD] - Right (after) label: [SHORT WORD] - Overlay headline: [3-5 WORDS] - Color tone for each side: [DESCRIBE] </inputs> <task> Build a split-screen thumbnail divided by a clear diagonal or vertical line: a desaturated or dull left half labeled "before" and a vibrant right half labeled "after," each with a placeholder visual block. Overlay the short headline across the seam with a heavy text treatment, plus a small arrow or "VS" marker on the divide. </task> <constraints> - One self-contained HTML file, exactly 16:9, Google Fonts only. - The two halves must feel clearly distinct (color, brightness); divider is crisp. - Headline legible over both halves at small sizes; accessible contrast. </constraints> <format> Return the full HTML in an artifact, then explain how you signaled the contrast and where the eye lands first. </format>

You are a thumbnail designer who specializes in educational and tutorial channels. <context> I need a 1280x720 tutorial thumbnail built as one self-contained HTML file with inline CSS at 16:9, previewable instantly as an artifact. </context> <inputs> - What the tutorial teaches: [SKILL OR OUTCOME] - Tool / app shown: [NAME, IF ANY] - Overlay text: [3-6 WORDS, E.G. "DO THIS IN 5 MIN"] - Audience level: [BEGINNER / PRO] - Brand colors: [HEX OR DESCRIBE] </inputs> <task> Build a clean, trustworthy tutorial thumbnail: a UI or screen placeholder block on one side (labeled with the tool), a clear instructional overlay phrase with a step or arrow cue, and a small badge like "step by step" or a time stamp. Keep it less hypey than entertainment thumbnails but still high-contrast and scannable. </task> <constraints> - One self-contained HTML file, exactly 16:9, Google Fonts only. - Layout reads as helpful and clear, not clickbait; text legible at small sizes. - Accessible contrast; no filler copy. </constraints> <format> Return the full HTML in an artifact, then explain how the design signals credibility and one tweak for higher CTR. </format>

You are a thumbnail designer for commentary, reaction, and drama videos. <context> I need a 1280x720 high-emotion reaction thumbnail built as one self-contained HTML file with inline CSS at 16:9, previewable instantly as an artifact. </context> <inputs> - The topic / drama: [WHAT HAPPENED] - Reaction face expression: [SHOCKED / DISGUSTED / LAUGHING] - Overlay text: [SHORT REACTIVE PHRASE] - Secondary subject or screenshot: [WHAT IT REACTS TO] - Color mood: [DESCRIBE] </inputs> <task> Build a reaction thumbnail with a large expressive face placeholder on one side (labeled with the expression), a contrasting subject or screenshot block on the other, an emoji or symbol overlay (red circle, arrow, exclamation) drawing tension, and a punchy reactive overlay phrase. Use saturated, urgent color and a slight tilt or glow for energy. </task> <constraints> - One self-contained HTML file, exactly 16:9, Google Fonts only. - High visual tension but text stays readable at small sizes; max two text colors. - Accessible contrast on the headline; no filler. </constraints> <format> Return the full HTML in an artifact, then explain the tension devices you used and how to keep it on-brand. </format>

You are a podcast brand designer who builds covers that pop in directory grids. <context> I need a 3000x3000-ratio podcast cover built as one self-contained HTML file with inline CSS scaled to a 1:1 frame, previewable instantly as an artifact and exportable as a square image. </context> <inputs> - Show name: [EXACT TITLE] - Tagline (optional): [SHORT LINE] - Topic / genre: [E.G. STARTUPS, TRUE CRIME, COMEDY] - Mood and color palette: [DESCRIBE OR HEX] - Host vibe: [SOLO, INTERVIEW, PANEL] </inputs> <task> Build a square cover with the show name as the dominant element, set in a confident type treatment, plus an optional tagline and a simple genre-fitting graphic motif (waveform, mic, abstract shape) using CSS or inline SVG. Keep it bold and legible even as a tiny tile in Apple Podcasts and Spotify. Use a cohesive two-to-three color palette. </task> <constraints> - One self-contained HTML file, exactly 1:1, Google Fonts and inline SVG only. - Title must be readable at 150x150px (directory thumbnail size); no thin fonts. - Accessible contrast; no filler text. </constraints> <format> Return the full HTML in an artifact, then explain the palette and type choices and how it holds up at tiny sizes. </format>

You are a podcast designer who creates per-episode cover variants on a fixed brand template. <context> I have a podcast and need an episode-specific square cover built as one self-contained HTML file with inline CSS at 1:1, previewable as an artifact, that keeps my brand frame but swaps the episode content. </context> <inputs> - Show name and brand colors: [TITLE PLUS HEX] - Episode number and title: [E.G. EP 42 — SCALING TO 1M USERS] - Guest name (optional): [NAME AND TITLE] - Episode theme keyword: [ONE WORD OR PHRASE] - Reusable brand motif: [WHAT STAYS CONSTANT] </inputs> <task> Build an episode cover that keeps a consistent brand band (logo lockup or name strip) and swaps in: the episode number badge, the episode title, an optional guest photo placeholder with name, and a theme accent color. Design it so the template is obviously reusable across episodes by only changing the variable zone. </task> <constraints> - One self-contained HTML file, exactly 1:1, Google Fonts and inline SVG only. - Clearly separate the fixed brand zone from the per-episode variable zone in the markup with comments. - Legible at small sizes; accessible contrast; no filler. </constraints> <format> Return the full HTML in an artifact, then label which CSS variables to change for the next episode. </format>

You are a social audio designer who builds shareable audiogram cards for podcast clips. <context> I need a square audiogram-style quote card built as one self-contained HTML file with inline CSS at 1:1, previewable instantly as an artifact, made to be screenshotted or used behind an audio waveform. </context> <inputs> - Pull quote from the episode: [THE QUOTE] - Speaker name and title: [WHO SAID IT] - Show name: [TITLE] - Brand colors: [HEX OR DESCRIBE] - Vibe: [BOLD, MINIMAL, WARM] </inputs> <task> Build a quote card: the pull quote set large and well-broken across lines for readability, a speaker attribution line, a small show lockup, and a static waveform graphic (CSS bars or inline SVG) along the bottom suggesting the audio. Keep generous margins and strong typographic hierarchy so the quote is the hero. </task> <constraints> - One self-contained HTML file, exactly 1:1, Google Fonts and inline SVG only. - Quote text wraps cleanly with no orphaned single words; readable on social feeds. - Accessible contrast; no filler beyond the real quote. </constraints> <format> Return the full HTML in an artifact, then explain the line-break and hierarchy decisions for the quote. </format>

You are a podcast cover designer who features high-profile interview guests. <context> I need a square interview-episode cover built as one self-contained HTML file with inline CSS at 1:1, previewable as an artifact, that puts the guest front and center. </context> <inputs> - Show name: [TITLE] - Guest name and credential: [NAME, WHY THEY MATTER] - Conversation hook: [WHAT THIS EPISODE PROMISES] - Brand color and accent: [HEX] - Layout preference: [GUEST LEFT / RIGHT / CENTER] </inputs> <task> Build a cover with a prominent guest photo placeholder (labeled with the guest name), the guest's name in large type, a one-line credential, a short conversation hook, and the show lockup. Use a layout that makes the guest the visual draw while keeping the show recognizable. </task> <constraints> - One self-contained HTML file, exactly 1:1, Google Fonts and inline SVG only. - Guest name and show name both legible at small sizes; clear photo placeholder caption. - Accessible contrast; no filler copy. </constraints> <format> Return the full HTML in an artifact, then explain how you balanced guest prominence against show branding. </format>

You are a designer who adapts podcast branding into 16:9 YouTube thumbnails. <context> My podcast also publishes on YouTube. I need a 1280x720 video thumbnail built as one self-contained HTML file with inline CSS at 16:9, previewable as an artifact, that translates my square cover branding into a wide format. </context> <inputs> - Show name and brand colors: [TITLE PLUS HEX] - Episode title: [EPISODE HEADLINE] - Host and guest faces: [WHO APPEARS] - The episode hook: [WHY CLICK] - Vibe: [DESCRIBE] </inputs> <task> Build a 16:9 thumbnail with two face placeholders (host and guest, labeled), a bold episode headline overlay, the show lockup as a consistent brand band, and an accent treatment that ties back to the square cover. Make it feel like the same brand but optimized for the wide YouTube feed. </task> <constraints> - One self-contained HTML file, exactly 16:9, Google Fonts and inline SVG only. - Faces and headline legible at small sizes; show band consistent and recognizable. - Accessible contrast; no filler. </constraints> <format> Return the full HTML in an artifact, then explain how you carried the square-cover branding into 16:9. </format>

You are an editorial designer who creates featured images for blog articles. <context> I need a 1200x630 blog featured image built as one self-contained HTML file with inline CSS at that aspect ratio, previewable instantly as an artifact and exportable for the post header and social share. </context> <inputs> - Article title: [EXACT HEADLINE] - Topic / category: [E.G. PRODUCTIVITY, MARKETING] - Blog brand colors and fonts: [DESCRIBE OR HEX] - Tone: [PROFESSIONAL, FRIENDLY, TECHNICAL] - Optional author or logo: [NAME OR BRAND] </inputs> <task> Build a clean featured image: the article title set in a strong editorial type treatment as the hero, a category tag or eyebrow label, a subtle background pattern or shape motif, and an optional small brand or author lockup. Keep it readable as both a 1200px header and a smaller social preview. </task> <constraints> - One self-contained HTML file, 1200x630 ratio, Google Fonts and CSS/SVG shapes only. - Title legible at social-preview size; no busy backgrounds competing with text. - Accessible contrast; use the real headline, no placeholder. </constraints> <format> Return the full HTML in an artifact, then explain the type hierarchy and how to reuse it as a template for other posts. </format>

You are a designer who builds Open Graph cards for link previews on social platforms. <context> I need a 1200x630 Open Graph share card built as one self-contained HTML file with inline CSS at that ratio, previewable as an artifact, optimized for how it appears when a link is pasted into X, LinkedIn, and Slack. </context> <inputs> - Page / article title: [EXACT TITLE] - Site or brand name: [NAME] - One-line description or hook: [SHORT LINE] - Brand colors and logo: [HEX, LOGO TEXT] - Content type: [ARTICLE / PRODUCT / TOOL] </inputs> <task> Build an OG card with the title as the dominant element, a brief supporting line, a consistent brand lockup (logo text plus accent bar), and a clean background that survives the heavy crop and compression of social previews. Prioritize a layout that still reads when scaled down in a feed. </task> <constraints> - One self-contained HTML file, exactly 1200x630, Google Fonts and CSS/SVG only. - Keep critical content out of the extreme edges (safe margins for cropping). - High contrast, accessible, no filler copy. </constraints> <format> Return the full HTML in an artifact, then explain the safe-area and contrast decisions for social previews. </format>

You are a Pinterest designer who builds vertical pins that get saved. <context> I need a 1000x1500 vertical Pinterest pin built as one self-contained HTML file with inline CSS at 2:3, previewable instantly as an artifact. </context> <inputs> - Pin topic / promise: [WHAT IT OFFERS] - Big overlay headline: [SAVE-WORTHY PHRASE] - Brand name or URL: [TO PLACE AT BOTTOM] - Niche aesthetic: [E.G. COZY, MINIMAL, BOLD] - Color palette: [HEX OR DESCRIBE] </inputs> <task> Build a tall pin: a strong top-to-bottom layout with a large benefit headline in the upper or center band, a supporting image placeholder zone, a value or list cue (e.g. three quick bullets or a numbered teaser), and a brand or URL footer. Design for the vertical feed where pins are scrolled fast. </task> <constraints> - One self-contained HTML file, exactly 2:3 vertical, Google Fonts and CSS/SVG only. - Headline dominant and readable on mobile; brand URL legible but not loud. - Accessible contrast; no filler. </constraints> <format> Return the full HTML in an artifact, then explain why the vertical hierarchy earns the save. </format>

You are a designer who creates email newsletter header banners. <context> I need a wide newsletter header banner built as one self-contained HTML file with inline CSS at roughly 1200x300, previewable as an artifact, to sit at the top of an email issue. </context> <inputs> - Newsletter name: [TITLE] - Issue number or date: [E.G. ISSUE #18] - Theme of this issue: [TOPIC] - Brand colors and font feel: [DESCRIBE OR HEX] - Personality: [SHARP, FUN, PREMIUM] </inputs> <task> Build a header banner with the newsletter name as a confident wordmark, an issue number or date line, an optional one-line theme, and a brand motif (shape, line, or pattern) that ties issues together. Keep it short and wide, readable on both desktop and mobile email clients. </task> <constraints> - One self-contained HTML file, ~1200x300 ratio, Google Fonts and CSS/SVG only. - Wordmark legible on a phone; no thin fonts that break in email rendering. - Accessible contrast; reusable across issues with a swappable issue number. </constraints> <format> Return the full HTML in an artifact, then label the swappable parts so I can reuse it each issue. </format>

You are a content designer who builds consistent banners for a blog content series. <context> I need a set-up-as-template series banner built as one self-contained HTML file with inline CSS at 1200x630, previewable as an artifact, that looks like part of an ongoing series. </context> <inputs> - Series name: [E.G. "BUILD IN PUBLIC"] - Part number and topic: [PART 3 — PRICING] - Brand colors and font: [DESCRIBE OR HEX] - Series motif idea: [SHAPE, BADGE, OR PATTERN] - Tone: [DESCRIBE] </inputs> <task> Build a series banner with a fixed series badge or label, a part-number indicator, the specific entry's topic as the headline, and a recurring visual motif that signals it belongs to the series. Make the fixed series elements visually distinct from the per-entry variable elements. </task> <constraints> - One self-contained HTML file, exactly 1200x630, Google Fonts and CSS/SVG only. - Series identity stays constant across entries; only the part number and topic change. - Accessible contrast; no filler; comment the variable zone. </constraints> <format> Return the full HTML in an artifact, then explain which elements stay fixed and which change per entry. </format>