Create a Reusable UI Component Library with AI in Magic Patterns for Consistent Project Design

--- type: transcript date: 2025-06-24 youtube_id: JyqPXgm9vT8 --- # Transcript: Create a Reusable UI Component Library with AI in Magic Patterns for Consistent Project Design In this video, I'm going to be diving deeper into Magic Patterns, focused specifically on their custom components library feature. So, about a month ago, I introduced Magic Patterns and I showcased its capabilities like generating UI from screenshots, their infinite canvas feature, as well as some other collaborative features and things like being able to have a Chrome extension to grab different UI components from various sites. But today, what I wanted to do is focus specifically on a practical demonstration of how you can utilize custom components within Magic Patterns to maintain consistency across different projects. If you haven't used Magic Patterns before, once you made an account, you basically have two main toggles. You have the ability to create things like landing pages or the overall larger component pieces within their design tab. Or if you go over to components, what's really cool with this is you can go and you can create the individual component pieces that you have. And this can be something pre-existing that you have within a product that I'll demonstrate within this video. Now, if I dive into one of the components that I've created, this is a really simple header where I have a logo and then I also have this interactive button. But where this is helpful is across a number of different projects, I have this as the starting point. So I have the header across all of these different repos. So we see fire crawl and use this template. But to take it a step further, the one thing that you'll notice across all of these different applications is that they're in the same style as the fire crawl branding. So if you go over to the firecrawl site, you'll notice things like these types of buttons, also these types of colors, as well as things like this hero image. Now if I go into another component, so this is a hero component. I have this header area that I've been using across different projects. And if you take a look at the firecrawl landing page, what you'll notice here is this has the continuity between the homepage as well as this component. So now before I dive in and I show you how to create your own components of different sites, this can be a site that you have or even just a product that you're inspired by. You can go and you can borrow different aspects of various websites if you'd like. Now I'm going to show you how you can actually leverage this. So I can say I want to use the and then I can at@mention and I can type in header for the header that I had just shown you and I'm going to say I want to use the header and I want to have a and then again I can use that at mention the step counter and then from here I can say to build out a multi-step app let's use the and then I'll reference the buttons that I have in the bottom left corner there and I'll say let's use the GitHub buttons throughout the application. Now, what you can also do is you can set up some presets. I have a fire crawl preset. And what you can do is you can specify different prompting instructions for things that you don't want to have to repeatedly add within this prompt window. So, say if you have things that you're repeatedly adding into every single prompt or quite frequently, you could just go ahead and add that within your preset. And when you send that in, it just incorporates that within the context to the message that we send to the LLM. Once you send it in, what you'll see here is it will think through what it needs to do. And once it's thought through, it's going to immediately start working through and building out your application. Within here, I see the starting point. Now, I do see behind the header here that I just have to add some spacing because it does look like our step counter is being pushed up. I'm going to say I want to move the step counter a little bit lower because it's being hidden behind the navigation. And then also for the different buttons, I have green buttons and blue buttons. I only want to leverage black buttons as well as orange buttons within this. I'll go ahead and send it that prompt. So here we see it bumped down the step counter that I have here. Now if I click to the next step now I see these different black buttons as well as this orange button for the orange button that is leveraged throughout the fire crawl product. Let's go over to the dashboard and if I go over to the playground here I have this orange run button. What I can do here now there's a few different options. I can take a screenshot. Once I had that screenshot, what I can do is, so I want to create an orange button and I want to add it within the FC demo library for the components that I have. Another option that you can do which is really neat with Magic Patterns is you can also install a Chrome extension. And once you have the Chrome extension installed, you can go and you can select an area that you want to convert to be within the Magic Patterns platform. So let's say I take a snapshot of an area within the playground here. As soon as you do that, you have that first pass of all of those different component pieces that you might want to import within Magic Patterns. And the one thing to note is even if it doesn't look 100%, like in this case, I see that the font isn't loading. There are a couple different things that I might want to tweak. What you can do is you can go and you can actually edit the code and ensure that you have the proper Tailwind styles and all of that just to make sure that it all matches. Now, once you've generated a component, in this case it was from a screenshot. I can see it didn't pick up some of the subtle nuances that I have of the actual button component. Yet another option that you can do within this if you just want to grab the code that you have within your project. So this could be within your code editor or if you want to go and leverage all of that different tailwind. What I can do is I can go and I can just copy those classes and within our button here, I can go and instead of this that was generated from the screenshot, I can go ahead and add exactly the code that I have within the UI. Now we see this button and we also even have that click state here. And then if I had a disabled state for this color button, I can go and I can add that. But in this case, what I'm going to do is I'm just going to remove this disabled button. And I'm going to go ahead and publish this new version of this button. And now that I have this button within our component library, if I go back to our application, I'm going to say instead of the orange button that we have, use the and then since this component is called button, I'll go and reference that. I'll also say and make sure all the other buttons use the black or gray color that I have within. And again, I'll at mention the GitHub style button that I have at the top of the screen here. So now I'll go and I'll send that in. I'll see it work through the change. And the great thing with this that I really love is you don't need to come into it with every single component that you have. You can really just iterate on a number of different components. So there we go. So now we have this orange button within our application. What I love about this is you can begin very small. Say if you have something very repeatable across different applications, say your header as well as buttons, you can add those within the components. But as your product becomes more rich like you have different tables or you have different interactive elements and all of those types of things where this becomes extremely helpful, say if you want to build out a new feature or brainstorm a new feature, you can do it within the actual branding of your application. The really great thing with this is once you've built out saved the page like I had within this example here, I can go and I can add it to a canvas that I have. And this is where magic patterns really shines because what you're going to be able to do is you're going to be able to have this collaborative canvas and you can invite different teammates. The really great thing with the canvas view is you can go and you can edit the existing pages within here. You can go and you can just click edit and you can change out different aspects. Let's say I don't want the step counter for instance. I can go and I can click update. And what it will do is behind the scenes it will go and it will update just that page here. But where this can be helpful is let's say you want to extend different parts of your application or maybe just reimagine different parts. Here is the hero area for the firecrawl website. What I can do here is I can reference it and I could say I want to reimagine this page with a new heading. And the great thing with this is it's going to leverage the pre-existing context of what's within this page. So, it's going to take all of those different things, map the different UI elements, colors, and all of that. And what's great with this is you can have a number of different colleagues or stakeholders within here, and they can have access to generate and edit different parts of different pages. And this absolutely speeds up the development cycle. Instead of having a designer have to go and take off these changes and come back next week and present them and then ultimately send that to a developer, it just really shortens everything. So say for instance, it removed the step counter, but now there isn't enough padding. I can just go ahead and go within here and I'm going to say I want to have more space from the header to the main section. I can go ahead and I can send that in. And what you'll see here is we'll have two different pieces working in tandem. Within here, we can see that reimagine copy from instead of turn your websites into LLM ready data, we have transform your ideas into digital reality. With further prompting, you can begin to see how this can be helpful. And within here, I can see now we have that space. Instead of having to have a developer or a designer go and bump that down, which can be a little cumbersome, especially if you're presenting something like a design on a call, what you can do is you can just go and you can do it on the fly. It's that easy just with natural language. Otherwise, that's pretty much it for this video. I really thoroughly enjoy magic patterns and I do encourage you to try it out. But if you found this video useful, please comment, share, and subscribe. Otherwise, until the next