AI Driven Framework For Design System Theming
Overview
Visa relies on fictional brands across demos, prototypes, client presentations, and internal storytelling. Over time, these brands became inconsistent, difficult to maintain, and disconnected from the evolving Visa Product Design System (VPDS).
What began as a visual refresh evolved into a larger question: How could we transform these brands into a scalable system capable of generating consistent product experiences with AI?
Our team redesigned the ecosystem by connecting brand identities, VPDS, design tokens, governance, and AI workflows into a reusable platform for rapid product generation.
The challenge
Refreshing brand identities was only part of the problem. Every new brand required manually recreating colors, typography, components, and interface styles, making the process slow, inconsistent, and difficult to scale.
The challenge was to create a system where a small set of brand attributes could automatically generate a complete VPDS-compatible design language while supporting AI-assisted workflows.
My role
I designed the configuration layer that connected brand identity, design tokens, and AI-driven product generation.
My work included:
- Understanding the VPDS token architecture with engineering.
- Defining which design system elements could be customized without changing core components.
- Creating a parameter model that translated a few brand inputs into complete VPDS-compatible token sets.
- Designing Claude Code workflows and prompt templates to generate branded prototypes through a structured UX process.
- Developing reusable AI skills to improve consistency and reduce manual refinement.
From design tokens to a generation framework
Instead of exposing hundreds of design tokens, I reduced the system to a small set of meaningful brand inputs:
- Brand name
- Logo
- Primary color palette
- Typography
- Brand personality
From these, the framework automatically generated semantic tokens, color mappings, typography definitions, and a complete VPDS stylesheet.
This allowed every existing VPDS component to instantly adopt a new visual identity without redesigning components, transforming VPDS from a collection of themes into a configurable design system.
AI-assisted product creation
With branded token generation solved, I designed a structured AI workflow based on the traditional UX process.
The generation pipeline progressively built context through:
- Product definition
- User profiles
- Problem statements
- User journeys
- User flows
- Screen requirements
- UI generation
This approach enabled Claude Code to generate consistent prototypes that remained aligned with Visa’s design language instead of producing arbitrary interfaces.
Outcome
The project evolved well beyond a brand refresh. Together, we created a platform that enables:
- Multiple branded experiences from a single design system
- Automated VPDS token generation
- Consistent AI-generated prototypes
- Faster client demonstrations and internal storytelling
- A scalable workflow for future brand creation
Most importantly, the project shifted the focus from producing design assets to building long-term design capability.
