Produce campaign banner variants with ak:banner-design

Design and export reviewable social, ad, web, or print-banner assets while keeping provider calls, browser export, placement, spend, and publication separately approved.

Use ak:banner-design to turn a campaign brief into multiple art-direction options, HTML/CSS compositions, and exported PNG banner assets. The Skill covers social covers, display ads, website heroes, campaign creative, and print-banner concepts. It does not edit video, design a complete website, perform print production, buy media, or publish the result.

Choose ak:banner-design for a bounded visual

Use ak:banner-design when

You need a banner, cover, header, display-ad creative, website-hero visual, or print-banner concept.
You know the purpose, platform or dimensions, content, brand constraints, and desired number of options.
You want generated backgrounds or illustrations combined with controlled HTML/CSS typography, logo placement, and CTA treatment.
You can review claims, rights, safe zones, contrast, responsive crops, and final export dimensions before use.

Choose another workflow when

You need a YouTube thumbnail. Use ak:youtube-thumbnail-design.
You need a logo or broader identity exploration. Use ak:logo-design.
You need a complete page or site implementation. Use the appropriate frontend design and development workflow.
You need a printer-ready preflight, media purchase, ad-account mutation, or campaign publication. Those are separate production and account workflows.

Prepare content, tools, and dimensions

Before you start:

Complete Onboarding, and confirm Marketing Kit is installed for the current runtime and scope.
Provide the purpose, platform, exact dimensions, headline, supporting text, CTA, logo placement, brand rules, style preference, and quantity. The packaged brief defaults to three options.
Confirm every logo, font, photo, illustration, product image, claim, and likeness may be used in the intended channel and territory.
Make approved brand guidance available. If none exists, state temporary constraints instead of inventing permanent identity rules.
Approve GEMINI_API_KEY, provider network access, and the pinned command npx -y -p @mrgoonie/multix@0.2.0 multix if AI visuals are requested.
Provide a local browser or supported browser tool and permission to serve the HTML locally when exact-dimension PNG export is requested.
Choose a writable output directory and confirm whether existing files may be replaced.

Runtime	Invocation	Availability boundary
Claude Code	`/ak:banner-design ...`	Native delivery is the default; explicit plugin delivery is also supported. Browser export and provider generation still depend on available tools.
Cursor	`/ak:banner-design ...`	Slash invocation is user-verified. Browser capture and preview behavior can differ by setup.
Codex	`$ak:banner-design ...`	The Skill uses native Codex discovery. Partial Hook projection does not supply a browser, provider key, or print pipeline.

See Runtime adapters before assuming the same export capabilities across targets.

Run the Skill

State platform, style, dimensions, content, brand, quantity, and the external actions that must not occur.

/ak:banner-design LinkedIn personal banner, minimalist editorial, 1584x396. Headline: "Privacy-first analytics". Use the approved logo and blue palette. Create three HTML/PNG drafts, keep critical content in the safe area, and do not publish or change any account

/ak:banner-design LinkedIn personal banner, minimalist editorial, 1584x396. Headline: "Privacy-first analytics". Use the approved logo and blue palette. Create three HTML/PNG drafts, keep critical content in the safe area, and do not publish or change any account

$ak:banner-design LinkedIn personal banner, minimalist editorial, 1584x396. Headline: "Privacy-first analytics". Use the approved logo and blue palette. Create three HTML/PNG drafts, keep critical content in the safe area, and do not publish or change any account

Define the production fields

Field	What to provide
Platform and purpose	Social cover, display ad, website hero, campaign creative, or print concept
Dimensions	Exact width and height from the current placement specification
Content	Headline, subtext, CTA, logo, mandatory disclosure, and forbidden claims
Brand	Approved colors, typography, imagery, spacing, and logo rules
Style	One or more directions such as minimalist, bold typography, gradient, photo-based, geometric, retro, glassmorphism, neon, editorial, or 3D
Quantity and formats	Variant count, size set, HTML source, PNG export, and filename expectations
Authority boundary	Whether image generation, local serving, browser capture, file replacement, publication, printing, or ad spend is allowed

Packaged size tables are useful starting points, not live platform contracts. Use the placement's current specification when it differs.

Confirm the brief. The Skill records purpose, size, copy, CTA, brand, style, variants, rights, and authority.
Select art directions. It can use the packaged 22-style reference and optional external inspiration research. External browsing needs separate network and source-review approval.
Create the compositions. The workflow builds HTML/CSS layouts at the requested dimensions and can generate visual elements through an approved Gemini path.
Serve and export. A local server and browser capture can render each HTML composition to a PNG at the exact requested viewport.
Review variants. Inspect copy, claims, contrast, logo use, safe zones, crop behavior, dimensions, file size, and source rights.
Stop before activation. Publishing, account changes, ad creation, budget, print ordering, and distribution remain separate approvals.

Keep external effects under review

Exported does not mean placement-ready

A PNG can have the requested dimensions and still fail a platform policy, crop, disclosure, file-size, accessibility, or print requirement. Validate the actual placement before upload, purchase, or production.

Work category	Normal boundary
Guidance and drafting	The Skill can create briefs, art directions, copy layout, and local HTML before provider generation.
Local mutations	It may create or replace HTML and PNG files and start a temporary local server for export. Confirm the destination and stop the server afterward.
Provider and network effects	Image generation and optional reference research can send prompts or data externally, fetch executable packages, consume quota, and incur charges.
Publishing, print, and spend	The Skill does not authorize account changes, ad creation, campaign budget, upload, scheduling, print orders, or physical production.

Do not use unlicensed photos, fonts, logos, trademarks, or personal data. Verify every offer, price, statistic, testimonial, comparison, and legal disclosure against approved source material. A generated visual must not imply an endorsement or product capability that does not exist.

Review outputs and evidence

The packaged PNG convention is:

assets/banners/{campaign}/
├── minimalist-1500x500.png
├── gradient-1500x500.png
├── bold-type-1500x500.png
└── minimalist-1080x1080.png

Time-sensitive files can use {YYMMDD}-{style}-{size}.png. Keep the HTML source used for export when reproducibility matters. The final report should identify:

The brief, dimensions, style, brand inputs, copy, CTA, and mandatory disclosures used for each variant.
Generated-provider requests, external references, local server and browser capture used, and any failed export.
Exact HTML and PNG paths, pixel dimensions, file sizes, and compression.
Visual, copy, contrast, crop, rights, and placement checks.
The selected candidate and every account, spend, print, or publishing action still waiting for approval.

Troubleshoot safely

Symptom	Safe next step
Runtime cannot find `ak:banner-design`	Confirm target and scope, start a fresh session, then follow Runtime cannot find a Skill or Agent.
Dimensions are missing or contradictory	Stop and obtain the current placement width, height, safe zone, and file limit before composing.
Provider generation is unavailable	Continue with approved local assets or a layout-only draft; do not claim an image was generated.
Browser export differs from the HTML	Recheck viewport, loaded fonts, local asset paths, and capture timing, then record the exact export method.
Text or logo is cropped	Reject the export, move critical content into the validated safe area, and recapture.
PNG exceeds the placement limit	Preserve the source and compress a copy; verify dimensions and visual quality after compression.
Print output is requested	Hand the approved concept to a print-production workflow for CMYK, bleed, DPI, proofing, and vendor checks.

Continue with the Marketing Kit overview or Projects, artifacts, and checkpoints.

Know the current limits

The Skill's argument hint is [platform] [style] [dimensions]; missing copy, brand, quantity, and authority still need to be resolved in the brief.
Its image-generation command supports a limited aspect-ratio set. Very wide banners can require cropping, composition in HTML/CSS, or another approved source asset rather than a native matching generation.
Browser capture depends on available tooling, font loading, and local asset access. A source-level design does not guarantee identical rendering in every runtime.
Packaged platform sizes and design guidance can become stale; current placement and printer specifications take precedence.
Banner variants do not guarantee click-through rate, conversion, revenue, approval, delivery, accessibility, or print fidelity.