Reimagining the Future of Design Systems with AI

Editor’s Note: This blog is adapted from a talk by Keerthi, product designer at Motive. In this detailed session, she reflected on the evolving role of design systems and the growing potential of AI in simplifying and scaling them. Through hands-on examples, tools like Motif, and her AI-assisted experiments, Keerthi demonstrated how designers and developers alike can build smarter, faster, and with more clarity. The talk offered both practical insights and a forward-looking vision for design system innovation.

Hello, I am Keerthi. I work as a product designer at Motive, and my focus has been on design systems. I have spent years building and maintaining them, and over time, I have come to see both the beauty and the complexity that design systems bring to product teams.

Recently, I received an award for my website. It is not online at the moment, but I plan to relaunch it soon with a completely new portfolio. Through all of this, one thing has become increasingly clear to me—design systems are evolving, and AI is going to play a major role in that evolution.

Design systems, when done well, are powerful. They save time, reduce repetitive tasks, and help teams deliver consistent, high-quality user experiences. A well-structured system allows designers and developers to work faster, avoid starting from scratch, and focus on meaningful problems.

But there is another side to it. Many teams build design systems that go unused. People create dozens of button variants, but no one knows which one to use where. Documentation becomes outdated. Teams spend hours managing tokens, naming layers, and maintaining consistency across massive product surfaces. Updating a single style can break three others. The entire system begins to feel fragile and exhausting.

As someone who manages design systems, I spend a lot of time on tedious work: maintaining tokens, reviewing pull requests, documenting component usage, and performing accessibility checks. These are essential tasks, but they are time-consuming. What if AI could assist?

Imagine an AI that automatically documents your tokens, suggests consistent names, generates descriptions, and keeps the system updated. Not just to assist the users of design systems, but to support the people who create and maintain them. This is the opportunity I see in front of us.

Despite the potential, most teams are not ready to integrate AI into their design systems. A 2024 survey by Supernova revealed that over 53 percent of organisations felt unprepared. The reasons were clear: security and privacy concerns, a lack of awareness, limited skill sets, and budget constraints.

But there is another side to that story. Forty-seven percent of respondents said they were curious and eager to explore AI in this space. They identified several areas of opportunity: documentation and content generation, maintaining design consistency, automated component generation, design-to-code conversion, and accessibility improvements.

Among all the tools available, Motif stands out. While many hoped Figma would lead the AI revolution in design systems, Motif took the first step. It focuses on three major areas: system creation, system maintenance, and consistency checks.

When I used Motif, I uploaded raw design files—basic Telegram UI screens, for example. Motif scanned the files and extracted every reusable element: colours, icons, badges, popups, tabs, and more. It gave me a full visual inventory of the design without any components having been built.

It even told me how many times a certain element was used and showed me where it appeared. For someone who often audits large files created by multiple designers, this was a game-changer. It did not create the components for me, but it gave me clarity, speed, and control. I could decide what to include and how to build.

Motif also offers a consistency checker. Once a design system is in place, it helps ensure that every screen uses the right components and styles. It highlights mismatches and suggests how to fix them. If needed, it can replace outdated styles across the file instantly.

I know many of us still rely on Figma. Switching to a different tool is not always feasible. That is why I began experimenting with ChatGPT.

I created my tools, like a colour palette generator. I wanted to build a custom palette based on the opacity levels of white and black. No existing plugin supported this. So I gave ChatGPT a detailed prompt, and it helped me create a generator with a simple UI. I could input a primary colour and get shades from 100 to 900, each with contrast values.

I also built a typography scale generator based on a four-pixel modular scale. I could choose a font, whether from Google Fonts or a local upload, and instantly see various sizes, line heights, and sample text. All of this was done through prompting.

Another use case I explored was documentation. Developers often write docs for other developers. Designers have to think more broadly—documentation should serve designers, developers, PMs, and anyone else using the system.

I prompted ChatGPT with a component name and asked it to generate documentation in the style of Material Design. It gave me everything: anatomy, design tokens, layout specs, states, variations, and accessibility guidelines. It was not perfect, but it gave me a strong starting point. I could iterate from there.

Developers also have opportunities to improve their workflows with AI. I explored several use cases inspired by the founder of Atomic Design:

• Component Code Generation: Instead of writing repetitive components like buttons or input fields, developers can use terminal commands that trigger AI to generate base code.
  
• Component Translation: Teams that start with one framework can use AI to translate their components from, for example, LitElement to React.
  
• Automated Unit Testing: Writing tests manually is tedious. AI can generate unit test scripts for each component, speeding up QA.
  
• Accessibility Checks: Instead of just flagging issues, AI tools can suggest how to fix them, like adjusting contrast or providing alt text.
  

Automatic Documentation: Developers can input a component name, and the tool will generate documentation describing its usage, props, behaviour, and best practices.

Looking ahead, I believe there is so much more AI can do in this space:

• Smart suggestions for components based on usage patterns
  
• Pattern detection across live product files
  
• Usage analytics for patterns and components
  
• Syncing design tokens across platforms
  
• Governance bots that flag inconsistencies and outdated documents
  
• Summarising team conversations into action items for design system tasks
  
• Accessibility validation based on country-specific compliance laws

These ideas are not far off. Many are already being explored in labs and prototypes.

Design systems are no longer static libraries. They are evolving into intelligent, collaborative platforms. AI will not replace designers or developers, but it will assist us in ways we have not fully imagined.

We are at the beginning of a shift. Let us not wait for it to happen. Let us lead it.