Kyle Skelly — Claude Design + Relume Website Workflow
Source: YouTube Channel: Kyle Skelly (46200 subs) Duration: 9:55 Views: 47093 · Likes: 1413 Video: Watch on YouTube
Try Relume Now! → https://www.relume.io/claude-design-export Learn how to create stunning, professional-looking websites using Claude Design and Relume. Create a powerful design system that you can use within claude design to create consistent websites.
Want to become a Future Web Designer? → https://futuredesigner.io/
Full Transcript
Based on the video transcript:
In today’s video, I’m going to show you guys an insanely powerful workflow using Cloud Design and Relume. This might just change the way that you make websites forever. Let’s get into it.
[music]
Okay, so the two tools that we’re going to be using today are Cloud Design and Relume. Now, if you’re not familiar with Cloud Design, I’ll just give you a quick rundown. You can prototype things like apps and websites using this screen here. But, if you look down here, you can see it says set up a design system. So, let’s click on that. And then it gives us these options here. So, you can give it some information about your company or the website.
One of the biggest downsides with Cloud Design so far is a lot of the generated design systems and designs that it gives you are very AI looking. You can spot them a mile away. But, in comes Relume. So, Relume are really good for generating site maps, wireframes, and style guides. So, I’ll show you how insanely powerful this is.
Let’s click launch. We’ll click on new project, and you can see it gives us this sort of window here. I’m going to give it this prompt here. So, I’m making a game landing page for a Formula the One type game called Formza. Needs to have a big full-screen hero video section that has a call to action to buy the game. At this point, we’re just kind of trying to get a site map, get a general idea down. Number of pages, we’ll keep at two to five, and then we’ll click generate site map. You’ll see how quickly it does this.
So, you can see it’s adding in not only a site map, but it’s got all the different sections. You know, this is kind of a top-level sort of wireframe. And, you know, you can see we’ve got home, about the game, latest news. Four different pages. And it’s done it in seconds, right? Obviously, if you’re working on a site for a client, you have a specific brief in mind. You’ll probably know all the sections the client needs on the website.
As a designer, it’s your job to think about what specific section should actually be there, though. So, don’t rush this part. But, let’s just say we’re really happy with all the sections it’s given us, so we can click on wireframe here. It’s generated us entire wireframes for each of these four pages. Immediately, you get a solid outline of the flow and the structure of a website. You can see we’ve got a big video hero, that’s what we wanted. So, let’s actually change the layout of this one a little bit. I think something like that looks better.
And then we got our sections down here, you know, we can drag these about. For this top one, let’s change the layout. I’m liking the wireframe for the homepage so far. Covers all the things that we gave it in our initial brief and our initial prompt. And I think that’s looking pretty good. The next step would be to do this for the about page, the latest news, and the news post. Get the structure dialed in at this point.
And then let’s head over to style guide. So, this is where our workflow with Claude Design is going to become extremely powerful. We can work on a style guide directly within Relume, and then all of this stuff is going to come over to Claude Design as a really powerful design system. Some of the settings that we have in here, this is the first one that it’s just kind of generated, and it already looks really good. So, you know, we can click on each section, kind of change things out.
I like that white. Because our game is about Formula 1, I think it’s already kind of gone with this sort of red brand color, which I think really works. And, you know, obviously it’s just used placeholder images, but you guys can imagine that once we get all the assets in, this is going to look really good. So, let’s change our main font here. Go to browse. We’ll choose display font. We go with something like this. That looks quite Formula 1 8 to me. Body font we’ll keep as Inter. There’s a light mode and a dark mode.
We can click over here to design, and we can make entire changes to everything that we have in here. We can change out the text, and we can change out the images, and we can do all this. But, what we’re actually going to do now is we’re going to click export up here, and we’re going to click this export to Claude Design. It’s going to take a few seconds and prepare our design system, and then we can just download this as a zip. Then if we take that folder we just downloaded and we drag that into Claude Design, you can see it there, we can just click continue to generation. Now, it’s going to take a couple minutes to generate our design system and structure based off everything we’ve given it.
But after just a couple of minutes, this is what it gives us. And you can see it’s going to pull in all the colors that we used before. There’s our sort of punch red and then different variants of that as well. And this is already just a very detailed design system. You know, we’ve got everything from corner radius, components, our button styling. And this is all the assets and design choices that we created in Relume and it’s brought it all over and packaged it into Cloud design.
We’ll go down here and we will say it looks great. Happy to confirm it all. Now we can say, “Show me the home page.” And then this is our entire landing page that we’ve pulled in from Relume using our design system. So we’ll go down here and we’ll say, “Create an about page.” And we can see it here which has pulled in all of our design system. So everything looks cohesive with the home page that we have. Now this is just a fictional game with no real assets to work with.
So let’s generate some AI assets to get an idea how we can make this concept work. Okay, so I’m going to use something like Higgsfield for this and first let’s generate an image. I’m going to give it this prompt here. I need a realistic Formula 1 type image for a racing game. Should be a dynamic shot of a racing car. And it’s generated us these four images which look really good actually. They look super realistic. Let’s go with this one for now. Obviously, you can see like, you know, none of this text necessarily makes sense. But this is just kind of like to get a concept together anyway.
We’ll go down here and then we’ll click animate and we’ll say something like a dynamic scene of this Formula 1 car zooming around the track, light trails, motion blur, and cinematic filming. It’s pretty vague. And then let’s just increase the duration of this to 15 seconds. I’m going to go 16 by 9 and then 1080p. And after a few minutes, this is the video that it’s generated us which is really impressive actually. These AI videos have come such a long way. So let’s click download on this and then we’ll say, “Let’s make this auto play in our home page hero as a background video.” And you can see with our video hero in this is looking really good.
Just to show you guys a quick comparison from what we’ve done versus if Claude Design was to do this all itself with no design system, we’re going to give it the exact same prompt that we gave Reloom in the beginning. And this is what Claude Design gives us with no design system in place, which is really impressive, but there’s a lot going on here and there’s a lot of inconsistencies throughout this design. And especially if we carried this on to other pages, it could get messy fast.
Now, if we ask it to create an about page, you’ll see the biggest downside with Claude Design right now without using a solid design system. And this here is what it’s generated us for an about page, which at first glance does look really good. It looks cool and it follows a similar style to the homepage that it generated. But you can see how each section is completely different from the other. There’s no reused components. And basically, when it comes to scaling a website like this, this is where it gets messy fast. The way Claude Design chooses to design the layout and the design of this stuff is just a bit of a free-for-all. And where people burn through a lot of their Claude Design usage is trying to make these pages consistent.
What I’m going to do now to make some final tweaks, I’m going to go up here to share and I’m going to click hand off to Claude Code. But I’m actually going to click download zip instead and then I will download it here. Now, this is how I like to work with Claude Code. I’m going to use the terminal here and then I can type CD and then space and then I can drag in that folder that we just downloaded there and press enter. And then now I can just type Claude and I’m just going to say read everything and get an idea of the design system and homepage.
Then at this point, we’ve got our website locally here. I can start making prompts within Claude Code to fine-tune it. So, like for example, I want to have our header, our navigation sit in a box within our hero. So, I’m going to give it this prompt here. So, I’ve made a few final little tweaks using Claude Code just to tighten everything up and this is what we’ve got. You can see we’ve got this loading animation and then the page gets revealed just like that. I’ve made the header just kind of more contained within the hero. Scrolling down the page, you can see I’ve simplified things a little bit here and there, but the general style and structure is just what we had before.
You can see we kind of bounce between the dark mode and the light mode. We’ve got our three sections there. Everything kind of animates in. For the assets, I’ve just pulled in the assets that we generated earlier in the video. There we’ve got latest news, and then you scroll down to the bottom where we have our sort of trailer, and then that’s our footer there as well. Cuz we created such a solid design system in the beginning, this is the about page, and you can see we have a very consistent structure and styling over the entire site.
So, this is our example with Claude design, and this on the right-hand side is using our design system we created in Relume. If you scroll down the page, you can instantly see the structure and how everything is a lot cleaner using Relume. We’ve created a lot of the components that we will share across all the different pages, and our design system is a lot more consistent than what we have on the left. This is especially important when we go on to different pages. You can see that this looks very consistent to the homepage, and this one is, although it looks kind of cool, there’s no real consistency and reuse components from the homepage. And if you’re wondering if it’s responsive, then yeah, it is. You can scroll down, and just by default, anything you bring over from Relume is going to be responsive anyway.
So, now you’ve got your entire website, you might be wondering how to put it live. Well, you can just ask Claude, “Give me a step-by-step guide on how to push this live. Also, compress all the images and video assets. Guide me through GitHub repo, Cloudflare pages, connect a domain.” Claude will guide you through all of it. It doesn’t take long, it takes about 5 minutes, and then you can have a functioning website online.
Now, you might also be wondering, “How do I manage blog posts and stuff?” Well, in my last video, I talked about adding a CMS to your AI-generated websites, so go check that out if you want to add function to an actual blog.
If you guys want to learn how to do that final little polish and become a better AI assisted designer, you can sign up to the wait list of my course here, and it will be releasing sometime next month. If you guys want to check out Relume, and try out this workflow for yourself, there’s a link in the description. Subscribe if you want to see more stuff like this, and I will catch you guys soon with another design video.
[music]
Context
This is Kyle’s second video in quick succession — the previous one covered Claude Code + Seedance 2.0 for websites. He’s systematically covering every AI web design tool in the ecosystem.