skills.rest
Rasslonely
RasslonelyCOMMUNITY
Explore all skills by this author →
GitHub

banner-design

Generates multi-format banner designs with AI visuals and HTML/CSS composition for social, ads, web, and print.

Updated Jul 31, 2026
Search Tags:#social media#ai image generation#art direction#png export#html css#banner design#display ads
One-click install
npx skills add https://github.com/Rasslonely/NexusXRP --skill banner-design-rasslonely
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: banner-design
Source: https://github.com/Rasslonely/NexusXRP/tree/main/.agents/skills/banner-design
Command: npx skills add https://github.com/Rasslonely/NexusXRP --skill banner-design-rasslonely

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating on-brand banners across many platforms requires knowing dozens of size specs, safe zones, and style conventions, then producing multiple art direction options manually. This Skill automates the full workflow from requirements gathering to exported PNG files. ## Core Features & Use Cases - Multi-Platform Size Support: Covers Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display Ads, website heroes, and print formats with exact dimensions and safe-zone rules. - Multiple Art Direction Options: Generates 2-3 design variants per request from 22 documented styles including minimalist, gradient, glassmorphism, neon, and editorial. - AI Visual Generation: Produces background and hero imagery via Gemini image models at 2K or 4K, then composes text, CTA, and logo in HTML/CSS before exporting to PNG. - Use Case: A marketer needs a Twitter/X header and Instagram story for a product launch. The Skill gathers brand context, researches Pinterest references, generates three style options per size, and exports ready-to-use PNGs. ## Quick Start Ask the assistant to design three minimalist banner options for a Twitter/X header at 1500x500 pixels 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 design a banner for multiple social media platforms?▼

Specify the platforms and content, and the Skill generates options using exact dimensions for each platform such as 1500x500 for Twitter/X headers or 1080x1920 for Instagram stories. Each variant follows safe-zone rules keeping critical content in the central 70-80% of the canvas.

What banner sizes does Google Display Ads require?▼

Common Google Display sizes include 300x250 medium rectangle, 728x90 leaderboard, 160x600 wide skyscraper, and 300x600 half page. The reference file lists all supported sizes with notes on performance, such as the medium rectangle having the highest CTR.

Can AI generate banner background images at high resolution?▼

Yes, the Skill 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. Prompts should specify style, lighting, mood, and exclude text since text is overlaid in HTML.

Does banner design support print formats?▼

Yes, print formats like roll-ups and trade show banners are supported with 300 DPI resolution, CMYK color mode, and 3-5mm bleed on all sides. However, the Skill does not handle full print production or video editing.

Why should banner text stay under 20 percent for ads?▼

Meta penalizes ad banners with heavy text overlays, reducing their delivery and reach. The Skill enforces this limit along with a maximum of two typefaces, one CTA per banner, and a 4.5:1 minimum contrast ratio.

Related Skills

Explore More Design & Creative Skills→
OpenLaborOpenLabor
4

Brand Identity

Create brand identity systems with logo, color, typography, and voice guidelines.

Official
Intermediate
4asaanAI4asaanAI

ckm:banner-design

Design multi-platform banners with exact dimensions and export PNGs.

Community
Advanced
GunjanGrungeGunjanGrunge
3

thumbnail-generator

Generate YouTube and Instagram cover assets via Figma MCP integration.

Community
Advanced
vivy-yivivy-yi
363

canva

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

Community
Intermediate