MARLY Creative Concepts
Animated HTML5 display, built like a system.
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, which is why the system below exists at all.
Output
Animated HTML5 display
Stack
Figma → Claude Opus → Claude Code → Vercel
01 — The Problem
Marly’s answer isn’t a faster version of the agency model — it’s removing the handoff entirely. I’m the only person between a Figma frame and a deployed ad, which is a constraint as much as a feature: every judgment call has to be encoded somewhere machine-readable, or the pipeline breaks the first time I’m not looking at it directly.
02A — The Pipeline
Every Marly build runs through a two-phase gate architecture:
The two-phase split (Opus plans, Code executes) wasn’t the first version. I’d been experimenting with ad production at scale on a single pass, but drift was inevitable and it got more egregious the more campaigns ran through it. I needed a way to guarantee 1:1 accuracy between what Figma specified and what shipped, which is what split planning from execution in the first place.
Opus authors a plan.md before Code touches a file, and no build starts until the §7 coverage table is fully resolved.
Claude Code generates HTML, deploys the review portal, and syncs the Notion workspace, while /verify-delivery runs a ground-truth file-system check before the review page goes live.
02B — Three-Tier Library
The pipeline runs on a three-tier Figma library structure, where each layer compounds the one below it.
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: color styles, type styles, logo assets, imagery rules. Every client file inherits Foundation updates, which is why the second campaign for any client is faster than the first.
The third layer is per-campaign.
A CLAUDE.md spec that translates the brief into machine-readable production instructions, authored by Opus before Code starts Stage 1.
02C — Animation + Surface Effects
Animation intent is locked at the brief stage rather than discovered mid-build. Campaign type determines the sequence, and brand energy from the client CLAUDE.md selects which animation token executes inside it. Ghia’s retargeting campaign opens on a product that’s already in frame, a slow opacity fade, because retargeting assumes recognition, while Graza’s mayo launch leads with squeeze-bottle physics on the entrance, because a launch has to introduce the thing.
Surface effects sit on top of animation as a separate compositional layer: scrims that keep text readable over imagery, feathered edges that blend product into background, ambient glows, shimmer sweeps.
Gorjana gets a warm gold shimmer because the product is brass, while Graza gets none at all, because nothing about a matte squeeze bottle on flat color wants atmosphere.
03 — Brand Range
Every brand that comes through the pipeline gets the same ten stages and a different output. Ghia’s pastel restraint and Magic Spoon’s saturated maximalism run through identical infrastructure because the system encodes process, not aesthetic.
What changes per client lives entirely in the per-client layer; color tokens, motion pacing, type pairing, the texture of how a CTA should feel. Six logos in this range, six different answers to the same brief: make the product look inevitable in under three seconds.
728×90
300×250
160×600
04 — A Build, Traced
One campaign, from brief to deployed review portal: the Tumblerware Father’s Day set, three IAB sizes, taken from a lo-fi internal draft to client-facing V1 through a full change in creative direction mid-pipeline.
The brief is the contract, captured in full before Opus touches a CLAUDE.md. Tumblerware’s declared Architecture B: motion carried by CSS token classes and vanilla JS, no GSAP, no external runtime. That constraint survived a mid-pipeline change in creative direction into the shipped units, where /verify-delivery still checks for it.
Before Code reads a brief, Opus authors a plan.md: brief synthesis, gap audit with explicit resolutions, a diff against deployed state for V2+ builds, and the §7 coverage table, a row for every pipeline stage with a status on every row.
Code cannot start Stage 1 until every row resolves.
Structural composition happens in Figma before brand is applied: Foundation layout variants assign zones, type hierarchy, and asset placement per size, with no color or product imagery to distract from the architecture.
The CD pass follows: color, type, product photography, negative space. Code reads the finished frames via get_design_context and executes them 1:1. For Tumblerware the CD pass replaced the brief’s dark product-demo direction with a light multi-product carousel, and because Figma is Source 1 after CD, the frames won.
CLAUDE.md is machine-readable creative direction: hex values mapped to semantic roles, animation classes assigned from the token library, layout variant IDs looked up from the Foundation index rather than inferred. The spec leaves nothing to interpretation, because interpretation is where builds diverge from design.
Before the review page builds, /verify-delivery runs a ground-truth check 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. The review page doesn’t build until the gate passes. This is how the pipeline catches the class of errors that only surface after a client clicks “play.”
Production-ready HTML5, deployed to the review portal at:
marly.cc/review/tumblerware/fathers-day.
IAB-compliant weights, click-tags in place, and a playback interface with per-ad replay for client review.
300×250
05 — Scope
- Reads Figma frames, authors plan.md
- Writes the CLAUDE.md Code builds from
- Creative judgment, before a file is touched
- Generates HTML, runs the build
- Runs /verify-delivery ground-truth check
- Deploys to Vercel, syncs Notion
06 — What I’d Change
The two-phase gate architecture holds up. What I’d revisit is the per-client Figma layer: it assumes a client already has a design system to encode into it. It doesn’t have a good answer yet for a brand that doesn’t — which is most of the D2C prospect list, not the exception.