skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

ckm:banner-design

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

Updated Mar 26, 2026
Search Tags:#social media#image generation#gemini#art direction#html css#banner design#display ads
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-banner-design-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/ui-ux-pro-max/.claude/skills/banner-design
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-banner-design-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing banners across dozens of platform sizes and art directions is slow and inconsistent. This Skill automates banner creation by combining platform-correct dimensions, curated art direction styles, AI image generation, and HTML/CSS composition into one repeatable workflow. ## 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 and safe-zone rules. - 22 Art Direction Styles: Choose from minimalist, gradient, bold typography, glassmorphism, neon, editorial, and more, with multiple design options generated per request. - AI Visual Generation: Uses Gemini Flash (2K, fast) for backgrounds and Gemini Pro (4K) for hero illustrations, then composites text, CTA, and logo in HTML/CSS and exports PNGs via headless Chrome screenshots. - Use Case: A marketer needs a Twitter/X header (1500x500) in three styles for a product launch. The Skill researches Pinterest references, generates three art directions, exports compressed PNGs, and presents them side-by-side for iteration. ## Quick Start Ask the assistant 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 style, and the Skill applies exact dimensions from its size reference, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. It keeps critical content within the central 70-80% safe zone and exports PNGs at the exact pixel size.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include 300x250 medium rectangle, 728x90 leaderboard, 160x600 wide skyscraper, and 300x600 half page. The Skill's reference file lists all standard sizes with notes on performance, such as the medium rectangle having the highest CTR.

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

Use the Gemini Flash model for backgrounds, gradients, patterns, and quick A/B variants at 2K resolution. Use the Gemini Pro model at 4K for hero illustrations, product shots, photorealistic scenes, and complex artwork requiring fine detail.

Can this Skill handle video editing or full website design?▼

No. The Skill explicitly handles banner design only, including social covers, ad banners, website hero visuals, and print banners. Video editing, full website design, and print production are out of scope and refused.

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

Meta penalizes ad images with heavy text overlays, reducing delivery and reach. The Skill enforces the under-20% text rule for ads, limits banners to two typefaces, and requires a minimum 4.5:1 contrast ratio for readability.

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
4asaanAI4asaanAI

ckm:banner-design

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

Community
Advanced
Pixel-Process-UGPixel-Process-UG
1

content-creator

Generate marketing copy and social media content from brand attributes and audience personas.

Official
Intermediate
hiktan44hiktan44

Image Prompt Engineer

Translate visual concepts into detailed prompts for AI image generation tools.

Community
Advanced