The Text-to-UI AI Prototyping Tool: Magic Patterns

--- type: transcript date: 2025-04-28 youtube_id: PyBzrZIYe1g --- # Transcript: The Text-to-UI AI Prototyping Tool: Magic Patterns What if you could take a product idea from concept to prototype in minutes instead of days? Today, I'm going to be exploring magic patterns, which is a way to transform the product design workflow by putting AI assisted design into the hands of product teams. For decades, turning product ideas into testable prototypes has been a multi-step marathon. It involves product managers having to write specs, designers creating static mockups in tools like Figma, developers eventually building out a functional prototype, and when feedback comes in, already days, if not weeks, have potentially passed. So, what Magic Patterns allows you to do is to take a fundamentally different approach by focusing exclusively on the front-end design and interactive prototyping. And this is very intentional. There's no database provisioning, no integration with O providers, no integration with Stripe. Where this is really focused is on product teams that's accessible across different disciplines. The platform is friendly to developers, designers, product managers as well as other stakeholders. The way that Magic Patterns works is I can say something like create a clone of X. And once we send in a request, what we'll see is it go through and begin to write out all of those front-end components within code. You are ultimately going to be able to download this, have a two-way sync with GitHub, and you're going to be able to collaborate with your team in real time on an infinite canvas. The large language model that's powered under the hood at time of recording is Claude 3.5 as well as Claude 3.7. And Claude 3.7 is particularly good at creating front-end designs. Here in just one prompt, what it did is it created all of these different components of what we have for our application. And we see we have our layout. We have our sidebar here. We have the feed component. If I say something like I want to build a LinkedIn clone, it's going to build out all of those individual components that comprise a website like LinkedIn. What you can do within here is if you want to select particular DOM elements. What I can do is I can go and I can select this tile for instance. And what I can do within here is I have the option to edit code but I can also add in the context to edit that particular area. I can say something like the photo is overlapping the profile image. Make sure to give space. From there, in just a number of seconds, it was able to resolve that UI bug. Another thing is I can say all of the images are a bit stretched for the profile photos. And I'll send that in. Now, it added that particular CSS property to align all of those images. And now I can say I want to fix all of the profile photos across all components. And from there, what it did is it updated all of the relevant components. Now we can see all of those different profiles look great. From here, what we can do is we can see how the product page looks like on different devices. For instance, I can take a look and see at what it looks like on mobile. What I could do is I could select the card. Maybe I could go down to three items on here. I can maybe give a little bit of space to ensure that it looks good across the particular devices that I'm targeting. Now, within this view, there's a number of different things that you can do. You can pass in images directly as context. Say if you want to build out a particular type of component that you want to reference of a screenshot of what you have, you can do that. You can also select elements just like I showed you. Now, you do also have the ability for these slash commands within here. We can gather inspiration. We can polish our design or we can delete anything that's unused. Additionally, we can reference specific components. And then finally, we can choose between whether we want fast generations or the best generations. Once you have the design, you do have the option to export it directly within Figma. There is a magic patterns plugin within Figma where you can go and what you'll be able to do is get this layer ID and paste it within the magic patterns Figma plugin and it will generate everything that you see on screen here. Now, additionally, you can download the source code to this. The way that this is built is with a Vit application. Basically, all that you need to do is download the zip file, install the packages, and then you'll be able to deploy this, and then finally, you can also sync the changes to GitHub where there is two-way syncing. So, say if a developer wants to make a change with how something is structured, we can also have that reflected within Magic Patterns. Now, one of the key features of Magic Patterns is the ability to have an infinite canvas of all of the different generations across your product. Within here, what I've done is I've imported what we just generated into a canvas that has a number of different generations. Where this all of a sudden becomes really helpful is you're going to be able to have this bird's eye view of all of the different pieces that you want to show within your product. One of the really neat things with this is as you begin to generate different pieces of what you have within your application, you'll be able to see all of that within here. Just to give you an idea on how you could potentially leverage this, let's say you have entirely different designs that you want to try out for different types of products or features that you're building, you can go ahead and sidebyside have them compared just like this. And what's great with this is you're going to be able to collaborate across your team across all of these different canvases. You could imagine being on a Zoom call, potentially discussing how different things could look. And instead of passing it off to a designer to mock something up with Figma, and ultimately passing it to a developer to prototype, instead you can zoom into one of the boards that you want to edit. And what I can do is I can go and I can say I want this to be overall a dark theme. I can specify the edits of what it will generate on the fly within this infinite canvas. You could imagine having 20 different product pages. And if you want to completely reimagine different aspects or discuss your product, how it looks at a whole, what this will do is it's going to be able to give you that design representation. And with just a natural language prompt, we can see exactly what this page looks like within dark mode. As you can imagine, instead of having to have a designer take that away and maybe come back next week to show a mockup of what a different design concept looks like, you can instead just go and select the particular piece that you're referencing and change that directly on the fly. Something like this makes it very fast to create prototypes as well as collaborate in real time with your team across this infinite canvas. Now, a really neat thing with how this is built is on this infinite canvas is I can select a page that I've created like this LinkedIn clone and I can go and I can click reference within here. I can use this context of this page as a reference to extend another feature or another page that I want to consider for our application. I can say I want to build out a detailed footer. Then from here what I can do is I can select the design system that I want to use. Say if I want to leverage shad CNUI, I can go ahead and do that. Alternatively, I can add in images as well. Is it's going to take the context from this LinkedIn clone and it's going to use that to create this footer. The neat thing with this is you can have multiple generations at once. I can say I want a profile page where I can edit my information. And now we see it's creating both the footer as well as the profile page based on the context of that LinkedIn clone that we had created. Where this is helpful is we can have continuity in terms of that design style across all of those different pages or components that we build out for our application. So now if we take a look at the generation, we have the initial starting point that we had for our application. So we have the LinkedIn clone interface. Now we also have that page cloned with the addition of this very detailed footer. So we have the language selector. We also have these social icons as well as the subfooter on the bottom with things like the accessibility agreement so on and so forth. And then finally we have this profile editing page. In terms of some of the subtle details, if I quickly look at the profile editing page adjacent to the context that it was referenced, what we can see is we have continuity between these two different elements. The background here, we have the correct profile photo. We have the correct name as well as title. all of that information. We're just extending that initial prototype of our product page. So, the great thing with this is we can go and we can share these infinite canvases with different colleagues and collaborate on different features. As we might imagine, we can go through and we can edit these different pages. And the great thing with this is you can really rapidly get to a place by just focusing on the design and the front-end components without having to worry about some of the minutiae about breaking a Stripe integration or a backend integration. we can just move very quickly and have the prototypes of our application up and working and in a place where we can ultimately ship it straight to development if we'd like. So, a tool like this allows you to shorten feedback loops and ultimately spend less time in tools like Figma by going through and building out things that you've probably built a number of different tools. Additionally, this also allows you to collaborate across disciplines. You don't need to be technical. You don't need to be a designer, a developer, or a product manager to use a tool like this. You can be of any of those disciplines. And depending on the discipline, what's great with this is you're going to be able to export it to Figma. You're going to be able to reference the code. And ultimately, with something like this, teams are going to be able to better communicate the vision of how that product is ultimately going to work. The other neat thing with Magic Patterns is there is a Chrome extension. you're going to be able to do is select the HTML of different DOM elements that you want to reference whether it's between your product or a pre-existing product on the internet and draw inspiration from that. Here I'll select a carousel from the Apple website and here we see it pulling into magic patterns. This is I can directly export it to Figma. I can reference the code or alternatively I can edit it with AI. Now what this is going to do is it's going to convert whatever we have into an editable format. is going to make it in a format that magic patterns is going to be able to pass that context in and back from a large language model where we can go and we can make further tweaks to it without even passing in the context or saying this is the Apple website for the iPad carousel we see within here it already knows exactly what it is and it's creating a component of the product carousel as well as the individual product cards and ultimately bring into that canvas that we can go and use and reference across our team. Here is what it created for us. Now that I have this, I can go and reference it on this infinite canvas. The great thing with this is if you already have a product offering and you already have a design, you'll be able to reference those pre-existing HTML elements as well as that CSS from your product site, pull that into Magic Patterns and begin to build on products that already exist. Last, what I wanted to quickly flag is that you can create reusable components. So basically the way that this works is you're going to be able to create these different libraries of components. And within here you're going to be able to have things that you might reuse across your design. Say for instance for your brand if you have unique input styles, button styles, card styles, whatever it might be. By having a component library, when you go and create a new design, you're going to be able to reference those components to have consistency for all of those generations of those pages you might create. All in all, what's great with this is it's a really great combination on how you can pair large language models and their current capabilities, as well as bring it into what honestly could be the future of design. Instead of spending time in Figma, you could go ahead and just quickly prototype different ideas that you have for products and ultimately get them into your users's hands faster. That's pretty much it for this video. I encourage you to check out Magic Patterns. I'll link this within the description of the video, but if you found this video useful, please comment, share, and subscribe. Otherwise, until the next