Banner Design
@nextlevelbuilderSkill from the UI UX Pro Max repo for designing social, ad, hero and print banners in HTML/CSS with several art directions.
Instruction-only skill with no scripts or credentials; it writes banner files into your project.
Install Banner Design in Google Antigravity
Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide
Install the "Banner Design" skill for Google Antigravity. Follow the steps at https://www.antigravityskills.org/install/banner-design.md (source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/banner-design). Before running anything, show me what you will download and whether it includes scripts, and wait for my OK. Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.
The agent reads the install file, shows you what it will download and waits for your OK.
Option 2: install it yourself
- 1. Clone the source repository
git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill /tmp/ui-ux-pro-max-skill
Download the repository that contains the skill to a temporary folder.
- 2. Copy the skill into your workspace
mkdir -p .agents/skills && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/banner-design .agents/skills/
Run this from your project root. Antigravity reads workspace skills from <project>/.agents/skills/<folder>/, so you should end up with .agents/skills/banner-design/SKILL.md.
- 3. Or install it globally
mkdir -p ~/.gemini/config/skills && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/banner-design ~/.gemini/config/skills/
Use this instead of the workspace copy to have the skill in every project (Antigravity docs: ~/.gemini/config/skills/). For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
- 4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. banner-design is listed.
The repo README documents Antigravity only for the whole set: npm install -g ui-ux-pro-max-cli, then uipro init --ai antigravity in your project. Our 2026-10-13 hands-on test of that command (see the UI UX Pro Max page) wrote seven folders to .agents/skills/ including banner-design. For this skill alone, the copy steps above use the standard Antigravity skills folders. No scripts, binaries or API keys.
Using Claude Code, Cursor or Codex? See other assistants below.
What is Banner Design?
How to use Banner Design?
Key features of Banner Design
- ✓We counted at 477bcb2: the folder has 2 files, SKILL.md (145 lines, 1,037 words, 7,071 bytes) and references/banner-sizes-and-styles.md (118 lines, 4,993 bytes), 12,064 bytes in total, and no scripts.
- ✓We counted: the reference holds 28 size rows (12 social, 8 Google Display, 4 website, 4 print) and 22 art-direction styles; SKILL.md quotes only 9 sizes and a top-10 style table, so the other 19 sizes and 12 styles are only in the reference.
- ✓We counted: the 4 print rows are in physical units (roll-up 850 x 2000 mm, step-and-repeat 8 x 8 ft, vinyl outdoor 6 x 3 ft, trade show 33 x 78 in), not pixels; the file also lists 5 Pinterest search-query patterns, used only if your agent can do browser research.
- ✓We counted: built-in rules are safe zone in the central 70-80%, one CTA (bottom-right, min 44 px), max 2 fonts, 4.5:1 contrast, ads under 20% text, and print at 300 DPI with 3-5 mm bleed.
- ✓We compared with diff -r: the folder is byte-identical to cli/assets/skills/banner-design, the copy that the uipro CLI installs.
- ✓README says: Banners and Presentation Slides are listed under the Premium version, yet this folder is in the open MIT repo at this commit; check the project's licensing intent before commercial use.
- ✓Difference from ui-ux-pro-max: no searchable data and no script; SKILL.md says it needs no sibling skills or skill-relative scripts.
When to use Banner Design
- 1Twitter/X header or LinkedIn cover in several styles
- 2Google Display ad sizes from one brief
- 3Website hero visual with editable HTML text
Installation & Setup Guide
Agent Rules / Prompt SetupFollow these steps (taken from the project's own docs) to configure Banner Design in your development environment.
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
Source: repo README, Claude Code install section.
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Installs the whole plugin; plugin.json points at ./.claude/skills/, which contains banner-design.
npm install -g ui-ux-pro-max-cli && uipro init --ai cursor
README, Using CLI. Installs UI UX Pro Max and its companion skills, not banner-design alone.
Usage Example & Verification
1) Our example: "Design three 1500x500 Twitter header options for our launch: minimalist, gradient and bold typography, headline 'Ship faster'."
-> The agent first asks purpose, size, content, brand and style (SKILL.md step 1), then builds three HTML/CSS banners and exports PNGs to assets/banners/{campaign}/ if it can capture a screenshot.
2) Our example: "Make a 1080x1080 Instagram post and a 300x250 ad from the same brief."
-> One file per size, named like minimalist-1080x1080.png; the 300x250 version has to keep one CTA inside the safe zone.
3) Our example: "Design a 33x78 in trade show banner for our booth, editorial style."
-> Print sizes and the 300 DPI / 3-5 mm bleed rule come from the reference; the skill itself says it does not handle print production, so treat the output as a design draft.
(The repo README has no banner example, so all three are ours.)Security Review
Static reviewInstruction-only skill with no scripts or credentials; it writes banner files into your project.
Full review: scope, findings, risks
At commit 477bcb2 the folder contains SKILL.md and references/banner-sizes-and-styles.md only; there are no scripts, so no network calls, subprocesses or environment variables are involved. The workflow asks the agent to create HTML/CSS, capture PNGs with the runtime's own browser tooling and save them under assets/banners/{campaign}/. Browser research and image generation are described as optional and only if available and permitted. SKILL.md also has a short Security section telling the agent not to expose environment variables. This is a static review of the files; we did not run the skill.
Operational Notes & Known Limitations
Known Limitations
- •PNG export needs a browser or screenshot capability in your agent; otherwise you get HTML/CSS only (SKILL.md says PNG is then marked pending).
- •Image generation is optional and uses tools your agent already has; the skill bundles none.
- •The first step is an AskUserQuestion prompt that some agents show as plain follow-up questions.
- •Banners only: no video, full websites or print production.
Frequently Asked Questions
Is the Banner Design skill safe?
In our static review of commit 477bcb2 it is two Markdown files with no scripts, no API keys and no network calls. It writes banner files into your project under assets/banners/.
How do I install Banner Design in Antigravity?
The repo README documents uipro init --ai antigravity for the whole UI UX Pro Max set; for this skill alone, copy .claude/skills/banner-design into .agents/skills/ (or ~/.gemini/config/skills/) and ask "What skills do you have?" (CLI: /skills).
Which sizes does it know?
The reference file lists 28 size rows, e.g. Twitter/X header 1500 x 500, LinkedIn banner 1584 x 396, YouTube channel art 2560 x 1440, Google Display 300 x 250 and 728 x 90.
Does it need an AI image generator?
No. It can use CSS-built visuals or your own assets; generated backgrounds are optional and should contain no text.
Supported Platforms
Keep exploring this topic
Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.
Related Skills
UI/UX Pro Max
@nextlevelbuilder
Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.
Design System
@nextlevelbuilder
Design token skill from the UI UX Pro Max repo: three-layer tokens, component specs, Tailwind integration and token-based HTML slides.
Claude Design
@jiji262
Instruction-only skill that makes your agent build HTML design artifacts (landing pages, decks, prototypes, animations) with set design rules and starter files.
Popular Skills
View All →Agent Manager
@sickn33
Manage multiple local CLI agents via tmux sessions.
Systematic Debugging
@sickn33
Debug systematically, not randomly. Find and fix bugs methodically.
Browser Automation (Playwright)
@sickn33
Expert browser automation for cleaning scraping and reliable testing.