Show the full transcript (1,342 words)
Now, I'm pretty certain most of us know Relume from their thousands of components and their massive component library for tools like Webflow or Figma or React. And we all know that coding agents like Claude Code are simply amazing, right? We can today, build things that would, would have taken like months or years to build maybe 3, 4 years ago. But when it comes to design, obviously, if you tell cloud code, hey, build me a landing page for a hackathon that I'm hosting in Miami in a couple of weeks, we get something like this, right? It's pure AI slop. And that's not Claude code's fault, right? We didn't really give it any design direction. And it's kind of a pain in the butt to give it design direction because designers, we want to have more of a visual control rather than just writing down what your component should look like.
But now Relume has their own MCP. You can connect Relume to Cursor, Claude Code, Codex, and you basically have all of their components integrated into your coding agent. And now in order to have access to the Relume MCP and connected properly to Claude Code, you do need to have access to the Relume Pro plan, which is over here. And the great news about this is that you can try it 7 days for free, and I think that's a great deal that the Relume team provides us with. And you can find that link down in the description below. And it's actually very, very simple. We can go ahead and click on copy MCP URL, and then we can go to our existing session. You can obviously do this from scratch as well, but I'm just going to say install this MCP, paste that in here, hit enter, and then it needs authentication. So we can just say authenticate me. And then over here, we can just sign in with Relume. Authentication successful, so we can go back. And now a prompt that I always like to give to new MCPs that I'm testing out is, what can we do with this MCP? So I'm going to just ask him, hey, what can we do with this Relume MCP?
So it says, okay, the Relume MCP is a component library you can pull production React code from. These are the different tools that it provides, so list categories, search components, list components, get components, get primitives, and get setup instructions. And things that you can do, well, you can assemble whole pages from specific Relume sections, you can swap any section in seconds from the Relume component library. You can obviously customize these components into your own brand style. And it also tells you what it can't do, which is great. So no image generation, it can't host, and it's React and Tailwind specific. And then we can just simply say, can you polish the landing page with Relume components?
Now, something to keep in mind is that Relume uses React, so they have a React library with React components. So if your design is HTML, for example, you might want to consider translating that code into React. And already in just one go of just me telling it to redesign the site using Relume components, we get a much nicer, more professional looking site with all of these different sections from Relume. Obviously, some of the colors are still there, like this gradient. But what if, for example, we want to change certain sections like the hero section? Well, I can go back here to Relume and search for something like header. And we can kind of skim through all of these different headers. And for example, I really like this one, Header 105. And we can say, let's use Header 105 for the hero section. And while that generates, I can go to like this prices section and write something like, can you give me three other component variants for our prizes section? And by the way, up here now we have our new hero section. And if you still don't like that, we can also choose other ones like for example, something a little bit more interactive. Like for example, this one where we can scroll out and kind of see a grid of images. So this one is called Header 83. Then I can just write, let's make Header 83 the hero section. And then while that's added to the queue, I can go ahead and select these and just kind of look for these in Relume. So this is pricing 19. Okay, looks pretty standard. Pricing 35 might be an interesting one. Pricing 53 might actually be an interesting one because we kind of get like a rundown table of what that includes.
And so we get these different variants over here, and again, the one that we like the most is this one. I'm going to have to annotate this. I really don't like um this color over here. And so now we've decided for this, so the other variants are gone, and we have the nice color now. And by the way, look at the hero section that it came up with, right? With this nice grid animation. We have all the images, and we can scroll back up and we get our nice hero section with the two buttons. Very, very smooth transition. And so, for example, we can make like minor tweaks like saying, hey, let's make this nav bar show up only when scrolling past the grid. And so this is how it looks like, right? We can just scroll down, we get the grid and then we can just scroll like this and boom, the navbar pops up. And now another powerful use case to use this Relume MCP is designing existing sites with Claude Code. So I can, for example, take this random URL of this yoga business near me. So I can say, hey, use the Relume MCP to design this homepage using existing logos, media, colors, and copy. We obviously want to paste in that URL. Then we can submit this, and just like that, the Relume MCP uses their components from their database and creates a stunning new website for this local business using all of their assets, using their logo, using all of the exact same copy from their current website. And I can say something like, hey, generate two more variants with other Relume components, so I can share with the business owner. And so now, basically, we have Design A like I showed you before. We have Design B, which has this nice little image gallery on the right side of the hero section, plus we have all of these new components underneath. And then we can go to Design C, and now Design C is a little bit more interactive with with this kind of scroll animation with the image. We get the yoga instructor, and then we can scroll down and we have again, new components. And this is just like a great way to kind of not only create one design direction for your client to choose, but create multiple at the same time. But anyways guys, that was a wrap with Relume MCP. Very, very awesome sidekick to have especially if you are a design freelancer or an agency owner that works with different clients. This is definitely like a superpower to use to kind of help you exploring different designs and also to help you build out sites faster and more consistent. So yeah guys, try it out, let me know what you're building with Relume. And again, feel free to join my free Discord community called the Creator Network down below. We get together every single week to talk about similar tools, similar workflows. So yeah guys, hope to see you there. And as always, thank you all so much for watching. Hope to see you next time as well. Goodbye.
Video
