From Library to Living System: How AI Reshapes the Design System

From Library to Living System: How AI Reshapes the Design System

Ai

Xin Chen

,

UX/UI Designer

A portrait

A design system has always been a productivity tool. Its purpose is to replace decisions with defaults - so that teams stop re-solving the same problems, designers stop reinventing components that already exist, and developers ship faster against a consistent vocabulary. Done well, it multiplies the output of every person who touches it. 

Most systems don't quite deliver on that promise. They drift. They fragment across files and product squads. Documentation goes stale. Off-system overrides accumulate. The dividend the system was supposed to pay gets eaten by the cost of maintaining it, and the gap quietly widens between the system as designed and the system as used. 

AI's real opportunity here isn't to help teams use the system better - it's to participate in the system itself: building it faster, holding the line against drift, documenting decisions before they decay, surfacing the patterns that reveal where the system needs to evolve. The result is a system that gets sharper over time instead of slowly degrading, and a team that spends less of its week on maintenance and more of it on work that actually moves the product forward. 

This article picks up where an earlier Codehouse piece Elevating Collaboration and Productivity: Strategies for Optimising Your Design System on optimising design systems left off. That article laid out the three foundations - Atomic Design hierarchy, clear and consistent naming conventions, and reusable, extensible components - that any productive system needs. What follows is what changes once AI is added on top of those foundations, and why the foundations matter more in an AI world, not less. 

The foundation that makes AI useful 

The three principles from the previous article aren't displaced by AI. They become the language AI uses to understand and act on the system. 

Atomic hierarchy turns into a navigable structure a model can reason about. When components are organised from atoms upwards, AI can identify where a new element belongs, which existing pieces it composes from, and what it would inherit by default. Without that hierarchy, every AI request lands in a flat soup of components, and the output reflects that. 

Naming conventions become the contract AI uses to identify, retrieve, and reference parts of the system. Consistent naming gives the model a stable address to look up. When a component is reliably called Button/Primary, the model finds and reuses it. When the same component is called different things across different files, the model can't tell those references point to the same thing - and tends to invent a new component rather than reach for what already exists. 

Reusable, extensible components become the vocabulary AI generates with. Given a system that's properly componentised and tokenised, AI produces work that already speaks the team's language - on-brand spacing, on-system colours, on-token type. Given a weak or absent system, AI defaults to its own aesthetic: the median, the safe, the indistinguishable. 

Where AI accelerates the system's life cycle 

A design system isn't a single artefact - it's a thing that's built, then maintained, then adopted, then evolved. AI shows up usefully at every stage, but the productivity gains are unevenly distributed. The largest wins are in maintenance, where most teams quietly bleed time. 

Construction 

In the early stages of building a system, AI dramatically shortens the distance from "we have a brand" to "we have something a team can actually work with." Given a handful of inputs - the core colours, the typography, a few reference screens, a description of tone - AI can propose the system's first foundations in a single session: a colour palette expanded into a full token set with semantic naming and accessibility-safe pairings, a type scale with clear hierarchy, and a starter set of common components like buttons, inputs, cards, and navigation, each drafted with its main states, variants, and first-draft usage notes. None of it is final; the team will rework most of it. But it gives them something to react to. The first design review now happens against real material instead of empty frames and abstract debate about what the system should be - which is often the difference between a system that actually gets shipped and one that stays perpetually in planning. 

Maintenance 

This is where the productivity multiplier lives, and the stage most teams under-invest in. 

Any system in active use will drift. Components evolve, tokens get updated, product requirements push edge cases, and parallel work across teams means dozens of small decisions land in files every week. Keeping the system aligned with itself - and with the products using it - is constant work that's easy to defer until a new project forces a reckoning. 

AI changes the work of staying aligned. A model that knows the system can scan a file in minutes and produce a clear picture of where things stand: which values are still on token and which have moved off it, where spacing follows the scale and where it doesn't, where the same component is being used in different ways across pages, where two components have grown close enough to overlap, and how the current state lines up against the accessibility constraints the system is meant to enforce. The output isn't a verdict - it's a map a designer walks through, deciding what's an exception worth keeping and what's worth bringing back into line. 

What used to be a quarterly cleanup, undertaken only when the pain became visible, becomes a fifteen-minute weekly diagnostic. The system's alignment with itself is checked continuously rather than retroactively. Every drift caught early is a refactor avoided later - and every refactor avoided is a sprint the team gets back. 

Adoption 

A design system is only as productive as its adoption rate, and adoption breaks at two predictable points. New team members don't know which component to reach for, so they ask the maintainer, or just build the screen and trust someone will catch it. Existing members lose track of what's been added since they last looked, and rebuild things that already exist. 

AI shortens both gaps. A new designer can ask in plain language "is there already something for inline form errors?" before building one. Existing members can ask "what's been added today?" without digging through changelogs or pinging the design system team. 

Evolution 

Most systems evolve by intuition. A designer notices a pattern, the team debates whether to formalise it, a decision gets made or postponed. The signal is anecdotal; the response is reactive. AI doesn't replace the judgment - the decision to add, remove, or rework a component still belongs to people who understand the product - but it makes the signal far more reliable. 

A model with access to the system and the files using it can surface what used to require dedicated audit time: which components are used heavily, which sit unused, which carry an unusually high number of off-system overrides (a sign the component itself isn't fit for purpose), which patterns recur as one-off variants across product files (a sign a component is missing), which token values get reached for most and which never. The answers come from real usage rather than memory. 

Pattern recognition that used to need an audit cycle now sits in the background of normal work. A monthly check surfaces what to promote, deprecate, or rebuild. The system stops being a thing revised when someone has the energy and starts being a thing that learns from how it's used. 

The shift in the designer's role 

A design system maintained this way changes what the designer responsible for it actually does. The work moves from building individual components to curating a system that AI can read, reason about, and extend within. Less time on production, more time on architecture. 

The most valuable asset on the team is no longer the latest polished screen - it's the system underneath. A well-architected, well-named, well-documented system is AI-ready by definition; anything sitting on top of it inherits the system's quality. A weak system inherits the system's weakness. 

The leverage equation shifts accordingly. A strong system plus AI lets a small team ship like a large one. A weak system plus AI accelerates the same chaos at higher resolution. The designer's job is to make the foundation deserving of the multiplier sitting on top. 

What this looks like in practice 

The optimisations described above aren't completely theoretical. Most of the tools needed to run them already exist: Claude skills for persisting a system's tokens, naming conventions, and component vocabulary so every request stays grounded in it; MCP connections for reading Figma files directly, turning audits and drift checks into a near-real-time operation; Claude Code and Claude design for prototyping and visual exploration; and Figma's own AI features for in-file generation. Each maps to a specific moment in the system's life cycle, and each deserves its own workflow.  

A library decays. A living system compounds.  

GENERATIVE SEO

Want to ensure your website doesn't get left behind in the future of SEO?

GENERATIVE SEO

Want to ensure your website doesn't get left behind in the future of SEO?

GENERATIVE SEO

Want to ensure your website doesn't get left behind in the future of SEO?

Talk to us about your challenges, dreams, and ambitions

X social media icon

Talk to us about your challenges, dreams, and ambitions

X social media icon

Talk to us about your challenges, dreams, and ambitions

X social media icon