AI-generated prototypes fail more often than they should. Not because the AI is weak, but because the design system feeding it is full of tiny inconsistencies: decisions never written down, hard-coded tokens left in place, or a naive assumption that AI will figure out your mockups on its own.

Hardik Pandya from Atlassian recently shared a practical approach to reduce drift, cut errors, maintain context, and boost the quality of AI prototypes. Here's how it works — and how it applies if you're running a business in Cyprus or the EU.

1. Treat Design Decisions as Infrastructure

Better AI prototypes start with better data — but also with clearer human guidance. AI can't magically pick the right component or design for accessibility. It needs priorities, principles, examples, and explicit do’s and don’ts. Every decision — not just visual ones, but also how you prioritize work — should end up in a spec file that AI can consume. On Cyprus, where many web projects target EN, RU, and EL audiences, documenting multilingual token behaviour upfront saves weeks of later fixes.

2. Audit with FigmaLint

FigmaLint is a free Figma plugin that audits tokens, states, accessibility, binding, layer naming, detached instances, missing interactive states, and hard-coded values. It also helps prepare design documentation. If you work with external vendors or agencies — common for businesses building ecommerce or CRM on the island — this tool catches what third-party libraries often miss. Cleaner input means cleaner AI output.

3. Three Layers: Spec Files + Token Layer + Auditing

Structure your design system in three layers:

  • Spec files — Markdown documents with spacing rules, color choices, component guidelines, and priorities. AI reads these every time it generates a prototype. Text files are cheaper and more accurate than asking AI to decode visual mockups.
  • Token layer — A live, maintained list of all tokens. AI picks from a closed set of named variables instead of inventing values on the fly. For EU businesses, this is critical when tokens need to adapt for GDPR consent colours or multilingual button labels.
  • Audit script — A regular script (not AI) that scans each prototype and flags every hard-coded value. It waits for the AI to finish, then returns feedback. When the design system updates, a sync routine tells you which spec files need refreshing. AI always reads the current version, not an outdated one.

4. Real-World Examples

Several companies already ship AI-ready design systems. These are worth studying:

  • Atlassian
  • Carbon (by IBM)
  • CMS Design System (by US Centers for Medicare & Medicaid Services)
  • Nordhealth

Wrapping Up

AI won't fix design debt or technical debt without structure. It depends on clear decisions, established priorities, and well-defined principles. The more precise you are in documenting those decisions — in spec files, token layers, and audits — the better your prototypes will be. On Cyprus, where delivery timelines and budgets are tight, this approach directly reduces rework and vendor miscommunication.

Meet “Design Patterns For AI Interfaces”
Vitaly’s new video course includes hundreds of real-life examples and UX guidelines for designing AI features people actually use. A live UX training follows later this year. Jump to a free preview.

Pricing:

  • Video + UX Training: $450.00 $799.00 — 30 video lessons (10h) + live UX training. 100-day money-back guarantee.
  • Video only: $275.00 $395.00 — 30 video lessons (10h). Updated yearly. Also available as a UX Bundle with 3 video courses.

Useful Resources

  • 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