← worksWe Are 26

keep scrolling !

We Are 26 — A FIFA World Cup 2026 Live Dashboard

RoleSolo: design + build (AI-native workflow)

TeamSolo project

Timeline2026 · Google Stitch Challenge (Contra)

SkillsAI-Native Design, Google Stitch, MCP Automation, Motion & Interaction, HTML/CSS, Netlify

AI WorkflowLive DashboardSportsAward-winning

Open the dashboard ↗Stitch project ↗

01 · Context

A FIFA+ broadcast, built entirely in an AI design tool.

The FIFA World Cup 2026 Live Dashboard is a broadcast-grade, six-page tournament experience — 104 match fixtures, animated Panini-style player cards, a CSS knockout-bracket visualizer, and live tournament-state logic — designed to feel like a FIFA+ broadcast. Every screen was generated with Google Stitch and shipped on Netlify.

The goal wasn't a pretty mockup — it was a real, deployed, real-time-aware product that looks like it came off a broadcast graphics desk.

Home hero — the broadcast-style landing with the live tournament state

02 · The Brief

Build interfaces that feel alive.

The Google Stitch Challenge (on Contra) wasn't asking for a single hero screen. It rewarded process, iteration, interaction, and how Stitch fits a real workflow — and showcasing Stitch's newest capabilities (streaming generation, in-place AI edits, native motion, imports, MCP).

6pages

104fixtures

1brand kit as source of truth

Winner — Google Stitch Challenge, Contra.

03 · The Direction

Broadcast polish, not dashboard defaults.

The angle on 'alive': treat it like live sports television. Real-time awareness, the nostalgia of collectible player cards, and the motion language of a broadcast lower-third — so the interface feels like it's running, not just sitting there.

Broadcast-gradeFIFA+ visual language: bold, high-contrast, motion-rich.

Real-time-awareLive tournament-state logic, not static fixtures.

Collectible nostalgiaAnimated Panini-style player cards as the signature flourish.

The home hero after the cyberpunk → FIFA-broadcast redesign

04 · The Six Pages

A full tournament, end to end.

Six connected screens make up the experience:

Home / HeroLive tournament state, the broadcast landing.

Group standingsThe group stage at a glance.

FixturesAll 104 matches, as broadcast match cards.

Knockout bracketA CSS bracket visualizer with animated connector lines.

Teams & playersAnimated Panini-style collectible cards.

Live match detailThe single-match broadcast view.

Groups — the eight-team pools, color-coded by group

05 · The Workflow

Where this gets interesting.

The whole thing was designed and generated through Stitch. The process, step by step:

Brand kit as design.mdUploaded the official FIFA 2026 design system as a single source of truth so every generation stayed on-brand.

Streaming generationBuilt all six screens iteratively, live on the canvas, watching them stream in.

In-place AI editsRefined components by prompt and point-and-click — including redesigning the home hero from a cyberpunk look into a clean FIFA broadcast treatment, in place.

Stitch via MCP → AntigravityConnected Stitch through StitchMCP to Antigravity and drove it programmatically, using edit_screen and get_screen to batch-edit every page at once.

Programmatic design iterationKept using edit_screen through MCP to refine match cards, the bracket, and player-card layouts across all screens simultaneously.

Native motionHTML-canvas + CSS animations for the bracket connector lines and the broadcast motion throughout.

Uploading the brand kit as design.md meant Stitch generated on-brand from the first screen — the system led, not the other way around.

06 · Motion & Interaction

Making it feel live.

The 'alive' requirement, delivered in the details: animated Panini-style player cards, CSS-drawn bracket connectors that animate between rounds, live tournament-state logic driving what each screen shows, and broadcast-style motion and hover states across the pages — all HTML-native, no heavy framework.

Player card — the animated Panini-style collectible in motion

07 · The Unlock

Turning a design tool into an automation layer.

Streaming generation and in-place edits are great for speed — but the real unlock was the MCP integration. Orchestrating Stitch with an AI agent (Antigravity) meant generating and editing many screens programmatically, in parallel.

“It turns Stitch from a design tool into an automation layer — a completely different, and far more powerful, way to work.”

08 · Build & Ship

Generated, then deployed.

Stack: Google Stitch (design + generation) · StitchMCP + Antigravity (programmatic orchestration) · HTML canvas + CSS (motion) · Netlify (deploy). The FIFA 2026 brand kit lived as a design.md driving every generation.

6screens, batch-edited via MCP

104fixtures

1deployed, real-time-aware site

09 · Reflection & Feedback

What I'd want next.

Stitch's streaming generation and in-place edits are genuinely game-changing for rapid prototyping, but driving it through MCP was the highlight of the whole build. Two things I'd love to see next: design-token syncing across screens, so a global style change propagates everywhere automatically; and a full React export with routing intact, instead of exporting screens individually.

“The most interesting part of this project wasn't a screen — it was wiring an AI agent to drive the design tool that drew the screens.”