FIFA World Cup 2026 Live

FIFA World Cup 2026 Live Dashboard is a broadcast-grade, 6-page tournament experience built entirely with Google Stitch and deployed on Netlify. Starting from the official FIFA 2026 brand kit, I used Stitch’s streaming generation to build each page iteratively, in-place AI edits to refine components like match cards and the knockout bracket, and connected Stitch via MCP to Antigravity to automate multi-screen generation programmatically. The result is a real-time-aware dashboard with 104 match fixtures, animated Panini player cards, a CSS bracket visualizer, and live tournament state logic - all designed to feel like a FIFA+ broadcast experience.

I used Stitch as the primary design and generation tool throughout. Workflow: (1) Uploaded the official FIFA 2026 design system as a design.md file, (2) Used streaming generation to build all 6 screens iteratively on the canvas, (3) Used in-place AI edits to redesign components - most notably the cyberpunk → FIFA broadcast redesign of the home hero, (4) Connected Stitch via StitchMCP to Antigravity to programmatically generate and edit screens via the MCP API - - used edit_screen, get_screen tools to automate multi-screen updates simultaneously, enabling batch edits across all pages without touching Stitch manually, (5) Used edit_screen again to iterate on the design layer directly through MCP - refining match cards, the knockout bracket, and player card layouts programmatically, (6) Used native HTML canvas and CSS animations for the bracket connector lines and motion design throughout.

Stitch’s streaming generation and in-place edits are genuinely game-changing for rapid prototyping. But the real unlock was the MCP integration - using an AI agent to orchestrate Stitch programmatically was the highlight of this entire build. It turns Stitch from a design tool into an automation layer, which is a completely different (and more powerful) workflow. Two things I’d love to see: better design token syncing between screens so global style changes propagate automatically, and a way to export the full project as a React codebase with routing intact rather than individual screen exports. Live on Netlify: https://fwc-weare26.netlify.app/ Stitch Project: https://stitch.withgoogle.com/projects/7889672183129917406