Vijay Raina is a titan in the world of enterprise SaaS and software architecture, bringing a rigorous, engineering-first perspective to the often-fluid world of user interface design. With years spent navigating the complexities of large-scale software tools, he has become a leading voice in how design systems must evolve to support the burgeoning world of artificial intelligence. Raina argues that for AI to truly revolutionize our workflows, we must stop treating design as a collection of pretty pictures and start treating it as high-fidelity data. His expertise provides a vital bridge between the creative visual side of UX and the structured, logical requirements of modern software development.
The following discussion explores the critical transition from visual mock-ups to structured Markdown specifications, emphasizing the need for design to be treated as foundational infrastructure. We delve into the importance of rigorous auditing through tools like FigmaLint to eliminate the “design debt” that confuses AI models. We also break down a three-layered framework—consisting of spec files, tokens, and audit scripts—that ensures AI-generated prototypes are consistent, accessible, and cost-effective. Finally, we look at how industry leaders are currently implementing these “AI-ready” systems to future-proof their digital products.
In your experience, why is it no longer enough for design teams to rely solely on visual mock-ups, and how does shifting toward a Markdown-based “infrastructure” mindset change the development lifecycle?
The reality is that visual mock-ups are often a minefield of ambiguity for AI because they rely on the machine making guesses about our intent. When we rely on AI to decode patterns from a flat image or a complex design flow, we’re essentially asking it to interpret “decisions made but not documented,” which leads to inconsistent results and hard-coded values that clutter the codebase. By shifting to a Markdown-based “infrastructure” mindset, we treat every design choice—from spacing rules to accessibility priorities—as a living, version-controlled spec file that the AI can read and execute with precision. This transition means we are no longer just drawing boxes; we are providing a clear, logical path that minimizes assumptions and reduces the “drifts” that typically occur between a designer’s vision and the final generated code. It transforms the design system into a rigorous set of guidelines that functions exactly like software infrastructure, where every “do” and “don’t” is explicitly defined for the machine to consume.
When we talk about maintaining the health of these systems, how do auditing tools like FigmaLint help teams identify the “invisible” errors that typically trip up an AI?
FigmaLint acts as a high-fidelity diagnostic tool that catches the subtle mistakes humans often overlook, such as detached instances or missing interactive states that can break an AI’s logic. When a design system is cluttered with hard-coded values instead of clean tokens, the AI lacks the necessary context to make smart choices, often inventing plausible but ultimately incorrect values ad hoc. Using a plugin like this allows us to audit tokens, states, and accessibility markers in real-time, ensuring that the documentation we feed into our AI models is pristine and structured. It’s particularly invaluable when working with third-party vendors, as it provides a standardized way to clean up their component libraries before they enter our ecosystem. By flagging these inconsistencies early, we ensure that the AI-written documentation and generated code are based on a foundation of “clean data” rather than a chaotic mess of visual layers.
Could you walk us through the specific architecture of a three-layered design system—incorporating spec files, tokens, and audit scripts—and how these components work together to ensure consistency?
To build a truly AI-ready system, you need to establish a hierarchy that starts with structured Markdown spec files that define the “why” and “how” of your design principles. These text-based files are not only more cost-effective for AI to process than visual patterns, but they also provide granular guidelines on component usage and priorities that prevent the AI from “hallucinating” design choices. Below that, the token layer acts as a restricted vocabulary, forcing the AI to choose from a closed set of named variables rather than guessing hex codes or pixel values. The final layer is the audit script, which scans every AI-generated prototype to flag any hard-coded values or deviations from the spec, acting as a rigorous gatekeeper for quality. This three-layered approach creates a continuous loop where sync routines update the spec files whenever the design system ships an update, ensuring the AI is never working from an outdated version of the truth.
Looking at leaders like Atlassian or IBM’s Carbon, what specific patterns do they follow that make their design systems “AI-ready” compared to traditional legacy setups?
Companies like Atlassian and IBM have moved beyond static libraries by creating ecosystems where design decisions trickle down into machine-readable formats like Markdown automatically. They utilize “context engineering,” which involves five distinct levels of oversight to ensure that the AI has the right amount of information to generate a prototype without being overwhelmed by noise. These organizations don’t just “clean up” their design systems once; they treat maintenance as a permanent sync routine that flags which spec files need updating the moment a component is modified. By looking at the CMS Design System or Nordhealth, we see that they prioritize “extending code” over simply “generating code from mock-ups,” which results in much higher accuracy and technical integrity. This level of deliberation and precision in guiding the AI is what separates a modern, AI-ready system from a legacy one that is still weighed down by technical and design debt.
What is your forecast for the role of the designer over the next few years as these AI-driven workflows become standard practice?
I forecast that the role of the designer will shift significantly from being a “pixel-pusher” to becoming a “context engineer” and “systems architect.” Instead of spending 40 hours a week tweaking the border radius of a button across a hundred screens, designers will focus on defining the high-level logic and the rigorous spec files that govern how an AI interprets those elements. We will see a world where the design system is managed more like a codebase, with designers performing “design audits” and writing the “infrastructure” that allows AI to generate entire flows in seconds with zero drift. This doesn’t mean the creative spark is gone; rather, it means our creativity will be applied at a much more influential level, setting the principles and priorities that define a brand’s digital DNA. Those who embrace this shift toward structured, deliberate guidance will find themselves leading the next decade of product development, while those who cling to manual visual layouts will likely struggle with the sheer speed of AI-integrated competition.
