skills.rest
longqt321
longqt321COMMUNITY
Explore all skills by this author →
GitHub

banner-design

Generates multi-format banner designs for social media, ads, web heroes, and print with AI-generated visuals.

Updated Sep 10, 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/longqt321/Rendez --skill banner-design-longqt321
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/longqt321/Rendez/tree/main/.agent/skills/banner-design
Command: npx skills add https://github.com/longqt321/Rendez --skill banner-design-longqt321

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating on-brand banners across many platforms requires knowing exact dimensions, safe zones, and art direction for each format, which is slow and error-prone when done manually. ## Core Features & Use Cases - Multi-Platform Banner Generation: Produces banners at exact dimensions for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print formats. - Multiple Art Direction Options: Generates several style variants per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - AI Visual Generation & Export: Creates background and hero imagery via Gemini image models, composes text and CTA overlays in HTML/CSS, and exports final PNGs via headless Chrome screenshots. - Use Case: A marketer needs a Twitter header and Instagram story for a product launch; the skill researches references, produces three art direction options per size, and exports ready-to-use PNGs. ## Quick Start Design three minimalist banner options for a Twitter/X header at 1500x500 promoting our SaaS product launch.

Frequently Asked Questions about banner-design

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

FAQPage Schema
How do I create a banner for multiple social media platforms at once?▼

Specify the platforms and quantity when prompted, and the workflow generates separate HTML/CSS banners at each platform's exact dimensions, then exports each to PNG via headless Chrome screenshots. Platform sizes come from a built-in reference covering Facebook, Twitter/X, LinkedIn, YouTube, and Instagram.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include 300x250 Medium Rectangle, 728x90 Leaderboard, 160x600 Wide Skyscraper, 300x600 Half Page, and 320x50 Mobile Banner. The reference file lists all supported sizes with notes on performance.

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 cover video editing, full website design, or print production management.

What design rules ensure banners pass ad platform review?▼

Banners keep text under 20% of the canvas for Meta ads, maintain 4.5:1 contrast ratios, use one CTA of at least 44px height, and keep critical content within the central 70-80% safe zone.

Related Skills

Explore More Design & Creative Skills→
akobryan1akobryan1
1

design

Create visual design assets for branding, marketing, and corporate communication.

Community
Advanced
firstsun-devfirstsun-dev
3

ckm:banner-design

Generates multi-format banner designs for social media, ads, web heroes, and print with AI-generated visuals.

Official
Advanced
MichaelSolatiMichaelSolati

banner-design

Generate platform-sized banners with built-in safe zone and contrast compliance.

Community
Intermediate
ceslepceslep

ckm:banner-design

Generate creative banner designs for specified platforms, styles, and dimensions.

Community
Advanced