skills.rest
danieliudi
danieliudiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

banner-design

Generates multi-format banner designs with AI visuals and exports them to PNG at platform dimensions.

Updated Aug 26, 2026
Search Tags:#social media#image generation#art direction#png export#html css#banner design#display ads
One-click install
npx skills add https://github.com/danieliudi/trackforge-os --skill banner-design-danieliudi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/danieliudi/trackforge-os/tree/main/.cursor/skills/banner-design
Command: npx skills add https://github.com/danieliudi/trackforge-os --skill banner-design-danieliudi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners for social media covers, display ads, website heroes, and print requires knowing dozens of platform-specific dimensions, safe zones, and design rules, then producing multiple art direction options manually. ## Core Features & Use Cases - Multi-format banner generation: Produces banners for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website heroes, and print with exact platform dimensions and safe-zone rules. - Multiple art direction options: Generates several style variants per request from 22 documented styles (minimalist, gradient, glassmorphism, neon, editorial, and more). - AI visual generation and PNG export: Creates background and hero visuals via Gemini image models, composes text and CTA in HTML/CSS, then screenshots each banner to PNG at exact dimensions. - Use Case: A marketer needs a Twitter/X header and an Instagram story for a product launch; the skill researches references, designs three style options per format, and exports ready-to-upload PNGs. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header promoting your product launch and export them as PNGs.

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 when prompted, and the workflow generates separate HTML/CSS banners per platform using exact dimensions from its size reference, then exports each to PNG. Multi-size requests produce one file per platform-size combination.

What banner sizes does it support for Google Display ads?▼

It supports standard Google Display Network sizes including Medium Rectangle (300x250), Leaderboard (728x90), Wide Skyscraper (160x600), Half Page (300x600), and Mobile Banner (320x50), all listed in the references file.

Which image generation model should I use for banner backgrounds?▼

Use the Standard Flash model for backgrounds, gradients, patterns, and quick A/B variants at 2K resolution. Use the Pro model at 4K for hero illustrations, product shots, and photorealistic scenes requiring fine detail.

Can it design banners for print materials?▼

Yes, it covers print formats like roll-ups and trade show banners, applying print rules of 300 DPI, CMYK color mode, and 3-5mm bleed. It does not handle full print production or video editing.

Why does my ad banner get penalized on Meta platforms?▼

Meta penalizes ads where text covers more than 20% of the image. The workflow enforces this text-to-image ratio rule along with safe-zone constraints, keeping critical content in the central 70-80% of the canvas.

Related Skills

Explore More Design & Creative Skills→
duc01226duc01226

brand-guidelines

Enforce brand voice, visual identity, and messaging consistency across marketing assets.

Community
Advanced
LKB-99LKB-99

social-media-scheduler

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

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

ckm:brand

Manage brand voice, visual identity, and asset compliance across marketing content.

Official
Intermediate
vivy-yivivy-yi
363

canva

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

Community
Intermediate