skills.rest
4asaanAI
4asaanAICOMMUNITY
Explore all skills by this author →
GitHub

ckm:banner-design

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

Updated Aug 27, 2026
Search Tags:#social-media#frontend-design#ai-image-generation#creative-direction#responsive-layout#banner-design#assets-export
One-click install
npx skills add https://github.com/4asaanAI/Claude-patches --skill ckm-banner-design-4asaanai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/4asaanAI/Claude-patches/tree/main/framework-foundry/Claude%20Plugins/ui-ux-pro-max-skill-main/.claude/skills/banner-design
Command: npx skills add https://github.com/4asaanAI/Claude-patches --skill ckm-banner-design-4asaanai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the complexity and manual work of designing platform-specific banners by automating art direction, visual generation, layout composition, and export so brands get consistent, production-ready creative quickly.

Core Features & Use Cases

  • Multi-platform banner design with exact platform dimensions and safe-zone rules for social, ads, web heroes, and print.
  • Multiple art-direction options per request with AI-generated visuals and composited HTML/CSS banners.
  • Integration points for frontend export and image generation: produces HTML/CSS prototypes, overlays text/CTA/logo, and exports PNGs at target sizes for campaigns.
  • Real-world use case: produce three ad variants for a product launch (hero image, headline, CTA) for Instagram, Facebook, and website hero with optimized exports.

Quick Start

Create three banner variations for an Instagram story 1080x1920 in minimalist, gradient, and bold typography styles with headline Launch Sale and CTA Shop Now.

Frequently Asked Questions about ckm:banner-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate social media banners with exact platform dimensions?▼

To generate social media banners, you specify the target platform like Facebook or Instagram. The Skill applies exact platform dimensions and safe-zone rules, composites HTML/CSS layouts with AI visuals, and exports optimized PNGs.

Can I create multiple ad banner variations in different art styles?▼

Yes, you can create multiple ad banner variations by specifying styles like minimalist, gradient, or bold typography. The Skill generates multiple art-direction options per request, synthesizing AI visuals and text overlays for each variant.

How do I export HTML CSS banners to PNG for website hero sections?▼

You export HTML CSS banners to PNG by rendering the generated layouts in a headless browser. The Skill produces HTML/CSS prototypes with overlaid text and CTA, then captures headless browser screenshots to output optimized PNGs at target sizes.

Does this banner design tool support custom dimensions for print assets?▼

Yes, this banner design tool supports custom dimensions for print assets. It handles social, ad, web hero, and print formats by applying exact platform dimensions and safe-zone rules to generate production-ready creative.

What is the best way to design responsive layouts for Google Display ad campaigns?▼

The best way to design responsive layouts for Google Display is to define your campaign assets and target sizes. The Skill composites HTML/CSS banners, overlays your CTA and logo, and exports optimized PNGs for the campaigns.

Do I need design software to synthesize AI visuals and text for ad banners?▼

No, you do not need external design software to synthesize AI visuals and text. The Skill uses AI multimodal models to generate visuals and composites them with text, CTA, and logo overlays directly into HTML/CSS prototypes.

Related Skills

Explore More Design & Creative Skills→
HarshodaiHarshodai

design

Generate brand identity assets, SVG icons, and HTML presentations with Gemini AI.

Community
Advanced
YeomanYeYeomanYe

web-image

Generate fixed-size PNG images from HTML/CSS layouts.

Community
Intermediate
bitwize-music-studiobitwize-music-studio
408

album-art-director

Translate album concepts into AI-generated art prompts with visual directions.

Official
Basic
klarbauklarbau
7

ckm:banner-design

Design multi-format banners from a brief with platform-specific layouts.

Community
Advanced