30 Claude Prompts That Design Banners

You are a senior web designer who builds conversion-focused hero banners. <context> I need a full-width homepage hero banner built as one self-contained HTML file with inline CSS, sized to a fixed canvas so I can preview it instantly as an artifact and screenshot it for my site. </context> <inputs> - Product or brand: [WHAT IT IS] - Headline promise: [THE BIG BENEFIT] - Supporting line: [ONE SENTENCE OF CONTEXT] - Primary CTA label: [E.G. START FREE] - Brand colors and vibe: [HEX OR DESCRIBE] - Visual style: [GRADIENT, FLAT, GLASS, ETC] </inputs> <task> Build a 1440x600 hero banner: a left-aligned headline and subhead, a primary CTA button plus a secondary text link, a small trust line or rating, and a right-side visual area built from CSS shapes, a gradient, or a mockup placeholder. Balance the composition, set a clear type hierarchy, and write punchy copy from my inputs. </task> <constraints> - One self-contained HTML file fixed to 1440x600; Google Fonts only. - Real benefit copy, strong contrast, generous whitespace; no lorem ipsum. - The CTA must look clearly clickable and name the outcome, not say "Submit". </constraints> <format> Return the full HTML as an artifact, then list the type scale and color values you used and one variation to test. </format>

You are a web designer who creates clean section header banners for interior pages. <context> I need a section banner for an interior page (like Pricing, Features, or About) built as one self-contained HTML file with inline CSS at a fixed size, previewable instantly as an artifact. </context> <inputs> - Page name: [E.G. PRICING] - One-line page intent: [WHAT THIS PAGE IS ABOUT] - Eyebrow or category label: [OPTIONAL SHORT TAG] - Brand colors and vibe: [HEX OR DESCRIBE] - Optional breadcrumb path: [HOME > PRICING] </inputs> <task> Build a 1440x320 section banner: an optional eyebrow tag, a large page title, a one-line supporting description, an optional breadcrumb, and a subtle background treatment (gradient, pattern, or soft shape). Keep it calm and on-brand so it frames the content below without competing with it. </task> <constraints> - One self-contained HTML file fixed to 1440x320; Google Fonts only. - Quiet, confident design; accessible contrast; no heavy CTA, this is a page header. - Consistent spacing so it can repeat across many interior pages. </constraints> <format> Return the full HTML as an artifact, then explain how to swap the title and eyebrow to reuse it across other pages. </format>

You are a UX designer who builds top-of-site announcement bars. <context> I need a slim site-wide announcement bar built as one self-contained HTML file with inline CSS, previewable instantly as an artifact and ready to sit above my nav. </context> <inputs> - Announcement message: [E.G. FREE SHIPPING THIS WEEK] - Link or CTA text: [E.G. SHOP NOW] - Urgency element: [COUNTDOWN, DATE, OR NONE] - Brand colors: [HEX OR DESCRIBE] - Dismissible: [YES / NO] </inputs> <task> Build a full-width announcement bar at 1440x48: a centered message with an inline CTA link, an optional date or countdown chip, and an optional dismiss "x" on the right. Make it bold enough to notice but short enough not to push the page down much. </task> <constraints> - One self-contained HTML file at 1440x48; Google Fonts only. - High contrast, single concise line, accessible link styling and a real focus state on the dismiss control. - No layout shift on hover; the bar must stay one row tall. </constraints> <format> Return the full HTML as an artifact, then explain how to make the dismiss control persist with one line of JS. </format>

You are an editorial designer who makes featured-image banners for blog articles. <context> I need a featured banner for a blog post built as one self-contained HTML file with inline CSS at a fixed size, previewable instantly as an artifact and screenshot-ready for the post header. </context> <inputs> - Article title: [THE FULL TITLE] - Category or tag: [E.G. PRODUCT, MARKETING] - Author and read time: [NAME, X MIN READ] - Mood: [TECHNICAL, WARM, BOLD] - Brand colors: [HEX OR DESCRIBE] </inputs> <task> Build a 1200x630 article banner: a category tag, the article title set large with a strong type hierarchy, an author and read-time line, and an abstract background built from gradients, shapes, or a pattern that matches the mood. It should double as the social share image. </task> <constraints> - One self-contained HTML file fixed to 1200x630 (Open Graph size); Google Fonts only. - Title legible at thumbnail scale; accessible contrast; no stock-photo placeholder, use CSS art. - Leave the design clean enough that the title carries the composition. </constraints> <format> Return the full HTML as an artifact, then explain how to template the title and category so every post gets a matching banner. </format>

You are a product designer who builds in-app welcome and upgrade banners. <context> I need an in-app banner to greet users or prompt an action, built as one self-contained HTML file with inline CSS at a fixed card size, previewable instantly as an artifact. </context> <inputs> - Banner purpose: [WELCOME / UPGRADE / FEATURE ANNOUNCEMENT] - Headline: [SHORT, FRIENDLY] - Body line: [ONE SENTENCE] - CTA label: [E.G. EXPLORE FEATURES] - Product UI colors: [HEX OR DESCRIBE] - Optional dismiss: [YES / NO] </inputs> <task> Build a 960x180 in-app banner card: an icon or illustration block on the left, a headline and one-line body in the center, a primary CTA button on the right, and an optional dismiss control. Match a clean SaaS UI aesthetic with rounded corners and soft shadows. </task> <constraints> - One self-contained HTML file fixed to 960x180; Google Fonts only. - Looks native to a dashboard, not like a marketing page; accessible button and dismiss control. - Subtle, friendly tone; no aggressive hype. </constraints> <format> Return the full HTML as an artifact, then explain how to recolor it for a dark-mode UI. </format>

You are a personal-branding designer who creates LinkedIn cover banners. <context> I need a LinkedIn profile background banner built as one self-contained HTML file with inline CSS at the exact platform size, previewable instantly as an artifact and screenshot-ready. </context> <inputs> - Name and title: [YOUR NAME, ROLE] - Positioning line: [WHAT YOU HELP PEOPLE DO] - Optional credibility: [METRIC, NOTABLE CLIENT, OR TAGLINE] - Brand or industry colors: [HEX OR DESCRIBE] - Tone: [EXECUTIVE, CREATIVE, TECHNICAL] </inputs> <task> Build a 1584x396 LinkedIn cover: a clear name and title, a short positioning statement, an optional credibility line, and a clean background treatment. Keep all important text out of the bottom-left where the profile photo overlaps, and out of the far edges. </task> <constraints> - One self-contained HTML file fixed to 1584x396; Google Fonts only. - Respect a safe zone: keep key elements clear of the bottom-left avatar overlap and ~60px edges. - Professional, uncluttered, accessible contrast; no more than two fonts. </constraints> <format> Return the full HTML as an artifact, then mark where the profile photo overlaps so I confirm nothing important is hidden. </format>

You are a social brand designer who creates Twitter/X header banners. <context> I need an X (Twitter) header built as one self-contained HTML file with inline CSS at the exact platform size, previewable instantly as an artifact. </context> <inputs> - Handle or brand: [@HANDLE OR NAME] - One-line bio or hook: [WHAT YOU POST ABOUT] - A featured offer or link teaser: [OPTIONAL] - Brand colors and vibe: [HEX OR DESCRIBE] - Style: [MINIMAL, BOLD, MEME-AWARE] </inputs> <task> Build a 1500x500 X header: a short hook or tagline, an optional offer teaser, and a striking background. Keep text away from the lower-left where the avatar sits and away from the bottom strip the profile UI covers. </task> <constraints> - One self-contained HTML file fixed to 1500x500; Google Fonts only. - Keep key elements clear of the bottom ~120px and the lower-left avatar overlap. - Bold and legible at a glance; accessible contrast. </constraints> <format> Return the full HTML as an artifact, then show the avatar and UI overlap zones so I can verify nothing critical is cut. </format>

You are a social-media designer who creates Facebook page cover banners. <context> I need a Facebook page cover built as one self-contained HTML file with inline CSS at the platform size, previewable instantly as an artifact. </context> <inputs> - Brand or business name: [NAME] - What you offer: [ONE LINE] - Current promotion or CTA: [OPTIONAL] - Brand colors and vibe: [HEX OR DESCRIBE] - Mood: [FRIENDLY, PREMIUM, PLAYFUL] </inputs> <task> Build a 1640x624 Facebook cover: the brand name, a short value line, an optional promo or CTA, and an on-brand background. Center the key message so it survives mobile cropping, which trims the sides more aggressively than desktop. </task> <constraints> - One self-contained HTML file fixed to 1640x624; Google Fonts only. - Keep the core message in a centered safe area (roughly the middle 1090x340) for mobile and desktop. - Clean, legible, accessible contrast. </constraints> <format> Return the full HTML as an artifact, then outline the mobile-vs-desktop safe area so I can confirm the message stays visible. </format>

You are a YouTube brand designer who builds channel-art banners. <context> I need YouTube channel art built as one self-contained HTML file with inline CSS at the platform size, previewable instantly as an artifact, designed around the TV-safe area. </context> <inputs> - Channel name and topic: [NAME, WHAT IT IS ABOUT] - Tagline or upload schedule: [E.G. NEW VIDEOS EVERY TUESDAY] - Personality: [ENERGETIC, CALM, EDUCATIONAL] - Brand colors: [HEX OR DESCRIBE] - Optional social handles: [LIST] </inputs> <task> Build a 2560x1440 channel banner. Place the channel name, tagline, and upload schedule inside the centered TV-safe area (1546x423) so they show on every device, and extend the background to the full canvas for desktop and TV displays. </task> <constraints> - One self-contained HTML file fixed to 2560x1440; Google Fonts only. - All text and logos must sit inside the centered 1546x423 safe zone. - Background fills the whole canvas; bold, legible, accessible contrast. </constraints> <format> Return the full HTML as an artifact, then draw the safe-zone boundary so I can confirm the text is fully inside it. </format>

You are a designer who creates banners for streamers and gaming channels. <context> I need a stream offline / cover banner built as one self-contained HTML file with inline CSS at a fixed 16:9 size, previewable instantly as an artifact. </context> <inputs> - Channel name and game or niche: [NAME, WHAT YOU STREAM] - Stream schedule: [DAYS AND TIMES] - Vibe: [NEON, COZY, COMPETITIVE] - Brand colors: [HEX OR DESCRIBE] - Socials to list: [DISCORD, X, ETC] </inputs> <task> Build a 1920x1080 offline banner: the channel name in a bold display style, a "currently offline" or schedule message, a row of social handles, and an energetic gamer-style background using gradients, glows, and geometric shapes. Make it feel alive even while the stream is down. </task> <constraints> - One self-contained HTML file fixed to 1920x1080; Google Fonts only. - Bold, high-energy aesthetic but text stays readable; accessible contrast on the focal copy. - All key info centered enough to survive overlay frames. </constraints> <format> Return the full HTML as an artifact, then explain how to swap the schedule text and colors for a special-event version. </format>

You are a performance-marketing designer who builds display ad banners. <context> I need a leaderboard display ad built as one self-contained HTML file with inline CSS at the exact ad size, previewable instantly as an artifact and screenshot-ready. </context> <inputs> - Product or offer: [WHAT YOU SELL] - Headline hook: [THE PROMISE] - CTA label: [E.G. GET 20% OFF] - Brand colors and logo text: [HEX, NAME] - Tone: [URGENT, PREMIUM, FRIENDLY] </inputs> <task> Build a 728x90 leaderboard ad: a left logo or brand mark, a tight headline hook in the middle, and a high-contrast CTA button on the right. Use the horizontal space with a clear left-to-right reading order and one dominant message. </task> <constraints> - One self-contained HTML file fixed to 728x90; Google Fonts only. - One message, one CTA; legible at small size; accessible contrast. - No clutter; the CTA button must clearly stand out from the background. </constraints> <format> Return the full HTML as an artifact, then suggest two alternate headlines to A/B test in the same layout. </format>

You are a display-advertising designer who builds the medium rectangle, the most common ad unit. <context> I need a 300x250 medium rectangle display ad built as one self-contained HTML file with inline CSS at the exact size, previewable instantly as an artifact. </context> <inputs> - Product or offer: [WHAT YOU SELL] - Headline: [SHORT HOOK] - Supporting line or proof: [ONE LINE] - CTA label: [E.G. SHOP NOW] - Brand colors and logo text: [HEX, NAME] </inputs> <task> Build a 300x250 medium rectangle: a top brand mark, a stacked headline and short support line, a product visual placeholder or icon, and a bottom CTA button. Use the square-ish space for a clear vertical reading flow ending on the CTA. </task> <constraints> - One self-contained HTML file fixed to 300x250; Google Fonts only. - Tight hierarchy; everything legible at small size; accessible contrast. - One CTA, clearly the focal action. </constraints> <format> Return the full HTML as an artifact, then explain how to resize this to a 300x600 half-page using the same elements. </format>

You are a display-ad designer who builds tall sidebar banner units. <context> I need a 160x600 wide skyscraper display ad built as one self-contained HTML file with inline CSS at the exact size, previewable instantly as an artifact. </context> <inputs> - Product or offer: [WHAT YOU SELL] - Headline hook: [SHORT] - Two or three quick benefits: [BULLETS] - CTA label: [E.G. TRY FREE] - Brand colors and logo text: [HEX, NAME] </inputs> <task> Build a 160x600 skyscraper: a top brand mark, a stacked headline, two or three short benefit lines, a vertical visual accent, and a CTA button near the bottom. Use the tall narrow column with generous vertical rhythm so it does not feel cramped. </task> <constraints> - One self-contained HTML file fixed to 160x600; Google Fonts only. - Narrow column means short lines; legible small type; accessible contrast. - One CTA; consistent with a matching rectangle and leaderboard. </constraints> <format> Return the full HTML as an artifact, then explain how the type sizing differs from a wide banner and why. </format>

You are a paid-social designer who builds square ad creative for Instagram and Facebook feeds. <context> I need a 1080x1080 square social ad built as one self-contained HTML file with inline CSS at the exact size, previewable instantly as an artifact. </context> <inputs> - Product or offer: [WHAT YOU PROMOTE] - Scroll-stopping headline: [BIG HOOK] - Supporting line or social proof: [ONE LINE] - CTA label: [E.G. LEARN MORE] - Brand colors and vibe: [HEX OR DESCRIBE] </inputs> <task> Build a 1080x1080 feed ad: a bold scroll-stopping headline as the focal point, a short support line, a product or visual placeholder zone, a CTA chip, and a small brand mark. Design for a fast-moving feed: one idea, big and clear. </task> <constraints> - One self-contained HTML file fixed to 1080x1080; Google Fonts only. - Keep text density low enough to read in a one-second scroll; accessible contrast. - Strong focal hierarchy; no more than one CTA. </constraints> <format> Return the full HTML as an artifact, then explain how to adapt the same layout to a 1080x1920 story ad. </format>

You are a programmatic-display designer who ships consistent multi-size ad sets. <context> I need a set of matched retargeting display ads built as one self-contained HTML file with inline CSS, showing several standard sizes laid out side by side on one canvas, previewable instantly as an artifact. </context> <inputs> - Product and the retargeting angle: [E.G. COME BACK, YOUR CART IS WAITING] - Headline and CTA: [HOOK, BUTTON LABEL] - Offer or incentive: [E.G. 10% OFF TO FINISH] - Brand colors and logo text: [HEX, NAME] - Sizes to include: [E.G. 728x90, 300x250, 160x600, 320x50] </inputs> <task> Build one artifact that renders each requested ad size as a separate, exactly-sized box arranged on a labeled board. Reuse the same brand colors, font, logo, headline, and CTA across all sizes, adapting only the layout to each shape so the set is visually unified. </task> <constraints> - One self-contained HTML file; each ad box is exactly its named pixel size; Google Fonts only. - Identical brand system across all sizes; each box labeled with its dimensions. - All ads legible at their real scale; accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain how to export each ad box individually as its own file. </format>