From Zero to Your First AI Design System in 13 Minutes (No Coding)

In this video, I'm going to walk you through my exact process on how I create a design system with AI and only requiring 2 tools basically. And I will show you step by step how I do it so that you can do the same. I'm using Paper right now. You can also do it with Figma, but I feel like it's a little less accurate. As you can see on this design project, a theme with all of the tokens that you have. And so that's pretty much what we're going to do. Right now you can see I'm starting on this new project with nothing on it. And our goal is going to build it together. First step is to go into ui.shadecn.com, then build your own, then you land here. And here, pretty much you can do whatever you want. You can customize it. You already have pre-made styles. And so it's up to you to decide then what do you want to have for your design system for your project. The great thing is that because you're going to use an MCP and an AI to work with you. You can reuse that design system throughout different projects. Like if I wanted to, I could easily just ask the AI to duplicate that, those tokens into my new project, and I would be perfect. The other great thing is that it also applies to Figma. Because I have an MCP connected with Paper and with Figma, I can just ask the AI to duplicate and to add all of my design system from Paper. Into Figma. So yeah, just come up with a style that you enjoy. I'm going to do— to try to have something different from what I already have so that you can, you know, that it's brand new. So now what we're going to do is use this Chrome extension, Paper Snapshot. And what it's going to do is it's going to capture the HTML components. And I would like to capture as many things as possible. We're kind of training our own design AI. We give it as many examples as possible so that it notices the patterns and can highlight, okay, the main button is going to be filled with a black color. The charts are going to be a lime color. And that's how you kind of train your AI to design better and to create the tokens. All right. So we've got everything pretty much. We just copy pasted it. It's done the job. The benefit of Paper is that it's HTML and CSS based. So it's literally just code compared to Figma where it's more like Figma is translating. And that's why it's so easy to kind of create tokens and turn design into code, make it interactive and do exactly that for the design system. Now I have my little terminal ready with Cloud Code and I can, I have auto mode on, which I think is like the best to just let it do its thing. I want to figure out the tokens first. So like the colors, typography, spacing, and border radius, which you see here as well, radius, spacing. Typography, line height, and font size, and letter spacing. So let's ask the AI. All right, so I'm asking it to list down all the tokens, all the elements, all the values that it can find from this frame I just dropped in this page. You always need to ideally, like even if the AI has access to it, you can see it's already scanning, especially when you have a lot of different frames and different projects, it's good to always kind of let They know where to go, what to focus on. And that usually gives a ton of context for the AI to go straight to the right stuff. What we want to do is not yet start the design system. It shouldn't be like a one-shot thing where you just ask it to come up with the tokens, with the components. You want it to understand it and add stuff. You know, it's like if you're teaching somebody a new skill, like I'm doing right now, trying to break it down step by step of like, here is every step that we need to go through in order to Do that thing. It has been able to scan all of the elements. You can see the values are very weird percentages. So I think I always prefer personally to round it up. Even the AI already is pretty smart about it. It mentioned like one caution is that the line height has odd ratios. And so it could already turn it into round numbers, pixels instead to make it cleaner. And that's exactly what you should do. So I'm asking it to create a frame next to the reference frames on this one. To show me those values so that I can compare it. So it has added everything that it's been able to find. And you can see that it's really good and accurate. Again, take your time to do this. Should not rush and just accept everything on the first try. You need to be precise and know what you want out of the design system to make sure that you get something very solid. You can see that it's even documented the changes that it's made. So it has added literally everything except this here, the success. Let me mention it. If there's something missing, I make sure to make it as easy as possible for the AI to know what I'm talking about and to identify it quickly so that then you can do the fix in a way that's as accurate as possible. Because as always, AI might still make mistakes or skip some stuff because there is a lot to do. So it's good to take your time. Make sure that everything works correctly and it gets built smoothly. All right, perfect. And you can see that it has added the green color as well. And I think we've pretty much got everything on this. So now what I want to do is add those tokens as values, just like I did here, add them into the theme system for this specific project. Color, radius, spacing, font family, font weight, font size, line height, letter spacing. All right, it has added all of the tokens that we've had. Now what I want to do is kind of like what I have here. We don't really need the building blocks and components at this point. My goal now is to try to recreate those cards using the tokens that we have, just to see if it looks and is as accurate as possible to the reference. Actually, I'm going to ask it to add, that's just my own preference, but I like to have like a 0 spacing as well and turn the letter spacing tokens into percentages instead of pixels. So that's what's amazing about it. I could do it manually, right? I could just spacing and then add 0, but I can just ask it to do it and it's done. 5% feels like a lot. I'm going to do, I'm going to do -1%. And for this one here, I'm going to drag it at the top. You need to let it know when you update stuff because then it's going to— what it's going to do is it's going to compare what it finished working on versus what the new task is about. And if it notices that you've switched a value here or you've switched a design into something else, it's going to actually reverse that design. Like, oh, it's not what I designed, something is wrong, let me reverse that. And that's not at all what you want it to do. Make sure to mention that. So like, Perfect. I've updated the values and positions as well. Don't change them. It's all good. We have everything. Let's try to create one. Maybe account access could be cool. So this is the test to see if the design system, the tokens, how the AI understands it works. And we'll try just to recreate those design elements with only the tokens. It has replicated The I can't access frame. That's, I think, as accurate as it could be. Like, I don't see any difference. 16, 16. It's all good. Like, it's, it's perfect. So that's a really, really good sign. Now let me try to come up with a design. I have one I wrote, prepared like a little design test to create my own kind of design idea, design feature from the tokens that we have. So I've tried to outline as much as possible the elements. So it's going to be kind of like a plugin connection model or dialogue. So let's try to create it and see if it could come up with something good. I usually like to say create an expression A just because it's easier, I would say, to experiment and explore other variations of it. Something I didn't mention on this message though is To use and to stick only to the tokens. So I'm not sure if it's going to actually use the tokens specifically and religiously almost, or if it's going to wander off a little bit and create something that's not as accurate as the the design system we've we have in place. This is kind of like the first step, right, of a true design system. It's only the tokens. The real design system would need to have those components, right? It would need to have the buttons, the input fields. So it's only like a relatively small starting point of the design system. But once you have those, right, like it can recreate everything. So if you work on one website or one product, it might be better to create those components. Now it doesn't have per se like a way to have components, just only the tokens, but then you can create those components in Figma. Here you don't have that, so that's kind of like the downside of it. Okay, it has used everything. Everything is tokenized. Now I'm going to ask you to create an expression B. Create an expression B where the comfort button is black and not red. Let me just push that at the bottom here. If, for example, I don't like the height on this, I can just do it myself. I can manually update it so that it's now 12. And even here, I can also update it so that it's like 4, for example. And it's super simple and easy to do, just like in Figma. If you have a design system, you can just go into the dropdown menu and update it yourself. You see, like, that's another version of it. Now, something I can do is you can see the colors, like the main colors, don't have a kind of muted version of it. And that's pretty much how you, or how I usually work and create the tokens and iterate on designs. It just makes it super easy because now it's mostly about me thinking what is the best option rather than having to design everything by myself. And it's actually really good for anybody. If you're not a designer, it's actually even better because you don't even have to think about the design standards and How to make a design system or how to make sure that the spacings are right. The AI is just extracting all of those values and then making really good designs out of it. Like I just said, it's not perfect. Like for example, those like 14 is a bit too high. I would prefer to have 12 on this one just because it's secondary. But for most people it is great. So the problem now is that it's creating muted colors, but they are only percentages. Perfect. It has updated them. So now I'm going to ask it to update the exploration B. That's a lot of stuff, but I think if it can achieve all of that, then I think that's going to be a great way to show you how powerful it is. We worked with like 40 minutes, 30 minutes to create a fully working design system, or at least tokens. And then it's just so easy to iterate on it, to add some elements, to update the values, and to quickly explore different variations and ideas based on that design system. So it is possible. And if you follow that tutorial step by step, it's going to be such an easy process for you. All right, so it has done exploration A and B. The problem is that it's not that great in terms of readability. All right, it has finished updating the design just like I wanted. It has added some darker values so that we can have those nice little frames with the muted background and then the darker text so it's easy to read. I didn't update the divider here, but I can just have it also be dark like that. It's really, really good. That's pretty much the tutorial. Thank you so much for watching this video. I recently started posting more on X. Make sure to have a look and follow me there. Bye. Bye.