Claude + Node + Playwright · brief-to-batch ad engine with a review app

LOIS · Ad Engine

Brief in, distinct on-brand Meta batch out, one command.

status client work · legal-techrole designed + built end to end

LOIS · Ad Engine: Generated without a human in the loop: spec chose a light supergraphic treatment — Generated without a human in the loop: spec chose a light supergraphic treatment, the strike-through motif, and a CTA color that appears nowhere else on the ad.

LOIS · Ad Engine: From the review app: one typed headline became this ad in about ninety seconds, — From the review app: one typed headline became this ad in about ninety seconds, brief to spec to vision-grounded layout to rendered PNG.

LOIS · Ad Engine: From the first batch to clear the QA gate with no failures: every ad checked for — From the first batch to clear the QA gate with no failures: every ad checked for CTA rules, asset loading, focal length and bounds, then all pairs scored distinct.

recorded run

A captured Claude session driving the engine end to end: the prompt, the render, nineteen ads, the count. Recorded 2026-08-10 from a real run.

What it solves

Meta penalizes near-duplicate creatives. Brands penalize off-guideline ones. Image-gen tools fumble both, because pixels come out approximate: wrong hex, wrong type, melted logos. This engine holds the brand with code, not hope: exact tokens in CSS, the real logo SVG, layouts generated against the visible brand book, and distinctness enforced at the spec level before a single pixel renders.

Who it serves

A brand or agency running paid social at volume inside a strict brand system.

Who it is for

The performance marketer who needs many on-brand variants without tripping duplicate detection.

How it works

Spec the setClaude converts brand system plus brief into N ad specs where every pair differs on at least three dimensions, layout, hero, palette among them. Distinctness is a generation constraint, not a cleanup filter.
Write layouts while seeing the brandEach layout call attaches rendered pages from the real brand book, so compositions vary the way the brand actually does instead of collapsing into one skeleton. The shared brand context is prompt-cached; calls after the first reuse about 42,000 tokens for a tenth of the price.
Render pixels deterministicallyHTML plus the brand's exact design tokens through Playwright at 1080 square. The hex is the hex, the font is the font, the logo is the supplied SVG.
Gate before deliveryAn automated pass loads every ad and checks the rules that matter: CTA present, in bounds, 44px minimum, and its color used nowhere else; assets loaded; focal three to six words and never clipped. Then it scores all pairs for Andromeda distinctness. It has already caught a blank render and a broken hero reference that a human eye would have shipped.
Hand off editableBecause every ad is real HTML and CSS rather than a flat generated image, a designer imports it straight into Figma with the html.to.design plugin and gets live layers: real text, real shapes, editable type. Image-generation tools hand back a picture; this hands back a file you can still art-direct.

Built with

Claude API prompt caching vision grounding Playwright rendering automated QA gate Hono + React app Figma-editable output