Design systems in the time of AI

It’s been absolutely wild to witness the rise of the new crop of AI tools. This moment feels equally exciting and terrifying, but given humans’ track record of driving promising technologies off the rails, I’m erring on the side of terrified until (hopefully) proven wrong.

Setting aside a lot of the ethical issues and broader societal impacts, I’d like to narrow the focus to the world of digital interface design, and even more narrowly to the wonderful world of design systems. How will AI impact the world of UI design/development? How will AI impact how design systems are created and used? There are some extremely obvious answers to these questions, and there are also millions of other questions that haven’t been asked yet. These are uncharted waters we’re navigating here.

Design systems are about efficiency

“Why should you invest in a design system?” The answer in a bajillion posts, videos, PowerPoint decks, and conference-room conversations will all include something along the lines of: “design systems create a single source of truth for common interface solutions to promote consistency and increase team velocity and efficiency.” Something something something we’ll work faster and save money. Please fund this initiative.

So where does that efficiency and increased velocity come from? Well, in large part by freeing up human beings’ brains and hands to focus on solving more interesting problems than ensuring a button is 44px tall instead of 43px tall. Or rebuilding the card component for the umteenth time. My partner Josh Clark said it best: the most exciting design systems are boring.

When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.

Josh Clark, The Most Exciting Design Systems Are Boring

That’s kinda the whole point of design systems. Let’s establish a toolkit of common UI solutions that other teams wield to build specific products.

AI is a natural design system consumer

So how does AI slot into all of this? Perhaps the most obvious place to start is AI as a conversational interface to build product experiences. It would go something like this:

step 1: train the AI to understand your design system

I don’t know the technical details of achieving this, but my guess is that it certainly isn’t impossible. Hell, Airbnb did it years ago:

We developed a working theory that if machine learning algorithms can classify a complex set of thousands of handwritten symbols — such as handwritten Chinese characters — with a high degree of accuracy, then we should be able to classify the 150 components within our system and teach a machine to recognize them.

“Hey AI, here’s our design system’s component library. It’s got a few dozen components that each have these properties attached to them. They’re all TypeScripted up and the available props and values are well defined. Knock yourself out.”

step 2: prototype and build via prompts

Make me a website header with our company logo in the left slot, primary nav links that read “Mens”, “Womens”, “Kids”, and a search form in the right header slot.

And the AI goes “SPLAT”:

Alright, now add that header to a webpage, and then make a hero that has a title “Shop our summer sale” and has a call to action button that reads “Shop sale” now. Below it have a section with a title “Organic clothing for everyone”, and inside that section have a list of three touts: men, women, and kids. Place appropriate product imagery in each of the touts and have the links drive to the category landing pages.

And the AI goes “SPLAT”:

Looking good.

step 3: ai+human refinement

Here’s where it’s important to stress that AI can be used as a tool for creation, and doesn’t have to be the end all be all of the production process. Especially in these early days, it’s probably necessary to have human hands and eyes massage things into place in order to take things over the finish line.

Now these AI prompts are pretty amazing at iterating over things, so it’s totally possible to smooth out wrinkles using the AI tool itself (“Alright, update the “Kids” title to “Kids 5-10″ and update to a different product image”). But it’s also totally possible to get it into a workable, good-enough state and then bring things over the finish line using human labor.

For the longest time, I’ve been extolling the virtues of how a ready-to-use design system can help teams go from whiteboard sketch to working prototype in a matter of minutes. These AI tools can take that process down to seconds. Moreover, it lowers the barriers to entry so product managers, marketers, and the CEO can quickly generate new product screens without having to know how to sling Figma or code. (Designers, I can feel you squirming in your seats right now.)

AI as design system creator

Make a new component called badge that has 4 variants: success, error, warning, and info. It has a text string prop, and a size prop that has sm and lg as available options. The background colors for the 4 variants should use the success, error, warning, and info background color design token variants.

Splat goes the AI.

The fact of the matter is that a lot of design system component work really is mechanical and predictable. We already use tools like PlopJS to splat out a component boilerplate that matches the shape of the rest of the library. I’d welcome AI’s assistance in generating a lot of common fare boilerplate things for me.

There’s still a ton of nuance involved in creating effective (how rigid or composable should this component be? What layer of the design system should this exist? Is this a true DS component or a recipe?) that still necessitates human involvement. But it’s hard to not see the potential for AI to take away a lot of the mechanical burden involved in creating components. Testing in particular feels like a super fertile area, and our initial explorations yielded some pretty good initial results!

They took our jobs

Notice it. Notice the thread. Notice the unease around the fact that the machines are coming to take your job.

When my wife began her career trajectory as a visual designer, she worked as a production designer. That entailed making different crops of banner ads, touching up photography, generating email templates, and doing other rote tasks. She got extremely skilled and efficient at removing backgrounds from images, blasting through complex paths using Photoshop’s pen tool.

Now, tools like removal.ai automate that background-removal process, and do a pretty damn good job at it. AI cropping out backgrounds is undeniably more efficient than Photoshop’s pen tool, even if you do get damn good at wielding it. What does this mean for 20 somethings fresh out of school looking to get a foot in the door in the field of design? Does this mean fewer opportunities for fewer people?

Certain aspects of our jobs are absolutely at risk of being automated, especially now that technology has reached beyond the world of toll booth workers and grocery store clerks into the worlds of translators, journalists, and other knowledge workers (cringe). What do we do with that?

In our design system client work, we’ve already encountered scores of designers and developers who are absolutely terrified of expanding their role beyond “rectangle creator.” Designers and developers who think of their jobs as rectangle creators have a lot to be worried about. But in my view, designers and developers who think of their jobs as solving problems — and incidentally have to create/wield some rectangles in order to solve those problems — have less to fear.

We still need critical thinking. Ethical thinking. Systematic thinking. We still need to foster relationships. To build bridges. To coordinate. To orchestrate. These are human things. These are the skills that designers and developers need to cultivate and grow in order to continue to be viable in our AI age.

Brave new world

So AI is a shoo-in to help wield a design system, and to participate in the creation of a design system’s assets. But there are many many many rocks that haven’t been turned over yet. More generative UI design (such as Galileo AI) is inevitable. If AI tools can conjure up photorealistic human portraits and build fantastical worlds, it sure as shit can splat out some Bootstrappy UI without lifting its finger.

And here we are at the frontier, friends. As I see it, AI makes it crystal-clear we need to be focusing on why we create things vs what/how we create. Let’s move forward with humanity, purpose, and intention.