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
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, while DIY tools produce output that looks like Canva.
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.
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.
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. Every campaign still needs my oversight and execution in Figma, which is why this is a studio.
Three tiers, each compounding the one below
Tier 1 is the skeleton every build inherits. Tier 2 swaps in a client’s brand tokens, so their files inherit Tier 1 updates. Tier 3 is the campaign spec Opus writes before Code starts. That’s why a client’s second campaign is faster than their first.
Two phases, one gate
Phase I is planning. Opus writes the plan before Code touches a file, and Code can’t start until every stage in it is accounted for.
Phase II is execution. Code generates the HTML and deploys. Then nine checks run against the files that actually landed, not against Code’s report of what it did: paths, file weights, IAB compliance, animation tokens. Any failure stops the build.
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. Graza’s mayo launch leads with squeeze-bottle physics on the entrance.
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.
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.
Production-ready HTML5 on the review portal: IAB-compliant weights, click-tags in place, per-ad replay for client review.
728x90
300x250
160x600
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. 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 teammates 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. 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. That caps how fast the studio can scale, and it’s the constraint I’d defend hardest.
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 a record of what I chose to hand to a model and what I chose to execute myself.