How To Build Design Systems with AI

In this video, I'm going to tell you exactly how to build a fast and beautiful design system with AI, and it only takes 2 tools to do it. And if you don't know who I am, my name is Charles Postiaux. I've worked with companies worth over $200 billion like Booking.com, Slack, or Mux with their product. And so the first thing we have to do is to go on ShaneCN. It's an open source design component library. What we can do now is to go on build your own, and here you can pretty much use any style that they already have preset, or you can customize with whatever you need for your project. The other thing that we're going to use is Paper. It's a HTML-based design software, and they have an extension, a Chrome extension that's perfect for what we need. So here what we have to do is simply select the components, the group of components. It's a lot of components, right? It's a lot of code. So it takes a little bit of time to capture the selection. But basically what it's going to do is grab the HTML code that you can see on the page. And you can do that with technically every website. And it's going to just copy it and you can paste it into the design software. Once that's done, We are into paper and we have this kind of reference library of all of the design components that we built with the Shade CN design style. What we need to do now is use whatever AI tool you like. I use Cloud Code and I just ask it to create a design system from it. Now you should not ask it to just like, here's the reference for the light mode, build a design system. Like that's a mistake a lot of people do, whether it's for building a design system or for creating designs is you ask too much at once. And not only is it going to make a lot of mistakes and kind of take some shortcuts that you don't want it to take, but it's also going to cost you a ton of tokens. So we don't want to do that. What we want to do here is to build a design system one step at a time, just like how you would build it. So we start first with the tokens. We say, based on the reference, can you build the colors? Can you build the typography, the spacing, the border radius? Something you can also ask the AI is, can you tell me what tokens can I create Based on the reference that I have here. You need to obviously connect the MCP server from Claude Code with Paper, which is super simple and easy to do. They have everything on their website. So then it's going to create those elements. It's still going to make mistakes. That's like a big warning. Even if you give it the right instructions, even if it has everything to build it and you do it one step at a time, it's still going to make some things weird. Like for example, the red might not be the right one or the green might not be accurate. Maybe the spacing is not right. So always double-check. And that's also great to have the reference right next to you, all in HTML. Everything is editable. Everything can be pushed live as a prototype, which is amazing. And so again, one step at a time. Once we have the tokens ready, we can move on to the building blocks. So like the buttons, the radio, the input fields, everything you need really to build a design system that comes from the tokens we've added. Once that's done, we can move on to the components. The components. It's kind of like the pressure test of the whole design system so far. It's like based on the tokens and based on the building blocks, can you create the cards that I see here? And so it can create some cards. It doesn't have to be 100% accurate with what you see as a reference. It can be again, like a card, a table, a graph, whatever you really want to have is going to be able to show you that it's being built. Now, if you want to do the dark mode, all you have to do is go at the top here, dark mode, you select again the extension, pick the whole thing again, copy it, and then you paste it again as a reference for dark mode. And then you duplicate it, like you pretty much just slide it, change the name to dark mode. You don't have to update most things. Honestly, the only thing that has to be changed is the tokens. That's it. Now I started with the dark mode and then created the light mode. And as you can see, some elements, for example, some colors will be exactly the same. You need to keep them this way. Simply because you can update them if you want on the design system, but you need to keep the fact that the card is this color for light mode and it's this color for dark mode. That's how you build an actual responsive design system so that when you switch back and forth, there is no discrepancies between the colors. So again, you go through the tokens, you're like, based on the dark mode reference, can you update the colors? Okay, cool. Then based on those new tokens, can you update the building blocks? Perfect, and then the components. It's still going to make mistakes even if you have all the context, even if you have all the specific colors, it's still going to mess some things up. So again, double-check everything to make sure that it's done. In my opinion, it's a worthwhile time spent and investment because it's going to save you so much time for every project and for every iteration that you make that you won't have to think about the design system. Is it the right color? Is it the right spacing? Is it the right typography? Like it's already done. So if you set the foundations right and take time to actually make something good, the upside is going to be incredible. And so once you have those 2 done, the sky is the limit. And so for example, I did a little exploration here. I liked this design element, but I thought that, you know, maybe we don't need the landing page title here. Maybe we can have it inside of the frame. Maybe you could have like a little dropdown menu icon here. And so based on that, I just gave the input to the AI to create for me multiple directions and kind of like variations of this sidebar to say, okay, I wanted maybe a footer on the card. Maybe I want them to float. Maybe actually I don't really need to have them floating. Maybe it can just be like a top label. And so then it's again, like it's all about strategy. Now you don't, you reduce the gap of the boring work where you have the idea, you are not sure exactly which one would be best. You have to design it. It doesn't take a genius to do that. You just have to design it. It's the boring work. So we can cut that and focus only on the strategy and the creativity in some ways. Like it's all about what do we want to build now? So once we have that, then I'm thinking, okay, option B might be the best one. Can we iterate on that? Do we really need the number here? Should we add more elements like a collapsible icon on the header here? And then we can iterate. It's going to create other variations. It's going to build different explorations. And from that, I can just keep exploring whether again, it's like on a big frame or it's on a small component. Now, once I have that, I can move it into Figma. You can do whatever you want, right? Like if you prefer designing on paper and then it's easy to go from design to code and to actually make an interactive prototype, that's perfect. For me, I still enjoy the kind of design interface and process on Figma. So once I, for example, have like this specific element that I like, then I could use like an HTML to Figma plugin, simply grab the code from the design element. I can ask the AI to give me the code, paste the code into the plugin on Figma, and I get the design, or I can just literally just copy the image as a PNG and then drag it into Figma, paste it, and quickly redesign something from it. And that's how you build a design system that you can reuse on every project. Thank you so much for watching this video. I really hope you liked it. Make sure to leave a like and subscribe, and I see you for the next one. Bye.