skills.rest
luicabref97
luicabref97COMMUNITY
Explore all skills by this author →
GitHub

ckm:banner-design

Design banners and export PNGs at platform-specific dimensions for social, ad, web, and print campaigns.

Updated Apr 6, 2026
Search Tags:#export#social-media#ai-generated#art-direction#html-css#banner-design#creative-assets
One-click install
npx skills add https://github.com/luicabref97/sushi-jungle-web --skill ckm-banner-design-luicabref97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:banner-design
Source: https://github.com/luicabref97/sushi-jungle-web/tree/main/.agents/skills/ckm-banner-design
Command: npx skills add https://github.com/luicabref97/sushi-jungle-web --skill ckm-banner-design-luicabref97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the manual, time-consuming process of designing and exporting platform-ready banners by generating multiple art directions, composing visuals, and producing exact-dimension exports for social, ad, web, and print campaigns.

Core Features & Use Cases

  • Multi-format generation: Produces HTML/CSS banners and exported PNGs tailored to platform-specific dimensions and safe zones for Facebook, X, LinkedIn, Instagram, YouTube, Google Display, website hero, and print.
  • AI-powered visuals and art direction: Uses AI models to generate backgrounds, illustrations, and hero visuals across many styles (minimalist, gradient, bold typography, photo-based, 3D, neon, etc.) and offers multiple design options per request.
  • End-to-end workflow: Research references, inject brand context, create HTML mockups, overlay text/CTA/logo, export screenshots at exact sizes, and apply compression and naming conventions for campaign assets.
  • Use Case: Quickly generate three distinct banner concepts for a new campaign, export optimized PNGs for Instagram, LinkedIn, and website hero placements, and iterate based on stakeholder feedback.

Quick Start

Request a set of three banner options for a product launch with platform targets Instagram post, Twitter/X header, and website hero and include headline, CTA, and brand colors.

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 banners for multiple social media platforms at exact dimensions?▼

Generate multi-format banners by specifying platform targets like Instagram, Facebook, or LinkedIn. The workflow enforces platform-specific dimensions, safe zones, and aspect ratios, then exports optimized PNGs at exact sizes for each placement.

Can I create website hero sections and ad banners using HTML and CSS?▼

Yes, banner design creates HTML/CSS mockups for website hero sections and Google Display ad banners. It overlays text, CTA, and logo elements onto the mockups before exporting final visual assets.

What is the best way to get multiple art directions for a banner campaign?▼

Request multiple art directions by providing your headline, CTA, and brand colors. The system produces distinct design concepts using AI-generated backgrounds and illustrations across styles like minimalist, gradient, bold typography, photo-based, 3D, and neon.

Does this banner design workflow integrate with frontend design and UI UX tools?▼

Yes, it integrates with ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal, and chrome-devtools workflows. This allows seamless end-to-end processing from reference research and brand context injection to HTML mockup creation and final asset export.

How do I export campaign ready PNGs with correct filename conventions?▼

Export campaign ready PNGs by finalizing your banner mockups. The workflow applies compression and enforces filename conventions for campaign assets, ensuring platform-specific dimensions and safe zones are maintained during the screenshot export process.

Related Skills

Explore More Design & Creative Skills→
TheCraigHewittTheCraigHewitt
7.3k

copywriting

Draft, rewrite, and optimize marketing copy for web pages and campaigns.

Community
Advanced
ArcanexisArcanexis
13

market-research-html

Generate long-form market analysis reports as editable HTML with CSS layouts.

Community
Advanced
Ben1821Ben1821

banner-design

Design banners for social media, ads, and print with AI-generated visuals.

Community
Advanced
HarshodaiHarshodai

banner-design

Generate multi-format creative banners for social media, advertising, and web hero sections.

Community
Advanced