ckm-banner-design

name	ckm:banner-design
description	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.
argument-hint	[platform] [style] [dimensions]
license	MIT
metadata	{"author":"claudekit","version":"1.0.0"}
skill_id	design.banner_design
executor	HYBRID
status	ADOPTED
security	{"level":"standard","pii":false,"approval_required":false}
anchors	["design","frontend","engineering"]
tier	2
input_schema	[{"name":"code_or_task","type":"string","description":"Code snippet, script, or task description to process","required":true}]
output_schema	[{"name":"result","type":"string","description":"Generated or refactored code output"},{"name":"explanation","type":"string","description":"Explanation of changes or implementation decisions"}]
what_if_fails	FALLBACK: If Ckm:Banner Design cannot complete, provide partial results with explicit gaps noted. Never block workflow silently. ESCALATE: If core capability is unavailable, suggest nearest alternative skill. RULE: Always explain what failed and what manual steps can substitute.

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:

   Navigate to pinterest.com → search "[purpose] banner design [style]"
   Screenshot 3-5 reference pins for art direction inspiration
   

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. Generate visual elements with ai-artist + ai-multimodal skills

   a) Search prompt inspiration (6000+ examples in ai-artist):

   python3 .claude/skills/ai-artist/scripts/search.py