Agent skill · design visual · aiskillstore

ckm-banner-design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

Why this skill is useful

Adds specific design workflows and commands for generating multi-format banners that the AI wouldn't reliably generate on its own.

What it needs

About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.

What this skill does

Banner Design - Multi-Format Creative Banner System Design banners across social, ads, web, and print formats. Generates multiple art direction options per request with AI-powered visual elements. This skill handles banner design only. Does NOT handle video editing, full website design, or print production. When to Activate User requests banner, cover, or header design Social media cover/header creation Ad banner or display ad design Website hero section visual design Event/print banner design Creative asset generation for campaigns Workflow Step 1: Gather Requirements (AskUserQuestion) Collect via AskUserQuestion: 1. Purpose — social cover, ad banner, website hero, print, or creative asset? 2. Platform/size — which platform or custom dimensions? 3. Content — headline, subtext, CTA, logo placement? 4. Brand — existing brand guidelines? (check docs/brand-guidelines.md) 5. Style preference — any art direction? (show style options if unsure) 6. Quantity — how many options to generate? (default: 3) Step 2: Research & Art Direction 1. Activate ui-ux-pro-max skill for design intelligence 2. Use Chrome browser to research Pinterest for design references: 3. Select 2-3 complementary art direction styles from references: references/banner-sizes-and-styles.md Step 3: Design & Generate Options For each art direction option: 1. Create HTML/CSS banner using frontend-design skill Use exact platform dimensions from size reference Apply safe zone rules (critical content in central 70-80%) Max 2 typefaces, single CTA, 4.5:1 contrast ratio Inject brand context via inject-brand-context.cjs 2. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills aiskillstore/ckm-banner-design

View the source on GitHub

Browse the @skills marketplace