Video summary
The video addresses a common frustration with AI-generated websites: they often suffer from inconsistent layouts, random font choices, and unnecessary decorative elements like marquee tickers that detract from professional design. The presenter introduces Relume's new Model Context Protocol (MCP) as the solution to these issues by bridging the gap between human design intent and AI execution. By connecting directly with tools like Claude Code, Codex, and eventually Claude Design, developers can now access Relume's massive library of over 1,000 pre-built components within their coding environment. This integration grants full control over layouts, ensuring that every section adheres to a consistent design system rather than relying on the AI to make arbitrary aesthetic decisions.
The tutorial demonstrates how to set up this workflow by first connecting Relume as a custom MCP server in applications like Cursor or VS Code, which requires copying a specific URL and authenticating through a login process. Once connected and restarted within the IDE, users can prompt their AI assistant to rebuild entire web pages using only components from the library while maintaining consistency with existing fonts and images. The presenter walks through rebuilding a local retreat website in Next.js inside a Docker container, showing how simple commands like "use hero 22" or "add pricing section 22" allow for rapid iteration. This process eliminates the need to manually code repetitive structures from scratch, effectively turning complex web design tasks into streamlined prompts that yield predictable and clean results immediately.
A key advantage highlighted is the ability to easily swap out sections without breaking the site's integrity; if a user wants to change a testimonial block or add a new pricing table above an FAQ section, they simply identify the desired component in the library and instruct the AI to replace the current code with it. The system automatically refreshes the view using features like Clockwork, applying the correct styles and responsiveness out of the box while avoiding generic filler content unless explicitly requested. This capability not only speeds up development significantly but also ensures that every element added is part of a cohesive design language, allowing creators to experiment with different header styles or grid layouts instantly without worrying about layout drift or visual inconsistency.
In conclusion, this MCP integration represents a major step forward for web designers and developers who want to leverage AI efficiency while retaining strict creative control over their projects. It transforms the chaotic nature of generative AI into a structured workflow where users can build robust sites in React or Next.js with confidence that every component is vetted and standardized within Relume's ecosystem. The presenter emphasizes that this approach solves previous problems by removing "AI slop" elements like inconsistent grids and unwanted animations, offering instead a predictable environment for building high-quality websites. As web design workflows continue to evolve, tools like Relume are positioning themselves as essential partners in accelerating production while maintaining professional standards across all generated content.
Read the full video transcript
It's getting easier to spot AI slop
websites like these eyebrows and the
secondary inline fonts. And then all of
the inconsistent layouts like check out
these grids, they're all different. And
then we get these extra added things
like these marquee tickers that we don't
ask for. And that's AI making design
decisions instead of us. But I found a
way to solve this using Relume's new
MCP. We're able now to pull in Relume's
massive component library and use it
directly in Claude Code, Claude Design,
and Codex. This gives us full control
over the layouts that we create, making
everything far more predictable. Plus,
when we want to switch out a section and
make a change, it's as simple and as
easy as going into the component
library, finding the layout and
component we want to use, and tell
Claude, "Hey, use this component." That
is it. I'm going to show you how to
connect Relume to Claude Code. The same
will apply to Claude Design and Codex.
And as we rebuild this site in this
video, I want to hear your thoughts. Can
you see yourself using a workflow like
this? I definitely want to hear what you
think, so let us all know inside of the
comments. And real quick, if you're new
to Relume, here's how it works. It's as
simple as putting in the project brief,
and then it generates a site map as well
as a wireframe. Then we are able to take
our wireframe, and then we can import it
really easily into Figma. This just
gives a very fast jumpstart to projects,
and this is a workflow that I've been
using with Relume to speed up my web
design process. We could also export it
into Webflow and React. And now there's
also a style guide, which we could
create our style guide. And also brand
new is we could export this into Claude
Design. This is something brand new as
well, connecting everything to Claude
Design. If you would like to see that, I
would be more than happy to create a
video on it because I think it's pretty
cool. For now though, we're going to
focus on taking this into Cloud Code
using the MCP. We're going to start here
in the Relume MCP page and we're going
to copy the MCP URL. I have a link to
this inside of the description of the
video and I do have to note this is a
paid feature. There is a free trial, so
you'll still be able to give it a try
for free and see if this is something
that helps you out. So, we're going to
copy this and then we're going to go
over to Cloud Code. If you're using
Codex, you're going to do the same. Now,
I already started a project here. I'll
go into that in a moment, but first we
need to connect it and there's a couple
of different ways of doing this. Inside
of the desktop app, we could go over to
our connectors and put manage connectors
and then from here I could go in,
add custom connector, we'll give it a
name and then put in the URL, select add
and it's going to take you to the login
option. You're just going to log through
and verify everything. So, let's connect
and then we get our pop-up, we sign in
and then we are all good. Let's go ahead
and turn all of these on. We want to
make sure we have all of our features
ready. Now, there's another way of
connecting it, which is simply just to
go into your chat and just put in
connect this MCP and the URL and then
Claude or Codex is going to take you
through the same exact process to
connect it. Now, once you are connected,
you're going to need to close down the
app and restart it. So, let's close,
quit the app and then restart it and the
same is going to apply if you're using
terminal, VS Code, or Cursor. And now we
need to test it. So, let's make sure it
is connected and I'm going to ask it to
test the Relume MCP and to let me know
if it's connected and then I always like
to give a test. For this, I'm going to
ask it to just tell me how many
components in the library it's able to
read and use. And we can see everything
is connected. It did take a couple of
minutes, but it's able to read it.
That's what I wanted to make sure. And
you can see here that it is well over
1,000 components. Now, let's take a look
at our project. So, for our project, I
found a website of a local retreat that
is close to me. I'm out here in Chiang
Mai, Thailand. This retreat, it actually
looks wonderful. It's something I would
like to go and see. Now, just a quick
disclaimer, this is something I just
found online and there's no shade being
thrown at this website. This is just a
small local business and something we
would very commonly run across as web
creators working with clients. And to be
honest, this looks like a really cool
place. In fact, when I need a break, I
actually might take a look at it. And
we're going to rebuild this on a Next.js
app. And I've already got it set up
here. It is a blank setup. I build
everything inside of a Docker container.
It's just my workflow. I like to
containerize everything. Helps to keep
everything organized. If you want to
learn more about how I work my process
with this, let me know. I'd be happy to
create more content around it. That is
what this first session was was just
setting up my Docker container, setting
up the environment. And we have the
project set up over here. This is what
Claude created. Now, I did put in my own
fonts already, so the fonts are ready to
use. I also threw in some stock images,
so it's going to look very generic
originally, but the images are no
problem. We can always swap those out
later. That's the easy part. And we are
doing all of this inside of Next.js
because that is just how Relume works
better. It works a lot better inside of
React apps. If we go down here, we could
go to the React library. And you can see
all of the different components. Like
for our heroes, we have all of these
different components to choose from. And
when we are prompting Claude or Codex,
we are just going to give it the name.
Like, go ahead and add in hero 22 or
let's use hero 17. This is what's going
to make all of this so fast. And to get
started, I'm going to have Claude build
out this entire page section by section
using those components. Here's my
prompt. I'm telling it to rebuild it
given it the URL. I'm letting it know to
only use Relume's component library. We
want to make sure that it is going to be
easy and simple to replace the
components when we're updating a fix in
the layout. And then I give it some more
design directions as far as the same
content, the images, the fonts, and the
layouts making sure everything stays
consistent. For this, I am going to move
the effort up a little bit, not too
much. I think high is okay. And let's go
ahead and have it build everything out.
And now it is finished. It did take a
little bit of a while to do it because
it was the first time setting it up, but
let's take a look at what we have. So,
the layout, it is just a clean modern
layout similar to what we would see
inside of our component layout or our
wireframe layout that we would create
with Relume. Now, there's still a lot of
work to do, but the whole point is
getting us to a jump start on things and
not adding in all of those weird
elements. And then when we look at
things like let's say this grid, I'm
going to throw on my inspect, we're
going to see that everything is using
the responsiveness fresh out of the
component library. So, this keeps
everything consistent. It doesn't add a
bunch of weird AI stuff like those, you
know, tickers and stuff like that. And
it also keeps all of our sections clean,
the spacing clean. But here is where
this really plays a big impact. Let's
say we want to change this testimonial
section. We have our testimonial
sections here, and we could go through
and find exactly what style do we want.
You know what? I am going to change it
to testimonial six. I'm going to tell it
to change a testimonial section and use
a testimonial six component. Let's put
this on low. We don't need high
resources or efforts on this one because
it is a very simple change. The
component library is already there. It's
going to pull it out and then use the
design system and styles that are
already part of the site. And that took
just a couple of minutes. Let's go back
over and see. It automatically
refreshes. That's how Clockwork does it.
You can see that it changed the layout.
It did not add everything. For an
example, it did not add the five stars,
and it does address it here. It just
says that that was hard-coded in. It
doesn't have the stars inside of the
component, but we could easily just ask
Claude to go ahead and add in those
stars. And this is how we could use the
component library in the MCP to speed
things up. We could go through the
design, and for every section, including
the header, we just go in and we find
Let's see, maybe we want to change that
header, and we look for the different
headers or the navbars, and we could
experiment with different styles or we
could choose a different style. And that
is how we get the full control over the
layout and how we are styling
everything. Not only is it useful for
going through every section and dating
it to the layout and style that we want,
but let's say we want to add in a new
section, like down here above the FAQ. I
want to put in a pricing section. I
could go back over. Let's take a look at
the marketing, and I believe pricing
sections are here. Yep, here they are.
Let's find one. I'm I'm going to do one
with the table. I want something a
little bit complex. So, we're going to
use the pricing 22, and I'm going to
tell it to add in a new section for the
pricing using the pricing 22 component
and put it right above the FAQ section.
While that is doing its thing, this is
the way I see this being very useful.
Now, we've been able to do things like
this with Relume, like back over here
inside of the wireframe, where we were
able to just go in, select in the
component, and you can see we got the
header 98. Well, we could choose
different styles and easily switch
things up, which has made the whole
process just a whole lot faster while we
are building things out. The same
process basically in creating the
structure, like what we did inside of
the wireframes, this component library
in the MCP,
and being able to just say, "Hey, go
ahead and put in this component." This
gives us the same basic functionality
here directly inside of the build with
something like CloudCode, CloudDesign,
and Codex. That took 4 minutes to build.
Let's see what we got. It's very
predictable, exactly what I thought it
was going to be, exactly like what we
have inside of the component. Web design
workflows, they are definitely changing,
and Relume is taking a big step forward,
definitely when it comes to this MCP
connection and even other features that
they've added like exporting directly
into CloudDesign. I do want to give a
big thanks to Relume for partnering on
this video. I've already personally been
using Relume to speed up my own web
design projects way before CloudCode
even existed, and it's really nice to
see that they're continuing to move
forward as everything in web design is
moving forward. Now, if you want to
check it out, you know, all the good
stuff, the links are in the description.
And most definitely, I want to hear your
thoughts on this. So, let us know inside
of the comments. Can you see yourself
using something like this? Well, that's
it for this video. Thank you so much for
watching. I'll see you in the next one.