banner-creator_skill

Overview

This skill creates professional banners using AI image generation and an iterative design process. It guides discovery, produces many variations, previews results in HTML, and crops the chosen design to target ratios. All outputs are organized into a dated .skill-archive folder for easy delivery.

How this skill works

I first gather purpose, target ratio/size, style, content elements, and color preferences. Then I generate a batch of wide (21:9) AI images, create an HTML preview, iterate on favored options with additional variations, and finally crop the approved banner to the requested target ratio and resolution. Generated files are saved under .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/ for review and delivery.

When to use it

• You need a banner, header, hero image, cover image, GitHub banner, Twitter/X header, or README banner.
• You want multiple visual directions quickly to choose from.
• You need a banner cropped to a specific platform ratio and resolution.
• You want to iterate on a preferred style or incorporate an existing logo.

Best practices

• Collect clear requirements first: purpose, exact ratio/size, style, text elements, and brand colors.
• Generate at an ultra-wide 21:9 ratio, then crop to target sizes for consistent framing.
• Produce large batches (10–20+) to surface distinct directions before iterating.
• Use the HTML preview to compare variations side-by-side and capture specific feedback (numbers and notes).
• When incorporating logos, provide a clean transparent asset and specify placement and scale.

Example use cases

• Create a GitHub README banner (target 2:1, 1280x640) with a minimalist brand lockup and tagline.
• Design a Twitter/X header (3:1, 1500x500) with an illustrated scene and brand colors.
• Generate website hero images (16:9, 1920x1080) with multiple stylistic options for A/B testing.
• Iterate on a favored banner: produce 10–20 variations of the chosen style and deliver a cropped final asset.
• Add an existing mascot/logo into banner layouts and export both wide originals and cropped deliverables.