banner-design

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

82|9|Updated May 12, 2026
One-click install
npx skills add https://github.com/futureboard/futureboard-studio --skill banner-design-futureboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/futureboard/futureboard-studio/tree/main/.cursor/skills/banner-design
Command: npx skills add https://github.com/futureboard/futureboard-studio --skill banner-design-futureboard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating banners for social media, ads, websites, and print requires juggling platform-specific dimensions, art direction, and image generation, which is slow and inconsistent when done manually. ## Core Features & Use Cases - Multi-Platform Banner Generation: Produces banners at exact dimensions for Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads, and website heroes. - Multiple Art Direction Options: Generates several style variants per request (minimalist, gradient, bold typography, glassmorphism, neon, and more) for side-by-side comparison. - AI Visual Generation with HTML/CSS Composition: Creates background visuals via Gemini image models, then overlays text, CTA, and logo in HTML/CSS before exporting to PNG. - Use Case: A marketer needs a Twitter/X header (1500x500) for a product launch. The skill researches references, produces three styled variants, and exports compressed PNGs organized by campaign folder. ## Quick Start Ask the assistant to design three banner options for a Twitter/X header in a minimalist style with your headline and brand colors.

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 social media with correct dimensions?▼

Specify the target platform and the skill applies exact dimensions from its size reference, such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. It generates HTML/CSS banners at those dimensions and exports them as PNG files.

How to generate multiple banner design options at once?▼

Request a quantity when starting, with three options as the default. Each option uses a different art direction style such as minimalist, gradient, or bold typography, and all variants are exported side-by-side for comparison.

What image generation models does banner design use?▼

It uses Gemini image models in two tiers: the Flash model for fast 2K backgrounds and patterns, and the Pro model for 4K hero illustrations and photorealistic scenes. Text is overlaid separately in HTML rather than baked into generated images.

Can I use brand guidelines when designing banners?▼

Yes, the skill checks for a brand guidelines document and injects brand context into every banner via a brand context script. This keeps colors, fonts, and logo placement consistent across all generated variants.

What are the limitations of AI-generated banner visuals?▼

Generated images should exclude text since AI models render typography unreliably, so headlines and CTAs are overlaid in HTML/CSS instead. Aspect ratios are limited to preset values like 1:1, 16:9, and 9:16, requiring closest-match selection for unusual sizes.