Designing Banners

Create display ads, web banners, and promotional graphics using the HTML/CSS → Playwright → PNG pipeline. Supports both static and HTML5 animated banners.

Workflow

1. Identify banner type and sizes — Consult references/iab-sizes-and-guidelines.md for standard dimensions and guidelines.

2. Create the HTML/CSS — Write a self-contained HTML banner using:

   • Tailwind CSS via CDN for styling
   • Google Fonts via CDN for typography
   • CSS animations for animated banners (keyframes, transitions)
   • Use {WIDTH} and {HEIGHT} placeholders for responsive multi-size templates

3. Render — Choose the rendering approach: