Marly Creative Concepts
Animated HTML5 display, built like a system.
Context
Marly is the solo studio I founded and run: a Figma-to-production pipeline that turns brand design systems into animated ad sets. I’m the creative director, the pipeline architect, and the final QA gate.
17
6
10
1
Problem
Display advertising is where brand systems go to die. A D2C brand spends real money on type, palette, and a product with a shape worth showing, and none of those choices survive the handoff downstream.
The existing options each fail at a different point. Enterprise platforms like Celtra automate at scale but assume someone else is producing the creative. Agencies charge $350–1,500 per ad set and reset the file handoff with every campaign, so nothing accumulates. Turnaround runs upwards of 5 weeks from brief to delivered set, and every campaign restarts the file handoff from zero, while DIY tools produce output that looks like Canva.
The missing link is not automation and it’s not craft but rather, nobody holds both ends of the same rope.
Solution
Marly treats an ad set the way a product team treats a component library: brand decisions get encoded once, and every size is an instance of those decisions rather than a fresh interpretation of them.
Automate the design, or automate the production?
The tempting version of this studio generates the creative: Prompt in a brief, get ad sets out. Bigger ceiling, better pitch, no dependency on my hours, and it’s what most people in this space are building. It also produces Canva output, because a model asked to make aesthetic decisions makes average ones, and average is already free.
Marly runs the other way: Creative stays human-authored in Figma, while the model handles assembly, sizing and build. Ghia’s pastel restraint and Magic Spoon’s maximalism come out of identical infrastructure. The system encodes process, not aesthetic. Every campaign still needs my oversight and execution in Figma, which is why this is a studio and not a product.
Three tiers, each compounding the one below
The Foundation layer is client-agnostic: ad size canvases, layout variants, component shells, animation specs, IAB spacing tokens, the skeleton every build inherits. The second layer is per-client: Foundation components with brand tokens swapped in, so every client file inherits Foundation updates. The third is per-campaign: a CLAUDE.md spec translating the brief into machine-readable production instructions, authored by Opus before Code starts, which is why the second campaign for any client is faster than the first.
Two phases, one gate
Phase I is planning. Opus authors a plan.md before Code touches a file: a brief synthesis, gap audit with explicit resolutions, a diff against deployed state for V2+ builds, and a §7 coverage table with a row for every pipeline stage. Code cannot start Stage 1 until every row resolves.
Phase II is execution. Claude Code generates the HTML, deploys the review portal, and syncs the Notion workspace. Before the review page builds, /verify-delivery runs a nine-check ground-truth pass against the deployed file state rather than a self-report from Code: paths resolving, file weights, IAB compliance, animation tokens per spec. If any check fails, the build stops.
Animation intent locked at the brief
Campaign type determines the sequence; brand energy from the client CLAUDE.md selects which animation token executes inside it. Ghia’s retargeting campaign opens on a product already in frame with a slow opacity fade, because retargeting assumes recognition. Graza’s mayo launch leads with squeeze-bottle physics on the entrance, because a launch has to introduce the thing.
Surface effects sit above animation as a separate compositional layer (scrims, feathered edges, ambient glows, shimmer sweeps). Gorjana gets a warm gold shimmer because the product is brass. Graza gets none, because nothing about a thick glass jar on flat color wants atmosphere.
A Build, Traced
One campaign end to end: the Tumblerware Father’s Day set, three IAB sizes, taken from lo-fi internal draft to client-facing V1 through a full change in creative direction mid-pipeline.
When the brief and the Figma file disagree, which one wins?
Halfway through Tumblerware the direction reversed. The brief said dark product demo but the CD pass came back a light multi-product carousel. In a normal handoff that’s a renegotiation, however a pipeline has nobody in the loop to make that call, so it needs a rule that returns the same answer every time: Figma is Source 1 after CD.
Treating the brief as the contract throughout is defensible, since it’s what the client signed off on, but the rule has to exist before you need it. The cost is that a brief can go stale silently, so anything that must survive a reversal gets declared as architecture instead of direction. That’s why Architecture B, CSS token classes and vanilla JS with no GSAP and no runtime, is checked by /verify-delivery on every build.
Throughput
Seventeen speculative builds against real brands. Self-initiated, run through the same pipeline and the same nine-check gate as commissioned work.
~30 min
48 hrs
17
Learning
On Aura and Echo, other teamembers used what I built, so the feedback loop ran through them. On Marly I’m the author, the consumer and the QA gate at once. There’s no engineer to blame for an inconsistency and no stakeholder whose taste explains a compromise. What that taught me is how much of this work is designing the moment of failure: the gate, the check, the thing that stops a bad build before anyone sees it. The nine-check verify step exists because I couldn’t trust my own review at 2am.
Everything upstream of the finished frame is still done by hand since the pipeline compresses production, not judgment. That caps how fast the studio can scale, and it’s the constraint I’d defend hardest: the moment a model starts making aesthetic decisions, the output converges on the average of everything it’s seen.
Scope
Solo venture: Creative direction, design system, pipeline architecture, build, and QA.
Claude Opus
- Reads Figma frames, authors plan.md
- Writes the CLAUDE.md Code builds from
- Creative judgment, before a file is touched
Claude Code
- Generates HTML, runs the build
- Runs /verify-delivery ground-truth check
- Deploys to Vercel, syncs Notion
The split is not a division of labour between people, but a record of what I chose to hand to a model and what I chose to execute myself.