YouTube Deep Summary

Claude can create beautiful designs, but a brand new prompting technique just solved its number one limitation. It's called the gauntlet loop, and it enables you to get incredible website graphics presentations in one shot with [music] less mistakes. And in this video, I'll show you exactly how to do it, even if you're a complete beginner. So, if you haven't already, grab that beautiful coffee and let's dive straight in. So, it's called the gauntlet loop or the design loop, which is really fascinating. Now, as we know, Claude can build beautiful designs like this, for example. It can build HTML animations that look a little bit like this. Effectively, anything we want to, but the biggest problem that we have here is simply the fact that Claude judges its own homework. It says, "I think I've done it." In reality, it hasn't really, and you end up pulling your hair out, and we need our hair if we can keep it. So, what is the solution, and how is it fixed? Well, the gauntlet loop essentially is independent critics. Now, this was popularized by a cool Matt Shumer, so huge cool out to Matt. This happened on X, and Rubber Nuggets covered it recently, so a huge shout out to Rubber Nuggets as well. Really freaking cool. Now, look at what this did in basically one shot. Check this out. Now, this has audio, too. You can see this was basically using this exact technique. This is what it produced. Now, if you spent your whole childhood playing Call of Duty, hey, I'm not going to say anything. I mean, we've all been there. You'll know exactly how cool it is and how realistic it actually can be. We've even got Andrej Karpathy chiming in, as you can see, basically talking about one of the ways we can think about our model's capability is its ability to build these beautiful dream perspective 3D worlds in one shot. We've got Elon Musk chiming in. All that to say, it is very talented. And once you make it to the end of this video, you're going to be able to recreate in any design system or not something that is fantastic. I cannot wait to literally show you how cool this is. But, the first thing we need to do is build a design system in Claude. This is optional, but will really supercharge your entire system. Now, to access this, just come over to the cloud website, click on design in the bottom left-hand corner, and you can literally create your design system by here under design systems, and then you can create a new design system. Think of this as having the world's best designer, and he has at the moment what is known as a terrible memory, something like Forrest Gump {slash} Memento style, and what we're going to do here is give him a codified blueprint, typography, graphics, everything so they understand exactly your specific design style, and you'll get something that looks like this. It is brilliant, and we can use this for everything. So, this is an example of all I did, I gave it a presentation. I said, "Hey, I love this presentation, turn it into a design system." So, action one, take any design assets that you've got, give it to Claude, and it will turn it for you into a full design system. Then, once you've done that, come over to share up the top right, and you're going to go ahead and export this out. Now, the reason why you want to go ahead and export this out, and again, you can do it as project HTML, that's absolutely fine, because we they can use this in Claude to actually build something incredible using this technique. Now, the reason why we're going to run this outside of Claude is purely because of the strength of this cat technique, and it's the fact that what we need to do is spin up what are called fresh context critics. So, effectively, what we're going to do is give Claude a reference design of, "Hey, I want it to look like this or be this," give it a criteria, and it's going to spin up multiple critics who will ruthlessly challenge Claude's design, and it will go round in a loop, hence the called the gauntlet loop, as Matt showed, or the design loop, until it reaches its end state, meaning that you have a last back and forth, and you don't need to keep basically coming back and forth as much, and the first design is way better. So, essentially, taste becomes a checklist, and I love that. I love my checklists, and I love taste. You know, we've got an interview, pre-flight, teardown the bar, build it, it's going to have critics, it's going to have everything. So, for example, one critic can be the brief. So, did you do what I asked? For example, if I say, "Hey, I want you to a b c d e f g." Then one critique is just saying, "Hey, did you actually do the brief, bro?" And he might say, "Hey, bro, no, I didn't." And go back and change it. Then you could have the system. So, is it really in line with the system? And then you got the craft. So, this could be, for example, rendered frames and then the code and actually judges the bar all based dynamically on your prompt. So, once you've created a system, you're going to export that just like I showed you. And the great news is I've actually built you a skill which makes this unbelievably easy. So, step one, export your design system. Step two, and I've made this so easy, is just come down and grab the three critique skill. It explains what the three roles are and all you're going to do is copy this whole page, control C. It will be the second link in the description below. You can grab that from my free resource community. Again, 100% free, you can grab it. Uh no gatekeeping at all. Then you're going to over to Claude, open up a brand new chat, and just say, "Hey, turn this into a skill." And then come down, paste the whole thing, and then you'll be ready to go. And it will create, once that's done, a skill which, if you do {slash} loop, is called the design loop. So, we're going to test this across three levels of difficulty. On level one, it's going to be the carousel. So, for example, I found this carousel earlier and I thought this was absolutely gorgeous. And look, it's blown up. It's got 15,000 likes on Instagram. And let's just put it to the test and say, "Hey, can you actually, if I just gave you the URL, I'm not even going to tell you anything, I'm just going to give you the URL, can you actually design this?" And look at this. This is the best prompt pairing. So, tempting to switch to different fonts, basically. Beautiful design. Looks gorgeous. Really love it. Really aesthetic. And then at the end, you can come to Paris and you get all of these fonts for you, which is absolutely awesome. And by the way, if this entire thing is starting to sound a little bit like Spanish or you want to just level up your design game and your Claude code game, I'm going to put a link down below for the full Claude code masterclass inside the community. It has stuff that I have never shared on YouTube. I get messages about this all the time. It has design systems, apps, building everything. You name it and you get access to the full Agentic OS and like a gargantuan other things. I'm going to put a link down below so you can grab that and get some serious high levels. Now, what we're going to do is literally copy this then head over to Claude. You're going to open up a brand new window and you're going to do forward slash and you're going to go design loop like so. And then literally just say activate the skill, okay? And what I might do once it's done that it'll come back and it will ask us a couple of questions. That's exactly how I built the skill for you. So you're going to throw it in and then we'll just get started basically. So here we go. I would like you to go ahead and I want you to look at this URL and build me a version of this for AI tools. So go through the Jack Roberts YouTube channel and find out all the tools that I mentioned and in the same design aesthetic, um, you know, inspired by that design aesthetic, just do me something covering all the top tools that I basically built. Bam, come down, drop this off. And also it says any files I should work from and if you've connected everything together in this, it also has access to that. So be ready to rock and roll. And then guys, look at this, okay? I'm going to come down and let's go through all the designs that we've got. So seven AI tools, Claude code, Ship 3.0 projects, ChatGPT, daily thinking partner. This is not bad, right? This is really cool. And again, comment AI to get the full guide to seven tools. But this is wild. Again, and you just give it one prompt and it runs and it does the whole thing. I think this is fantastic. Now, I wouldn't you normally go ahead and do this because I like to do it in my own design style and build my own things. But the fact that I can give it a reference image and it can go ahead and do that. Now imagine you overlay with your own design styles. All these are 100% unique images and it's gone ahead and done that. Otherwise, this would have been a thousand back and forth. You know, I'd start as I say with no mustache and then by the time I'm done I'd have a huge mustache. That's how long it can take sometimes. Now, for the second level, I wanted to do something with my own design system and funnily enough it's the exact thing that I use in all my presentations here, uh, which is cool. And basically I've got this design system on Claude design. So what I'm going to do is give it a prompt to build me a little bit of an animation. As you can see, same process, design loop. I'm going to say use the below design system and I want to make a beautiful HTML graphic that last 10 to 15 seconds that I can overlay with the below sentence. The golden loop is a technique that we can use in cool design to create beautiful websites, presentations, emails, HTML designs, and much more. And you can use it in three simple steps. Oh, and by the way, if you are new here, my name is Jag. I built and sold my last tech startup with like a gazillion customers and now I'm building my own AI startup and I share on the channel all cool stuff that works. And one of the reasons why I'm so passionate about design is because in my first tech startup, it was actually one of the things that everybody always commented on and it genuinely led to uh investor conversations, it led to new clients, and it really set the standard. So, that's why I I really passionately believe in it. And we have this design and you can judge for yourself how close you think it nailed it. But look at this, websites, presentations, emails, HTML designs. This is great and this is run in the background whilst you're talking and you can brief, build, and critique. And if you don't like these things, you can move them around. But just incredible that you can use just simply one of these things and get these kinds of outputs. And if you're wondering what does this cost, I'm going to show you that as well and all the transparency cuz I can hear your wallet crying from through the screen right now. So, don't worry, I'm going to tell you exactly what this is will cost in credits. The third one I want to show you is the website. So, let's say I found this really cool one here which I think it's fantastic. So, credit to Almont could build this. I kind of like, you know, numbers dropping down and moving around. Wouldn't that be really cool? So, what we're going to do is copy this and do the exact same process, design loop, and let's see what it actually comes back with. All right, guys, here we go, 4404. Okay, cool. And we got all the things moving around. This is crazy and can I I can actually do this as well. Do you know what, guys? This has turned a disaster into something very fun. I mean, I might even just stop the video and play around with this for a few hours and see how I get on. See how many combinations I can get. This actually very, very freaking fun. I love this. But again, what was the design reference? It wasn't even a website. It was just the idea of a website. It was more the concept or the thought of a website. And obviously, there's things we could do, we can improve it. But how amazing is that? But, let's actually see behind the hood now cuz this is really important in terms of what does this cost and how do I use it and what if any are the limitations? So, I want to make sure you always get the full picture. And this is its, I guess, limitation of the kind of solution. And that's the fact that it spent 3 million tokens. Now, in the skill but I've given you, I delegate it out to sort of smaller models, but you can see how this can add up over time. Then, for the design loop itself, again, this had This was a system. It was interview, pre-flight checklist, tie down a loop. Um basically, and it was really good how it kind of broke everything down. It showed the evolution, three critiques, three blind spots covered. And this is the issue, Claude can't grade its own homework. You can't be the judge, the jury, and the executioner. So, bring me um And it just tells you what each think or So, for example, this is why this is so valuable. Round one, three fails, no logos. Color breaking monochrome, loud words underscaled. Round two, Hermes mark was too small. Round three, lime shape with a second accent. Round four, and you can see there were 10 rounds to get to this point. And the thing is, if you give anything to Claude and say, "Hey, what's wrong with this?" If you ask it five times, you will get five different answers. So, it's like each of these critiques are looking at it 10 times before you get the result, which is why it looked so high quality and why I think it's so cool. And actually, dude, honestly, in terms of the price for this one, not too bad. So, it's basically 730,000 Haiku tokens, which is not too bad. And Sonnet was 1.19 million, which I think was great. And finally, we have the Gauntlet loop. So again, six rounds, this one took three judges, zero mercy. We don't give any mercy in the beautiful critical loop, which is cool. And this one came in at around 2 million tokens. Now, one of the things that I'm definitely going to be experimenting with going forward as well is doing the same loop over a longer period of time, maybe with like a deep seek V4 flash or some other models. Again, if it sounds like magic or German, I'll put a link down below for the masterclass. Join the community. But, in any case, I think this system is honestly amazing. I'm so, so impressed with the results we got on one shot. And so, the other good thing to bear in mind here is that the loop can eat your credits, which is important. So, I would reserve this for your bigger things, Like the things that you really want to crush down and get ready. Like templates, for example, that you are then going to go and reuse. Like your carousels or big jobs. Or, you could actually bring in other models like a Deep Seek V4. But, you do want the big model to be Claude cuz he's got great design taste. Again, one piece per project and you can be the person who stops it once it's gone through automations. But, I found when it went through rounds, it kind of ended naturally at a great point. And so, now we've covered this incredible skill. The next thing that we're going to do is learn how to leverage that skill to build beautiful websites, which we can do in this video right here.