Building The Win Zone design system
Built alongside the product, then connected to AI for validation and new screens.
My role
Lead Product Designer, system owner
Team
UI Designer
Timeline
January 2025 to present
Tools
Figma, Claude, agent
Overview
I built The Win Zone’s design system alongside the app, so every new section shipped on shared foundations instead of one-off screens. Then I connected it to AI: an agent that checks new designs against the system, and connected Claude to Figma's MCP to use the system as reference and produce new screens in Figma.
Context
The Win Zone was a new product: a US sweepstakes casino built from zero. Every screen I designed would either follow a system or become the next inconsistency, so the system grew with the app.
Approach
Foundations first. Color, typography, spacing, radius and elevation defined as tokens.
Core components as features needed them: buttons, icons, inputs and controls, badges and tags, navigation, modals and brand elements.
Product components on top: games, store and redemptions, meta content, myVIP benefits and referral.
Key decisions
Tokens before components. Raw primitives are hidden from pickers; designers apply semantic tokens for background, text, border, icon and effects. The system is dark-only by design.
One button system for every context. Six colors plus on-light versions, four sizes measured from real screens, three states, primary and secondary. Every button can show a struck-through old price and a GC/SC coin, so store and promo buttons don’t need one-offs.
Loyalty tiers as tokens. Each of the 10 myVIP tiers has a fill and a glow token plus a progress gradient.
Making the system usable by AI
I set up three AI workflows on top of the system to work faster:
A validation agent. New designs are checked against the system before review. It flags off-system colors, type styles, spacing and detached components, so reviews focus on the experience.
A documentation agent. Whenever we add new components to the system, the agent updates the documentation with the new changes, ready for the developers.
Claude connected to the system. Through Figma’s MCP, Claude uses the design system as reference to produce new screens inside Figma. Drafts come out already using our components and tokens, so a new feature starts from an on-system draft instead of a blank canvas.
Results
14 documented pages: 3 foundations and 11 component groups.
16 type styles, from Display to Micro, each with a documented use.
240 button variants from one system: 10 color sets × 4 sizes × 3 states × 2 hierarchies.
Design reviews focus on the experience; the agent catches off-system details first.
Connection to earlier work
This builds on the themeable store system I designed for myVIP, where each game customized a shared component set.
