skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ckm:banner-design

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

1|Updated Feb 24, 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/masermediagroup-stack/maser-media --skill ckm-banner-design-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ui-ux-pro-max-skill/.claude/skills/banner-design
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill ckm-banner-design-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners across many platforms requires knowing dozens of size specs, safe zones, and style conventions, and producing multiple art direction options 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 several style variants per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - AI Visual Generation & Export: Creates background and hero imagery via Gemini image models, composes text and CTA overlays in HTML/CSS, and exports final PNGs at exact pixel dimensions via headless Chrome screenshots. - 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 styled options per size, and exports ready-to-use PNGs. ## Quick Start Ask the agent to design three minimalist banner options for a Twitter/X header promoting your 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 purpose, and the skill looks up exact dimensions from its size reference, such as 1500 × 500 for Twitter/X headers or 1080 × 1920 for Instagram stories. It then builds the banner in HTML/CSS and exports a PNG at those exact pixels.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include 300 × 250 medium rectangle, 728 × 90 leaderboard, 300 × 600 half page, and 320 × 50 mobile banner. The skill's reference file lists all standard sizes with performance notes.

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

Use the Standard Flash model for backgrounds, gradients, 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 such as video editing, full website design, or print production management.

Why should banner text stay under 20 percent for ads?▼

Meta penalizes ad images with heavy text overlay, reducing delivery. The skill enforces this rule along with safe zones, one CTA per banner, maximum two typefaces, and a 4.5:1 contrast ratio.

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
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
vivy-yivivy-yi
363

canva

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

Community
Intermediate