UX Collective: structuring your design system so AI can read it

What the article is about

Designer Oleksandra Huba describes a recurring problem in AI-assisted design-to-code workflows: when you prompt an LLM using a screenshot of your design, the AI cannot understand the underlying structure, component relationships, or naming logic that governs your design system. The result is code that looks roughly correct but ignores existing components, invents new ones, or breaks naming conventions. The article is a structured guide to fixing this at the source — by making the design system itself legible to AI.

Context

The article was written for designers who are working with AI coding tools like Claude Code, Cursor, or GitHub Copilot and running into friction where the AI either regenerates code that already exists or makes assumptions about how components work. The core insight is that the problem is not the AI’s capability — it is the absence of clean, structured input.

Key takeaway

The article offers four concrete interventions. The first is naming and file structure in Figma: using semantic names like CreateProjectModal instead of Frame 74, maintaining flat layer hierarchies, and setting Auto Layout as the default. An AI reads the layer tree to understand design structure, so a messy or auto-generated tree produces messy or incoherent DOM.

The second intervention is connecting Figma components to the actual codebase using Code Connect, which creates a single source of truth rather than letting the AI generate parallel implementations of components that already exist. When the Figma component is linked to the real code component, the AI treats the existing implementation as the target rather than generating a new one.

The third is building a set of three rules files in a dedicated folder: a README that defines the core tech stack and foundational decisions, a design-system-rules.md that documents component usage and constraints, and a figma-mcp-rules.md that specifies how the Figma-to-code workflow should operate. These files give the AI persistent context across prompts rather than requiring the designer to re-explain the system in each session.

The fourth is prompt structure: asking the AI to work on one component at a time rather than generating an entire interface at once, which reduces the chance of the AI losing context and making inconsistent decisions.

Who should read this

Designers and design system leads who are integrating AI coding tools into their workflow and finding that AI-generated output does not respect their existing component library. The specific techniques are relevant to teams using Figma with any MCP-compatible coding agent.