banner-design

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

Updated Aug 25, 2026
One-click install
npx skills add https://github.com/mr-creative-hmh/creative-tasks --skill banner-design-mr-creative-hmh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/mr-creative-hmh/creative-tasks/tree/main/.agents/skills/banner-design
Command: npx skills add https://github.com/mr-creative-hmh/creative-tasks --skill banner-design-mr-creative-hmh

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 styles, which is slow and error-prone when done 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. - Multiple Art Direction Options: Generates 2-3 design variants per request from 22 documented styles such as minimalist, gradient, glassmorphism, and neon. - AI Visual Generation & Export: Creates background and hero imagery via Gemini image models, composes text in HTML/CSS, and exports final PNGs at exact dimensions via headless Chrome screenshots. - Use Case: A marketer needs a Twitter header and Instagram story for a product launch; the skill produces three styled options per size, exports compressed PNGs, and iterates based on feedback. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header at 1500x500 pixels with your headline and brand colors.

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 target platforms and the skill applies exact dimensions from its size reference, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram Stories. It generates multiple art direction options and exports each as a PNG at the correct size.

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 I generate banner background images with AI?▼

Yes, the skill uses Gemini image generation models to create backgrounds, patterns, and hero illustrations. The Flash model handles fast 2K backgrounds while the Pro model produces 4K detailed illustrations, with text overlaid separately in HTML/CSS.

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 for readability.