skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

banner-design

Generates multi-format HTML/CSS banners for social media, ads, web heroes, and print with multiple art direction options.

Updated Mar 28, 2026
Search Tags:#social media#brand guidelines#art direction#png export#html css#banner design#display ads
One-click install
npx skills add https://github.com/po4yka/blog --skill banner-design-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/banner-design
Command: npx skills add https://github.com/po4yka/blog --skill banner-design-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners across platforms requires knowing dozens of size specs, safe zones, and design rules, and producing multiple art direction options manually is slow and inconsistent. ## Core Features & Use Cases - Multi-Platform Banner Generation: Designs banners for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display ads, website heroes, and print using exact platform dimensions and safe-zone rules. - Multiple Art Direction Options: Produces 2-3 style variants per request from 22 documented styles including minimalist, gradient, bold typography, glassmorphism, and editorial. - HTML/CSS to PNG Export: Builds banners as HTML/CSS, then screenshots them at exact pixel dimensions via Chrome DevTools MCP and saves organized outputs to assets/banners/{campaign}/. - Use Case: Ask for a Twitter/X header in minimalist and bold-typography styles, and receive exported 1500x500 PNGs with design rationale for each option. ## Quick Start Ask the assistant to design three banner options for a Twitter/X header at 1500x500 pixels using the project's brand guidelines.

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?▼

Specify the platforms and quantity of options when requesting the banner. The workflow generates each variant at exact platform dimensions, such as 1500x500 for Twitter/X headers or 1080x1080 for Instagram posts, and exports each as a PNG.

What banner sizes does Google Display Network require?▼

Common Google Display sizes include 300x250 medium rectangle, 728x90 leaderboard, 160x600 wide skyscraper, and 300x600 half page. The full size table is in references/banner-sizes-and-styles.md.

How are HTML banner designs exported to PNG images?▼

HTML files are served locally, then Chrome DevTools MCP resizes the page to exact dimensions, navigates to the banner, and takes a screenshot. Exported files are saved to assets/banners/{campaign}/ with kebab-case names like minimalist-1500x500.png.

Does this skill handle video editing or full website design?▼

No. The skill is scoped to banner design only and explicitly excludes video editing, full website design, and print production. Print banners get specs like 300 DPI and bleed, but production is out of scope.

What design rules apply to ad banners with text?▼

Ads should keep text under 20% of the canvas since Meta penalizes heavy text. Other rules include one CTA per banner, maximum two typefaces, minimum 4.5:1 contrast ratio, and critical content within the central 70-80% safe zone.

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
futureboardfutureboard
82

banner-design

Generates multi-format banner designs with AI visuals and exports them as PNG images.

Official
Advanced
JiaxingBIJiaxingBI

ckm:banner-design

Generate multi-format HTML/CSS banners with AI-driven visuals and art direction options.

Community
Advanced
renatoasserenatoasse
2.0k

image-creator

Render self-contained HTML/CSS templates into PNG images via Playwright.

Community
Advanced