Stats
Actions
Tags
From designskills
Website banners, email headers, event banners, and hero sections via AI image generation and code generation. Covers standard sizes, animated and static approaches, CTA placement, and responsive techniques. Supports Gemini 3.1 Flash Image Preview. Trigger phrases: "design a banner", "create a website banner", "hero banner", "email header", "event banner", "promotional banner", "web banner", "banner ad", "sidebar banner", "create a hero section".
How this skill is triggered — by the user, by Claude, or both
Slash command
/designskills:banner-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design website banners, email headers, event banners, and hero sections. Covers standard dimensions, static and animated approaches, CTA hierarchy, responsive scaling, and seasonal/promotional frameworks.
Design website banners, email headers, event banners, and hero sections. Covers standard dimensions, static and animated approaches, CTA hierarchy, responsive scaling, and seasonal/promotional frameworks.
.agents/design-context.md for brand colors, fonts, styledesign-context skill or use defaultsFor AI image generation, see the image-generation skill for the full Gemini pipeline. Below are domain-specific prompt patterns for this skill.
| Type | Dimensions | Use Case |
|---|---|---|
| Hero Banner (Full Width) | 1440 x 600 | Homepage hero, above the fold |
| Hero Banner (Tall) | 1440 x 800 | Full-viewport hero section |
| Section Banner | 1440 x 400 | Interior page section divider |
| Sidebar Banner | 300 x 250 or 300 x 600 | Sidebar promotion |
| Notification Bar | Full width x 48px | Top-of-page announcement |
| Cookie/Consent Bar | Full width x 80px | Bottom notification |
| Type | Dimensions | Notes |
|---|---|---|
| Email Header | 600 x 200 | Standard email width |
| Email Hero | 600 x 300 | Full-width email hero |
| Email Banner | 600 x 150 | Compact promotional |
Email constraints: max 600px wide, use tables for layout, inline CSS only, no web fonts (fallback to system fonts), images must have alt text.
| Type | Dimensions | Use Case |
|---|---|---|
| Event Banner (Wide) | 1200 x 400 | Event page header |
| Meetup Banner | 1200 x 675 | Meetup.com event cover |
| Eventbrite Banner | 2160 x 1080 | Eventbrite event cover |
| Conference Banner | 1920 x 600 | Conference website hero |
Grid 1fr 1fr, min-height 600px, 80px padding, 60px gap. Content side: eyebrow (14px uppercase, brand color), headline (clamp(36px, 4vw, 56px), weight 800, text-wrap: balance), description (18px, muted), CTA group (flex, 16px gap).
Flex column centered, min-height 600px, 80px padding. Background image with gradient overlay for legibility. Headline clamp(40px, 5vw, 72px) white, max-width 800px.
Grid 55% 45%. Content side with padding 80px. Visual side with clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%).
Background image cover, min-height 80vh, align-items: flex-end. Gradient scrim ::after for text legibility (0->0.7 black from bottom). Content at z-index 2, max-width 600px, white text.
Use a flex container (gap: 16px; flex-wrap: wrap). Primary CTA: solid brand-color background, white text, 14px 28px padding, 8px radius, shadow. Secondary CTA: transparent bg, neutral border (1.5px), same size. Both: font-weight: 600, hover with translateY(-1px) or bg fill.
inset: -20%, transform: translateZ(-1px) scale(1.5)background-size: 600% 600%, animate background-position over 12s<span> with inline-block, animate translateY(100%) -> 0 with staggered 0.1s delayswhite-space: nowrap; width: 0, animate width with steps(), add blinking cursor via border-rightclamp() for min-height, padding, font-size: e.g., font-size: clamp(28px, 4vw, 64px)1fr, center text, reorder visual above text with order: -1Red gradient bg (135deg, #DC2626, #991B1B), centered layout. Discount number at clamp(60px, 10vw, 120px) weight 900. Add diagonal stripe decoration with repeating-linear-gradient(-45deg) at 0.03 opacity.
Dark bg (#0F172A to #1E293B), centered text. Pill eyebrow badge (uppercase, 13px, brand color with translucent bg/border). Headline clamp(36px, 5vw, 64px) white. Add spotlight glow ::after with radial-gradient centered above.
Brand-color bg, centered. Countdown units in flex row (24px gap). Each unit: large number (48px/800, tabular-nums, dark translucent bg), small label below (12px uppercase). Separators between units.
Full-width, brand-color bg, flex centered, 10px 20px padding. Text 14px/500, links underlined bold. Close button absolute right.
| Season/Event | Colors | Elements | Mood |
|---|---|---|---|
| Spring | Greens, pinks, yellows | Flowers, leaves, butterflies | Fresh, renewal |
| Summer | Blues, oranges, bright yellow | Sun, waves, palm trees | Energetic, warm |
| Fall | Oranges, reds, browns | Leaves, pumpkins, warm tones | Cozy, harvest |
| Winter | Blues, whites, silvers | Snowflakes, frost, evergreen | Crisp, festive |
| Black Friday | Black, gold, red | Bold typography, price tags | Urgency, luxury |
| New Year | Gold, black, champagne | Confetti, fireworks, sparkle | Celebration |
| Valentine's | Reds, pinks, rose gold | Hearts, flowers, soft gradients | Romantic, warm |
Sidebar banner pattern: 300x600px, flex column, brand gradient bg, 32px 24px padding, white text. Logo top, visual center (flex:1), headline 22px/700, body 14px at 0.85 opacity, CTA at bottom (margin-top: auto, white bg, brand-color text, centered).
Email HTML has severe constraints. Use this approach:
Use table-based layout, max 600px, inline styles only. Font: Arial, Helvetica, sans-serif. Structure: outer <table> with gradient bg, logo <img> centered, <h1> (28px bold white), <p> (16px white 0.9 opacity), CTA as nested table with white bg + brand-color text link.
Arial, Helvetica, sans-serif (web fonts unreliable in email)background-color as fallback (Outlook ignores bg images)width, height, alt, display:blocknpx claudepluginhub arnavpuri/designskills --plugin designskillsGenerates premium, conversion-aware website design images with one image per section. Enforces composition variety, consistent palettes, and Awwwards-level art direction for landing pages and marketing sites.
Routes design tasks for logos, CIP deliverables, banners, slides, icons, social photos, design tokens, and UI styling with shadcn/ui + Tailwind. Use for brand assets and presentations.
Creates visual designs from Adobe Express templates — flyers, posters, social media posts, business cards, resumes, brochures, and more. Handles template search, text editing, background color changes, and animation.