banner-designby nextlevelbuilder

Banner Design Skill.

A Claude Code and Codex skill for image work: banners for social media, ads, website heroes, and print.

Images & Generative Art
Image

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/banner-design/SKILL.mdSKILL.md

--- name: banner-design 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, … --- ## When to Activate ## Workflow ## Art Direction Styles (Top 10) ## Design Rules ## Security

Front matter and section headings read from the upstream file on 2026-09-14 · 7,010 characters in full

01 What it does

What the banner-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Designs banners for social media covers, ad campaigns, website heroes, and print by generating multiple art direction options in HTML/CSS. Collects requirements through structured questions (platform, content, brand, style, quantity), references bundled size and safe-zone guidance, and exports pixel-perfect PNGs at exact platform dimensions.

Supports 22 art direction styles including minimalist, gradient, bold typography, photo-based, geometric, glassmorphism, and neon. Handles Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, and custom formats. Defaults to 3 options per request. Uses user-supplied assets, CSS-built visuals, or optional generated backgrounds—never invents brand rules. Does not handle video editing, full website design, or print production.

What it produces

PNG image files at exact platform dimensions, exported to assets/banners/{campaign}/ with kebab-case naming
HTML/CSS source code for each banner variant when image capture is unavailable

See the example prompt ↗

How It Works

01
Gather Requirements via Structured Questions
Collects purpose (social cover, ad, hero, print), platform or custom dimensions, content (headline, subtext, CTA, logo), brand guidelines, style preference, and quantity (default 3 options).
02
Research Art Direction and Safe Zones
Reads the bundled banner-sizes-and-styles.md reference for target format, safe zones, and suitable styles.
03
Design Each Option in HTML/CSS
Creates banners at exact platform dimensions with safe-zone rules (critical content in central 70–80%), using at most 2 typefaces, a single CTA, and 4.5:1 text contrast.
04
Choose Visual Source per Option
Prefers user-supplied assets, uses CSS-built visuals (gradients, geometric forms) for dependency-free results, or optionally generates backgrounds at target aspect ratio if the runtime supports it.
05
Export Banners as PNG Images
Previews each banner in browser at exact viewport, captures as PNG with standard screenshot capability, and verifies pixel dimensions, safe-zone crop, font loading, and image quality.
06
Present Options with Rationale
Shows all exported images side-by-side with art direction style name, preview, key design rationale, file path, and dimensions.

02 Find your fit

When to Use the banner-design Skill

Use the banner-design skill in Claude Code or Codex when the job is image work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Social media cover or header creation for platforms like Facebook, Twitter/X, LinkedIn, YouTube, and Instagram
Ad banner or display ad design for Google Ads and other advertising platforms
Website hero section visual design at standard or custom dimensions
Event or print banner design with CMYK output and bleed specifications
Creative asset generation for campaigns requiring multiple art direction variations

Know the Boundaries

Video editing or motion graphics for banners

What to Provide

Platform or custom dimensionsSpecifies the target social platform (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) or provides exact pixel dimensions for custom formats.
Content elementsProvides headline, supporting text, call-to-action copy, and logo placement requirements for the banner composition.
Brand guidelines and assetsSupplies existing brand colors, typography specifications, logo files, and any other verified brand guidance to apply.
Art direction preferenceIndicates preferred style from 22 options (minimalist, gradient, bold typography, geometric, glassmorphism, neon, etc.) or requests style recommendations.

03 Inside the skill

Rules the banner-design Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Default to 3 Art Direction Options
Generates 3 design options per request unless the user specifies a different quantity during requirements gathering.
Maximum 2 Typefaces and 1 CTA per Banner
Uses at most 2 typefaces and includes a single call-to-action, positioned bottom-right with minimum 44px height and an action verb.
Never Invent Brand Guidelines
Applies only user-supplied or verified brand rules, colors, logos, and typography. Does not fabricate brand specifications.
Keep Text Ratio Under 20% for Ads
Limits text coverage to under 20% of the banner area for ad formats, as Meta penalizes heavy text in display advertising.
Print Specs: 300 DPI, CMYK, 3-5mm Bleed
Produces print banners at 300 DPI resolution in CMYK color space with 3–5mm bleed margins for professional output.
Use kebab-case File Naming Convention
Names exported files as {style}-{width}x{height}.{ext} in kebab-case, optionally prefixing time-sensitive campaigns with {YYMMDD}-.

04 Put it to work

Install banner-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add banner-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

Generic skills CLI form for .claude/skills/banner-design/SKILL.md; the repository may document its own path.

Give the Skill a First Image Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Design 3 LinkedIn cover banners for our Q2 product launch. The headline is "Ship faster with AI-powered workflows," subtext "Join 10,000+ teams building better software," and CTA "Start free trial." Use our logo from assets/logo.svg, brand colors #0066FF (primary) and #00CC88 (accent), and Inter font family. Show minimalist, gradient, and bold typography options at 1584×396.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Verify exported PNG dimensions match exact platform specifications from the size reference
Confirm file size does not exceed platform limits, optimizing or reducing quality if necessary

In OpenDesign import banner-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill file: .claude/skills/banner-design/SKILL.md Content checksum recorded at verification; commit 7f69fed
License: MIT From LICENSE; SKILL.md says “MIT”.
Repository stars: 127,450 GitHub snapshot taken 2026-09-14 for the whole nextlevelbuilder/ui-ux-pro-max-skill repository, which contains 7 skills in this catalog. Not a rating or usage count for banner-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to ActivateLists triggers: banner/cover/header requests, social media, ads, hero sections, events, creative campaigns
Available ResourcesSelf-contained workflow using bundled size reference; browser research and image generation are optional
WorkflowFive-step process from requirements gathering through research, design, export, and iteration
Step 1: Gather Requirements (AskUserQuestion)Collects purpose, platform, content, brand, style preference, and quantity via structured questions
Step 2: Research & Art DirectionReads size reference, optionally researches examples, selects 2–3 complementary art directions
Step 3: Design & Generate OptionsCreates HTML/CSS banners at exact dimensions with safe zones, chooses visual source, composes final
Step 4: Export Banners to ImagesPreviews in browser, captures PNG, verifies dimensions and quality, optimizes if needed
Step 5: Present Options & IterateShows all variants with rationale and file paths, iterates based on feedback
Banner Size Quick ReferenceTable of common platform sizes: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, website hero
Art Direction Styles (Top 10)Table of 10 styles with best-use cases and key elements; full 22 in reference
Design RulesSafe zones, CTA placement, typography limits, text ratio, print specs, brand application rules
SecurityStandard guardrails: no skill internals, explicit scope refusals, no data exposure, role boundaries

The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 7,010 characters. Read the full file on GitHub.

06 Before you install

Questions About the banner-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does this skill require external image generation or browser tools?

No. The workflow is self-contained and uses CSS-built visuals (gradients, geometric forms, typography) for dependency-free results. Browser research, image generation, and screenshot tooling are optional capabilities that enhance output when available but are not required.

Banner Design

Run banner-design on a Real Image Work Task.

Download OpenDesign, import banner-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills