ckm:banner-design

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

1|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/Pgooone/oh-pgone-claudecode --skill ckm-banner-design-pgooone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/Pgooone/oh-pgone-claudecode/tree/main/.claude/plugins/cache/ui-ux-pro-max-skill/ui-ux-pro-max/2.5.0/.claude/skills/banner-design
Command: npx skills add https://github.com/Pgooone/oh-pgone-claudecode --skill ckm-banner-design-pgooone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners across multiple platforms requires knowing dozens of size specs, safe zones, and style conventions, and producing polished visuals usually demands both design and image-generation effort. 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: Creates backgrounds, patterns, and hero illustrations via Gemini image models, then composes text, CTA, and logo overlays in HTML/CSS before exporting to PNG. - Use Case: A marketer needs a Twitter/X header and an Instagram story for a product launch. The Skill gathers brand context, researches Pinterest references, produces three styled HTML banners per size, and exports compressed PNGs organized by campaign folder. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header at 1500x500 pixels with your headline and brand colors.

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 platforms?▼

Provide the platform, style preference, headline text, and brand details. The workflow researches Pinterest references, builds HTML/CSS banners at exact platform dimensions, generates AI visuals, and exports PNG files for each variant.

What banner sizes are supported for ads and social media?▼

Supported sizes include Facebook cover 820x312, Twitter/X header 1500x500, LinkedIn 1584x396, YouTube 2560x1440, Instagram story 1080x1920, Google Ads formats like 300x250 and 728x90, plus website heroes and print dimensions.

Which image generation 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 this skill handle video editing or full website design?▼

No. The skill is explicitly scoped to static banner design only. It does not handle video editing, full website design, or print production, and refuses out-of-scope requests.

What design rules apply to text and CTAs on banners?▼

Banners allow one CTA placed bottom-right with minimum 44px height, maximum two typefaces, 4.5:1 contrast ratio, and under 20% text coverage for Meta ads. Critical content stays within the central 70-80% safe zone.