BA Banner Generator

Producing HTML5 animated banners for display advertising is a classic bottleneck. A designer delivers Figma mockups, someone rebuilds them in Hype or GSAP, and any design change means redoing everything from scratch — multiplied across 8 to 12 IAB formats. The process was repetitive, error-prone, and entirely manual.

Instead of rebuilding the handoff, I eliminated it. I wrote a Figma plugin that reads the storyboard directly from the designer's file — detecting IAB sizes, identifying layers by naming convention (BG, Master, CTA, Keyart), and exporting each keyframe as a PNG composite. The output is a self-contained index.html with pure CSS/JS cross-fade animation — no Hype, no GSAP, no external dependencies. One ZIP per size, ready for any ad network. To guarantee output fidelity, I built a QA pipeline using a Claude skill: it exports Figma keyframes as ground truth, spins up a local server, opens each banner with Playwright, freezes animations at every scene, and compares them pixel-by-pixel using SSIM and MAE metrics. If something fails, the skill attempts to auto-correct the HTML/CSS and re-run.

What used to take hours of manual handoff now takes seconds. The designer runs the plugin, downloads the ZIPs, and ships — no developer in the loop, no rebuilding in animation tools, no drift between design and code. The plugin is self-contained: not tied to any specific Figma account or Claude subscription. Any team can install it from the manifest and run it immediately. Adding a new campaign means replacing image fills in Figma and clicking Export — the plugin regenerates everything from the latest design.

This project taught me that the gap between design and code is often just an unexamined workflow. Define the rules clearly enough, and the machine handles the repetition. What's left is time to think better about the design.