skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

ckm:banner-design

Generates multi-format banner designs with AI visuals and exports them to PNG at platform dimensions.

Updated Jun 30, 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/kaitoartz/dotfiles --skill ckm-banner-design-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/ckm-banner-design
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill ckm-banner-design-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners for social media covers, display ads, website heroes, and print requires knowing dozens of platform-specific dimensions, safe zones, and design rules, then producing multiple art direction options 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 and safe zone rules. - 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: Creates backgrounds, patterns, and hero illustrations via Gemini image models (Flash for 2K speed, Pro for 4K detail), then composes text and CTAs in HTML/CSS. - Automated PNG Export: Screenshots HTML banners at exact platform dimensions with built-in compression for files over 5MB. - Use Case: A marketer needs a Twitter/X header (1500x500) for a product launch. The skill researches Pinterest references, generates three style variants with AI visuals, and exports ready-to-upload PNGs. ## Quick Start Design three minimalist banner options for a Twitter/X header promoting a SaaS product launch.

Frequently Asked Questions about ckm: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 applies exact dimensions from its size reference, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram Stories. It keeps critical content within the central 70-80% safe zone and exports PNGs at the exact pixel size.

What banner sizes does Google Display Network require?▼

Common Google Display sizes include Medium Rectangle (300x250), Leaderboard (728x90), Half Page (300x600), and Mobile Banner (320x50). The skill's reference file lists all standard sizes with notes on performance, such as Medium Rectangle having the highest CTR.

Which Gemini image model should I use for banner visuals?▼

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 support video editing, full website design, or print production management, though it does provide print specs like 300 DPI and CMYK.

Why does Meta penalize text-heavy ad banners?▼

Meta's ad delivery system reduces reach for images with over 20% text coverage. The skill enforces this text-to-image ratio rule along with a maximum of 7 words per line and 3 lines total for ad banners.

Related Skills

Explore More Design & Creative Skills→
OpenLaborOpenLabor
4

Visual Guidelines

Create visual brand guidelines documenting logos, color palettes, and typography.

Official
Intermediate
KumarAdi8KumarAdi8

banner-design

Design platform-optimized banners for social media, ads, websites, and print.

Community
Intermediate
jtvarisjtvaris

ckm:banner-design

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

Community
Advanced
MarcoBolsaMarcoBolsa

image

Generates and optimizes marketing images using AI models, design tools, and web performance best practices.

Community
Intermediate