skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

banner-design

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

Updated Aug 25, 2026
Search Tags:#social media#image generation#PNG export#art direction#html css#banner design#display ads
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill banner-design-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/ui-ux-pro-max-skill/.claude/skills/banner-design
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill banner-design-klyrhonmiko

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 art direction styles, and producing multiple design variants manually is slow and inconsistent. ## 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 2-3 design variants per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - AI Visual Generation and 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 Pinterest references, generates three styled variants at 1500x500 and 1080x1920, and exports compressed PNGs organized by campaign folder. ## Quick Start Ask the AI 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 multiple social media platforms?▼

Specify the platforms and content, and the skill generates variants at exact dimensions for each, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. It applies safe zone rules and exports each as a 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 performance notes.

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

Use the Standard Flash model for backgrounds, gradients, patterns, and quick A/B iterations 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 static banner design only. It refuses out-of-scope requests such as video editing, full website design, and print production management.

Why does text get cut off on my social media banner?▼

Text is cut off when placed outside safe zones. Keep critical content within the central 70-80% of the canvas, and for YouTube use the 1546x423 safe area inside the 2560x1440 canvas.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
4asaanAI4asaanAI

ckm:banner-design

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

Community
Advanced
jtvarisjtvaris

ckm:banner-design

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

Community
Advanced
partme-aipartme-ai
610

figma

Guide Figma design creation, components, prototyping, collaboration, and design systems.

Official
Basic