skills.rest
hontauadrian
hontauadrianCOMMUNITY
Explore all skills by this author →
GitHub

ckm:banner-design

Generates multi-style banner designs for social media, ads, web, and print platforms.

Updated Apr 7, 2026
Search Tags:#image generation#art direction#png export#html css#banner design#social media graphics#display ads
One-click install
npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill ckm-banner-design-hontauadrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/reviewer/skills/banner-design
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill ckm-banner-design-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing banners across many platforms requires knowing exact dimensions, safe zones, and art direction styles, which is slow and error-prone when done manually. ## Core Features & Use Cases - Multi-Platform Sizing: Covers Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print formats with exact pixel dimensions. - Multiple Art Direction Options: Generates 2-3 style variants per request from 22 documented styles such as Minimalist, Gradient, Glassmorphism, and Neon/Cyberpunk. - HTML/CSS Composition with AI Visuals: Builds banners in HTML/CSS, generates background imagery via Gemini image models, and exports final PNGs at exact dimensions. - Use Case: A marketer needs a Twitter header (1500x500) and an Instagram post (1080x1080) for a product launch; the skill produces three styled variants for each size, exported as compressed PNGs organized by campaign folder. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter header at 1500x500 pixels with your headline and CTA.

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 variants using exact dimensions for each platform, such as 1500x500 for Twitter headers or 1080x1080 for Instagram posts. Each banner is composed in HTML/CSS and exported as a PNG at the correct size.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include Medium Rectangle (300x250), Leaderboard (728x90), Wide Skyscraper (160x600), and Half Page (300x600). The reference file lists all supported sizes with notes on performance.

Which image generation model should I use for banner backgrounds?▼

Use the Standard Flash model for backgrounds, gradients, and patterns at 2K resolution with fast turnaround. 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 such as video editing, full website design, or print production management.

What design rules apply to ad banners with text?▼

Keep text under 20% of the canvas for Meta ads, use a maximum of two typefaces, maintain at least a 4.5:1 contrast ratio, and place a single CTA of at least 44px height in the bottom-right area.

Related Skills

Explore More Design & Creative Skills→
akobryan1akobryan1
1

design

Create visual design assets for branding, marketing, and corporate communication.

Community
Advanced
4asaanAI4asaanAI

ckm:banner-design

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

Community
Advanced
s0nbuildtech287s0nbuildtech287

banner-design

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

Community
Advanced
vivy-yivivy-yi
363

canva

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

Community
Intermediate