Smashing Magazine: How to make your design system AI-ready

Vitaly Friedman’s article for Smashing Magazine addresses a gap that becomes visible the moment a team starts using AI to generate prototypes: the AI produces output that looks plausible but breaks spacing rules, ignores component guidelines, and invents patterns that don’t exist in the design system. The piece argues that this is not a model problem—it is a documentation problem. AI cannot make good design decisions from mockup files alone. It needs structured guidance, and most design systems do not provide it.

The article proposes a three-layer approach. The first layer is a specification file: a structured Markdown document that captures design principles, spacing rules, color choices, component usage guidelines, and priorities. This gives AI tools something they can read and act on, rather than something they have to infer. The second layer is the token layer—defined variables in Figma that map directly to code. The closer the alignment between Figma variables and their code syntax, the more reliably AI can move between design and implementation without introducing inconsistencies. The third layer is an automated audit script, typically running FigmaLint or a similar plugin, that flags hard-coded values, detached components, and missing interactive states before AI generation begins.

Friedman’s core argument is that “AI cannot magically resolve technical debt or design debt without proper guidance.” Teams at Atlassian, IBM Carbon, and Nordhealth, which Friedman cites as examples, have found that the preparation work—defining and documenting those constraints—also has benefits that go beyond AI. It forces design and engineering to align on decisions that often stay implicit for too long.

The article is practical throughout. It recommends a specific file structure for spec files, explains what FigmaLint catches and what it misses, and describes how to version the specification alongside the design system rather than treating it as a separate document.

Who this is useful for. Design system leads and product designers at companies where AI-generated prototyping is already in use or being introduced. It is also a useful read for anyone preparing to integrate Figma Make or similar tools into a production workflow, and for engineers who need to understand why design constraints should be written down rather than assumed.