Making Design Systems AI-Readable

The author of the essay, Hardik Pandya, is the Head of Design & AI Principal at Atlassian, and previously held design leadership roles at Google for Search and Cloud, as well as at Unacademy. His work focuses on the intersection of AI-driven design, user experience, and scalable design systems. The core issue identified is that AI coding agents often "vibe code," generating plausible-looking but non-compliant styles. These agents tend to fabricate token names, drift on values within a single session, and start every new session without any memory of previous design decisions, leading to rampant inconsistency. The proposed solution centers on creating a machine-readable "API contract" for the design system. This involves structuring design tokens with a semantic layer that communicates intent—for example, using `color-feedback-error` instead of a raw hex code or a primitive like `red-6`—which allows AI to make informed, consistent choices. This problem is becoming more acute with the rise of more autonomous AI agents like Devin, which can handle entire development projects from a single prompt. Without a systematic way to consume design constraints, these powerful tools can rapidly generate UIs that are functionally correct but visually chaotic and off-brand. The concept is analogous to Infrastructure as Code (IaC), which made server configuration reproducible and auditable. By making design decisions machine-readable, the goal is to stop AI from guessing and ensure every generated component, pattern, and page adheres to the established system. This structured approach is crucial as AI's role in software development shifts from simple code completion to more agentic, end-to-end workflows. According to a 2024 State of Frontend report, over 75% of programmers are already using AI to enhance their workflows, with GitHub Copilot and ChatGPT being the most popular tools. Discussions in the developer community highlight this as a key step for scaling UX. By embedding design logic directly into tokens, teams can create dynamic systems where AI assists in maintaining consistency across web, iOS, and Android platforms automatically. Pandya's team at Atlassian has already experimented with this method on projects using Atlaskit, their public design system, demonstrating its viability with existing component libraries in a React and TypeScript environment.