BACK
VIBE CODING / WORLD CUP ADS
View the Demo ↗
FIFA World Cup 2026 · Ad Creative Demo

Figma To Live Ad In One Vibe.

We rebuilt a World Cup 2026 ad creative 1:1 — from Figma to a real-device motion ad card — using Vibe Coding: design intent → AI codegen → live tuning. Starring Kylian Mbappé. Zero manual slicing.

◆ Vibe Coding Workflow
◆ TUX Design System
◆ Figma → On-Device
DESIGN · Figma
→
SHIPPED · On-Device
▶ Final Output · Live
4 Feed Variants
FINAL CUT
SCROLL
What we set out to prove

We wanted to validate

01
A
Vibe Coding is viable for ad creative
No traditional exported slices — let AI read Figma intent directly and produce runnable code alongside the design system.
↗
B
TUX covers brand-ad + motion cards
Can tokens, components and motion specs carry a marketing-grade, high-expression card end to end?
↗
C
Ceiling of visual fidelity
Color / type / radius / shadow / entrance motion / CTA micro-interaction — how close can we get to the Figma spec?
↗
Design → AI code → live tuning

The Vibe Coding workflow

02
01
Align Design Intent
Feed the Figma node to AI to read frames, auto-layout, fills & variants — plus human intent: “World Cup card, lime + black, Mbappé entrance”. Lock 4 variants.
02
Call the TUX System
Via ask-tux skill, pull component APIs & tokens — build with Button Text Avatar primitives. No magic values, fully themeable.
03
Rebuild + Motion
Layer-by-layer static rebuild, then motion: Mbappé enters via translateY + opacity, CTA idle pulse, lime breathing box-shadow.
04
On-Device Tuning
Compare against Figma on real hardware — dial in lime hue, CTA radius, blend modes. Swap easing to cubic-bezier(.16,1,.3,1) for the “pop”.
4 locked variants →
Key Visual
Copy Card
Upper-Body
Full-Body
The takeaways

What we learned

03

AI + design-system skill = the executable version of a design file.

01

AI reading Figma + a design-system skill is the one-two punch

AI alone drifts; humans alone are slow. Together, the code is basically the runnable design file.

02

TUX holds up for high-expression marketing cards

With a little custom motion and letterSpacing tuning, it carries brand-ad-grade visuals.

03

The real speed-up isn’t “writing code” — it’s rapid iteration

Same structure, swap copy / color / easing / variant order in minutes — a step change for the review cadence.