Vollständiges Transkript anzeigen (2.215 Wörter)
So I built a website for an SEO agency in just a few minutes, and surprisingly it doesn't look like any type of AI design at all, and the workflow is basically going from Relume, to Claude Design, and then to Claude Code.
And if you just start with Claude Design, this is the types of results that you're going to get. Obviously, not bad of a design, but still very AI-looking. And then, with that Relume step added to the workflow, we get a nice design-looking like this. We have custom assets, we have nice sections, custom interactive components like so. So if you guys are interested in building nice designs using Claude, feel free to check out this workflow.
And by the way, guys, I'd love to invite you guys to my Discord community, The Creator Network. We get together every single weekday to talk about different tools and topics. So if you guys are interested in joining that conversation, link is down below.
And just quickly, before we dive into the different workflows today, I'm going to be showing you the different tools that we're going to be using. So the first one is Claude Design by Anthropic. If you've seen my other videos, you've seen me use Claude Code, and you can easily just design something in Claude Code by just adding that design reference in the prompt. But Claude Design, on the other hand, basically helps you in a more visual way to come up with different wireframes or high-fidelity designs. You can choose like a specific design system that you create, you can choose from a template, you can look at other examples that are over here and kind of like take their prompts, or you can create your own design system, which we're going to be doing today.
We're going to use a tool called Relume.io, which is in the design community, a very popular tool. I'd say mostly for, you know, component libraries for Webflow sites or for React sites and also for creating design systems based off of wireframes. And now, as you can see over here, if you click on export, they have this new Export to Claude Design feature, where you can basically download that zip file and integrate it into Claude Design.
And last but not least, we're going to be using ChatGPT. And why ChatGPT? Well, because ChatGPT has Images 2.0, which are in my opinion, you know, as of right now, the best image generation tool out there. And not only can it generate like nice, like, realistic images as you see in their, in this video, but you can also create like really high-end assets for your websites.
Now, in Claude Design, when you're trying to design something from scratch, let's say we want to design a portfolio website for an agency that helps with SEO services, it gives us a set of different questions to answer. And then once you answer these questions, we can click on continue. And then these are the three different results that we get from Claude Design, and as you can tell, they look kind of, you know, pretty AI-generated. This one, especially on the left, this is like a typical Claude design. These look a little bit better in terms of like the colors and styling, but still, they look AI-generated. And that's not Claude's fault. You know, without a design system, Claude Design falls back to its own default aesthetic, same fonts, same spacing, same types of components. You get something that looks good, but it's not something that you can actually use for your own work or for client work, for example. And if you continue to generate new pages inside of Claude Design, all Claude Design is going to do is continue to give you inconsistency when it comes to the overall design.
But then eventually, let's say that you choose this darker green version and you eventually bring it into Claude Code and you start improving certain sections. The problem is that you're going to continue spending so many credits inside of Claude Code, and eventually after generating a bunch of components using Claude Code, certain sections are going to kind of drift off from that original design concept. And that's where Relume comes into play because you basically have access to the hundreds of different components that they have in their component library, and then you can do the style guide, implement your type of button, implement your type of colors, and then export that, or import that into Claude Design.
So first thing that I'm going to do is I'm going to hit on launch, and then we're going to create a new project straight from scratch. And we're going to give it the same prompt that we gave Claude Design. We want to, you know, add five different pages, so we want to just add that to the prompt over here as well, and this type of page structure pretty much works for anything, really. And then we want to click on generate sitemap, which basically is the architecture of the project.
And so as you can see right now, the different pages are being generated, so we have home, then we have our services, meet the team, about, contact, and just under 10 seconds, really, the whole sitemap has been generated. And what's cool here is that I can like go ahead and like move this up here, if I wanted the FAQ section to be at the very bottom, I can do that as well. You can add more sections if you wanted to. So for example, up here, maybe I'd want to add some type of announcement bar, announcement banner above the navbar. You have all of these different component categories that you can choose from.
And then once you're ready, once you're satisfied with the overall structure of these different pages, we can go to wireframe, and then slowly but surely the wireframe is being generated, basically in real time. We have, as you can see, the hero section, and we have all of our pages being generated. And then I, for example, I can choose this and let's say that I don't want a simple header like this, I would want to change the the component of this header of this hero section to be a little bit different, maybe something more interactive, with more imagery. I can scroll down here and I can see, oh, this looks pretty cool. We have like these like images over here. Maybe I can choose this one. You can just keep on scrolling and there are just like hundreds of components to choose from. So we want to make, maybe make our site a little bit more interactive.
And then what we can do is we can go to style guide. Now this style guide section is actually the place where designers bring in their own creative direction. What you see here on the right is your own canvas and you can basically like remove all of the images and add your own images, colors, fonts, etc. And it's all about giving the AI a foundation to build from. But I can go ahead and go and style the buttons to be a little bit different. Maybe we want like more of these bubbly types of, types of buttons or like these brick style. You can also edit the heading to be not Poppins but another font. We can also view other collections from famous designers like Dan Petty, for example. And then we can click on different sections like for example, let's go to the top section. We can click on this little image icon and we can edit the different images in this section. So these are like all default images that, um, Relume gives us, but if we want our own, we can go ahead and upload that and replace it here. We can also adjust the shape to be circle or to be square.
And then inside of ChatGPT, because I'm going to do this from scratch, I'm going to generate these different images. Also, I can go into Mobbin and look for the category of illustration to kind of look for inspiration as to what types of illustrations we can add to our site, because for example, in this specific section, we have these images which are also nice, shout-out to Relume for giving, giving them to us, but I would want something more specific, something more that matches this, this kind of color scheme of this green, black, white, actually like this style a lot. So I'm just going to take a screenshot of this and give it to ChatGPT.
And then finally, what we can also do is we can scroll all the way back up and then we can select the logo and we can upload a logo asset, and again go into ChatGPT and just prompt it to create a logo for you. And then you just want to make sure that the logo has no background. And then we can go ahead and upload that logo. All right, and now we have our logo over here. And now once we're ready with our design, once we're happy with this, we can go ahead and click on this export button at the top right and Export to Claude Design. And this is going to prepare our design system. It takes around 20 seconds. You know, once this is done, we can download the zip file, and we have a step-by-step process as to how to do this. I'll show you in a second how this works. We download this, we go in Claude Design and we have to open the design system tab and click, click on Create new. So going back over here, click on Design Systems.
Then we want to create a new one. And then all we have to do really is drag that folder or just browse and select it. Important is that you do unzip that folder and you, you know, drag in that unzipped version. And then for the company name, we can call this like SEO Guys, cuz I was like the, the company name that I gave it. Then we can go to Continue to Generation. And then we click on Generate. And once that's done, we get our design system, we get our design files. I can go down over here, I can see the different types of fonts that we have. I can see the different colors, spacing, the components. So for example, if we go to UI Kit website, we can see like a little preview of how our homepage looks like. And then we can write a prompt like Create a homepage, and then we can go down to our design files, select that homepage that we just generated, and then we have our homepage that we created basically one-to-one in terms of the design, um, when it comes to like comparing it to what we had in Relume. We have our different buttons, I can zoom in and look at this nice little button transition, we can scroll down, we have these little sticky scrolls, all the design looking very, very nice, all of our assets there as well.
And then as a final step, obviously, what you can do is you can click on share at the top right and hand this off to Claude Code. And we can basically give this, uh, command. We can just copy this command like so, and then in Claude Code, what we want to do is just paste in this command, and then basically Claude Code builds this out, and you can just say, "Hey, let's run in this on the localhost." You can click on this link, and you basically have this design, or this website local to your machine, and it's just like we built it inside of Relume. So we have this nice design inside of Claude Code. And also a part of this going back into Claude Code, since Relume is setting the foundation for us, it's not just creating the visuals, we can use this foundation to create other pages. So let's say we want to create the services page or the about page. Well, let's do that. So we can say something like Create the about page and services page, so when the user clicks on these links in the navbar, it should take take them to these pages. And then we basically get these new pages with the same types of components that we have from Relume. And we can just rinse and repeat this process for all the pages in our website, going from Relume to Claude Design, now inside of Claude Code, this is like a nice little design hack for you guys to check out.
And if you guys have any other questions or comments, please let me know down in the comments below. And like always guys, thank you all so much for watching. It means a lot to me, and I hope to see you next time. All right, so goodbye, guys.
Video
Video
Video
Video
