skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

banner-design

Generates multi-format banner designs with AI visuals and exports them to PNG at platform dimensions.

Updated Sep 1, 2026
Search Tags:#social media#image generation#art direction#png export#html css#banner design#display ads
One-click install
npx skills add https://github.com/umairshahid622/perfumora --skill banner-design-umairshahid622
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/umairshahid622/perfumora/tree/main/perfumora/.claude/skills/banner-design
Command: npx skills add https://github.com/umairshahid622/perfumora --skill banner-design-umairshahid622

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners for social media covers, display ads, website heroes, and print requires knowing dozens of platform-specific dimensions, safe zones, and design rules, then producing multiple art direction options manually. ## Core Features & Use Cases - Multi-Platform Size Support: Covers Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print formats with exact pixel dimensions and safe zone rules. - Multiple Art Direction Options: Generates several design variants per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - AI Visual Generation & Export: Creates background and hero visuals via Gemini image models, composes text and CTA overlays in HTML/CSS, and exports final banners to PNG via headless Chrome screenshots. - Use Case: A marketer needs a Twitter/X header and Instagram story for a product launch; the skill researches Pinterest references, produces three styled HTML banners at 1500x500 and 1080x1920, and exports compressed PNGs organized by campaign folder. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header promoting your product launch and export them as PNGs.

Frequently Asked Questions about banner-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a banner for social media with correct dimensions?▼

Specify the target platform and the skill applies exact dimensions from its size reference, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. It keeps critical content within the central 70-80% safe zone and exports the final PNG at those exact pixels.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include 300x250 medium rectangle, 728x90 leaderboard, 300x600 half page, and 320x50 mobile banner. The skill's reference file lists all standard sizes with notes on performance, such as the medium rectangle having the highest CTR.

When should I use the Standard versus Pro image generation model?▼

Use the Standard Flash model for backgrounds, gradients, patterns, and quick A/B variants at 2K resolution. Use the Pro model for hero illustrations, product shots, and photorealistic scenes requiring 4K detail.

Can this skill handle video editing or full website design?▼

No, the skill explicitly handles banner design only and refuses out-of-scope requests. It does not perform video editing, full website design, or print production management.

Why does Meta penalize text-heavy ad banners?▼

Meta's ad delivery system reduces reach for images with more than 20% text coverage. The skill enforces this text-to-image ratio rule along with a maximum of two typefaces and 4.5:1 contrast ratios for ad banners.

Related Skills

Explore More Design & Creative Skills→
rally19rally19

resend-brand

Apply Resend brand color, typography, and logo rules to marketing materials.

Community
Basic
KumarAdi8KumarAdi8

banner-design

Design platform-optimized banners for social media, ads, websites, and print.

Community
Intermediate
jtvarisjtvaris

ckm:banner-design

Automate banner design with HTML/CSS creation and asset export pipelines.

Community
Advanced
vivy-yivivy-yi
363

canva

Create Xiaohongshu graphics using templates, drag-and-drop tools, and brand kits.

Community
Intermediate