banner-design Skill (nextlevelbuilder): Banners for Claude

Makes Claude design banners for social media, ads, website heroes and print, as HTML and CSS in several art styles.

Installs: 43.1K; on skills.sh
Stars: 143.8K; on GitHub
Files: 1; besides SKILL.md
Updated: Nov 2026; last repo commit

banner-design makes Claude design banners in five steps. It asks about purpose, platform and size, content, brand and style, researches art directions, builds each option in HTML and CSS at the exact pixel size, exports PNGs, and shows the options side by side for you to react to.

It ships one reference file with sizes, safe zones and 22 styles, and SKILL.md says it needs no other skills or scripts. Browser research and image generation are optional and only used if your setup has them. It does not do video editing, full website design or print production.

Good for

Marketers and founders who need a social cover or ad banner fast
Designers who want several art directions to pick from
Developers building a website hero image

Install banner-design

Claude Code

Copy this prompt.

Install the banner-design skill in Claude Code. Run this command:

npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

banner-design is self-contained: SKILL.md says it needs no sibling skills or skill-relative scripts. The same repo holds six other design skills, so name this one with --skill or you install more than you want.

From the vendor's docs. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to Activate
Available Resources
Workflow
Step 1: Gather Requirements (AskUserQuestion)
Step 2: Research & Art Direction
Step 3: Design & Generate Options
Step 4: Export Banners to Images
Step 5: Present Options & Iterate
Banner Size Quick Reference
Art Direction Styles (Top 10)
Design Rules
Security

Key facts

Author: claudekit, per the SKILL.md metadata. Published in the nextlevelbuilder repo
Repo: nextlevelbuilder/ui-ux-pro-max-skill
Installs on skills.sh: 43,129 (Nov 2, 2026)
GitHub stars: 143,821 (Nov 2, 2026)
License: MIT
Last commit: Nov 1, 2026
Skill version: 1.0.0
Files: 2 files including SKILL.md: references/banner-sizes-and-styles.md
Needs: Nothing else. SKILL.md says the workflow is self-contained and needs no sibling skills or skill-relative scripts
skills.sh checks: Gen Agent Trust Hub pass, Socket pass, Snyk warn

What it includes

Asks purpose, platform and size, content, brand, style and how many options
Claude asks you up to six questions before designing. The default is 3 options.
Step 1: Gather requirements
Reads the size and style reference, then picks 2 to 3 art directions
If browser research is available and you allow it, Claude collects 3 to 5 references. Otherwise it works from the bundled reference and your examples.
Network · Step 2: Research and art direction
Builds each banner in HTML and CSS at the exact platform size
Applies safe zones (key content in the central 70 to 80%), at most 2 typefaces, one call to action and text contrast of at least 4.5:1. It uses your logo, colours and fonts and does not invent brand rules.
Write · Step 3: Design and generate options
Captures each banner as PNG into assets/banners/{campaign}/
Uses your setup's browser or screenshot tool. If capture is not available, it hands over the HTML and CSS and marks PNG export as pending. Files are named {style}-{width}x{height}.png.
Write · Step 4: Export to images
Shows all options side by side and revises until you approve
Each option comes with its style name, a preview, the reasoning and the file path and size.
Step 5: Present and iterate
Nine ready sizes: Facebook, X, LinkedIn, YouTube, Instagram, Google Ads, website hero
For example X header 1500 x 500, LinkedIn 1584 x 396, Instagram post 1080 x 1080, YouTube channel art 2560 x 1440.
Size table
One CTA, text under 20% for ads, print at 300 DPI with bleed
Also: min 16px body text, headlines of at least 32px, and CMYK with 3 to 5 mm bleed for print.
Design rules

From the official docs

Permissions

Low risk

Claude writes HTML and PNG files into an assets/banners folder in your project. Any web research or image generation goes through tools you have already enabled, so check what those tools can reach.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Optional tools do the network work
SKILL.md bundles no scripts and leaves browsing and image generation to your assistant. Check which tools you have enabled and what they send out. github.com
It writes files into your project
Banners go to assets/banners/{campaign}/. Choose the folder first if your project uses a different layout. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	The skill's output is files, so there is no read-only mode.
Talks to	Browser research, only if available and permitted. Image generation, only if your setup provides an authorized tool
Scopes	Writes banner HTML and PNG files under assets/banners/{campaign}/ May use your assistant's browser, screenshot and image-generation tools if they are enabled

Questions

How do I install banner-design?

Use the install box above. It is a single skill folder with two files, so the skills CLI command with --skill banner-design installs it on its own. The same repo also holds six sibling design skills, and the README documents a Claude Code plugin that installs all seven.

Does banner-design need an API key?

SKILL.md names no key and bundles no scripts. Image generation is optional and only happens if your setup provides an authorized image tool. Without it, Claude builds visuals from gradients, shapes, type and the assets you supply.

Does it work in the Claude app or Claude.ai?

The author does not document it. The README says the full repository ZIP exceeds the 200-file upload limit of Claude.ai and that the project does not publish a separate upload ZIP. This skill is only two files, but zipping its folder is your own workaround.

Can it export PNG files?

Yes, if your setup can open a browser or take screenshots. SKILL.md says to capture the banner element at the exact size. If capture is not available, you get the HTML and CSS source and PNG export is marked pending.

Is it safe to use?

It writes HTML and image files into an assets/banners folder in your project and bundles no scripts. Any browsing or image generation uses tools you have already enabled in your assistant, so check what those tools can reach. SKILL.md also tells Claude to refuse out-of-scope requests and not to expose environment variables or internal configs.

banner-design vs the design skill?

banner-design is the standalone banner workflow. The design skill from the same repo has a built-in banner section plus logos, corporate identity mockups, slides, icons and social photos, and it routes to the brand, design-system and ui-styling skills. Use banner-design if banners are all you need.

Information

updated Nov 2, 2026

Repository: nextlevelbuilder/ui-ux-pro-max-skill
Folder: cli/assets/skills/banner-design

nextlevelbuilder/ui-ux-pro-max-skill skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6

ui-ux-pro-max-skill · github.com
commands.md · github.com
banner-design SKILL.md · github.com
README.md · github.com
SKILL.md · github.com
banner-sizes-and-styles.md · github.com