How To Make Your Design System AI-Ready
AI-generated prototypes often don't deliver consistently decent results — not because of the model, but because of tiny inconsistencies scattered across the design system. Here's a practical guide to reducing drift and improving quality.
AI-generated prototypes often don't deliver consistently decent results because of tiny inconsistencies scattered all across a design system. It's decisions made but not documented, hard-coded values never cleaned up, or relying too much on AI making sense of mock-ups or design flows on its own.
I stumbled upon a useful practical guide by Hardik Pandya from Atlassian — on how to reduce drift, minimize mistakes, maintain context and improve the quality of AI-generated prototypes. Let's see how it works.
To get better results, AI needs better guidance that minimizes assumptions and reduces ambiguity. Guide by Hardik Pandya.
1. Design Decisions Are Infrastructure #
Unsurprisingly, better AI prototypes come from better data — but also from better human guidance. We shouldn't assume that AI knows how to choose the right component, or how to design with accessibility in mind. It needs priorities, a clear path on how we make decisions, design principles, examples, do's and don'ts.
In fact, we should treat design decisions as infrastructure. That means that every time we make a decision — not just a design decision, but even a decision on how we prioritize our work and how we make decisions around here — it must find a path into the spec file that is then consumed by AI.
2. Auditing: FigmaLint #
One of the useful tools to audit the quality of the design system is FigmaLint. It's a useful free Figma plugin for auditing tokens, states, accessibility, binding tokens, renaming layers, detecting detached instances, missing interactive states and hard-coded values — and preparing the design documentation.
Neat little helper to streamline auditing: FigmaLint.
If you often have to work with vendors and third-parties, and they supply you with their design systems and component libraries, that's a great helper to have by your side — especially if you want to improve the quality of prototypes, AI-generated code and AI-written documentation.
3. Three Layers: Spec Files + Token Layer + Auditing #
To ensure quality, we establish design principles, guidelines and rules in the form of "spec files" — structured Markdown files that include spacing rules, color choices, component usage guidelines, priorities, etc. AI reads and reuses that spec file every time it generates a prototype.
An example of a folder that organizes spec files to be AI-friendly. Jump to full example.
Because the spec files are text files, it's much more cost-effective, but also much more accurate — just because we don't rely on AI recognizing or decoding patterns from mock-ups, and instead get specific guidelines. In fact, extending code is often a more effective approach than generating code from mock-ups.
The token layer lists and keeps updated all tokens used throughout the design system. AI always chooses from a closed set of named variables instead of inventing plausible values ad-hoc.
Context engineering is everything. Five levels of context engineering: a practical overview, by Matthew Alverson, via Addy Osmani.
An audit script catches what AI gets wrong. It scans the prototype and flags every hard-coded value where necessary. It can be regular software doing that, with AI waiting for its feedback to come back.
Finally, when a design system ships updates, a sync routine flags which spec files need updating. The goal is to make sure that AI always reads up-to-date, current specs — not ones written against an outdated version.
4. Examples of AI-Ready Design Systems #
Wrapping Up #
Ultimately, AI cannot magically resolve technical debt or design debt without proper guidance. It relies heavily on clear decisions, established priorities, and well-defined principles.
The more deliberate and precise designers are in guiding AI, the better the overall outcomes will be. This requires not just cleaning up and improving design systems, but also maintaining them over time, as decisions need to trickle down into Markdown files. We'll be busy for years to come.
Useful Resources #
- How To Make Your Design System AI-Ready, by Hardik Pandya
- FigmaLint, by TJ Pitre
- Atlassian AI-Ready Design System Example, by Atlassian
- Carbon AI-Ready Design System Example, by IBM
- CMS Design System AI-Ready Example, by Centers for Medicare & Medicaid Services
- Nordhealth AI-Ready Design System Example, by Nordhealth
