Siobhan Perry

The Challenge

Flutter's sportsbook and trading teams were building similar UI patterns independently across 30+ products, each with its own approach to tokens, components and code. That fragmentation showed up as design drift, duplicated design and engineering effort, and a growing gap between what the interface looked like and what the code actually did.

Our challenge was to build something more than a shared style guide: a shared language that both people and AI tools could understand, trust and build from.

A scalable, AI-ready design system that spans 30+ products accelerates delivery, enables tighter prototyping, and bridges design-to-code. Built on consistent tokens, modular components, and clear guidelines, it reduces design drift and technical debt while supporting product teams with ready-to-use patterns and variant-driven components. Integrated tooling—design libraries, shared repositories, and automated asset exports—streamlines handoffs and feeds into a design-to-code pipeline for faster implementation. AI readiness includes structured metadata, semantic naming, and API-friendly tokens to enable model-assisted generation, automated accessibility checks, and smart suggestions. The result: cohesive experiences across products, shorter iteration cycles, higher-quality prototypes that reflect final code, and a sustainable foundation for scaling user-centered design at pace.

Making the system AI-ready

We structured the design system so both people and AI could understand and reuse it. This meant moving beyond visual components to document the underlying tokens, behaviours, patterns and usage rules. We connected design decisions to production-ready code, creating a shared language across design, engineering and emerging AI tools. The result was a system that could support faster prototyping and implementation without losing consistency, usability or quality.

Building Design Principles was key foundation to align the team and our closest collaborators the engineering teams.

More than a component library

The system became a way of working across the organisation.It gave teams shared foundations for designing, prototyping and building complex trading products. Reusable patterns reduced repeated decisions, while clear standards made it easier for teams to contribute without creating inconsistency. Rather than centralising every design decision, we created a system that enabled more teams to move independently.

We used AI to help migrate the existing design system into a more structured, scalable and AI-ready foundation.

Working with Claude and GitHub Copilot, we created reusable skills that captured our design tokens, component behaviours, accessibility standards and implementation rules. These skills gave AI tools the context needed to understand not only how the system looked, but how it should behave.

Design and engineering teams aligned through workshops, testing how AI could support migration, prototyping and production development. A focused proof of concept then helped engineers begin building a dedicated MCP server, connecting our design-system knowledge with the tools used to design and build products.

This became the foundation of our AI prototyping workflow: enabling teams to move from an idea to a consistent, testable interface using shared design intent and production-ready components.

 The Impact

The programme gave sportsbook and trading products a shared foundation to build from.

It enabled teams to:

• Reuse proven patterns across 30+ products instead of rebuilding them brand by brand

• Scale contribution through an inner-source model, with 10+ UI teams building on the same foundation

• Bring 6 designers across brands to shape one system, not six separate ones

• Prepare products and teams for AI-assisted prototyping and delivery

• Reduce design drift and duplicated engineering effort at scale