AI-generated prototypes They often do not deliver consistently decent results due to small inconsistencies scattered throughout the design system. My decisions are made but not documented, the hardcoded values are never cleaned, or rely too much on AI make sense of mockups or design flows on their own.
Yesterday I came across a useful practical guide by Hardik Pandya of Atlassian – in how to reduce driftsminimize errors, maintain context and improve the quality of AI-generated prototypes. Let’s see how it works.
1. Design decisions are infrastructure
As expected, better AI prototypes come from better data – but also a better human orientation. We shouldn’t assume that AI knows how to choose the right component and how to design with accessibility in mind. You need priorities, a clear path for how we make decisions, design principles, examples, what to do and what not to do.
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 about how to actually prioritize our work and how we make decisions here) it has to find a path to the spec file which is then consumed by the AI.
2. Audit: FigmaLint
One of the useful tools to audit the quality of the design system is FigmaLint. it is a useful Free Figma Plugin to audit tokens, states, accessibility, link tokens, rename layers, detect detached instances, missing interactive states and hard-coded values, and prepare design documentation.
If you often have to work with suppliers and third parties that your design systems and component libraries provide you, it’s a great help to have at 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 + audit
To ensure quality, we establish design principles, guidelines and rules in the form of “specification files”. They are structured Markdown files that include spacing rules, color options, component usage guidelines, priorities, etc. The AI will read and reuse that spec file every time it generates a prototype.
Because spec files are text files, it is much more profitable but also much more precise, simply because we do not rely on the AI to recognize or decode mockup patterns, but instead obtain specific guidelines. In fact, extending code is often a more efficient way than generating code from mockups.
He token layer lists and keeps up to date all tokens used throughout the design system. The AI always chooses from a closed set of named variables rather than inventing plausible values ad hoc.
A audit script detects what the AI does wrong. Scan the prototype and mark each encoded value and mark it if necessary. It can be normal software that does that, with the AI waiting for its response to come.
Finally, when a design system ship upgradesa synchronization routine indicates which specification files need to be updated. The goal is to ensure that the AI always reads current and up-to-date specifications, not ones written in an outdated version.
4. Examples of AI-ready design systems
Concluding
Ultimately, AI can’t be solved magically technical debt or design debt without proper guidance. It depends largely on clear decisions, established priorities and well-defined principles.
The more deliberate and precise The more designers guide the AI, the better the overall results will be. This requires not only cleaning up and improving design systems, but also maintaining them over time as decisions must filter down to Markdown files. We will be busy for many years.
Learn about “Design Patterns for AI Interfaces”
Meet Design Patterns for AI InterfacesVitaly’s new one video course with hundreds of real-life examples and UX guidelines for designing AI features that people actually use, with a live UX training at the end of this year. Skip to free preview.
Useful resources
(yk)
