skills.rest
billiampalad
billiampaladCOMMUNITY
Explore all skills by this author →
GitHub

banner-design

Designs multi-format banners in HTML/CSS and exports them as PNG images.

1|Updated Mar 9, 2026
Search Tags:#branding#social media#art direction#png export#html css#banner design#display ads
One-click install
npx skills add https://github.com/billiampalad/wd4 --skill banner-design-billiampalad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/billiampalad/wd4/tree/main/.agents/skills/design/ui-ux-pro-max-skill-main/.claude/skills/banner-design
Command: npx skills add https://github.com/billiampalad/wd4 --skill banner-design-billiampalad

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating correctly sized, on-brand banners for social media, ads, websites, and print requires knowing dozens of platform dimensions, safe zones, and design rules, which this Skill codifies into a repeatable workflow. ## 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 such as minimalist, gradient, glassmorphism, and bold typography. - HTML/CSS Composition with PNG Export: Builds banners as HTML/CSS with user-supplied brand assets, then captures them as PNG files organized by campaign folder. - Use Case: A marketer needs a Twitter/X header and an Instagram post for a product launch; the Skill produces three art direction options at 1500x500 and 1080x1080, exported as PNGs with correct safe zones. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header promoting your product launch.

Frequently Asked Questions about banner-design

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

FAQPage Schema
How do I design a banner for social media platforms?▼

Provide the target platform, content, and brand assets, then the workflow builds the banner in HTML/CSS at the exact platform dimensions and exports it as PNG. It generates multiple art direction options so you can compare styles before finalizing.

What banner sizes does it support for ads and social media?▼

It covers Facebook covers, Twitter/X headers, LinkedIn banners, YouTube channel art, Instagram posts and stories, Google Display sizes like 300x250 and 728x90, website heroes, and print formats. Full dimensions are listed in the bundled size reference.

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

Yes, the workflow applies user-supplied logos, colors, typography, and imagery directly in the HTML/CSS composition. It does not invent brand rules and only uses verified assets you provide.

What art direction styles are available for banner design?▼

There are 22 documented styles including minimalist, bold typography, gradient, photo-based, geometric, glassmorphism, neon, duotone, editorial, and 3D. The workflow typically presents 2-3 complementary directions per request.

What are the limitations of this banner design workflow?▼

It handles static banner design only and does not cover video editing, full website design, or print production. PNG export depends on an available browser or screenshot capability; otherwise it delivers the HTML/CSS source.

Related Skills

Explore More Design & Creative Skills→
mahg-esmahg-es
3

visual-identity

Design and maintain a visual identity system with logo, color, typography, iconography, and imagery guidelines.

Official
Intermediate
LKB-99LKB-99

social-media-scheduler

Automate planning, scheduling, and publishing of social media posts across multiple platforms.

Community
Advanced
annurdienannurdien

ios-app-assets

Generate iOS app visual assets with Nanobanana and ImageMagick.

Community
Advanced
vivy-yivivy-yi
363

canva

Create Xiaohongshu graphics using templates, drag-and-drop tools, and brand kits.

Community
Intermediate