The Need for AI-Ready Design Systems

I'm Kevin Coyle, I'm an AI architect at Pfizer and I also run my own business, Drutec, which is an AI consultancy based right here in Manchester.

I've been working with design teams for a number of years now, approximately about 10 years, and in large business and enterprise I've noticed that sometimes

people can make things that are at one point incoherent, so they might make a button that's different to the next button in a website that's minor, or even Even worse, they might commit accessibility violations, which in a regulated industry, that could cost millions of dollars.

Solving Consistency and Accessibility Challenges

So to combat that over my career, we created something called design systems. And what a design system is, is a collection of solved problems. Context, if you will. You might be going with this soon.

And these instruct human beings how they can create designs that are in accordance with the brand and with the organization as a whole so either not just the way they look how they behave

and how they function so ai comes along and all of a sudden people have started to develop things at the speed of thought and you're getting all these lovely websites so you might have um posters as well let me show you some some this some of these are gross but let me show you right you might have seen these types of posters around anyone seen these lovely chat gpt posters Yeah? Don't look at that one.

And what that causes at a small level for a small business, it might be a bit embarrassing when it doesn't fully match your brand. Or it might say something inaccurate, not the end of the world. But for an enterprise or a large business, it's catastrophic.

Introducing Spectrum

Now, to help improve this and to make it easier and to embrace the democratization that we're experiencing with LLMs being able to enable people to develop whatever they want, I created a tool called Spectrum.

And if I can find my cursor, can anyone see my cursor? Where is it? Where are you? There we go. Okay, I'm gonna move it across. Other side, okay.

An AI Harness for Governed Design

So this is a tool that I created called Spectrum and the idea behind Spectrum is that it's a at first, it's an AI harness. An AI harness is just a way of utilising LLMs, so it's like Cloud Code, Codex, something like that, that enables people to be able to create design systems that not just comply with the organisation, but also go through multiple gates and legal gateways that you might have to pass through to be able to create something that's appropriate for a large business.

So all of the components in here you might have seen before on a website in isolation. So there's an alert, you might have a badge, and various things like that.

Now to a designer they look at those and they might make it in Figma and once you've made something in Figma it's there in figma and a developer has to come along and then reinterpret that and create it in code

Creating Components Directly in the System

not so in spectral in spectral a designer can go in it straight away use the controls in here to change things and soon there's going to be a canvas as well and they're going to be able to make changes and make new components it's really simple so i'm going to create a component

really quick and i'm going to create a comparison component actually let's go put my mic down so i and type and a comparison component is like a before and after component i'm just start that off i can't see what i've got so if i make a typo just let me know it really doesn't matter if there's a typo in there or not the other level will just cope now the idea with this it is it's

not vibe coding the the tool is going to look at it and it's going to ask you some questions about what you're building so it's going to go through and it's going to give me a questionnaire I can't read that. So I'm just going to accept that it's completely fine. And then more questions as well.

Finally, it's going to ask, why do I want this? This is important because as you'll see later, when it starts to generate it, there are specifications that are generated for each component that will inform an agent or a human being about how to use these individual components.

From Prompt to Compliant Component

All right, whilst it's generating, I'm going to tell you what the consequences of not doing this is.

Why Unconstrained AI Output Creates Risk

So you can create a website in five minutes, really quick, with Claude code. You've probably all done it. And try and build that ten times. You're probably going to get ten very different websites. The design might be aligned to the model's training data, so you might get a Claude -style style one or a GPT style one. But through all of it, you're going to get very different things.

So we're just creating the component now. It's just put a plan through and it's keeping me in the loop for every single piece of information. So we've gone through all of that questionnaire and we've done all that.

Specifications, Audits and Quality Gates

Eventually, what it's going to do, it's going to load a specification. Each component complies to a specification, a set of rules about how it works, and that's the human -readable version of it. What's great about this is that later, and I'll show you this, it's going to be read by an MCP, so we can create additional materials. So this is going to take a few seconds, and we're at the mercy of Microsoft Azure's speed with this. Okay.

And there is an image comparison component. You can see something like that. Now, that's not only just created it in the style of my design system, it's additionally created it within a lot of hoops that I've made it go through.

It's going through accessibility audits. as you see here it's going through all of these things which is highlighted little problems you know as it's building these deterministic gates have to be passed through these are the types of things that you have to do as an enterprise customer so that's all great and everything

and it's it's built it i'm going to stop it now because it might take a long time to go through the gates because it does go through a lot um let's release it so i've got it there publish a version, publish version 1 .7 .1.

Reducing Enterprise Delivery Time

Typically, and don't laugh at this, in a large organization, to create a component like that would have cost around two sprints. Two sprints is about two weeks, so you're looking at a month to create something like that.

We'll just wait for this to build.

And then what I'm going to do, and this is the risky bit because AI is doing all of this and i'm it's a dice roll once it's built it i'm going to have it create a website a slide deck and then as a bonus if we've got time a video

so we're just waiting for it to build and publish and once it's done that we'll get codex starting on creating the materials whilst it's building we've got

one quick question or anything anything no i mean i could do a joke or something i don't know but

So I assume this is aimed fairly squarely at the sort of marketing, creative department? It's aimed fully at any medium to very large business. I would like small businesses to be able to do it, because we've seen some embarrassing things come out of small businesses. But generally, the people with the liability and the people where this is crucial, the people that are going to get sued because the colour contrast is incorrect on their website, they need a system like this to provide enforcement.

There we go. It's built it. That's not very impressive, but we're going to have another gap now.

Generating Design-System-Aligned Content

Right, which way is my cursor? There we go. And I'm going to show you something very scary. It's the terminal. All right. Let me just put this down so I can type. I'll try and type coherently.

In each one of the directories in here, or folders, I've put a prompt. prompt. And that's a very boring prompt that's just showing you how to build this website.

And all I'm going to do in each one... Yeah, I can spell build usually. I'm going to leave

the video until last. That's the riskiest. All right.

Now, whilst it's building, I'm going to show you what else Spectral provides. This isn't an advert for Spectral or anything like that, although it's starting to sound like it.

Agent Access Through MCP

Each project in here has agent access and you can wire it up to an MCP. This is one of the pillars of having an AI -first design system is being able to have MCP access and for it to be readable by an agent.

That's already been set up and you can see now it's using the mcp so it's reading spectrals get design guidance it's listing the versions and it's building the website let's see the other

one that's still doing and we've not started the video all right whilst that's building um Any any questions or anything like that? Yes?

Scope and Integration With Existing Workflows

So the question was is it just used for the user interface or can it be used for for greater like full end -to -end applications? Is that what you mean or architecture? It's for user interface design. Yeah, it's generally used for user interface design. Now you can use it to create more elaborate user interfaces and demos. So you can have full applications represented in Spectral as a demo, or you can create multiple things and represented in there as well that's a great question so multiple teams do

have multiple ways of working and sadly people still use design tools such as Figma and personally I don't like that because I value value things like design tools as interstitial wastes of time and that they're there and they don't actually produce anything they have to be passed over to someone else but they are good for creating rough ideas still and they are good for being able to express express yourself in a format that you're familiar with so it's saying

they can't find that component so all we need to do really is add a plug -in into into Spectral and Spectral can do that. It's still building. See, live demos when you're using AI is fun because a lot of it is just waiting for it.

So, just from my previous marketing background, the usual driver would be a visual identity identity guideline or similar to what it should look like, red colors and other such. Can you input that into the system, modify it, and then output it again for other teams to then reuse a collection of shared?

Design Tokens and Reusable Visual Identity

Absolutely, yeah. When you first create your design system using Spectral, it uses this concept called design tokens. And what design tokens are primitive ways ways of representing things like colour, typography, space, scale.

The AI will actually be able to infer that for you from multiple different sources, so that could be a website, that could be an image. I'll show you what that looks like inside Spectral. So inside Spectral, these are the tokens, these are the colours, and all of these things that have been generated generated by the AI, even by giving it an image or a URL or something like that.

All eight slides have been implemented. That's good. It's going to check it. I don't know if you want to wait for it to check.

And we're on port 15. And the website is taking a while. Can't wait till inferencing is faster.

So this is not a question. Yeah, just keeping track of time. We have another five minutes. Oh, that's more time than I thought.

The Result: A Compliant, Coherent Presentation

so we should have time for it to go and show us the end results all right it has opened it up it's opened the browser it's testing itself so let's hands off and let's see what it does in the browser it'll probably try and navigate eventually it will try and navigate oh we're going to press it now eventually i'm going to interrupt it and just say start the server There you go.

There is the presentation that it created. This is aligned with my design system that I've created. It's fully compliant with all the accessibility rules, and it's coherent by design. And that's it.