Banner Design System

Banner Design - Multi-Format Creative Banner System

Design banners across social, ads, web, and print formats. Generate multiple art direction options with CSS-built, user-supplied, or optionally generated visual elements. This skill handles banner design only. It does not handle video editing, full website design, or print production.

When to Activate

• User requests banner, cover, or header design
• Social media cover/header creation
• Ad banner or display ad design
• Website hero section visual design
• Event/print banner design
• Creative asset generation for campaigns

Available Resources

This workflow is self-contained: it requires no sibling skills or skill-relative scripts. Use references/banner-sizes-and-styles.md for the bundled size, safe-zone, and art-direction guidance. Browser research, image generation, and screenshot tooling are optional capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.

Workflow

Step 1: Gather Requirements (AskUserQuestion)

Collect via AskUserQuestion:

1. Purpose — social cover, ad banner, website hero, print, or creative asset?
2. Platform/size — which platform or custom dimensions?
3. Content — headline, subtext, CTA, logo placement?
4. Brand — existing brand guidelines, logo files, colors, or typography?
5. Style preference — any art direction? (show style options if unsure)
6. Quantity — how many options to generate? (default: 3)

Step 2: Research & Art Direction

1. Read references/banner-sizes-and-styles.md for the target format, safe zone, and suitable styles.
2. If browser research is available and permitted, collect 3–5 references for composition and art-direction inspiration. Otherwise, work from the bundled reference and any examples supplied by the user.
3. Select 2–3 complementary art directions and state how each supports the banner's purpose.

Step 3: Design & Generate Options

For each art direction option:

1. Create the banner in HTML/CSS

   • Use the exact platform dimensions from the size reference
   • Apply safe-zone rules (critical content in the central 70–80%)
   • Use at most 2 typefaces, a single CTA, and text contrast of at least 4.5:1
   • Apply the user's supplied logo, colors, typography, and imagery; do not invent brand rules

2. Choose a visual source

   • Prefer user-supplied or appropriately licensed assets when provided
   • Use gradients, geometric forms, type, and other CSS-built visuals for a dependency-free result
   • If the runtime provides an authorized image-generation capability, it may generate a background or illustration at the target aspect ratio
   • Keep generated visual prompts free of text, letters, and words so final copy remains editable and accessible in HTML

3. Compose the final banner — overlay the headline, supporting copy, CTA, and logo in HTML/CSS, then verify hierarchy, safe zones, contrast, and crop behavior at the exact target size

Step 4: Export Banners to Images

After designing the HTML banners:

1. Preview each banner in an available browser at the exact target viewport.
2. Capture the banner element as PNG with the runtime's standard browser or screenshot capability. If capture is unavailable, deliver the HTML/CSS source and clearly mark PNG export as pending rather than naming an uninstalled tool.
3. Verify the exported pixel dimensions, safe-zone crop, font loading, and image quality.
4. If an exported file exceeds the platform limit, use an available image optimizer or reduce image quality and dimensions within the platform specification.

Output path convention:

assets/banners/{campaign}/
├── minimalist-1500x500.png
├── gradient-1500x500.png
├── bold-type-1500x500.png
├── minimalist-1080x1080.png    # if multi-size requested
└── ...

• Use kebab-case for filenames: {style}-{width}x{height}.{ext}
• Date prefix for time-sensitive campaigns: {YYMMDD}-{style}-{size}.png
• Campaign folder groups all variants together