Claude Design Just Solved its #1 Problem... I Quit

0:00 Clo design builds beautiful websites and motion graphics, but 99% of them are either generic or just inconsistent. But in this video, I'm going to show you exactly how to build beautiful designs

0:14 with Claude. Building gorgeous graphics every single time and how to turn those into a system so you can get that incredible output each time. And this works for any design style, even if

0:27 you're a complete beginner. So, if you haven't already, grab that beautiful coffee and let's dive straight in. Building beautiful designs in Claude can feel like magic, but when you use the

0:38 right system, like you're going to learn by the end of this video, you're going to feel like a magician every single time in Claude, regardless of your skill level. Now, the idea is one system for

0:48 every single format. Whether you want to build beautiful websites, whether you want to go ahead and do graphics, design posters, or you just want to go ahead and use anything like HTML emails, this

0:59 system applies to everything. But before you understand what the system is, I have to explain one thing and that is the actual problem that we are solving here. As I always say, we have begun our

1:08 crusade against AI slop and I invite you to join me with it on this channel. Now, this is called the consistency problem. There is no point building something that is beautiful and fits for purpose

1:20 unless we can actually replicate it. And Claude fundamentally understands what it's doing. You can't use it for YouTube, for Instagram, for any of your clients if you can't replicate it. And a

1:32 design system only goes so far. And to do that, we're going to use one of the strongest features inside Claw Design that most people don't even know exists to solve this issue. And the great news

1:42 is we only need to do two things. Number one is make the design amazing. And number two, actually codify what makes it brilliant such that it can reproduce this any single time that we wanted to.

1:55 And by the way, if you're new here, my name is Jack. I built and sold my last tech startup with like a gazillion customers. And now I'm building my own AI startup. And on this channel, I share

2:05 here the stuff that actually works. So if you want more of that, feel free to hit like, subscribe, drop a comment. I really appreciate the support. Now, step one is going to be the design loop. If

2:15 you're not familiar with the design loop, you can check out this video right here. But essentially, what we're going to do now is use the design loop to build something. And we're going to do

2:24 this across three levels of epicness. Start with something that is really cool and build something progressively more impressive as we go ahead and actually use it. And then once we've done that,

2:34 we're going to take our wonderful design and then we're going to deconstruct the DNA of it such that we can rebuild it as many times as we want. Thereby solving the big consistency problem that takes

2:44 you from a dabler to a full full-blown design genius inside Claude. And we're going to do this across a poster, a website, and also we're going to use Vox style animations so you can capture the

2:56 glory and the wonder of what that looks like. Beginning with the poster. So what I'm going to do is shoot over to this website here which is save. This is like your designer's favorite kind of like

3:05 location to get different graphics. It is amazing. And just looking through this, you can see how gorgeous and beautiful all the different design graphics are. For this one, let's go

3:13 ahead and design a poster. I quite like the look of this one. So, let's say that we're doing a I don't know AI conference, right? And we say, well, I want this design. I wonder if I could

3:23 build something similar in Claude itself actually using this principle. So, what you're going to do is come down and either save the design or screenshot it. Again, these guys are not sponsored. I

3:31 just think their website is freaking amazing. And once you've got that, I want you to come over and grab this design loops skill. All you're going to do is come down and download it. This

3:39 will be available in the second link in the description. I've put a copy of this inside my free community. So, you can literally come down and grab it. And all you're going to do is literally control

3:48 all of this. Shoot over to Claude and then just say, "Hey, turn this into a skill." Like so. Just drop it down and Claude will turn this into a skill. Then effectively all you do is do for slash

3:58 and you're going to type in design loop like so. And then then you can go ahead and use it. And if you're not familiar with how it works, effectively what it does is you provide to Claude what the

4:08 dream outcome is. And like I want it to look just like this and Claude will actually spin up two or three different sub agents and they all challenge Claude in a loop to make sure that it's

4:19 accurate because if you ask Claude 10 times to improve a design, it comes back with 10 different things. So, one of the agents will say, "Hey, my job is to make sure that it marries everything

4:29 perfectly and we have the right spacing." The second one might be ensuring it sticks on roof. And it goes around these loops until the design is perfect. It is by far the biggest hack I

4:38 found for getting incredible designs. And for generating images, we're going to be using Higfield, which is a beautiful platform that you should basically use any image model, any video

4:48 model. You can literally connect them by coming over to the MCP and the CLI. So, all you're going to do on this page, literally guys, I'll put a link down below so you can just click this and

4:57 take you directly here. You can just come down, screenshot this if you're not connected already. And what we're going to do is basically just get called to connect to it because we're going to be

5:05 building images and videos and we just want to connect all this in one sequence. So, just literally screenshot this or just literally copy the link that I give you and come back over to

5:14 Claude. And if you're not connected, paste it in and say, "Hey there, go ahead and connect to Higsfield with the CLI." Just like that. or just say, "Hey, follow these instructions." And then

5:24 once you're connected, effectively, you're going to come down and give it this prompt. I'm going to say, "Hey, I want you to design for me a version of this for AI creators for an AI

5:33 conference that's coming up." And when it's done, just create me a second file explaining how all of the design critics worked in creating this and watch that and then send it straight off. And by

5:43 the way, if this sounds like Spanish, I'm going to put a link down below for my full Claude Code Masterass, which is available inside the community. I take you through foundations, websites. I'm

5:52 actually building out a full claw design system course. Stuff I have never shared on YouTube ever. It is going to be the best that I've ever seen on it. I can't wait to share it with you. We've got

6:02 design systems, compliance, maintenance. All this stuff is live. And you also get immediate access to the entire Claude Code operating system, the design OS, and a bazillion other things with this.

6:12 It is literally awesome. So, if you want to get ahead, I'll put a link down below for you so you can go and grab that. And now this is the original and this is what we got from Claude. Let's take a

6:20 look. Look at this. Andre Kapathy. Andrew. Oh my gosh. I'm not seeing my name on here, guys. I obviously I have got work to do on the Jack Roberts YouTube channel. Clearly, we've got Matt

6:29 Wolf on there. We've got Lex Freedman. Very cool. I mean, look at this. This is the original and then this is what Claw Design. I think that's remarkable that it's been able to do that literally

6:38 using this system. And you'll notice the attention to detail. For example, let me scroll and show you this. You see this? You see how that does not exceed the line height? This is something that you

6:47 get a big issue with Claude. It kind of looks okay but isn't actually because when you go into the small details you can see look at this. The model has correctly identified that the height

6:56 must basically must mirror this thing on the bottom right and the bottom left which has done very very well and it's done good attention to detail here which I think is really really impressive. But

7:05 the real measure comes is can we make this consistent? Well the answer is yes when we give it this skill that I've been locked away for a long time building this out so I can show what

7:14 this looks like. The idea is one design, one system, any format. Again, this will be the second link down below in the description. Now, this explains what the problem is. So, you run a design loop.

7:23 Lots of models make lots of options. One comes out beautiful, then it stops. No one writes down. Why does this look good? We don't codify what that looks like. So, effectively, what we do is we

7:33 find a design that we love. We take it apart, measure it, don't describe it. Argue with yourself about which bits actually matter. Write down the rules as a file. Write tests that a bad copy

7:41 would fail. Rebuild the original from your rules alone. Whatever you get wrong is a rule that you forgot and you do it again. And effectively, this just explains everything about what makes a

7:51 good design. Ratios. For example, the golden ratio 1.61. How much, not just what. Uh we talk about uh 603010 for color theory, uh weird moves, refusals, looking at what's missing, shadows,

8:02 icons, curves, named layouts, you name it. We basically break down this design from like a bazillion different lenses. This, by the way, is just at the the kind of tip of the iceberg for the stuff

8:12 that we actually cover inside the community, but you get the idea of what we're looking at here. As you can see, this beautiful notion document has everything. And then all you're

8:19 literally going to do, genuinely speaking, is come up here to share, going to come down and click on copy link, and then head over to Claude. And then in the same chat window, just drop

8:27 that notion doc in and just say, "Hey there, I want you to go through this notion document, turn it into a skill, and then run this again to turn this into a reusable skill for me such that I

8:37 can build these movie posters out whenever I want to." I said movie posters, I meant AI posters. It's cuz they're so freaking cinematic. And then go ahead and generate the same thing in

8:47 two different colors. And then when that's complete, we got this color. Then we have this one, and then we have this one. I mean, you can pick the one that you prefer, but as you can see, we'll

8:55 start to get this as a consistent thing now. And then we can just save this as a skill. So, all we need to do is for/poster if that's what we save it as. And then effectively, we can just create

9:04 this for whatever we want to and then just drop in anything that we need. Now, the really cool thing about this skill in particular is the fact that it should come back and query you on what do you

9:13 need to do it. So, for example, if it identifies to do this, I need a subject, I need a foreground, I need a background, it will ask you for those particular things. And this takes us

9:22 very nicely onto level two, which is the website. Websites are awesome. I personally sold websites for thousands of dollars. I say that not not to brag. It's not impressive, but just so you

9:33 know that I've been through the process of building these and selling them myself, just so I I I don't just yap about what looks good. I've done this previously. Websites themselves, I

9:41 honestly think, are one of the easiest ways to add so much value to businesses. So, what we're going to be doing here is taking a look at a website like this, which is referral design. It has over

9:52 2,000 AI readable design systems. Again, they're not sponsors. I just think it looks really freaking cool and I love what they've built here. And I'll shout out what works. That's that's how we

10:01 rock on this channel. We have a good time and we share out what works. You have a gorgeous website like this. And I I freaking love Mercury, by the way. What a cool freaking product. But you

10:09 can come down, you can see this, and it breaks down everything. So, the idea is that we can just literally grab a URL, come back over and share that with Claude itself. Now, one that I really

10:20 like on here is a bird that may have been chasing you around a lot. It's a bird that you may be familiar with. It is, of course, Dolingo. I love Dolingo. I've like Dolingo for a long time. But

10:30 what's very cool about Dolingo is the fact that they've got a very cool website. So, for example, let's say that I want to recreate this, right? And look at it. It's not a simple website. It's

10:40 pretty gorgeous. It's got animated graphics. It's got a scroll through. It's got free fun effective. It's got different animations. You can scroll through and see. It's a cool freaking

10:48 website. I mean, this is amazing. I I love the look of this website. It's very decent. What if I wanted to build something like that? What if I wanted to build the AI for Dualingo for AI? Well,

10:58 what I would do is copy this. Head over to Claude. Come right here. As you can see, my fable limit is nearing the end at the moment. Going to come down here. I'm going to type in design loop like

11:07 so. I'm going to say, "Hey there. I want you to go ahead and build me a version of this website, but make it like basically Dolingo for AI. I want you to go ahead and use the Higsfield CLI

11:19 essentially so you can generate the images and the graphics and then go ahead and use my website design system skill to go ahead and create everything uh that shows me the copy, the magic

11:30 copy and all that sort of stuff. All right, come down like this and then literally enter in that URL and then you're already connected to Hixold. So you just click send. And this is an

11:38 example I actually did in my last video. But check this out. Look at this guys. And as you can see, we've got all these different it built all these custom graphics. All these images I built on

11:47 Higsfield. The graphics as well. I've got something I can interact with. I've got individuals flying. I mean like all these like custom graphics, custom styles is amazing. Like it genuinely is.

11:58 And look at this. I think this section is sick. 5 minutes wherever you are. Really freaking cool. Neuro pro a portfolio, not a paper certificate. In a month you'll prompt like you meant it.

12:07 Really freaking cool. Come down. And then we've got loads of nice things happening at the bottom. And then everything right there. And as you can see, it is pretty similar to to Dolingo.

12:16 It's really understood the dynamics of it. But you might be thinking, Jack, that looks good, but how do I know it's done that? Well, one of the design systems, and I I built this inside my

12:23 community specifically because I really wanted to give everyone like a really cool edge. But look, if you click on system, check this out. This is the design system behind it, right? And I

12:31 can see all the typography. I can see basically all the buttons that we use. And if you've ever used Dolingo and you've been harassed, there is support out there for harassment from the Duo

12:41 Hour, by the way. But as you can see, you'll be very familiar with these buttons, um, the lesson paths, iconography, the login screens. I mean, it's just freaking gorgeous how much

12:48 it's locked this down. But that's only the beginning. The second is getting a graphical design system, which my system does, which is cool. It basically has produced cast members. It's got rules

12:59 for how to build them. And look at the asset inventory. And now I've got this asset inventory locked down. I can essentially just reproduce any ones I want to because I've got the characters

13:08 nailed down. So if somebody's reading the book or somebody's drinking some beautiful beverage or whatever they're doing, it's fine. And then obviously the other thing I've got here is a model

13:15 sheet which basically explains like the height and the size um so that everything should remain in proportion uh along with our color palette, the motion loops and then crucially as well,

13:25 one big thing to elevate the quality of your design is going to be graphics. This automatically pulls down loads of fonts that you can have a look and play around with and as well as what is

13:33 considered to be recommended based on the kind of website that you're doing which I think is really freaking handy and whether you give this to a client or not so they feel like they have some

13:40 optionality it's amazing and then crucially we have the copy so you don't have AI slop this copy system that I built here by the way basically draws on the best anti-slop repos that exist um

13:52 Wikipedia principles a cleanse from GBT 5.6 six world class copy from like the best copyriters on the planet removes loads of AI garbage built on principles like don't make me think name the pain

14:05 and it will actually go through the entire website and then instead of like having like basically like poor converting stuff like get started start instead of the fun way to learn AI it

14:16 changes it to everyone uses AI almost nobody is good at it and then it's just a really sick thing and just goes down that and then drastically deai slopifies as your websites. I responded to in my

14:27 community, I'm not joking here, um, hundreds of websites. I remember I did a big thread on this on my community and literally the biggest feedback I had for people was not a too much text, but the

14:39 second issue that they had was just it looked like it'd been written by AI. So, this really helps with that from a sales point of view and also a general copy. But then that takes us very nicely onto

14:49 level three, which is the most ambitious and difficult challenge of them all. What is that, Jack? Is it climbing Everest? It's even harder than that, guys. It's the Vox graphic style. Now,

15:00 funny story when I was looking at what be really tough challenge. I saw so many saying like videos on Vox Graphics and I was like, you know what? We're going to freaking do it. We're going to have a

15:08 little playing around with it and see what it looks like because and I also just wanted to show you this works for literally anything. So, this is the one that we're going to be using, this Vox

15:17 graphic right here. So, I'm going to hit play so you can have a little play around with it. As you can see, brings out a shark, brings it across. Another arrow comes here. Nice narration style.

15:26 4T 4 in. And as you can see, they've got a really cool narration here. >> Less than a year old. That made it easier to move. >> Cool. So, maybe we're doing explain

15:35 together and I just want to crack the vox start. Well, how do I do that? Well, first thing I do is I'm going to come back and I'm just going to grab where this exists. So, I'm going to come down.

15:44 Let's just copy video video URL at current time and head over to Claude. And then of course, as always, I'm going to come down for my design loop skill. I'm going to say, "Hey there, I want you

15:52 to go ahead and create for me a 10second motion graphic with an in the Vox style, and I want you to use this as your gold standard, these this 10-second clip." Okay? And I want you to go ahead and use

16:05 Higsfield for the image of videos, and I want you to use fish audio for the actual audio voice on here, please. And then go ahead, build it and make it about a springer spananiel. If you don't

16:17 know, I have a Springer spaniel. He's pretty freaking cool. I love him. He's amazing. And then we're just going to send this one off. Now, when I'm doing any kind of voice generation, I use Fish

16:24 Audio for a couple reasons. Number one, it is about 3 to seven times cheaper than alternatives. But the coolest thing about this, genuinely speaking, is the fact that when we narrate things, we

16:35 don't just want to have it in a plain language. And if we're doing a Vox style video, there might be times where we want to be sad or excited. The very cool thing that you can do with this actually

16:46 is you can add in tags. So I could say something like the English Springer Spananiel is a powerful dog that loves hunting, but unfortunately they eat a lot of schmackos. Something like this,

16:56 right? Then if you click on auto tag, what this will actually do is add in any like emotions for anything you're doing. And I mentioned this just because I want you to win, right? And if you're

17:05 building like actual voice and audio and something you want to sound good, so I might say these. And again, you can add these in. You don't have to follow these ones, but you can just literally add in

17:14 any emotion that you want to. Crying loudly. I don't know. Let's play around with it. And then we can pick our voice over here. We've got the clear young narrator. Let's go on to more voices

17:21 here. And they have this ridiculous library, which is freaking sick. They even had one for Morgan Freeman, which I thought was funny. Claude actually refused to use Morgan Freeman. I thought

17:28 that was highly, highly controversial. But let's go down to here. We've got Mortal Kombat >> Nicholas. >> You get the idea. One that I really like

17:35 though, I think, is this one here. >> Consider how often. >> Cool. So, if you're doing whatever it is, we can click on use for that. Come down and then we can come down here and

17:43 generate the speech. And we're using the S2.1 model, which I really like. >> The English Springer Spaniel is a powerful dog that loves hunting. >> You get the idea. You can play around

17:53 with it. And we can connect this directly into Claude. So, if you come down here and click the bottom left, which is developer, and then on the left hand side, you're going to see API keys.

18:00 And then you're going to click on create API key. And then essentially you can head over to claude and just say hey I want you to connect to fish audio using the below credentials let me know

18:10 anything that you need and then when prompted just provide it with your API key and then it can actually go ahead and build everything and then when it's finished it's produced this 10second

18:17 clip for us and I'm going to have the um the vox on the background so you can see the similarities. So here's the vox. This is the English Springer Spananiel. 20 in tall, 50 lb, bred to spring birds

18:31 out of cover. And that is how it got. >> So, what's interesting to me on this one as well is we even had from Higsfield, as you can see, look at this animated background. It produced a unique

18:41 background and video specifically for this animation, which is cool. And bear in mind, it's done all of this basically copying that exact style that we gave it. So, if we gave it a more complicated

18:51 style or a less complicated style, we could literally go ahead and replicate that, which I think is cool that you can give it this video and essentially just kind of like create anything that you

19:00 want to. There's a spananiel happening in the background. We have some leaves falling, which is awesome. £50, which is great. And then we have the stuff here. Then, obviously, the really cool thing,

19:08 if we wanted to, we can also bring in, if we want to sound effects from Fish Audio. So, we're connected, we can bring in the audio, we can add in various different things. We have the river, we

19:16 have everything we need to. And just like before in the last design, what this will effectively do with this prompt and this system is reverse engineer what it is that makes it. So

19:26 for example, what it will do is identify all the assets like, hey, it has an arrow, it has a background with a video, it has this kind of text. And it essentially breaks down in step one what

19:36 all of the different components are that make this up. So video in the background, image of the thing, and here you might say it has like a yellow explainer with a link and it goes ahead

19:46 and does that. So you can see it is whatever you essentially feed it you can replicate with the right systems using this prompt. Now, understanding design is incredible, but it's only one part of

19:57 a multifaceted system. And if you don't leverage an agentic operating system and a design operating system, you're leaving too much value on the table. Which is why we're going to learn

20:07 exactly what that looks like in this video right