Design Systems with AI

Artificial intelligence is a vast and complex thing, but it’s surprisingly easy to start playing with new AI tools. I’ve been exploring these to find what’s possible and practical to use in our everyday product design work. There is a lot of opportunity in the areas of user experience, product design, and design systems to bolster our capabilities with these new tools.

The quality bar

Generating design or code with AI coding tools is very easy these days. It’s impressive to watch these tools build interactive web apps in mere seconds. Some even import Figma files so you don’t have to rely solely on text prompts to explain design intent. But generating code quickly doesn’t mean it meets the level of design quality we expect for a good product experience.

The current challenge these tools face is improving design quality. Often the tools produce functional but ugly and inconsistent results, which need a lot of fine-tuning before they can be considered ready to use with customers. What if AI models could reference design standards?

Design systems as guardrails

My favorite use case for new AI tools is for creating interactive prototypes using a Design system as guardrails. In product design, design systems have always been about crafting standards so humans can produce high-quality design work, but now those same standards can direct AI agents as well. Instead of the tool trying to guess what your design should be, your design system can provide the guidance. This is the exciting part for DS specialists like me because it amplifies our system work while improving the quality of AI output for product teams. Its exciting to see how new tools like Figma Make and its MCP server can help us amplify the value of a design system by providing consistency to AI output across an organization.

Design system specialists become obsessed with naming things correctly (components, layers, properties), optimizing component structures, and fine-tuning variant properties. All of these things are intended to make a DS library in Figma more useful for the humans using it, but we now see that it’s very useful for the machines too. A nicely-organized system works much better than a messy one for giving context to an AI code editor.

Basic: Prompting in the dark

The most basic way to use AI code gen is to describe what you want with text prompts to a tool like VS Code or similar. This approach quickly becomes limiting for designers because the results will feel generic and bland. To improve things, you can learn how to write prompts that the bots will understand best, but you’re still limited without providing any design context to the LLM. Thankfully, these tools have now evolved, and we don’t have to live in a text-only world. Let’s add some design context to the mix.

Easy mode: Figma Make + your design system

Figma’s Make product is their new AI code gen tool. Make is very approachable for designers just starting to explore AI since it’s integrated into the Figma product suite and eliminates extra setup. Like other AI tools it helps to learn how to write high-quality prompts and provide feedback to refine the results. Within a few minutes you can take a design mockup and generate a webpage to make it real.

Figma recently added support for connecting Make to your design system library files. This is a logical step toward using all the work you’ve already put into your DS to help guide AI generation. This library context enables the LLM to provide code that better aligns to your DS in design and code quality.

Level up: AI code editors + your design system

AI code editors are evolving quickly in a very competitive market. Figma recently announced a new MCP server that works with leading AI tools like VS Code, Cursor, Windsurf, and Claude Code.

If you follow AI topics, you may have seen this MCP acronym before. It’s short for Model Context Protocol, which is a format for connecting apps (in this case Figma) to AI coding editors (like Cursor and many others). For this article, all you need to know is that Figma made one, and it gives designers way more control over AI output in those vibecode sessions everyone’s enjoying.

AI tools could already generate realistic screens for your prompts before MCPs like Figma’s, but they were making guesses on design decisions, causing big fails in consistency and quality. After generating code and looking at the results, it was time for tedious cleanup and refinement. Now we can help AI editors understand more of the context around the design, including existing design system libraries and connected components.

Figma’s Dev Mode MCP server introduces a structured, machine-readable layer of context that AI coding assistants can use to generate code. It reads from the actual design file, not a spec sheet or screenshot, and passes that context directly into your editor.” TJ Pitre

Workflow Benefits

It’s pretty interesting to play with AI but what’s the real benefit to your day-to-day workflow?

Testing the idea

With Figma Make or any other AI tool, the setup and prompt writing are keys to success. So imagine using your existing design system with Figma MCP to create a prototype in your favorite AI code editing tool.

Requirements

Steps

  1. Follow Figma’s MCP setup instructions for VS Code, Cursor, Windsurf, or Claude Code. This will give the editor access to your Figma file.
  2. Start prompting your tool to build and include references to the design file.
  3. Profit :)

Prompts

Writing prompts takes practice, but try using a mix of specific details and general directions.

A. Button example from Joey Banks:

Notice the various levels of detail, listing two exact pixel sizes for buttons but then leaving room for AI to define the requested smaller and larger ones.

B. Prompt starters: Get started with these prompt ideas from Romina Kavcic, while adding your own specific details.

Advanced: Leverage a chat AI as a prompt writing coach to help you describe the details specific to the outcome you want generated. For more complex things, you can build a project plan with AI. Ask it to interview you about the project so it can create detailed prompts for a staged approach to code generation.

Demos

Check out these video demos:

  1. Joey Banks, Baseline Design: Exploring Figma’s Dev Mode MCP Server
    • Joey’s demo shows how to take a simple button component in Figma and quickly build a real interactive demo page of all button variants, including new ones not in the design.
  2. Romina Kavcic, The Design System Guide: Build clickable prototypes with Figma MCP and Cursor
    • This demo shows a more complex example of an interactive page.
  3. TJ Pitre, Southleft: From Figma to front-end using AI
    • TJ has published a few articles on this topic and even created a custom MCP that aims to improve on Figma’s version.

What’s next/now?

These details will change as the tools are evolving quickly, but here are some ways things could evolve to improve the usability of AI for designers:

Start experimenting today

The tools are moving fast, but now is the right time to try your own experiments to understand where they add value to your design process. Jump in and try it yourself.

Will AI replace designers/developers? Who knows, but I’m optimistic that the core talents of designers (creativity, curiosity, imagination, taste) will always be valuable. Let’s design the future together instead of watching it from the sidelines.