# Banner Design

Design banners for social posts, ads, website heroes and print in many styles.

- Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (143791 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design -g -a claude-code -y`
Codex: `npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design -g -a codex -y`
Cursor: `npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design -g -a cursor -y`
Gemini CLI: `npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill`

## Description

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/HEAD/.claude/skills/banner-design/SKILL.md