skills.rest
s0nbuildtech287
s0nbuildtech287COMMUNITY
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 Aug 31, 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/s0nbuildtech287/body_gym --skill banner-design-s0nbuildtech287
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/s0nbuildtech287/body_gym/tree/main/SKILL/ui-ux-pro-max-skill/.claude/skills/banner-design
Command: npx skills add https://github.com/s0nbuildtech287/body_gym --skill banner-design-s0nbuildtech287

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners across many platforms requires knowing exact dimensions, safe zones, and style conventions for each channel, 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 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 PNGs via headless Chrome screenshots. - 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 assistant to design three minimalist banner options for a Twitter/X header promoting your 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 design a banner for social media with correct dimensions?▼

Specify the platform and the skill looks up exact dimensions from its size reference, such as 1500 x 500 for Twitter/X headers or 1080 x 1920 for Instagram stories. It then builds the banner in HTML/CSS and exports a PNG at those exact pixels.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include 300 x 250 Medium Rectangle, 728 x 90 Leaderboard, 300 x 600 Half Page, and 320 x 50 Mobile Banner. The skill's reference file lists all standard sizes with notes on performance.

Can I generate multiple banner design styles at once?▼

Yes, the workflow generates multiple art direction options per request, defaulting to three. You can choose from 22 documented styles including minimalist, gradient, glassmorphism, neon, retro, and editorial.

Does the banner design skill support print formats?▼

Yes, it covers print formats like roll-ups and trade show banners with print-specific rules: 300 DPI minimum, CMYK color mode, and 3-5mm bleed. 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, maximum two typefaces, and a 4.5:1 contrast ratio.

Related Skills

Explore More Design & Creative Skills→
program-the-brain-not-the-heartbeatprogram-the-brain-not-the-heartbeat

anthropics-applying-brand-guidelines

Apply corporate branding guidelines to documents for consistent colors, typography, and tone.

Community
Advanced
PgooonePgooone

ckm:banner-design

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

Community
Advanced
Strat-Ai-Gize-Marketing-AutomationStrat-Ai-Gize-Marketing-Automation

popup-cro

Design and optimize popups, modals, and banners for conversion rate optimization.

Official
Advanced
vivy-yivivy-yi
363

canva

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

Community
Intermediate