skills.rest
timikalo7
timikalo7COMMUNITY
Explore all skills by this author →
GitHub

ckm:banner-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners across platforms requires knowing dozens of size specs, safe zones, and style conventions, then producing multiple art direction options manually. This Skill automates the full banner design workflow from requirements gathering to exported PNG files. ## 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 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: Produces backgrounds, patterns, and hero illustrations via Gemini image models at 2K or 4K resolution, then composes text and CTAs in HTML/CSS. - Automated PNG Export: Screenshots HTML banners at exact platform dimensions with automatic compression for files over 5MB. - Use Case: A marketer needs a Twitter/X header and Instagram story for a product launch. The Skill gathers requirements, researches Pinterest references, generates three style options per size, and exports ready-to-use PNGs organized by campaign folder. ## Quick Start Ask the agent to design three minimalist banner options for a Twitter/X header at 1500x500 pixels with your headline and call-to-action.

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 multiple social media platforms?▼

Specify the platforms and content, and the Skill generates options using exact dimensions for each platform such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. Each banner follows safe-zone rules keeping critical content in the central 70-80% of the canvas.

What banner sizes does Google Display Network require?▼

Common Google Display sizes include 300x250 Medium Rectangle, 728x90 Leaderboard, 300x600 Half Page, and 320x50 Mobile Banner. The full size reference covers eight Google ad formats plus social media, website, and print dimensions.

Can I generate banner background images with AI?▼

Yes, the Skill uses Gemini image models to generate visuals. The Flash model produces 2K backgrounds and patterns quickly, while the Pro model generates 4K hero illustrations and photorealistic scenes. Prompts should specify no text since text is overlaid in HTML.

How are HTML banner designs exported to PNG images?▼

HTML banners are served locally and screenshotted at exact platform dimensions using a Chrome DevTools script. Files over 5MB are automatically compressed, and outputs are organized by campaign folder using kebab-case filenames with style and size.

What are the text and typography rules for ad banners?▼

Keep text under 20% of the banner for Meta ads to avoid penalties, use a maximum of two typefaces, maintain at least 4.5:1 contrast ratio, and include one CTA of at least 44px height placed bottom-right with an action verb.

What design tasks does this banner skill not handle?▼

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

Related Skills

Explore More Design & Creative Skills→
HerxinsasaHerxinsasa
1

ckm:banner-design

Creates platform-optimized banner designs with exact dimension compliance and high-resolution PNG export.

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
Fabric-ProFabric-Pro
3

canvas-design

Create visual designs, graphics, and layouts using HTML Canvas API and design tools.

Official
Basic
NousResearchNousResearch
239.1k

baoyu-article-illustrator

Generate consistent article illustrations using type, style, and palette dimensions.

Official
Advanced