How to Use Claude Design Better Than 99% of People
Read the Portuguese translation →
Author: Jack Roberts · Watch on YouTube
Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.
Original language: English
Original video: How to Use Claude Design Better Than 99% of People · Channel: Jack Roberts · 34:31 · Watch on YouTube
Topics: AI agents, Claude, Software engineering with AI, AI content generation
Summary
Section titled “Summary”The video presents 15 progressively advanced ways to improve designs made with Claude, from looping motion graphics and premium interactions to brand guidelines, editable social posts, and 3D websites. It recommends using references, design galleries, fonts, icons, and brand systems to guide Claude toward more polished, consistent results. The creator also demonstrates agent-based review loops, simplicity checks, and tools for making AI-generated copy sound more natural. The final sections show how to combine design assets, motion graphics, and business workflows in an agentic operating system.
Key points
Section titled “Key points”- Give Claude reference clips, brand assets, colors, and a clear plan when creating motion graphics.
- For looping graphics, describe the idea, request three style variations, and specify that the animation should loop.
- Use subtle interactions and resources such as LottieFiles and motion-design galleries to make designs feel more premium.
- Create a brand book from strong examples and use it to maintain consistent colors, typography, logos, and rules.
- Use Linearity to generate on-brand social media designs and then edit, share, and connect them to Claude.
- Improve visual quality with deliberate font and icon choices, drawing inspiration from relevant galleries and references.
- Use design inspiration sites and apps such as Mobbin and Refer to study specific layouts and user journeys.
- Use a design loop to compare Claude’s output against a gold-standard reference, and run specialized agents to review designs.
- Apply a simplicity test to reduce text density and make pages understandable at a glance.
- Use Slop Monster and simplified technical English to improve AI-generated copy and assistant communication.
- Combine Claude, image and video generation, and an agentic operating system to create and manage reusable design assets.
Chapters
Section titled “Chapters”| Start | Chapter | Summary |
|---|---|---|
| 00:00 | Introduction and motion graphics workflow | The creator introduces 15 Claude Design hacks and explains how to guide motion graphics with references, brand assets, and a clear plan. |
| 02:34 | Looping graphics and premium interactions | The video explains how to request looping animations and add subtle interactions that make designs feel more polished. |
| 05:07 | Building a brand guideline | The creator recommends using existing brand guidelines, deck references, and logo inspiration to build a consistent brand book. |
| 08:13 | Generating brand imagery and using Linearity | The video shows how to generate branded images and use Linearity to create, edit, and share on-brand social media designs. |
| 14:23 | Fonts, icons, and design inspiration | The creator recommends font and icon resources, plus galleries for studying website sections, animations, and app designs. |
| 21:07 | The design loop and agent reviews | The design loop uses a reference as a quality target, while specialized agents review the resulting designs. |
| 25:48 | Simplicity and reducing AI slop | The video advocates for clear, low-density pages and introduces Slop Monster and simplified technical English for more natural copy. |
| 29:55 | Recreating graphics and building 3D websites | The creator demonstrates using references to recreate graphics and describes a skill for generating interactive 3D website elements. |
| 33:00 | The agentic operating system | The final section shows how an agentic operating system can organize and reuse designs while connecting them to business workflows. |
Quotes
Section titled “Quotes”So, the first thing that we’re going to do is give Clo a reference and a plan. — 01:33
ask for three different style variations, and then essentially, you’re going to make sure that it finishes on a loop. — 03:04
So, the idea with this is with the design loop is that you give Claude what great looks like. — 21:07
The biggest issue I found across all of them is text density. — 25:48
it combines design with functionality. — 34:01
Concepts and entities
Section titled “Concepts and entities”Claude Design, Claude Code, Opus 5.5, Higgsfield, Linearity, Slop Monster, Design Loop, Don’t Make Me Think, LottieFiles, Jack Roberts
Full transcript (original language)
Section titled “Full transcript (original language)”00:00 I’m going to show you exactly how to build beautiful website designs and motion graphics with Clo Design 2.0. And after hundreds of hours building with Clo Design, I’m going to show you 15 Clo hacks that will save you hours and turn Clo into a design [music] genius. Starting from simple and building to advanced, and we’ll include stuff I haven’t seen [music] anywhere else. So, if you haven’t already, grab that beautiful coffee and let’s dive straight in. So, let’s begin with the very first Clo Design hack. Now, Clo Design itself has genuinely got brand new
00:31 capabilities. With over 5.5, it can design incredible things like this. You can do so many different kinds of art style. And yet, most people’s look like slop. You can do these kinds of things in one shot. And by the end of the video, you’re going to be able to use and build beautiful motion graphic animations, everything that you could possibly imagine, like this. Beginning though, of course, with the first thing we’re going to cover, which is going to be the workflow. And I’ve got so many hacks, guys. I hope you’re buckled in and ready. Now, level one is motion graphics. And I’m also going to include down below for you guys the full Clo
01:01 Design uh prompting system. So, everything we talk about in this video, guys, is going to be available for a prompt that you can literally come down, grab whenever you want to, and essentially replicate some of the stuff that we’re going to talk about in this video. So, what do I mean when I say Clo motion design? Well, a lot of it is similar to stuff that you’ve seen. So, if we just come over here to the generative operating system, let me show you the kind of things that you can do with motion design. Now, the question Look, good motion design is one thing, but the question is, how do I actually go and build them? Everything that you’re seeing on screen right now is something that I created with motion
01:33 design. How do you physically do that? Well, using Clo without motion design is like having a Ferrari stuck in first gear. So, the first thing that we’re going to do is give Clo a reference and a plan. We do this because you essentially want to explain what you want those motion graphics to look like. You hand it a reference, you explain what you want that thing to do, and then essentially, you just direct it for whatever the thing is that you want. And the system to do this is give it a reference clip that you like, something you find interesting, provide it with your brand, your different logos, your colors, and then sort of briefly explain it. So, you can do is literally copy
02:04 this prompt by coming down to section one, copy this right here, and then you’re ready to go. For example, this thing here that I built with Glido, all I did is gave it my own website. So, I just came down and I said glido.com, I pretty much just gave it this website and said, “I want you to build me some beautiful birds with a glowing logo.” And it generated this asset entirely. And you can see here, these are all the other kinds of motion graphics that people have generated using this entire system. People have essentially gone ahead and created horses, they’ve animated loads of different things. Which brings us on to level two. Level two essentially is the ability to get
02:34 graphics to loop for you. So, the idea here is that we have one idea and one looping graphic. So, instead of giving presentations, we can actually create these beautiful animations that have the same start frame and end frame. Um it’s basically, you know, if you think about why we do this, a a still slide itself is quite static and not interesting. And what is a good example of this? This very thing that I’m showing you right now. So, essentially, it can make any presentation doing significantly more engaging. And all you’re going to do to essentially go ahead and build this, guys, is very simple. Essentially, you just explain what you want the thing to
03:04 explain. Um ask for three different style variations, and then essentially, you’re going to make sure that it finishes on a loop. And for example, if you’re doing this with Instagram Reels, which is something that I did, when I get it to go ahead and create for me different graphics, I always ask it to generate three different styles so you can actually have a look through, find out the ones you like the best, and then select it. And I have gotten tens and tens and tens of thousands of views using this exact strategy. And even things like YouTube videos, it is pretty handy that you can do that. Again, I’ll put the prompt below link so you can just go ahead and copy that. Now, hack
03:34 number three is how you can make any of your designs feel a lot more expensive. So, the idea is we’re going to give small touches, hover lifts, soft presses, counter numbers. How can you actually make the vibe and feel of any design with cool design just feel that little bit extra, a little bit premium. A good example of that is this exact thing that I built here for my startup. Now, check this out. If I run you through this, this entire thing I pretty much just prompted with Claude design using Opus 5.5. If you look at things like this, you look at the hover animation, you can see this for example
04:05 was built with this. All this sort of stuff here, so part of the velocity here where it goes through and checks the apps. Every one of these animations that you see this rolling animation and text, that looks super premium. Now, Claude design wouldn’t do that by itself for example, right? So, the question is how do you go ahead and do that? Well, you can do things like this. So, this is an example. I’m having the birds go to the animation, come down, and things are appearing. One of the sort of resources you can use is something called Lottie files. And what’s cool about this is these are graphics that used to be included in websites, but actually here you can just go ahead and integrate them
04:36 anywhere you want to. Say you like this cash imagine, right? Say you like this. Whatever the thing is, you can go ahead and save them. Does success take a look familiar? Brilliant. All you do is find the right one that you like. You can literally come down and copy it, even copy the URL, and share that. And they have loads of free resources on here, too. Other good options are transitions.dev that show you some really cool crisp transitions. If you want to go and grab that, you also have this again. All these websites will be down below for you in the description. You have 60framespersecond.design, which is great so you can see all these different kind of graphics and motions and how that all moves across. You’ve
05:07 got Kinetic that essentially covers motion and how different things move. There are so many different things. Even have motion primitives. It’s a really crisp, uh, nice set of designs that you can go ahead and steal here. Now, hack four is how you can actually take any one of your businesses and create an incredible brand guideline for it. Because without a proper brand guideline, it’s tough to get any kind of consistency. So, what we’re going to do here is we’re going to have one file that holds all of your colors, your types, your rules that you can hand to Claude anywhere. And this basically means Claude will remember exactly how you want things. And all you’re going to
05:37 do is essentially just go ahead and develop that. Now, thinking and knowing that you need a brand is one thing, but the question is well, how do I actually go ahead and do that? Well, we can build together something called a brand book using some pretty incredible resources that are completely free. So, effectively what we’re going to do is find inspiration, we’re going to turn them into a file, and then essentially we’re just going to share that with Claude or whatever service we’re using. And I’ve got again a um prompt that you can go ahead and copy and share that with Claude and it’ll do it. And again, you can go ahead and literally get so many different things. So, some of the places that I highly recommend that you go and check out when building out your
06:08 brand. We start by finding existing brilliant brand guidelines. So, you can go ahead and find some of the best brands online and actually see what they’re doing to model it. So, this is for example all the brand guidelines for Spotify. What I could do is actually copy this, head over to Claude, and I could say, “I really love the way that Spotify have laid out that brand guidelines. I would like you to help me to develop my own brand guidelines using this exact structure, but make everything completely unique.” So, I just finished with glad of that, come down, and I give that as a sort of like a reference file, right? And then it can go ahead and use the documentation for
06:39 Spotify. Or maybe you prefer Adobe. You can do the exact same thing. As you see, they have a lot more kind of taxonomies, and the brand purpose, vision, that kind of thing. Then you may want to go ahead and build a beautiful deck design with Claude. To do that, what you can do is this website here, which is deck.gallery, and you can see all these beautiful decks that exist to get inspiration. And inspiration is really important when building things. So, you can come through here, find ones you think great. You’ve got Instacart, some of the best fastest growing brands essentially on the planet. And it also includes overviews of slides. So, eventually any kind of slide that you want to go and find, maybe you like the
07:10 look of this one. Again, there’s like paid options, there’s free options. You can play around with it. Next thing is to lock down your logo, because a website without a logo isn’t a website at all. logosystem.co is really cool. So, you can come down here and essentially browse and find good inspiration. So, what you would often do is just come down and copy the images, come back over to Claude, and essentially you’re looking for a bit of a collage. Let’s say I like the near right. Let’s say we come down and I love the simplicity of Lyft. We’ll come and grab that, check that one out. Come over and just drop down a few different logos that you actually like. Once you’ve gotten a few that you think are decent,
07:41 because not everybody can articulate what they look like. You can even say call open call one here for example. Maybe like this with the graphic bird. Then you come back over to Claude and you say, I really love these kind of designs inspired by these. Give me nine options of a logo for a speech to text startup that is all about generating beautiful images. Now, the way that I’m actually generating these images inside Claude, and I do this for everything, is using the Higgs field CLI. If you know already, feel free to skip this bit, but if not, essentially what Higgs field lets you do is use the best image generation models, video generation models. It is unbelievably simple. I do
08:13 all my generation over here. In fact, you can even come over here if you haven’t set it up, and I’ll put a link down below so you can click and do this. You just click over to MCP, this section right here. You’re going to see this. You’re just going to click on Claude or ChatGPT, and you just click on connect Higgs field. And then this page will open. You click on continue. Come down to the bottom. Click on add. It’ll check the connection. You click on connect. This will then open up for you in a new window, and then you can do anything. And you’ll notice like all the presentations graphics I built in this video were using Higgs field essentially. So, it just makes it way easier to go ahead and build things. And
08:43 then effectively, it’ll all be completely connected and you can generate anything. And whilst that’s cooking in the background, if you’re looking for inspiration for different campaign, you can go to visualjournal.it. This effectively is just a collection of beautiful different designs that you like. So, say for example, I like the look of I don’t know, this bottle, right? So, say I like this image. I can just copy this image. Come back over to Claude for example. Drop that in and say, “Hey, I love this. I want to do something similar for Glido. Could you add a Glido logo to one of the bottles using our exact color scheme and just go ahead and use Higgs field for that.
09:14 Thank you.” And then it comes back and it’s generated these beautiful images like so. And I think it’s great. It’s really captured the essence of the examples that we gave it. And using Claude design, you can build beautiful graphics like this. And then likewise, we’ve gone ahead, it’s gone to my website, understood what that’s about, and added the logo to these beautiful bottles. Does Glido do bottles? No, it doesn’t, but you get the idea. You can effectively build all of this stuff with Claude design. Then for visual identities, you can move over to rebrand.gallery to see all the different kind of brand styles to see all these beautiful different ways that you can do it. And again, this is all stuff that you can feed to Claude to build
09:45 essentially your own unique brand identity. Now, Claude is incredible at building and generating websites and graphics and images and designs. But sometimes with a brand, we need to get everything. We need to get X posts, we need to get LinkedIn posts, Instagram, and we need the ability to edit them. Which is where the next tool comes involved here. And this is something called Linearity. So, what Linearity will let us do is only create tools with Claude or whatever models we want, but essentially then edit it, share it with our teams, and make it highly configurable. They’ve got a really cool flashy 3D website so you can prompt and
10:17 design loads of cool things. Go ahead, describe the thing that you want, tweak it, and then ahead basically go ahead and use that anywhere you want to. So, to begin, you can actually go over to Linearity and create an account. Now, once you land inside Linearity, come over first of all to the side on the left and click on brands. Here for example, you can actually go ahead and create your own brand. For example, if I click on this and click on new brand, it’s actually pretty impressive how it does this. So, I can enter in a website brand name. So, let’s go ahead and enter glido.com as if for instance. Once you’ve done that, you can actually view the brand. Now, I’m already set up for
10:48 this, but again, it could be anything that you want. So, let’s say for example, monzo.com, whatever the thing is. I literally come down here and I click on import, and essentially I can do use this set up pro brand feature. I can upload my own design books if I want to. Now, the idea here is it goes ahead and imports all the assets, all the color scheme, the typography, everything from that brand and has it in one design system that we can basically use whenever we want to. And to show what that looks like in reality, if I come over to Glido for example, you can see it’s captured the logo, it’s got
11:18 typography, colors, all this kind of stuff. And essentially, it’s kind of if you like the uh magnum opus of the Glido brand. So, I can do this with whatever I want to. But what we want to do is to actually create stuff. So, if you come down and and click on create, and then click on generate design. You’re going to land on a page like this with some nice curly arrows. So, let’s go ahead and ask it to build something using this brand system. So, I would like you to go ahead and create for me a Instagram post announcing that Glido is now live on Windows. Give me three
11:50 different ideas or designs based on my design palette. And then right here, we can select the individual brand that we’re using, which of course is Glido, and then just go ahead and send that off. And just like that, you’ll almost see this thing appearing now in the background. Now, the way that I would think about linearity as a platform using Claude here is I find this a combination of Claude and Canva having a baby in a way because it looks very similar to Canva in the sense that you get this huge canvas style where I can double click in and see things, move things around, and edit them once
12:21 they’re there. Now, we have to clarify what format we want. Now, this is asking the questions, so we’re going to go with the classic standard one by one. Come down and click on submit. Obviously, you can if you want to just go and find the exact dimensions that you need, the exact proportions you need for whatever the thing is that you’re actually building. And as you can see, guys, we now have these images that have been dropped in that we can use for Instagram. Now, three different designs and style ideas, but what’s really cool here is we can actually come down and edit it. So, for example, we think, “Well, this is great, but what if we want to make that slightly larger?” Well, we can do that. We can edit it around and do this. And this is really
12:52 one of the cool things that we can do here is the editability and the fact that we can make things different. So, we’re not just kind of firing it up a pipe, we get to do it. Maybe we want to make this Windows release larger. Okay, cool. And then we want to edit this text, we can come down and do that. We can basically change the fonts to anything we want to. And you know, maybe we want to make this logo a little more prominent, we can bring that over. Essentially, it’s editable in any way that you want to. And if you’ve ever used something like I would say Photoshop or any of these kind like Figma, a lot of this will be really familiar for you. But essentially, you
13:22 can build these designer and then just make tweaks very easily. And all we can do when we have the designs we like is come over and click share down the right hand side. Share it with teams, download them, do whatever we like. And then on the left hand side, you can click templates if you want inspiration to have a look at some pre-existing things. You can also go on and add elements. Again, it’s got that kind of Canva kind of style where you can bring things into it. You can text and even upload images to effectively be able to design yourself whilst also using AI. But then the cool thing is if you actually come back, you can come down here on the right hand side and click on connect to
13:53 and you can connect this to Claude via the MCP by clicking on say Claude desktop. You come down and then click on continue and after it gives you all the instructions you need to follow. You can copy this, follow the instructions and then you’ll actually be able to connect to your entire brand system. The cool point being with this guys is that it has everything for your team, whatever it is that you’re trying to build, any different kind of design systems, any kind of projects or different um formats, different sizes, you can go ahead and build in one design system. And then on the left hand side, if you come and click on brands for example, you can see now I’ve got the Monzo thing
14:23 here. I can even check out the Monzo assets and essentially these are all the assets that it’s extracted from it. Again, I can come down and check out Glido and see the different assets that it has for the brand. Now, bear in mind, I didn’t actually go and add these. It just went ahead and extracted them itself. And now what it will sit there so I’ve got all this beautiful imagery. I can edit to it, I can create to it and do anything that I like. Now, this takes us nicely onto level six. Now, the fastest way that you can actually go ahead and level up the quality of your designs with Claude code and Claude design is to use fonts and icons. Now, you’ll know that you can easily spot a
14:55 bad sloppy AI design based on the fonts that it’s used. It’s got a very kind of look and feel. So, some places you can do this if you want to. Obviously, first option is if you want, you can generate these using Higgsfield or any AI image video generator. Obviously, I use Higgsfield for this sort of stuff. Now, look how gorgeous this is. This is what has been generated by Higgsfield. So, this is a unique way of generating different images which is gorgeous. Look at this. We’ve got down here. You’ve got Auto Hue Counter. This if you want to invent your own typeface, and you can completely do that. Now, for the text on
15:26 your website, you can go ahead and use things like Typewolf. This will show you lots of different fonts that are crushing it right now, and you can pick ones that you like. In addition to that, you can also go ahead and check out fonts in use.com. I really like this website because, let’s say that you love Halo, because every sane person loves Halo. And I love the way that they’ve integrated that font. I have a specific project that would look great for that. You can go ahead and do it. Now, let’s say, for example, you like this one. What you can do is come over, and you can literally copy this image like so. Then, simply come over to Claude and say, “Hey there, I want to build a landing page. Could you please
15:57 do so with text from this image? I’m really inspired by it.” Find for me the closest available free license to use this exact font. And then, you can come down, guys, paste them a link, or paste them an image, and then you can actually go ahead and use that. Obviously, you just have to check the licensing for all the different fonts. What I often do is get Claude to generate for me, you know, six to nine different versions of fonts that I might like. Another good one here is WhatTheFont, which is a pretty helpful website. You also have Font Share, which is loads of gorgeous fonts. You can literally go through and find one that you like. And if you’re ever not sure, you can pretty much come here
16:28 and screenshot this and say, “Hey there, Claude, I really like this. Could you just tell me what font this is?” And build mine in a similar way. Then, another great way to level up the design on your website is to use icons. I personally like using Flat Icon. You can get loads in different styles. So, instead of saying something like, “Hey, there are three things you can do,” or “Hey, this is as popular as Lord of the Rings,” or “This will save you 3 hours,” you can just use beautiful graphics and icons, and you can download these. Another option is something called Icons8. They show you illustr- illustrations, icons. And I actually used this in my first tech startup on
16:58 the website to help illustrate um basically the idea, and I even built these into the app, which is great. So, you can come down and search for different things. Let’s say I’m looking for popcorn. You can find visual styles that pop with you. And then, basically, once you get a subscription to these platforms, you can go ahead and download them. And I think some of them let you do it uh for free if you give them attributions as well. Level nine is all about getting excellent inspiration-filled designs because a strength of a design is largely determined by what we’re actually looking at with this. So, what’s the idea here is that we can actually go ahead and find different aspects and
17:30 different sort of inspirations to go ahead and build websites, assets, graphics, anything that you like. Navbar.gallery is a great place to, believe it or not, find out the best navigation bars on the planet. So, if you seriously want to look at the navigation bar and the navigation system you have, you can check out this website. Then we have a really cool one which is called footer.design. So, this is going to show you some of the most beautiful footers that exist on websites, which I think is really cool and crisp. Now, the idea is you can kind of Frankenstein out and build out your dream footers based on this stuff. So, you can kind of treat it like I showed you here. For example, you kind of think
18:02 about each one as an individual thing and you snipe and build for that specific section itself. Really helps a lot to do that. We also have CTA.gallery. CTA.gallery basically just shows you a combination of the most gorgeous, potentially high-converting different call to actions that exist. So, if you’re thinking, “Damn, I want to get people to sign up, but I don’t know what that would look like,” you can come here and find different examples of that. Then you’ve got 404s.design. Now, this is an interesting one because generally speaking in marketing and design, how you do anything is how you
18:33 do everything. And the reason why brands put such a good emphasis onto 404 pages is largely because if this is the level of detail and attention they’re willing to put into a 404 page, how seriously do they take their actual paid product itself? So, you want 404 inspiration, you can find one here for example, and lean on these designs to build your own. Onsection.com is another great example of where you can get some fantastic design inspiration from. Maybe you want to do some better grids, which is a really cool in sort of if you like style right now, which you thankfully is instead of having a big
19:04 block, you show multiple different assets. This can be great for dashboards, this can be great for websites to show different features. Again, you can come down here, and one that think is cool, a combination of images and numbers and dates. You can do this in your operating systems. For example, “Hey Glider, open up my Agentech operating system Java’s.” This is the exact same thing that I do in my own operating system, just mainly because I find the Bento grid is a really helpful way to do this. So, you can see I have different numbers here and systems and I’m using fictitious data, but you get the idea. It just makes it easy to use and understand
19:34 because it just looks better. If you want to get designs from Good Apps, you can try 60fps.design. This is just basically going to show you wonderful different animations about how they’re doing. Basically, not just a screenshot, but the videos behind it and the graphics and how they’re all linked together. Then this takes us very clearly onto level nine or hack number nine. And this one’s really interesting. So, the idea with this one essentially is that we can find basically who are the best people in the world at doing the thing that you want. Maybe a finance app, maybe it’s a language learning app. Well, there are actually systems in place that we can go to go ahead and use
20:06 these. Two that I’ve been using a lot recently are Mobbin and Refer out there. They’re not fantastic. So, for example, mobbin.com is a really interesting one. You can come down here and search by, let’s say, finance. Okay. You can do by apps, you can do by sites. So, say for example, I want to grab an app, I can now come down and look at this. So, here’s one for Duolingo, for example, and here is one for Revolut. So, if I’m building an app or journey, I can come down and actually look at this, copy this and say, “Hey, I love this.” And it’s great because it just adds different details. And essentially here, they’ve captured every screen that exists for that particular
20:37 app, which is great. They’ve also got a section here for sites, which is really freaking helpful because you can go and search for sites as well. I also really love, as you can see, Duolingo. So, maybe you want to do a “Hey, you’ve leveled up” page. Well, you can use this as inspiration to see what that looks like. Equally, you’ve got refer.design. If you click on styles on the left-hand side, you can come down and see all of these different beautiful designs that look fantastic and find websites that really kind of lean in with the thing that you’re building. Now, level nine is one of the most powerful actual design
21:07 systems I have ever used and it’s called the design loop. And when you combine the design loop with Higgs Field for generating images and videos, it genuinely creates stuff that is going to blow your mind. I have never seen anything that I can do literally on a one-shot to create something that is absolutely spectacular. So, the idea with this is with the design loop is that you give Claude what great looks like. So, you give it a gold standard design. And effectively, you’re going to give it a prompt. Now, that prompt down here is going to be linked as you can see on the left-hand side. So, you can just literally copy and paste this one
21:39 and essentially what it will do for you is get Claude to create a sub agent, which is going to be a critic. And effectively, rather than coming back and forth with you, it then assesses its output against your reference material and it will only come back once it’s reached there and all the agents have agreed that it hits the design brief. So, let’s say for example, you’re on saved.com, which is a great actually like a repository. Designers love this. I freaking love this. And you want to look for something like poster videos, okay? Whatever the thing is. And you’re looking for some kind of design
22:10 inspiration that you want it to have. I’ll give an example of one that I did previously just to show you how powerful this is. So, for example, I had this one here, which I thought was gorgeous, right? It shows you this thing. It’s got this beautiful red flame effect, uh 1957, uh Orphic, whatever the thing is. All you’re going to do is literally come down and copy this video or you can literally come down and just download it. Then go down below and grab this free skill for you in your resource pack and just copy and paste all of it and then head over to Claude. And in Claude, you’ll have it here and you’re going to say, “Hey there, I want to go ahead and use my design loop skill with Higgs
22:41 Field image and video generation to recreate this for me, but instead of that text, I want it to have 1992 and have JR in it.” All right, you’re going to come down and then you’re going to paste that text in. If you don’t have this skill, it’s fantastic. And essentially, it’s a design version of a really cool technique called the gauntlet loop, which is fantastic. I’ve done a full video on this. I’ll link it on screen if you want to learn more about it. And I’m not joking you, literally using Higgs Field, this is the output that I got back with 1992. You can see, look at how carefully it’s gone ahead and done this. And this is all generated using Higgs Field and the
23:13 Design Loop prompt. That’s it. I am amazed at how freaking good it’s done this. Essentially, there’s nothing that you can’t recreate. You can choose for yourself to see just how similar they are. And you can do it in any kind of dimensions that you want to. If I like that idea, but I wanted to use yellow instead, or I wanted to have it in something that would fit the Instagram, I can do that using this with Claude as well. It is fantastic. Likewise, guys, I did the exact same thing. Now, this on the left here, for example, looks fantastic. And this is why the Design Loop is so powerful, because you may like say this looks awesome, right? But you can’t say why. Now, it
23:45 turns out there’s a few things going on with this. The dimensions, it matched identically. Again, I just used Higgs Field and Claude for this. And literally, it said it needs a muted palette with this kind of overlay. Awesome. And then you’ll notice, can you see how the focus point is all in the middle? So, Porsche is a beautiful design. I did the same thing with Claude. Basically, how do I show Claude in imagery and photography? And again, it built this entire thing that’s 23 seconds long. How did do that? It just generated, I think it was like a like loads and loads of images with a certain time difference. So, the cool
24:15 thing that the Design Loop does Loop does is it deconstructs everything that’s happening. So, you’re giving Claude the actual design blueprints. This is by far the best most powerful design skill that I’ve ever seen. I did the same thing design this 404 animated page, guys, just from an image, so it can be used literally for anything. Hack number 10, guys, is about using essentially an agent checklist to go ahead and make sure that everything is fine. So, effectively, this prompt will basically run any design that you make through through five very specialized agents that will check for completely different things. And only when it’s
24:46 done all of those individual checks, will it then go ahead and approve the design. And by the way, guys, if this sounds like I’m speaking design Spanish, I’m going to put a link down below for my full Claude coding and Claude design masterclass. It will take you from complete foundations. It includes stuff that I have never shared on YouTube including a brand new design systems masterclass that I’m literally recording this week. It going to go through power features, how to build memory systems, build beautiful websites, and you also get access to my entire agentic operating system that breaks down all this in detail. You get access to all of
25:18 my memory systems here that go through everything on the rings, the design, all this stuff in practice is immediate access. I’ll put a link down below so you can use that to level up and absolutely crush it. Now, after we’ve understood these five agent principles that run through multiple different tracks to actually improve the quality of your output, we need to look at the next one. Now, this one is really important. Remember, these are getting more important as we go along. This one is a design principle that will drastically improve the quality of any Claude design thing that you do. Now, the idea with this is called don’t make
25:48 me think. It’s based on a book that effectively says that you want to be using system one thinking rather than system two. So, essentially, we want to have a simplicity bias. You know, I asked everybody in my community to post their websites so I could roast them. I did literally hundreds of these, by the way. And the biggest issue I found across all of them is text density. There was way too much going on each page. Don’t make me think things about if I land on the page, let’s say I’m on this and I’m checking out a website here for example, can I understand what it’s actually about? Does it pass a glance
26:19 test? For example, this, money for here, there, and everywhere, right? The point is that your money can be trans- ferred globally and the way it shows you that is a globe cash. Really, really important and you can use some of the prompts in the system to make sure does it actually pass a simplicity test and are we not taking the user’s attention for granted? And what you can do with this, cool guys, is generate multiple versions of the same design to make sure that you’re using the simplest that actually goes ahead and communicates the process as simple as possible. Now, level 12 solves the biggest AI slop issue that exists right now and that is
26:49 actually making something sound like it has been written by a human. Now, effectively to do this, we’re going to go ahead and use a very, very powerful repo called Slop Monster. I actually created this. It’s 100% for free for you to use. I use it for everything. And what that I built this is I found the top anti-slop AI writing repos. And I basically took the best aspects from all of them and combined it into the Slop Monster to destroy AI slop once and for all. But then I took it one step further and I solved something that I didn’t see anyone else do, which is the sales and
27:21 marketing system. And essentially this will come through and check it across four or five levels: vocabulary, sentence patterns, punctuations, three-item list, absolutely everything. And just to show what that looks like, so you can understand what the before and after looks like. Check this out. AI slop will say something like this: “Trusted, reliable, and built to last.” Turns into six nails per shingle, every shingle. Instead of saying, you know, “Not just X, but Y. Not just a roof, but peace of mind.” becomes “A written scope and a fixed number before anybody climbs
27:53 a ladder.” Pulled verbs: “We leverage industry-leading materials to deliver unparalleled protection. We source materials from manufacturers who test for wind, hail, and sun.” Again, you can see the examples of how this is bled into it. All you’re ever going to do, guys, if you have a website, is just copy the link for this um this basically this repo here and head over to Claude. Then literally say, “Hey there, I would like you to go ahead for me and run all the copy through the Slop Monster, okay?” You can even turn this into a skill by the end by saying, “Turn this into a skill such that when I say Slop
28:23 Monster, you basically run all the copy through this.” And not only will this make it sound like it’s been written by an actual human, because we even use the right models for that, it will also understand the context you’re in, if it’s a post, if it’s a website, and make sure you’re using the correct sales copy. I use this one all the time. My community absolutely loves it. I highly recommend you add it to your Claude design. And then you can go one step further by using this. Now, essentially what this does here is it also solves the Claude verbosity problem, which means it talks to you more like a human and it’s not you know, you just gives
28:54 you sort of responses that requires you to think so much about it. Um what we can do here with any text to produce is what we call the ASD ST100 simplified technical English. So, this is a real writing standard from the aerospace industry. Airlines use it for maintenance manuals because when you’re fixing a plane, you don’t want to hear about Shakespearean English and you don’t need to be written like you know, Emily Bronte wrote it essentially. It has 900 pre-words, one meaning per word, active voice, one instruction per sentence, maximum six cents per paragraph, there’s no phrasal verbs, and
29:24 it was designed so that a stressed human can read fast and act without misunderstanding, which is exactly what you want from an AI assistant. Again, just copy all of this, head over to Claude and say, “Hey there, going forward, I would like for you to communicate to me in this style and when requested, I also want you to improve my copy such that it actually communicates in the below standard.” And with that guys, it will then go ahead and essentially improve the way that it communicates with you in your designs and also natural conversation. Now, hack 13 is the fact that Claude itself and using Claude design can recreate
29:55 essentially any kind of graphic that you want to. So, let’s take for example, save.com. Now again, save is pretty fantastic. If I want to come down and find a person, let’s say I want to go and find one that’s really interesting to me, right? I can find any style I literally want. So, let’s say for example, I come down and I pull one piece as an example, this one here. And I love the design and vibe of it. Well, what you can do with Claude now is you can actually copy the image, go over that, drop it in and say, “Hey there, I would like you to create for me an image in this style using my own
30:27 references and I want you to break down the following information.” Okay, then just give it loads of information that you want the person to say. Then what you can do if you want to is you can actually go over then to any website you want. Let’s say that you’re in my community for example and I want to say, “Hey, I’ve got all these beautiful courses, and I really like my own design style that kind of guides people through learning everything, right?” I can screenshot this. I can come back over to Claude, and I can drop that in there and say, “Hey, I’ve attached some design references that I would like you to integrate into the image, all right?” And then you can say, “Hey, talk about
30:57 the fact that I’ve got a brand new Agentyc operating system. I’m doing it every week, and I’ve got all these incredible courses that are dropping, all right?” Then you drop all the information in. And then essentially, when it’s done, it can come back and give you an image like this. Everything dropping this month. And you can see, basically, Claude’s gone and has got the wizard. Is the wizard there? Yeah, the wizard’s there. Awesome. It’s got for us the dragon. It’s got the two ninjas. It’s even been able to capture the fact that it’s got a beautiful Claude ninja on his head, which is really freaking cool. And on top of that, it’s also in one shot and got all of the new courses
31:27 and systems I’m dropping, the Agentyc OS, the Essentials Life Business Learning Create Automation, just the stuff that I’m dropping this month inside the community. And you can use this to essentially build any kind of product or personal image that you like. which just takes it to a completely new level. And speaking of new levels, we need to talk about level 14, which is 3D websites. Now, what’s really fascinating about 3D websites, guys, is that we can combine Claude design and the graphic design with the ability to create beautiful, show-stopping animations. And I’m going to put a link for you down
31:58 below, so you can go ahead and grab my um 3D website skill. Again, I built this using Higgsfield and the best models that exist. And essentially, what this skill will do, guys, is it will go ahead and ask you questions, okay? So, say for example, I’m this website here, and I’m like, “I want to build something that shows that we’re a smoothie brand.” And you can see we’ve got the fruit dropping down, it comes all the way through, lands in a cup, and have this beautiful interactivity. Again, all I’m doing is just calling one API or using CLI with Higgsfield, and it builds everything like this. So, this is a really easy, crisp way to do it. I have spent
32:29 hundreds and hundreds of dollars on image generation, so you take take this skill from me, so you don’t have to worry about it, and you can just literally generate stuff like this whenever you want it. Now, the new level up really is how you can actually use Claude motion graphic design to take this to a completely new level and I’ve got a video coming out on that very shortly. If it’s posted, I’ll link it here. If not, you need to check on that one as well tomorrow. For example, let’s say that you’ve got a navbar and you want to use design. So, this is completely generated by Claude guide. How ridiculous is that? I even created
33:00 this one here guys where this Claude will literally follow you around and try and capture everything and you can even click and make him jump. I mean, this is the stuff that you literally could not have done before and you can adopt Claude if you want to and he freaking loves it. So, what a great way to get people to click to your stuff. This is absolutely insane and again, I’ve got a full video breaking this down if you want to check that one out. On level 15 is how we can take this to a completely new level using something called the agentic operating system. So, if I land on this agentic operating system, you can see in design now guys, you can build anything you want to. I have a library of everything I build. I even
33:30 build guys a studio. So, essentially where this really gets interesting is you can use it to anything. So, this is one that I built out for Instagram reels that just auto generates everything for it. You can do things to basically view all the designs, all these different beautiful motion graphics. So, when I’m doing my Instagram content, I can go ahead and do that. And again, all this is powered by Claude design. What’s really interesting here guys is I have my own library. So, I can come down here and search for burger. What’s interesting is anything, okay, that has the word burger in the metadata or for example, just looks like a burger will
34:01 pop up. And let’s say that I now want to go and use this with Claude to build a website. I can click on reference and now I build my own Higgsfield here that I can use with the Higgsfield API if I wish and just say, “Hey there, go ahead and build me and turn this into a beautiful video.” Or whatever I want to do, right? I can choose the model. I can do anything I want to in the design operating system. And very importantly guys, it combines design with functionality. So, you can see all your numbers, all your metrics. I can come down to the memory sections. I can even go ahead and find things. For example, I can ask it questions and
34:31 those things will pop up. I can see all in beautiful detail. And this is where we bring both things together. But understanding design hacks is one thing, but if you don’t know how to combine design with your own business and productivity systems, you’re going to fall behind, which is why the next thing that we’re going to do is learn how to do exactly that inside this video right here.