Claude Design 3.0 Destroys AI Slop

If you have ever felt that every clawed AI design looks exactly the same, you are not crazy. Most design looks like AI slot because they're not using the correct system. And in this video, I'm going to show you the new claw design system that makes beautiful designs, graphics, [music] websites, anything you want that don't look like AI sloth in [music] five simple steps that you can do even if you're a complete beginner. So, if you haven't already, grab that beautiful coffee and let's dive straight in. Beautiful. So, we're going to be building in claw design and I'm going to show you levels that you haven't seen before and incredible capabilities. Now, this is all about destroying that terrible AI slop feel. Everything looks identical. We're not going to do that. So, the issue is that essentially every page that Claude is designing is from the same systems, the same prompts. How do we actually stop that? Well, we can do this first of all by building a very simple design system. That means that you're going to get replicable designs that look beautiful every single time, no matter what it is. So, the first thing that we're going to do is to shoot over to Claude and on the bottom left hand side, you're going to click on design. And then once you do that, you're going to open up Claude design. Now, the first thing that we need to do is build a design system. A design system is just a series of rules that our AI is going to follow. Now, with Claude design, we can build all these things. Mobile app design, slides, document, wireframe. It doesn't really matter. Just to show you an example of something that you can do. You see this whole system here. I uploaded to claw design and as a result of that, I got this thing here and it basically took my exact style and created graphics for it in one prompt. It can do so many things. So to build a design system, you're going to come down here and click design systems. Then simply click on create design system. And we're going to go ahead and click create here. Now, once you click on create design, this system is going to unlock incredible things for you because we can use this whatever we're building in the future. It's very cool. We need to add a little bit of information. We can link in a GitHub repo and upload files. But let's say you and I are working with a client. Let's say we work with a burger restaurant and we don't want to have to produce all the assets manually. There is a very cool hack. So, the first thing you're going to do is head over to this skill here and I'm going to put a link down below. So you can literally just grab this and go and effectively what we're going to do is connect Claude over to Hicksfield. Hicksfield lets us design videos and images and you know Cance 2.5 is coming out soon. It is incredible. And what we're basically going to do is paste this into Claude like so. So basically copy all of it like this and then head over to Claude. And this is the step that most people miss cuz they just give a command to design and wonder why it looks so generic. And all you're going to do is come down here, paste this in and hit enter. And what we're going to do is connect to Higsfield via the CLI. This whole skill here will just manage all of that stuff for you once you've got your account. Now we have Claude interviewing us to make sure that we can get the very best design system. So what's the product or business? Let's just go ahead and use Glidio here. Hey, so the product is a burger restaurant. Uh we don't have a brand name. Let's call it Smashburger or something similar. The vibe is fun, energetic. It is premium highlevel burgers and we don't have any hero products yet. We can just kind of make five burgers up for the purpose of this. Anything to avoid? Yeah, just avoid all the cliches. Now, once you've gone back and forth, you're going to end up with a final system prompt. And to show you one that I did earlier, we have this one here, which is to smash and grab a burger co. And effectively, what it will ask Claude to do is to research the pallet. It's going to look at parameters and costs. It's going to generate once it comes back and confirms. And effectively what this will do is design an incredible design pack that we can then give. So it has rich logos and images and everything that you need for the brand. Now if you don't have any graphics or logos, you don't need to add it. But that really helps you get the best out of this design system. So the benefit here is that we decide once and we can reuse that system again and again without having to think about anything at all. Now we've done that effectively we need to go ahead in level two to go ahead and build inside it which is awesome. So we want to go ahead and create a website from that system. And as you can see Claude has actually created all of these images and all these files for me. So I can come and have a look at this. I've got a series of logos to choose from. I've got action like the cheese p this big beautiful burger. I mean look at how incredible this looks. Which is why it's so cool to do the very best models. And again all of that is in the prompt so you can just use it. Which is why in level two, what you want to do is come down and just add those files. So, let's go down and just add them by clicking browse and then effectively just literally grab all of the files that was created for you in step one. Or if you've got a brand that you're working with, you can just scrape those using firecrawl or just upload them and you'll be ready to rock and roll. And you're just going to simply click into all of these folders. And again, it going to be completely dependent on the brand, but I've got ingredients. It's even got texture packs for there as you can see. Black smoke, charred steel. The skill manages all of this stuff. And then finally, you're going to copy here the brand. The skill will give you this as well, which is an explainer of what you're trying to do. We're going to come back over, paste it in there for the blurb, and once you've done that, you had edit the notes, you're ready to continue, and you just click on continue to generation. Now, this will take about 5 minutes, and I recommend that you use Claude Fable to do this. It is the most powerful and capable model, and we love our powerful and capable models 100%. Now, once that's done, when you scroll down, you will see projects, design systems, templates. I want to click on the design systems and I'll show you the one that I built earlier. And again, we can edit this if we want to to give different access. Click on this one here. And now we can play around with this. So the smash grab burger co system. It explains everything, all the brand images that we uploaded. And effectively this is now a universal asset that we can share with everybody. And look at this guys. How freaking cool is this? It's got everything that we want. It is wonderful. And whenever you give it any feedback, it will go ahead and implement that. So what we want to do initially is go ahead and give it a prompt to build a website. I said, "Hey, go ahead and build me a beautiful website utilizing the assets for the burger business. Add scroll animations, do whatever it takes and just make it look great." And then look what Claw Design has done with all of these assets. And again, we have enriched this using the images that we got from Hicksfield and this beautiful design thing. The entire color palette was built. We've got all our different burgers here. And again, this is just the first iteration. We can do a million things from this. We've got u you know the pan, we've got the burger, we've got the cheese, we've got everything we want all in one website when it come down. I'm getting very hungry looking at this, but you get the idea. But this is only version one and we can take this significantly further. Now level three is taking what we've built inside Claude Design and enabling us to level it up by bringing it over to Claude Code. And that may sound a little complicated, but it's actually just two button clicks and it unlocks a lot of really cool capabilities. And I'll show you why in a second. So we call this the handover. So we're taking it from claw design over to claude code. And always remember that claude code can do everything that claude design can do. Claude design is using claude code. It's just got some extra systems around it. And when we take your design system into claude code, we can do a lot more with it. So say for example, we have our beautiful website here and I want to take it to a new level. I want to add in more animations. What I can really do here is export it. So if I come down and click on share, what I'd like you to do is come down here and do a project HTML for me. You can also publish this as an artifact if you want to share that with other people or copy the link. But let's click on this one here and you're going to come down and do project archive and click on export and then just save that in your downloads. Then come over to Claude Code and I want you to open up a new tab and just basically say hey. and basically give it a prompt like hey I want you to familiarize yourself with this and open it up for me in a local host. Local host just being fancy speak for place where we can view a file on our computer and then just select that zip click open and then send it on its merry way. And then we actually have our website. Now the cool thing that we can do here is we can actually create a beautiful 3D interactive website using the exact thing that we just built. And you can also export your design system to share with your team. For example, I have a design system for my videos now. And I can share this really simply by creating one, coming down here, clicking on these three buttons, click on open in a new tab. Then once that opens up, you can literally click share. And just like before, you can export it like so. Um, project HTML, zip or standalone. And again, um, you can do project archive, which is absolutely fine, and click on export. And as you can see, the smash and grab design system. And then you can also come up to Claude and say, "Hey there, I just downloaded the Smash and Grab design system. It is the last thing I downloaded. Please look at that when you are creating designs for me on this website. And by the way, if this all sounds like Spanish, I'll put a link down below for the full Claude Code Masterass. It takes you from zero to hero. Has stuff that I've never shared on YouTube. I get messages about this literally every single day. It will show you apps, websites, bulling, everything, monetization. I'll put a link down below. It's one of the best courses I have ever made and it has stuff I don't share on YouTube. So, I'll put a link down below there for you as well. And that's really going to help you elevate and take your designs in Claude to a brand new level. And as you can see, Claude has now got the website on the page, which is cool. But the thing about that no one really tells you about design here is that one shot is not enough. It's all about iteration and adding the right elements. And we want to have a showstoppping feature to this website to take it to a completely new level. And I'm going to show you other design system parts that you're definitely going to need to make sure you know. I'm going to cover that shortly, but I have to show you how we can level it up. And we call this one moving piece. Think of it like the ornament. Think of it as something showstopping that just makes the website or the asset stand out and look fantastic. For example, I did the exact same thing on this website which is all built using the exact same system. This beautiful showstoppping scroll animation. It comes down looks fantastic and that was one shot. And it's such a gorgeous website and this has all been generated using fantastic assets and it looks great. But the thing is you can spend and honestly I did this. I spent so many dollars and so much time. I had no mustache when I started. Then my mustache was there. That's how much time I spent learning this stuff. So we can save a lot of time by using a skill. And I'll pop this link for you down below. So you can literally just grab this and use this. But effectively it's a it's a 3D website skill. So literally come down this. The link will be down below in the description for you to grab. And then all we're literally going to do guys is just upload this skill. And you're going to give it a prompt like this. that says, "Hey, use the below skill. Ask me questions to create for me a beautiful 3D animated video to embed in this website, and I'd like you to use the graphics and imagery and this brand style." And what is really cool is that the um the AI will actually ask you questions about what do you want it to look like? Um how do you want to edit it? All this really cool stuff. So, you can build out something beautiful. And by the way, I don't know if I'm looking tanned or not. I just got back from Montenegro. huge AI conference, lots of boats, lots of green hills, lots of no laptops really. So, it's been cool to uh get away for a couple of days, but it's good to be back talking about design. I have so much really freaking cool content. I'm super stoked to share with you. So, let me know down below if you've ever been to Montenegro. I find it a really beautiful city. We had a good coffee and that is the most important thing on the JR YouTube channel. And as you can see, it comes and asks a question. Do you want the design arc, the high arc, the whatever it is? And again, if you don't know, just ask what you want to do. So, we're going to be using Higsville on this one. I've honestly found that that there's many ways you can do it, but it just seems to get better results for me. I have tried multiple on that. Scroll scrub hero, autoplay hero background, its own section. Let's go with should we do its own section? I think that could be nice. This one's a scroll scrub her. Again, you can do any as you like. The top one of course would be something on a loop. So, you can do one as you scroll and it like expands. But the other option is it just sits there and basically doesn't do anything and it kind of sits on a loop so that the first frame and the end frame are like identical basically. So, I'm going to actually pick its own section. And then it's got a recommended clip length. Again, this is from, believe me, guys, a lot of like trial and error, so you don't have to make the same mistakes that I did down here. So, I recommend around 25 seconds. And then a little hack, we can actually do something called UI sniping, which is fine. Beautiful UI animations that look amazing. Like, I gave you three little insiders right now. 21st.dev is cool. You can basically search buttons. They're not a sponsored video or anything like that, but I think these are freaking gorgeous. You basically find the one that you like and what you can do is literally let's say we find a beautiful one. For example, say we came off this and we were on cuz if you come over here on the left hand side to most downloaded, you can see what is trending and what is popular. So classic button for example. And this looks gorgeous. Check this out. This carousel overview carousel, right? Look at this. This is really nice. And you can do this with the burgers, right? So I could literally come down here, copy the code, go back over to claude code and just say, "Hey, go and install this, but replace the images with burgers." And then other ones that are great is shaders. This is a really cool one. It's basically UI. Aseternity. I can't even pronounce like I don't know how many copies I need. But if you look at this, for example, you've probably seen this distortion shader everywhere, which is really cool. You know, that's just code. And the cool thing is we can grab this code and just add it into our website or design system to look amazing. Then there's also react bits.dev. It's a little bit of a new one. It's kind of a bit more edgy, more sleek, more more more kind of premium. But again, it's all about browsing, finding what you like, and then just literally yapping at claw. And if you can't for some reason get it, what you can also do is just screenshot and just say, "Hey, I love this design. Can you go and grab it?" And even grab the website and say, "I love this kind of design and vibe. Could we create something a bit similar?" But obviously, you've already got your design system, so this is just for inspiration. Beautiful. Now Claude's done his fantastic amount of work. Let's come down. And if this is good, I think you should name your firstborn Claude after this. Look at this guys. Look at that. Look at the quality of that bird. Do you want that? I would eat that right now. I'm going to cut this. It's a bit difficult, but this is outrageous how it comes down here. And by the way, you could have the whole thing coming down from a top to I've done I'll link this video here on screen. Go ahead. You have to check this video out if you haven't seen websites to build. You want to build stuff like this. It is crazy. The skills down below so you can do it. That is amazing. And as you can see at the bottom, look at this. Now we've got this. Imagine having this for your client. Like, oh, what burger do I want? the getaway, the double cross. Uh, and obviously these are just like generic burgers we created, but you can see the difference. Look how incredible this is. And then that leads us nicely onto step five with our design system. So, for example, if we come back over now to Claude, you can see whenever we want to create something, we can either just very, very simply pick our design system. And if you want more design system content on Claude design, let me know down below. I have a thousand idea. This is just scratching the surface. So obviously I've got like all the courses and stuff in the community, but I've got a lot of really cool stuff I want to show you on YouTube. So if you like this kind of content, uh feel free to subscribe and like. It lets me know that you like it and it really helps out the channel. So thank you so much for that. Now if I want to go ahead and build something, let's say that I want to go ahead and do I don't know uh why don't we do something like an animation cuz animations is goed. Now I can do an animation with burger system but maybe I want to do something else. I can come down here on design system. I just got clear selection. Now what's cool is I can just upload the PDF that I use. So check this out. Come down to plus. come down and click on attach file and I've got the PDF here which is exact one that I've actually been using here. It's a PD it's a HTML deck. All the design systems are cool. But let's say I like this and I want some of this to go inside this video. So what I could do is come back over here and I could say something like hey there um basically animate this sentence. Claude design is exceptional. It will enable you to build beautiful websites with 3D animated videos and dynamic UI components. And let's have those as three different sections. All right, cool. And what I'm going to do is actually just going to change this a little bit. Hey, could you just improve this prompt such that the output would be better? And what I'm thinking here, generally speaking, this is much better. Yeah, let's use that. Cool. Come down, get Fable 5 on it, and hit enter. Now, what's cool about this? Okay, so the file can't be attached. me to come back ahead and just reattach this. Okay, I just reuploaded it. Basically, if it's greater than 50 megabytes, it won't do it. Hey, go ahead and build it with this. Please come down and send this off. Now, the cool thing is this is something that I'm using now. I've literally built out this design system and a style that I really like. Gave it to my editor and basically he'll add in little bits of the transcript from the video and then just integrate that on there, which I think is so cool because it's beautiful. But it's like with most things, you want to get the design correct. And you know, the more time you can spend up front making sure the design looks beautiful, the more advantageous that it actually is. Because if we can just get the initial design system correct, you can do anything you want to. Like with with Glido, our text to speech startup for example, we spent a lot of time getting the files correct so that when we build presentations or we do anything in the app, um, basically it's all pulling from the exact same design system for your brand. Now it's come ahead. It's animated it. This is looking really cool. It's piecing together. So, let's see exactly what it comes up with. And as you can see, guys, now it's created something. Let's go ahead and actually check out what it's done. I'm going to come down and hit play. Now, let's have a look at this websites that look designed. And look at this. I think this is great. This is not so bad. Okay, what we would do is emphasize the text a little bit, which is cool. Now, this is really gorgeous. Yeah, I'm impressed with this. So, I like the minimalistic styles. I think that looks really nice. So, what I'd probably do is actually just re-engineer this to say, "Hey, I only want to see nice HL components. I don't need loads of tags." And I think little explainer texts would really add the value, but it shouldn't be something that the user has to squint at. Don't make the user think. Don't make them exert too much cognitive energy in understanding what this looks like. Cut out the other bits and let's just simplify this down a little bit. I will be speaking over this and these will just be nice graphics that support what what it is that I'm saying. So again, the idea here is that we are steering it, we are giving it feedback, but this looks beautiful and it can literally design so much cool stuff. Now, once you've click the link down below, the next thing that we need to do is go ahead and learn how to build beautiful websites just like this. Come and join me. Learn how to take it to a completely new level. Grab that coffee and I'll catch you on the