banner-creator

Overview of banner-creator skill

What banner-creator does

banner-creator is a guided image-generation skill for making banners, headers, hero images, and cover art with an iterative workflow instead of a one-shot prompt. It helps an agent collect the right design requirements, generate multiple options, refine a preferred direction, and crop the chosen image to the final platform ratio.

Who banner-creator is best for

This banner-creator skill is best for people who need usable marketing or profile graphics quickly but still want some structure:

• GitHub README owners
• UI Design and landing page builders
• developers making project banners
• creators needing Twitter/X, LinkedIn, or YouTube headers
• teams that want repeatable banner output, not ad hoc prompting

The real job-to-be-done

Most users do not just want “an image.” They want a banner that fits a specific surface, keeps important content visible after cropping, matches an existing style, and gets to an acceptable final asset in a few rounds. banner-creator is built around that practical workflow.

What makes banner-creator different from a generic prompt

The main differentiator is process. The skill pushes the agent to:

• ask about purpose, platform, ratio, style, and text before generating
• generate variations first instead of overcommitting to one concept
• refine based on user feedback
• crop to target aspect ratio with a provided script
• store outputs in a predictable archive folder

That makes banner-creator for UI Design and brand-adjacent work more reliable than a vague “make me a banner” request.

Important adoption constraints

Before you install or rely on banner-creator, note the real dependencies:

• it expects GEMINI_API_KEY
• it depends on the nanobanana skill for image generation
• cropping uses scripts/crop_banner.py, which requires Python and Pillow
• the skill is strongest for static banner creation, not full design systems or advanced manual typography control

How to Use banner-creator skill

Install context and dependency check

The repo does not expose a dedicated package installer inside SKILL.md, so the practical install path is to add the parent skill repo and then use the skill from there:

npx skills add https://github.com/ReScienceLab/opc-skills --skill banner-creator

Then verify the operating context:

• GEMINI_API_KEY is available
• the nanobanana skill is installed and usable
• Python is available for cropping
• Pillow is installed if you plan to run scripts/crop_banner.py

Read these files first

For fast adoption, read in this order:

1. skills/banner-creator/SKILL.md
2. skills/banner-creator/references/formats.md
3. skills/banner-creator/examples/opc-banner-creation.md
4. skills/banner-creator/scripts/crop_banner.py
5. skills/banner-creator/templates/preview.html

This path tells you the workflow, supported target formats, what a good interaction looks like, how final crops are produced, and how outputs can be reviewed visually.

What input banner-creator needs

A strong banner-creator usage request should include:

• destination platform
• target size or ratio
• brand or visual style
• required text
• required subject or motifs
• background preferences
• anything to avoid
• whether you want several concepts or one refined direction

If you omit these, the agent will need to ask follow-up questions before producing good output.

Best starting prompt format

A rough goal becomes much more usable when you specify design intent and output constraints. For example:

“Use banner-creator to make a GitHub README banner at 1280x640 or 2:1. Match our existing pixel-art logo style. Include the text ‘opc.dev’ and ‘Agent Skills’. Keep the main character centered enough to survive cropping. Generate 4-6 variations first, then we’ll refine one.”

Why this works:

• it names the skill
• it sets the platform and ratio
• it defines style matching
• it gives text requirements
• it bakes in crop safety
• it requests a variation-first workflow

How banner-creator actually runs in practice

A typical run looks like this:

1. clarify usage surface and ratio
2. confirm style and brand references
3. define text and composition priorities
4. generate several wide candidates
5. review and choose a direction
6. refine or regenerate with tighter instructions
7. crop to final ratio or final pixel size
8. save outputs to .skill-archive/banner-creator/...

This is the main reason to use the banner-creator guide instead of a plain image prompt: it reduces guesswork around fit, revision, and export.

Use platform ratios early, not late

The repository’s references/formats.md is one of the most valuable files. It lists common targets such as:

• GitHub README: 1280x640 (2:1)
• Twitter/X header: 1500x500 (3:1)
• LinkedIn banner: 1584x396 (4:1)
• Website hero: 1920x1080 (16:9)

Do not wait until after approval to discover the design does not fit the target surface.

Why the skill suggests wide generation first

The format reference recommends generating at 21:9 when possible, then cropping down to the final destination ratio. That is a practical choice because banner surfaces vary widely, and wide source images preserve flexibility without stretching.

This matters if your banner contains:

• text near the edges
• characters with important details
• logos that should remain visible on multiple platforms

Cropping command for final output

The repository includes a concrete crop utility:

python scripts/crop_banner.py input.png output.png --ratio 2:1 --width 1280

You can also target a size directly:

python scripts/crop_banner.py input.png output.png --size 1500x500

The crop is centered, so your prompt should keep critical content away from extreme edges.

Output location and file hygiene

The skill expects assets to be saved under:

.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/

That structure is useful if you compare variations, revisit previous concepts, or need to hand over files cleanly to a teammate.

Practical prompt patterns that improve output

Good prompts for banner-creator for UI Design usually include composition guidance, not just aesthetics. Examples:

• “Reserve negative space on the left for headline overlay.”
• “Keep logo and mascot within the center 60% width so a 2:1 crop stays safe.”
• “Use a minimal modern gradient background with no photorealistic elements.”
• “Make text large and sparse, not poster-dense.”
• “Prioritize silhouette clarity at small preview sizes.”

These instructions change the final banner quality more than generic style adjectives alone.

Preview and selection workflow

The repo includes templates/preview.html, which signals a practical review step: compare multiple candidate images side by side before committing. This is useful because banner quality is often comparative. A banner that seems fine in isolation may look weak next to a cleaner, more legible option.

banner-creator skill FAQ

Is banner-creator better than a normal image prompt?

Usually yes, if your problem is not just generation but selection, revision, and platform fit. A generic prompt can make an attractive image, but banner-creator adds requirement gathering, variation generation, cropping, and output organization.

Is banner-creator suitable for beginners?

Yes, especially if you know your target platform and can describe your style. The skill reduces prompting guesswork, but beginners still need to provide concrete requirements such as size, text, and visual direction.

When is banner-creator a poor fit?

Skip banner-creator if you need:

• full manual layout control in a design tool
• pixel-perfect typography
• complex multi-breakpoint web hero systems
• editable vector brand assets
• advanced retouching workflows

It is strongest for fast static banner creation, not end-to-end brand production.

Do I need the nanobanana skill?

Yes. Repository evidence explicitly lists nanobanana as the required image-generation skill. If that dependency is missing, banner-creator install is incomplete for real use.

Can banner-creator handle different platforms?

Yes. The included format reference covers GitHub, Twitter/X, LinkedIn, YouTube, website heroes, email headers, and more. The skill’s workflow is intentionally platform-aware rather than assuming one fixed canvas.

Does banner-creator help with UI Design work?

Yes, within limits. banner-creator for UI Design is useful for hero banners, header art, launch visuals, and repository presentation images. It does not replace UI layout, accessibility review, or component design.

How to Improve banner-creator skill

Give style references, not just adjectives

The biggest quality jump usually comes from supplying a concrete reference:

• existing logo style
• mascot description
• current site palette
• example banner you like
• “match our pixel-art brand language”

“Modern” or “clean” alone is too weak. The example file works better because it ties style to an existing pixel-art logo.

Define crop-safe composition upfront

Because the crop tool is centered, poor composition can ruin an otherwise good image. Ask for:

• central focal point
• wide margins around text
• no critical details at the far left or right
• layered background with a clear safe zone

This is one of the most important ways to improve banner-creator usage.

Ask for variations with one variable changed

Do not request six random options if you want a fast decision. Better pattern:

• same concept, three color directions
• same style, three composition variants
• same composition, three typography densities

This makes review sharper and feedback more actionable.

Write feedback that the agent can execute

Weak feedback: “Make it better.”
Strong feedback: “Keep option 3’s composition, reduce background detail, enlarge the title by 20%, make the palette darker, and leave more empty space on the right for future overlay text.”

The skill’s workflow benefits from specific comparative feedback between rounds.

Match generation strategy to final destination

If the banner may be reused across platforms, ask for a wide master image first and crop derivatives later. If the image is only for one surface, specify the final platform immediately to avoid wasted iterations.

Watch for common failure modes

Common issues with banner-creator outputs:

• text too small for banner contexts
• busy backgrounds hurting readability
• important elements cropped out
• style mismatch with existing brand assets
• too much detail for GitHub or social preview sizes

Most of these come from underspecified prompts, not from the skill structure itself.

Improve the first prompt with a mini creative brief

A compact brief often outperforms conversational prompting:

• Goal: GitHub README banner
• Size: 1280x640
• Audience: developers evaluating the repo
• Style: pixel art, playful but professional
• Text: “opc.dev” + “Agent Skills”
• Include: crowned king mascot
• Avoid: photorealism, clutter, tiny text
• Composition: centered subject, crop-safe edges

That format gives the agent enough structure to invoke banner-creator well.

Use the example artifacts as a quality bar

Check examples/opc-banner-creation.md and the sample images in examples/images/. They show the intended rhythm: clarify, generate several options, narrow, then finalize. If your own workflow skips directly to one final image, you are not getting the full value of the banner-creator skill.

Improve the repo-level experience if you adopt it internally

If you plan to reuse banner-creator in a team setting, the most helpful additions would be:

• a short install section in SKILL.md
• an explicit Pillow dependency note for cropping
• prompt templates for common targets like GitHub and LinkedIn
• a checklist for text-safe and crop-safe composition

Those changes would reduce adoption friction without changing the core workflow.