ckm:banner-design

Overview

What is ckm:banner-design?

ckm:banner-design is an AI-driven banner design skill focused on static visual assets. It helps you design banners for social media, digital ads, website hero sections, campaign creatives, and simple print banners. For each request, it can explore multiple art-direction options using AI-generated visual elements.

The skill is narrowly scoped: it handles banner design only. It does not cover video editing, full website layout, or detailed print-production setup.

Key use cases

• Social channel covers and headers (Facebook, Twitter/X, LinkedIn, YouTube)
• Campaign and always-on social posts (Instagram, Pinterest)
• Ad banners and display ads (e.g., Google Display Network formats)
• Website hero and section banners
• Simple event and promotional print banners

Supported platforms and formats

The skill is designed around common banner destinations, including:

• Social media: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest
• Ads: Google Display Network sizes and similar display formats
• Web: website hero images, section banners, blog headers, email headers
• Print: roll-up banners, vinyl event banners, trade-show visuals

Internally, the repository includes a references/banner-sizes-and-styles.md file with detailed size tables, which the skill uses as a reference to suggest or validate dimensions.

Visual styles and art direction

ckm:banner-design can work with a broad range of styles, for example:

• Minimalist, gradient, glassmorphism
• Bold typography, editorial, collage
• Photo-based, illustrated, geometric, retro
• 3D, neon, duotone

It also connects conceptually to other creative skills in the same repo, such as ui-ux-pro-max, frontend-design, ai-artist, and ai-multimodal, to support richer visual direction.

Who is this skill for?

Use ckm:banner-design if you are:

• A marketer or social media manager who needs fast, on-brand banners for multiple platforms
• A designer or front-end developer who wants AI help with hero images and campaign visuals
• A founder or indie maker who needs presentable banners without hiring a full design team

It is a good fit when you have clear messaging and brand direction but want help turning that into visual options. It is less suitable if you need highly custom illustration styles that require manual drawing or complex motion graphics.

When it is and is not a good fit

A good fit for:

• Quickly exploring multiple banner concepts for a campaign
• Generating platform-specific sizes from one base idea
• Producing static visuals for ads, social channels, and website heroes

Not a good fit for:

• Video ads, animated banners, or motion design
• Full website UX/UI flows beyond a single hero or header visual
• Detailed prepress work for complex print runs (bleeds, color profiling, finishing specs)

---

How to Use

Installation and setup

1. Add the banner-design skill to your environment

Install ckm:banner-design from the nextlevelbuilder/ui-ux-pro-max-skill repository:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

This pulls in the banner-design skill from the repo’s .claude/skills/banner-design directory.

2. Review the core skill file

After installation, open SKILL.md inside the banner-design directory. This file defines:

• The skill description and scope
• The argument-hint format: [platform] [style] [dimensions]
• Activation guidance (when the skill should be used)

Understanding these conventions helps you phrase requests in a way the skill handles reliably.

3. Use the references for sizes and styles

Open references/banner-sizes-and-styles.md to view:

• Common social media sizes (e.g., Facebook covers, Twitter headers, YouTube channel art, Instagram posts/stories)
• Display ad formats (e.g., 300×250, 728×90, 160×600, and other Google Display Network sizes)
• Website and email banner guidelines
• A list of art-direction style definitions (minimalist, gradient, 3D, etc.)

Use these references to:

• Pick the right dimensions for each platform
• Choose style labels that the skill already understands

---

Triggering the skill effectively

1. Follow the requirements workflow

The SKILL.md describes a workflow that starts by gathering requirements. Before you call ckm:banner-design, make sure you have:

• Purpose: social cover, ad banner, website hero, print banner, or campaign creative
• Platform/size: target platform (e.g., Facebook cover, YouTube channel art) or explicit pixel dimensions
• Content: headline, subtext, CTA, logo or brand mark, and any legal text
• Brand: color palette, fonts, and existing brand guidelines (if available)
• Style: preferred art direction (e.g., minimalist, retro, glassmorphism)

The more of this you provide, the more targeted the banner concepts will be.

2. Use the argument-hint

When you call the skill, follow the hint format:

• [platform] – where the banner will appear (e.g., Twitter-header, Google-Display 300x250, website-hero)
• [style] – art direction (e.g., minimalist gradient, bold-typography, photo-based editorial)
• [dimensions] – final pixel size if you need something custom (e.g., 1920x600)

Examples of well-structured prompts:

• "Design a LinkedIn-company-cover in a minimalist style, 1128x191, with a SaaS B2B headline and a primary CTA."
• "Create a Google-Display leaderboard 728x90 banner in bold typography style for a 50% off summer sale."
• "Generate a website-hero 1920x800 in a photo-based editorial style for a fintech startup launch."

3. Expect multiple art-direction options

ckm:banner-design is intended to produce multiple concept directions per request. You can then:

• Compare different layouts, imagery, and color strategies
• Choose the strongest concept and iterate further

Use follow-up prompts to refine the chosen direction (e.g., adjust hierarchy, simplify background, emphasize CTA).

---

Example workflows

Workflow A: Social media header refresh

1. Install ckm:banner-design and open SKILL.md.
2. Look up recommended sizes for the target platform in references/banner-sizes-and-styles.md (e.g., Twitter/X Header 1500×500).
3. Prepare requirements: brand colors, logo, hero phrase, and target audience.
4. Call the skill with platform, style, and dimensions, asking for several directions.
5. Review the generated options, then request refinements to the strongest version.

Workflow B: Multi-size ad campaign set

1. Define a single campaign concept (offer, message, imagery theme).
2. From references/banner-sizes-and-styles.md, select a few key ad sizes (e.g., 300×250, 728×90, 160×600).
3. Use ckm:banner-design to create one master concept at a larger size.
4. Ask the skill to adapt that concept to the remaining sizes, ensuring hierarchy and legibility stay strong.

Workflow C: Website hero for a product launch

1. Confirm required hero size (e.g., 1920×800) using the website section of the references file.
2. Provide product positioning, key headline, supporting copy, and preferred style.
3. Call ckm:banner-design, specifying website hero, style, and dimensions.
4. Iterate on spacing, contrast, and focal point until it feels ready for implementation in your front-end.

---

Integration tips

• Combine ckm:banner-design with your existing design tools: export concepts into Figma, Sketch, or your image editor for final tweaks and asset slicing.
• Use brand guidelines: if your project has documented brand rules (colors, logo usage, tone), feed those into the skill so banners stay consistent.
• Keep a reference library: save your best-performing banner concepts to guide future prompts and ensure campaign continuity.

---

FAQ

Is ckm:banner-design only for social media banners?

No. While ckm:banner-design is strong for social media covers and posts, it is also designed for display ads, website hero images, section banners, and simple print banners. The references/banner-sizes-and-styles.md file includes sizes across social, ads, web, and print.

Does ckm:banner-design handle video or animated banners?

No. The skill is explicitly scoped for static banner design only. It does not perform video editing, animation, or motion-graphics work. If you need animated GIFs or videos, use this skill to define static layouts and then recreate animations in specialized tools.

Can it create print-ready files with bleeds and color profiles?

ckm:banner-design can help with layout and visual direction for print banners and suggests common print dimensions. However, it does not manage detailed print-production tasks such as bleeds, crop marks, color calibration, or press profiles. For professional print runs, you should finalize assets in a desktop design tool and coordinate with your printer’s specifications.

How do I know which banner size to use for each platform?

Open references/banner-sizes-and-styles.md in the repository. It lists recommended sizes and aspect ratios for:

• Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest
• Google Display Network formats
• Common website and email banner sizes
• Standard event and trade-show banners

Use these tables as a starting point, and adjust dimensions only if your platform has different current recommendations.

Can ckm:banner-design follow my brand guidelines?

Yes, you can provide brand details as part of your prompt: primary and secondary colors, preferred fonts, logo usage rules, and any layout constraints. The skill is designed to incorporate brand direction into its art-direction options, especially when combined with other design-oriented skills in the same repository.

What information should I prepare before calling the skill?

For best results, prepare:

• The banner purpose (e.g., new feature launch, seasonal sale, event announcement)
• The platform and size (or pixel dimensions)
• Key copy (headline, subheading, CTA, optional legal text)
• Brand assets (colors, fonts, logo, images if required)
• Desired style (e.g., minimalist, retro, photo-based, editorial)

Providing this context lets ckm:banner-design return targeted, usable concepts instead of generic visuals.

How many concepts will ckm:banner-design generate at once?

The skill is intended to provide multiple art-direction options per request so you can compare and refine. The exact number may depend on how your agent runtime is configured, but the design is to support exploration rather than single-output only.

Can I use ckm:banner-design for complete website design?

No. ckm:banner-design is focused on banner-level visuals: hero images, headers, and promotional sections. It does not replace a full UX/UI skill for entire site flows, navigation structures, or interaction design. For end-to-end site design, combine it with broader UI/UX skills such as ui-ux-pro-max.

What license applies to this skill?

According to SKILL.md, ckm:banner-design is released under the MIT license. Always verify the current license in the repository to confirm terms for your use case.

Where can I explore more details?

After installation, inspect:

• SKILL.md – for scope, arguments, and workflow
• references/banner-sizes-and-styles.md – for platform sizes and style references

Use these files as your primary documentation when integrating ckm:banner-design into your agent workflows.