skills.rest
sathishssj3
sathishssj3COMMUNITY
Explore all skills by this author →
GitHub

banner-design

Design and export multi-format banners for social media, ads, web heroes, and print.

2|Updated Jun 5, 2026
Search Tags:#branding#social media#PNG export#art direction#html css#banner design#display ads
One-click install
npx skills add https://github.com/sathishssj3/NexVR-Engine --skill banner-design-sathishssj3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/sathishssj3/NexVR-Engine/tree/main/.agents/skills/banner-design
Command: npx skills add https://github.com/sathishssj3/NexVR-Engine --skill banner-design-sathishssj3

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating correctly sized, on-brand banners for different platforms requires memorizing dozens of dimension specs, safe zones, and design rules, which slows down campaign production. ## Core Features & Use Cases - Multi-Format Banner Generation: Produces banners for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display ads, website heroes, and print at exact platform dimensions. - Multiple Art Directions: Generates 2-3 design options per request across 22 documented styles including minimalist, gradient, glassmorphism, and neon. - HTML/CSS Composition with PNG Export: Builds banners in HTML/CSS using supplied brand assets, then captures them as PNG files organized by campaign folder. - Use Case: A marketer launching a product needs a Twitter/X header, an Instagram post, and a Google leaderboard ad; the skill produces three art direction options for each size with correct safe zones and contrast ratios. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header at 1500x500 pixels using your brand colors and logo.

Frequently Asked Questions about banner-design

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

FAQPage Schema
How do I create a banner for multiple social media platforms at once?▼

Request multi-size output and the skill generates each banner at the exact platform dimensions, such as 1500x500 for Twitter/X and 1080x1080 for Instagram. All variants are grouped in one campaign folder with kebab-case filenames.

What banner sizes does Google Display Network require?▼

Common Google Display sizes include 300x250 medium rectangle, 728x90 leaderboard, 300x600 half page, and 320x50 mobile banner. The bundled reference lists all supported sizes with performance notes.

Can I use my own logo and brand colors in the banner design?▼

Yes, the skill applies user-supplied logos, colors, typography, and imagery directly in the HTML/CSS composition. It does not invent brand rules, so provide your brand assets and guidelines upfront.

Does the banner design skill support print formats?▼

Yes, it covers print banners such as roll-ups and trade show displays with 300 DPI, CMYK color mode, and 3-5mm bleed requirements. It does not handle full print production or video editing.

What happens if PNG export or screenshot capture is unavailable?▼

The skill delivers the HTML/CSS source and clearly marks PNG export as pending instead of failing. You can preview the banner in a browser and capture it later with any standard screenshot tool.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
4asaanAI4asaanAI

ckm:banner-design

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

Community
Advanced
gooseworks-aigooseworks-ai
6

create-end-card-from-reference

Generate on-brand end-cards from a reference image and product PNGs.

Official
Advanced
VideoZeroVideoZero
67

motion-canvas

Build animated Motion Canvas scenes using generators, signals, refs, and 2D components.

Official
Advanced