VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Marketing Kit

/ak:banner-design

Banner Design

Create multi-format banners for social, ads, website heroes, print, and campaign creative assets with platform dimensions, art direction options, AI visuals, HTML/CSS composition, and PNG export.

01

Gather requirements

02

Research references

03

Pick art directions

04

Set canvas rules

Rule 01

Banner work is bounded to social, ads, website heroes, print banners, and campaign creative assets.

Rule 02

Platform dimensions and safe zones drive layout before visual polish.

Rule 03

Generated visuals should usually contain no text; text and CTA are overlaid in HTML/CSS.

Rule 04

Every option needs a clear art direction and exported asset path, not just a concept.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Gather requirements Ask purpose, platform or dimensions, headline, subtext, CTA, logo placement, brand guidelines, style preference, and number of options.
  2. 2 Research references Activate design intelligence and research Pinterest or comparable references for the requested purpose, platform, and style.
  3. 3 Pick art directions Select two or three complementary directions from the style reference: minimalist, bold typography, gradient, photo-based, geometric, editorial, 3D, neon, and more.
02

Work

Agent / skill execution

  1. 4 Set canvas rules Use exact platform dimensions, safe zones, max two typefaces, one CTA, adequate contrast, and brand context injection.
  2. 5 Generate visuals Use ai-artist prompt search plus ai-multimodal generation for backgrounds, product shots, illustrations, patterns, or hero visuals.
  3. 6 Compose banner Build HTML/CSS banners that overlay text, CTA, logo, and generated visuals while keeping critical content in the central safe area.
03

Verify

Gate, review, validation

  1. 7 Export images Serve the HTML and capture PNG screenshots at exact platform dimensions using agent-browser, Chrome MCP through use-mcp, or project-native browser tooling.
  2. 8 Compress and name Compress files over the threshold, save under assets/banners/{campaign}, and use kebab-case {style}-{width}x{height}.{ext} names.
  3. 9 Present and iterate Show exported options side by side with style, rationale, file path, dimensions, and iterate from user feedback until approved.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

LinkedIn header Recommended 
/ak:banner-design LinkedIn minimalist 1584x396
Use when:
You need a social header with explicit platform, style, and dimensions.
Expected:
Requirements, art directions, generated visuals, HTML/CSS banners, exported PNGs, and paths.
Ad creative 
/ak:banner-design Google Display bold typography 300x250
Use when:
A display ad needs platform-specific sizing and creative options.
Expected:
A banner set that follows display size, text-ratio, CTA, contrast, and naming rules.
Webinar LinkedIn banner 
/ak:banner-design LinkedIn 1200x627 banner for a founder webinar
Use when:
You need a platform-sized banner with headline, proof, and CTA.
Expected:
Sized banner options matching brand, copy hierarchy, and export specs.

Handled Scope

  • Social banners
  • Display ads
  • Website heroes
  • Print banners
  • Art direction
  • AI visuals
  • HTML/CSS composition
  • PNG export

Related skills

Next