How I designed and built a browser-native tool that collapses a five-day advertising production workflow into a single creative session — with AI at every seam.
At MadHive, our advertising design team was producing the same set of six banner ad sizes for every campaign. The process worked — a Photoshop skeleton file with smart objects, a naming convention baked into every export, and an HTML/JS animation template that just needed the assets dropped in. Clean system. But it was slow.
The brief arrives Monday. Six animated HTML files ship Friday. The craft lived in the middle — but so did the drag.
Every campaign meant opening the skeleton, swapping the smart objects, arranging each of the six sizes by hand, exporting assets with the exact right names, uploading into the animation template, and QA-ing in browser before pushing to the ad server. A seasoned designer knew the system in their sleep. But that also meant the system only moved as fast as that designer could.
I wanted to see how much of that drag we could remove — not by replacing the designer's judgment, but by doing the first draft of every step before they touched it.
The existing system had an elegant piece of architecture hiding in plain sight: the naming convention. Every Photoshop smart object had a name — logo, tagline, cta. The animation template referenced those same IDs. The designer just had to get the names right and the animation fired.
If the element IDs are the handshake between design and animation, then the tool just needs to honor that contract — and everything else can be generated.
That meant a browser-based tool could produce the final animated HTML files without any conversion step, any Photoshop, any intermediate export. The canvas is the source of truth. The naming convention is the API. The animation is already written.
I mapped the existing workflow into four distinct phases and designed each one around a clear question the art director is trying to answer at that moment. The AI assists at each seam — not as a decision-maker, but as a capable first draft.
Upload logo and image assets. The AI runs a vision pass to extract brand colors, detect the logo boundary, and auto-populate all seven element slots across all six sizes simultaneously. The designer sees an immediate first draft they can accept or override before moving on.
Paste or type campaign copy. The AI suggests three font pairings based on the brand palette and image mood — editorial serif, clean sans, technical mono. Typing in the panel updates the element live across all six canvases simultaneously. The canvas is the preview, not a representation of it.
AI Layout pre-arranges all six sizes using aspect-ratio-aware rules — tall formats stack vertically, horizontal formats anchor the CTA to the right rail. The designer then clicks directly on any element in any canvas to select it and fine-tune position with the sliders. Per-size overrides coexist with global defaults.
The scene builder maps elements to scenes — which appear in the intro, which hold, which drive the CTA. The timeline shows each element as a row across all scenes; clicking a segment toggles visibility. Hit Preview and all six canvases animate simultaneously, cycling through scenes in real time. Export fires the generator and outputs six self-contained HTML files using the naming convention as the handshake to the existing animation template.
Every AI touch point in the system is designed to produce something the art director can immediately override. The AI suggests — the designer art directs. That distinction matters because the moment AI feels like it's locking something in, the instinct is to resist it.
| Phase | AI role | Human role | Mode |
|---|---|---|---|
| Assets | Extract colors, detect logo, populate elements | Accept, override, or replace any element | Auto |
| Copy & Type | Suggest 3 font pairings, generate copy variations | Select or write their own; apply live | Assist |
| Layout | Arrange all 6 sizes using aspect-ratio rules | Click any element to override position | Auto |
| Animate | Pre-flight check: validate element IDs, scene coverage | Define scenes, set timing, toggle visibility | Validate |
Beyond the time savings, the tool changed where creative energy goes. Before, a significant portion of a designer's time was spent on mechanical work — exporting assets, getting names right, checking sizes. Now that layer is handled. The designer spends their time on what actually matters: the typographic treatment, the image crop, the moment the CTA lands.
The system also made the existing animation template more valuable, not less. Because the naming convention is now the formal API between the design tool and the animation engine, the templates get reused across every campaign rather than being rebuilt each time.
Three components, all vanilla — no build step, no framework dependencies. The whole thing ships as a folder of HTML files.
Single-file browser app. Canvas API renders all six ad sizes using fractional layout coordinates. State machine drives the four-phase workflow. Export generates self-contained HTML per size.
Reusable rAF loop. Reads window.AD_CONFIG — the scenes array — and drives every element using easing functions, enter/exit transitions, and scene-to-scene handoffs. Never changes between campaigns.
One self-contained HTML file per ad size. CSS positions baked from layout fractions × pixel dimensions. Element IDs match the naming convention exactly. ~12KB each including the engine.
Machine-readable contract for the ad server. Lists every file, size, scene, and element ID. Validates before upload that every ID maps to a known template slot.
The biggest thing I underestimated was how much the art director would want to stay in Single view once they hit the Layout phase. Grid view is powerful for seeing all sizes at once, but the act of actually crafting the 300×600 — getting the image crop exactly right, the tagline breathing properly — that wants full attention. I'd make Single view the default in Phase 3 with a clear way to hop back to Grid for a sanity check.
I'd also invest more in the Animate phase's scene builder. Currently it's a great structural tool but the timing feel — the actual easing and rhythm of a well-crafted ad — still requires a developer's eye to translate from the sliders into something that feels right. That's the next seam where AI could genuinely help: listening to "the CTA should punch in" and translating that into spring easing with the right tension.
Most importantly, this project taught me that the best tools don't replace the designer's instinct — they protect it from friction. When the mechanical work disappears, what's left is pure art direction.