skills.rest
ehadziabdic
ehadziabdicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-banner-design

Generates multi-format HTML/CSS banners for social media, ads, web heroes, and print.

Updated Sep 23, 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/ehadziabdic/WAgents --skill ui-ux-banner-design-ehadziabdic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-banner-design
Source: https://github.com/ehadziabdic/WAgents/tree/main/opencode/skills/ui-ux-banner-design
Command: npx skills add https://github.com/ehadziabdic/WAgents --skill ui-ux-banner-design-ehadziabdic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing banners across many platforms requires knowing exact dimensions, safe zones, and style conventions for each format, which is slow and error-prone when done manually. ## Core Features & Use Cases - Multi-Format Banner Generation: Creates banners for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print using exact platform dimensions. - Multiple Art Direction Options: Produces 2-3 design options per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - HTML/CSS-Based Composition: Builds banners as HTML/CSS with user-supplied brand assets, then exports to PNG via browser screenshot capture. - Use Case: A marketer needs a Twitter/X header and matching Instagram post for a product launch; the skill gathers requirements, applies brand colors and logo, and delivers three style options at exact platform sizes. ## Quick Start Ask the agent to design three minimalist banner options for a Twitter/X header at 1500x500 pixels using your brand colors and logo.

Frequently Asked Questions about ui-ux-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 (headline, CTA, logo), and brand assets, then the skill generates multiple art direction options in HTML/CSS at exact platform dimensions. It exports each option as a PNG via browser screenshot capture.

What banner sizes does this skill support?▼

It supports Facebook covers (820x312), Twitter/X headers (1500x500), LinkedIn banners (1584x396), YouTube channel art (2560x1440), Instagram posts and stories, Google Display ad sizes, website heroes, and print formats, all documented in the bundled size reference.

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

Yes, the skill applies only user-supplied brand guidelines, logos, colors, and typography, and does not invent brand rules. It composes these assets in HTML/CSS while enforcing contrast ratios of at least 4.5:1.

What happens if browser screenshot capture is unavailable?▼

The skill delivers the HTML/CSS source and clearly marks PNG export as pending instead of failing. It uses CSS-built visuals like gradients and geometric forms as a dependency-free fallback when image generation is unavailable.

What are the limitations of HTML/CSS banner design?▼

The skill handles static banner design only and does not cover video editing, full website design, or print production. Print output guidance is limited to specifications like 300 DPI, CMYK, and bleed rather than actual print file generation.

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
firstsun-devfirstsun-dev
3

ckm:banner-design

Generates multi-format banner designs for social media, ads, web heroes, and print with AI-generated visuals.

Official
Advanced
Grupo-6-ADS-BGrupo-6-ADS-B
2

ckm:banner-design

Generates multi-format banner designs for social media, ads, web heroes, and print with AI-generated visuals.

Official
Advanced
partme-aipartme-ai
610

figma

Guide Figma design creation, components, prototyping, collaboration, and design systems.

Official
Basic