Ultra banner design
Skill amirudinR/Ultra-Skill/skills/ui-design/ultra-banner-design
Multi-platform banner design — social media covers, ad banners, website heroes, print. 22 art direction styles. Uses Ultra Design Engine for design intelligence, style search, and color/typography recommendations. Design-to-code workflow with HTML/CSS → PNG export.From its SKILL.md
npx -y skills add amirudinR/Ultra-Skill --skill ultra-banner-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
5.5 KB, as published. Nobody here has run it
Ultra Banner Design
Multi-format creative banner system across social, ads, web, and print. 22 art direction styles. Design-to-code workflow: gather requirements → research → HTML/CSS design → PNG export at exact dimensions.
When to Use
- Social media cover/header design (Facebook, Twitter/X, LinkedIn, YouTube, Instagram)
- Ad banner or display ad design (Google Ads, Meta Ads)
- Website hero section visual design
- Event or print banner design
- Creative asset generation for campaigns
- Brand-aligned banner sets across multiple platforms
Prerequisites
Python 3.x:
python3 --version || python --version
On Windows use python instead of python3.
Source of Truth
| Resource | Path |
|---|---|
| Ultra Design Engine search | ultra-design-engine\scripts\search.py |
| Styles DB | ultra-design-engine\data\styles.csv (67 styles) |
| Colors DB | ultra-design-engine\data\colors.csv (193 palettes) |
| Typography DB | ultra-design-engine\data\typography.csv (75 pairings) |
| Products DB | ultra-design-engine\data\products.csv (193 products) |
Banner Size Reference
| Platform | Type | Size (px) | Aspect Ratio |
|---|---|---|---|
| Cover | 820 x 312 | ~2.6:1 | |
| Post | 1200 x 630 | 1.9:1 | |
| Twitter/X | Header | 1500 x 500 | 3:1 |
| Twitter/X | Post | 1200 x 675 | 16:9 |
| Personal Cover | 1584 x 396 | 4:1 | |
| Post | 1200 x 627 | 1.9:1 | |
| YouTube | Channel Art | 2560 x 1440 | 16:9 |
| YouTube | Thumbnail | 1280 x 720 | 16:9 |
| Story | 1080 x 1920 | 9:16 | |
| Post | 1080 x 1080 | 1:1 | |
| Carousel | 1080 x 1350 | 4:5 | |
| Pin | 1000 x 1500 | 2:3 | |
| Google Ads | Leaderboard | 728 x 90 | 8:1 |
| Google Ads | Med Rectangle | 300 x 250 | 6:5 |
| Google Ads | Wide Skyscraper | 160 x 600 | 3.75:1 |
| Website | Hero | 1920 x 600-1080 | ~3:1 |
| Letter | 8.5 x 11 in (2550 x 3300 @300DPI) | — |
Art Direction Styles (Full 22)
Use Ultra Design Engine to search for style inspiration:
python ultra-design-engine\scripts\search.py "<style keywords>" --domain style
python ultra-design-engine\scripts\search.py "<product type>" --design-system
Top Styles
| Style | Best For | Key Elements |
|---|---|---|
| Minimalist | SaaS, tech | White space, 1-2 colors, clean type |
| Bold Typography | Announcements | Oversized type as hero element |
| Gradient | Modern brands | Mesh gradients, chromatic blends |
| Photo-Based | Lifestyle, e-com | Full-bleed photo + text overlay |
| Geometric | Tech, fintech | Shapes, grids, abstract patterns |
| Retro/Vintage | F&B, craft | Distressed textures, muted colors |
| Glassmorphism | SaaS, apps | Frosted glass, blur, glow borders |
| Neon/Cyberpunk | Gaming, events | Dark bg, glowing neon accents |
| Editorial | Media, luxury | Grid layouts, pull quotes |
| 3D/Sculptural | Product, tech | Rendered objects, depth, shadows |
| Illustrated | Children, creative | Hand-drawn elements, custom art |
| Collage | Artistic, fashion | Mixed media, cutout aesthetic |
| Duotone | Music, modern | Two-tone color treatment |
| Liquid/Aurora | Beauty, wellness | Fluid shapes, organic gradients |
| Brutalist | Artsy, counter-culture | Raw, stark, high contrast |
Workflow
Step 1: Gather Requirements
Collect: purpose (social cover, ad, hero, print), platform/size, content (headline, subtext, CTA, logo), brand guidelines, style preference, quantity.
Step 2: Research & Art Direction
- Search Ultra Design Engine for design intelligence:
python ultra-design-engine\scripts\search.py "<product type> <style>" --design-system - Get color palette:
python ultra-design-engine\scripts\search.py "<product type>" --domain color - Get typography:
python ultra-design-engine\scripts\search.py "<mood>" --domain typography - Select 2-3 complementary styles from the art direction list.
Step 3: Design HTML/CSS Banner
For each art direction option:
- Use exact platform dimensions
- Apply safe zone rules (critical content in central 70-80%)
- Max 2 typefaces, single CTA
- Ensure 4.5:1 contrast ratio
- Use brand tokens (colors, fonts) from design system
Step 4: Export to PNG
Export at exact platform dimensions:
# Serve locally then screenshot at exact px
# Use browser dev tools or Playwright for capture
# Output at 2x deviceScaleFactor for retina
Step 5: Present & Iterate
Present exported images side-by-side with style name, design rationale, dimensions.
Design Rules
- Safe zones: critical content in central 70-80% of canvas
- CTA: one per banner, bottom-right, min 44px height, action verb
- Typography: max 2 fonts, min 16px body, >=32px headline
- Text ratio: under 20% for ads (Meta penalizes heavy text)
- Print: 300 DPI, CMYK, 3-5mm bleed
- Brand: always use brand tokens (colors, fonts, logo)
- No emoji as icons: use vector icons (Phosphor or Heroicons)
Cross-Reference
| Skill | When to Load |
|---|---|
ultra-ui-styling | Search styles, colors, fonts for banners |
ultra-design-system | Get brand tokens for banner styling |
ultra-brand-identity | Brand voice, logo, CIP context |
ultra-frontend-eng | HTML/CSS implementation patterns |