skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

ckm-banner-design

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

Updated Jun 22, 2026
Search Tags:#social media#image generation#art direction#ad creative#png export#html css#banner design
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill ckm-banner-design-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm-banner-design
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/ckm-banner-design
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill ckm-banner-design-aicodepro

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. This Skill automates that workflow from requirements gathering to exported PNG files. ## Core Features & Use Cases - Multi-Format Banner Generation: Produces banners for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print using exact platform dimensions and safe-zone rules. - Multiple Art Direction Options: Generates several style variants per request (minimalist, gradient, bold typography, glassmorphism, neon, editorial, and 22 total documented styles) with AI-generated visuals via Gemini image models. - HTML/CSS Composition and PNG Export: Builds banners as HTML/CSS with brand context injection, then screenshots them at exact pixel dimensions with automatic compression. - Use Case: A marketer needs a Twitter/X header and an Instagram story for a product launch. The Skill gathers requirements, researches Pinterest references, generates three art direction options with AI visuals, and exports correctly sized PNGs to an organized assets folder. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header promoting a product launch and export them as PNG files.

Frequently Asked Questions about ckm-banner-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a banner for multiple social media platforms at once?▼

Specify each platform and size during requirements gathering, and the workflow generates variants per platform using exact dimensions from the size reference. Each banner is composed in HTML/CSS and exported to PNG at the correct pixel size, such as 1500x500 for Twitter/X or 1080x1920 for Instagram stories.

What banner sizes does Facebook, Twitter, and YouTube require?▼

Facebook covers use 820x312 pixels, Twitter/X headers use 1500x500, and YouTube channel art uses 2560x1440 with a 1546x423 safe area. The full reference file covers over 30 sizes including Google Display ads, LinkedIn, Pinterest, and print formats.

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

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 I export HTML banner designs to PNG at exact dimensions?▼

Yes, the workflow serves the HTML files locally and screenshots each banner at exact platform dimensions using the chrome-devtools screenshot script. Files over 5MB are automatically compressed, and you can set a custom max size threshold.

What are the text and safe zone rules for ad banners?▼

Keep critical content within the central 70-80% of the canvas and text under 20% of the image for Meta ads. Use one CTA per banner at minimum 44px height, maximum two typefaces, and at least a 4.5:1 contrast ratio.

What design tasks does this banner skill not handle?▼

The skill explicitly excludes video editing, full website design, and print production work. It covers static banner design and PNG export only, so motion graphics or complete site layouts require different tools.

Related Skills

Explore More Design & Creative Skills→
Superreal-ioSuperreal-io
1

Brand Visual Composition - Movistar

Applies Movistar brand composition rules for grids, typography, color contrast, and pricing layouts.

Official
Intermediate
4asaanAI4asaanAI

ckm:banner-design

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

Community
Advanced
DebindennyDebindenny

ckm:banner-design

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

Community
Advanced
Grupo-6-ADS-BGrupo-6-ADS-B
2

ckm:banner-design

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

Official
Advanced