skills.rest
MohamadJoumaa
MohamadJoumaaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

banner-design

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

Updated Aug 26, 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/MohamadJoumaa/Direct --skill banner-design-mohamadjoumaa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/MohamadJoumaa/Direct/tree/main/.cursor/skills/banner-design
Command: npx skills add https://github.com/MohamadJoumaa/Direct --skill banner-design-mohamadjoumaa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating on-brand banners across many platforms requires knowing dozens of size specs, safe zones, and style conventions, then producing visuals for each variant manually. ## Core Features & Use Cases - Multi-Platform Size Coverage: Built-in references for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print formats with exact dimensions and safe zones. - Multiple Art Direction Options: Generates several design variants per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - AI Visual Generation: Produces background and hero imagery via Gemini image models at 2K or 4K, then composes text, CTA, and logo in HTML/CSS and exports to PNG at exact dimensions. - Use Case: A marketer needs a Twitter/X header and an Instagram story for a product launch; the skill researches references, generates three art direction options per format, and exports ready-to-use PNGs. ## Quick Start Ask the AI to design three minimalist banner options for a Twitter/X header promoting a 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 multiple social media platforms?▼

Specify the platforms and a style preference, and the skill generates art direction options using exact dimensions from its size reference, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. Each variant is composed in HTML/CSS and exported to PNG.

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.

Can AI generate banner background images at 4K resolution?▼

Yes, the skill uses the Gemini Pro image model for 4K output suited to hero illustrations and complex art, and the Flash model for fast 2K backgrounds and gradients. Text is overlaid separately in HTML since generated images exclude lettering.

Does the banner design skill support print formats?▼

Yes, it covers print formats like roll-ups and trade show banners with 300 DPI, CMYK color mode, and 3-5mm bleed requirements. It does not handle full print production or video editing.

Why should banner text stay under 20 percent for ads?▼

Meta penalizes ad images with heavy text overlay, reducing delivery. The skill enforces this rule along with safe zones, one CTA per banner, and a minimum 4.5:1 contrast ratio.

Related Skills

Explore More Design & Creative Skills→
klarbauklarbau
7

ckm:banner-design

Design multi-format banners from a brief with platform-specific layouts.

Community
Advanced
4asaanAI4asaanAI

ckm:banner-design

Design multi-platform banners with exact dimensions and export PNGs.

Community
Advanced
0xRayAI0xRayAI

frontend-ui-ux-engineer

Apply UI/UX design principles and WCAG 2.1 AA accessibility guidelines to web interfaces.

Official
Intermediate
DayzideeDayzidee

banner-design

Generate social media, ad, and web banners using AI and HTML/CSS.

Community
Advanced