AI-generated prototypes often don’t deliver consistently decent results because of tiny inconsistencies scattered across a design system — 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.
Hardik Pandya from Atlassian published a useful practical guide on how to reduce drift, minimize mistakes, maintain context, and improve the quality of AI-generated prototypes. Here’s how it works.
1. Design Decisions Are Infrastructure
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 decisions are made, design principles, examples, and do’s and don’ts.
We should treat design decisions as infrastructure. That means every time we make a decision — not just a design decision, but even a decision on how to prioritize work or how decisions get made — it must find its way into the spec file that AI then consumes.
2. Auditing: FigmaLint
One useful tool for auditing the quality of a design system is FigmaLint. It’s a free Figma plugin for auditing tokens, states, and accessibility; binding tokens; renaming layers; detecting detached instances; and flagging missing interactive states and hard-coded values — all while helping prepare design documentation.
If you regularly work with vendors and third parties who supply their own design systems and component libraries, FigmaLint is a particularly useful tool — especially when 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, design principles, guidelines, and rules are established in the form of spec files — structured Markdown files that include spacing rules, color choices, component usage guidelines, priorities, and more. AI reads and reuses that spec file every time it generates a prototype.
Because spec files are plain text, they are more cost-effective and also more accurate — rather than relying on AI to recognize or decode patterns from mock-ups, you provide specific guidelines directly. 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 on the fly.
An audit script catches what AI gets wrong. It scans the prototype and flags every hard-coded value, with AI waiting for that feedback before proceeding.
Finally, when a design system ships updates, a sync routine flags which spec files need updating. The goal is to ensure AI always reads current, up-to-date specs — not ones written against an outdated version.
4. Examples of AI-Ready Design Systems
Wrapping Up
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 outcomes — and that requires not just cleaning up design systems, but actively maintaining them as living infrastructure that AI can reliably read and act on.
