Claude Code Design just became UNSTOPPABLE

Cloud Code just became the world's number one design tool. And 99% of people don't even realize yet. I discovered a new system that builds beautiful designs for any task. And in this video, I'll show you how to build these gorgeous and interactive designs in minutes, saving you time, making you more money, and getting you light years ahead of your competitors. And if you don't know who I am, my name is Jack Roberts. I built and sold my last tech startup with over 60,000 customers. And now I run a fast growing AI startup and teach thousands of people every day. So, if you haven't already, grab that coffee and let's dive straight in.

So, this is the Claude Code design system and it will blow your mind. And I'll show you what the premise here. The idea is that we're going to codify something once and once we do that, we can replicate it infinitely. The design tool landscape has legitimately shifted and I'll explain exactly why. But first of all, we have to understand the AI slop apocalypse. So, the biggest criticism about AI generated content is mainly the fact that it all looks exactly the same. Specifically, it's got the same hero section. If it's a website, you're going to see purple gradients. You're going to see interfont. You're going to see the classic three rounded boxes. You can see it a mile away. According to Inblad Science, quality sites convert pretty much 91% better than regular ones. So, this is the general misconception about AI and design that I want to smash right now.

Now, here's a big breakthrough and we talked about this with video recently is that code can effectively be turned into design. This is what I mean. So, AI is incredible at code. Design can actually be codified. This is the central premise of this and why claude code is exceptional. Typography scales, spacing systems, color tokens, layout grids. If you can explain to Claude code what great design looks like, you can produce it on demand as much as you want to in any style that you want to. You just have to be able to explain it. So you unlock it here is a once you know design components, you can just give Claude the assets, explain what good looks like, and then you can basically drive it to the moon. Key takeaway is that design is not an art form reserve for specialists. It's a system that can actually be encoded.

Now, here's the thing. Now, this system that I'm going to show you in this video with this new tool unlock doesn't just work on one thing. You can explain it for anything. So, landing pages and apps, HTML slide decks. In fact, the very thing that you're looking at right now was built with Claude branded graphics, reports, and proposals, data visualization, even identity systems.

Now, the brand new tool just dropped on GitHub that I'm going to show you because I think this is best explained with an example and then I'm going to show you how you reverse engineer this to pretty much apply this to any single design thing that your business has. And once you've created it, you can at the click of your fingers design all of this whenever you want to. So, this is called awesome design. You can see how fast growing this is. It's got almost 50,000 stars within 2 weeks. And the idea of this is you're going to get a plain text design system for every area of your business. This particular skill itself has over 55 brand systems available for many different websites. And this design system builds beautiful things like this in one click. So if you're building websites, they can look like this. If you're building design systems and HTML decks, you can build gorgeous ones that are super interactive. You can build Spotify inspired websites, pricing websites inspired by Stripe. You can get these beautiful pages here to sell products just like Nike. And it goes on and on and on.

Now, this is best explained in practice. So we're going to open the skill together. But the skill isn't actually the point. The point is the strategy that sits behind the skill. And I'm going to show you exactly how you can use that to essentially hack design everything in your business in a super simple fivestep process. Beautiful. So let's start by opening up this design prompt. So if you to click on the link, I'll put this all below down for you. So you can literally go ahead and grab this. And all you're going to do is come down to code here and click on copy. Then we're going to head over to our integrated development environment of choice. I'm going to be using anti-gravity. And once you've opened up anti-gravity and if it sounds like Spanish, check this video on screen. I'll explain everything in good detail. Well, awesome. Welcome back if you check that out.

Now, this is a good opportunity to understand what design.mmede is and the principle behind it because remember it's just about the philosophy. Key takeaway here is get CL to understand what great design looks like and once it understands that you can build anything. So, the way that this works, if I come down and show what this looks like, it's a markdown file, no Figma export, no JSON schema, no special tooling. You can just talk to Claude and it will work for you. That's how this works. It's really really cool.

Now, if you look at the collection they've got here for AI and LM platforms, effectively what they've done is taken the essence and the kind of design infrastructure for all of these wonderful websites. Cursor expo, lovable, click house, you know, you literally name it based on whatever it is for backend database and devops, productivity and SAS. You have all these fantastic things you designed. And indeed, all the things that I showed you here, for example, this and this and this were all done in one shot. And you can build things that look like this. This is really cool. This is something that you could do whenever you're flying away somewhere. Cool. Can not even just And this is why Canva and Figma and as somebody who a huge user of Canva over many years, I can tell you this is something that's really worth understanding. Like even things like these interactive things that you can play around with little things you can now pull together instantaneously on clawed code from a single prompt.

Now we need to come back over to anti-gravity. Now we're here. We're going to come over to the left hand side, click on claw code. If you don't have it, you can just store it in extensions here. I'm on local and new session. Once we're here, we're going to say, "Hey there, I'd like to install this GitHub repo, please." And then we simply go ahead and paste the repo. Then that will install itself naturally. Let me click on files. We can see awesome design. MD. And you can see if I click on design MD again, you see all these websites that it's got here, right? Open code, Postgog, Stripe, Spotify, SpaceX, Wise, you literally name it. BMW, Apple, loads of stuff.

So, as an example, what we could do if you click on BMW for example, it's basically got all of the information and it's got all the design system details on the website, which is cool. So what we're going to do is give the following prompt which is hey there my man would like to do is to create me two websites based on this skill. I want you to go ahead and build for me. Firstly go ahead and why don't you do lovable and then after lovable go ahead and do one on Lama so I can see the full power of this and actually do a third one for me. Also do SpaceX and then we hit just send that one off. Beautiful. And now we're doing three big beautiful strong builds and you can see it's gone down. It's pulled everything together. It's done the research. So we can say awesome. Open these three up for me in a local host.

Now, what's interesting here isn't really about the fact it's built websites. It's how it's done and how we can leverage Claude code to effectively solve any design thing that you've gotten. And the future that we're heading towards is that we're going to be living in a code first environment for design. And there's a very unique opportunity that you can leverage right now if you use the system that I'm about to show you.

So, let's go through and open up all three of them real quick. So, here we go. Okay, this is lovable. As you can see, you got the the typing thing appearing. This is the website all appearing for you. As you scroll down, bear in mind this is completely one shot. Just using the same design principles. Come down. Loads of cool things. Beautiful. Come back over. Let's have a look at O Lama. It's looking a bit more codeheavy. Very decent. You can see it's got those kind of diagrams on there. Again, these look pretty decent. Pretty swish. Loads of different ideas. And then this all flows up. And then finally, let's have a quick look at SpaceX. Again, one shot. Come down, have a look. Very interplanetatory, very SpaceX related.

So, as you can see, you can effectively build these things very quickly, but you can take this way further. And there's a reason why this GitHub repo is trending. So, if I come back over then, not to the website that it did on Lamborghini, but if I come back over to our system here, for example, um there's a really simple five-step process that we can do to pretty much replicate anything. And in fact, the thing that you're seeing right here is one of my very own Claw systems that I have inside my community because um people like this so much. I had so many questions like, Jack, what is it? How do I use it? So, five things you need to do. The first thing you need to do is go ahead and pick your format. Now, this can be anything you want to. Could be website, could be presentation, could be social media post, infographic, document, whatever it is. I'd start with the highest leverage thing first. Something that you do quite regularly. For example, I make videos quite often. Therefore, a design system that works for me, it would be something like this, like a presentation thing. Equally, if you're somebody who's traveling, you got teams that are traveling and you want to create something like this, it's again super easy to do. And what the cool thing about this is effectively speaking, if I just refresh this and show you, I have this connected to many other things. So for all the trips I have, I can easily just cycle through these and it'll just pop up the one that I'm actually going to and you can share that whenever you want to. So step one is nailing down what your actual format is going to be. So for us, let's say for example that we are going to building a presentation. Well, let's head over to Claude and build something out together.

Now the best design system in the world is of no use to you or I unless we know how we're actually going to apply it on a day-to-day basis, which is why the first step is choose your designs. And the philosophy here is that we want to be design first. So, we want to be coding first when we're picking what we want to do. So, for example, we could do landing pages and apps like I just showed you with Lamborghini and Spotify and things from Stripe. We're at the era now where if you can find something that's a good design, you can basically do it. So, we have websites. We've covered that in great detail. HTML slide decks just like the one you're watching right now. We could do branding graphics, identity systems, visualize our data, or reports and proposals. For this one, we're going to go ahead and choose HTML slide decks. I would often use the following framework. I choose what is the thing that you spend most of your own personal time creating and what would have the highest impact if you were to automate it because the idea here is that we find excellence and we create excellence and then we systematize it and create a skill with claude that basically will always produce it at that level and there's something else we can do that takes it to a completely different level of performance.

Now, once we've grabbed the beautiful coffee and written down all the different integration points that we want to do, the next thing we need to do is equip Claude code with the ability and the assets to effectively do anything that we need to. And so, we're going to go ahead and download the Claude app. And when you do that, you're going to see three things at the top. You're going to see chat, co-work, and code. Remember, codework is the userfriendly version of code. If you can use code, I always recommend that you go and do it. What we're particularly looking for down here is on more options and click on connectors. And these are all the apps or the tools that we're going to give to Claude Code. Now, if you're building out a design system, there's a couple of different things that we're going to want to do. First of all, we've got repos like I showed you here in anti-gravity. This beautiful design repo for websites as well as the other systems I've shown you in here. But if you look at the one that I built, for example, one of the key things that we want to give it as a tool is the ability to scrape websites and gain information and research that isn't available normally by just regular scraping. And through that we want to give it access to something called firecrol. Now the cool thing about firecraw and I'll pull this up here right now is that it can do things with website research that a lot of just basic things can't do. So it won't just it's basically like talking to a website and you can extract things like brand identity logos. For example, if I come down here and I go for glido.com. Now glido.com is the thing ironically that I'm using to talk it. So I come down here I can find things like branding and images and I can get the HTML. I can get anything I want to. I can start scraping. Check this out for example. Right now, I give all of my agents access to firecrol because it is just so powerful. But the weird thing is if you come back and actually complete the search, we can now extract things from here. So look, I come down at branding and you can see just how valuable this might be. Getting their logos, getting their accent colors, getting the typography that we can now pull in. So I like to equip it with all the appropriate skills. The first of which is definitely going to be firecrol. And the way that we get that in is coming down here to the plus button. Of course, we come to connectors. Come on to manage connectors. And I don't have fire crawl on this so I can actually show you what that looks like. What you're going to do is come down to the plus button here. Click on browse connectors. Now you try and find the one that you're looking for. Obviously the first one we want is some research power and firecrol is in there. So how do we get it into claude? Well, really simple, right? You type in the thing that you want. If you can't find it, that's absolutely fine. You click off and instead what we're going to do is click on the plus and click on add custom connector and then you're going to click on firecrawl. Then we're just going to ask Claude, what is the remote MCP server URL? And so easiest thing to do is just take a little screenshot of this, hit enter, and then just ask Claude, "Hey there, what is the remote MCP server for Firecrawl?" Now, I could give you the exact one myself, but I think I just want to show you the process of how you add manual things. Now, research is one thing, but I find like, you know, wouldn't it be great if you could specify multiple different types of resources, which I'm going to get on to in just a second. Cool.

So, now we've got the remote MCP sub URL. We're going to drop this in, and then we've just got to add in the API key. So, let's go and grab that. And if you come to the homepage, it's literally right there. Just click on copy. And then we're just going to fill in the gaps here. Then once you've clicked on add, remember you want to remove the curly brackets. You can see that we have firecrawl. Now I click on that and look at this. We've got everything. I'm going to put always allow because it's fine for these ones. It's decent. Now we've added firecrawl to our system and we can now integrate that with anything that we want to and you just add all the ones in that you would like. And so just think of all the different connections and skills that you want access to. That could be your Gmail. If you're building presentations for clients, you may want to have access to your calendar, your emails. If it's going to be presentations, you might use something like granola like, "Hey, what were the transcripts I said?" For example, I have a skill here and I can say, "Hey there, my last meeting, could you tell me one action that I had to do off the back of that, please?" Now, this is connected to me for granola. Now, what that means is that effectively speaking, I can now ask questions about that. And if I'm building, you know, meetings, if I'm building presentations for clients, I can ask, hey, I spoke to so and so about this yesterday, you know, what did I cover about that? Or like I've got to do a presentation on the next steps. I can go through that, actually get the information, do it. So, as you can see, it's now pulled down based on that grill integration. So if I was doing a presentation for a client on next steps, I now add everything. So the key thing is to add in all the integrations and it could also be skills.

Now, we've got the connections. Those won't really help us unless we have some kind of stylistic guidelines about what excellence actually looks like for your specific project. And the good news is there's a really quick hack that you can use. And by hack I mean we find what excellent design looks like. I always start with the end outcome which is typically speaking what is the thing I want to happen at the end of X. So if it's a presentation, I want it to be clear for you to find it interesting and get as much value as possible. If it's a sales presentation, I may want them to buy. So we start with the end first. So the way we begin is coming over to Claude. And we basically give it a prompt that sounds like this. Hey dude, I would like to build a skill for building presentations. The presentation format is going to be 16 by9. I would like to define what excellence looks like. I'm going to give you some beautiful materials so we can agree and go back and forth on a desired style. Once we've done that and we're happy with it, I'm going to make sure that you're using the right skills, the right connections, and then we're going to codify this to be a skill that I can use whenever I want to to create that thing. Do you have any questions for me initially? Then I'm going to go ahead and I'm going to provide to you the basic assets I want you to use. Now, when I'm thinking about basic assets, I'm thinking fonts, typography, and we're also looking at general images. So, first place I'd go, actually, believe it or not, is you've got midjourney. So, you can even go over to midjourney and type in presentation. Dead simple. Bam. And have a quick look. You can see for certain presentations you're like mid Journey typically speaking though is more good for illustrations certain illustration styles you can come over to IDMJourney just get inspiration you think is really cool like hey doesn't this look really cool I'm just going to copy that as an illustration style right so I come back over I literally drop it in hey I'm dropping some styles and illustrations that I like the best all right drop that in another great website put on your radar is godly website these are things if you're dying websites that you might find really cool they're just like a really beautiful websites and you keep on scrolling basically forever who knows Who knows where this website ends? Who's to say? Another one. Great one here. You got 25.dev community components and good old fashioned undefeated. You can just come to Google like beautiful website presentations. Or in fact, if you just got beautiful presentations like so, and you can literally go into images, find ones that you think look cool. You like, what do I like the look of? What do I like the style of? Another good one is Canva. You can just lift and shift anything you want there. And then going to come back and answer clauses questions.

So here we're going to give it a few answers. So output format is going to be HTML slide deck self-contained HTML file. Yes, I'd like that please. Um content scope is going to be for let's say it's going to be education for my videos. Image generation. I would like you to be able to generate nano banana images on the slides where relevant. Interactivity. Yes, I'd love animations, transitions. That sounds beautiful. Make it visually gorgeous. And to time with my brand, I will give you the brand guidelines. You actually have um access to firecrol. So, I'd like you to go ahead and pull the Glido brand guidelines from glido.com. Cool. Then the other thing I recommend you do if you're doing presentations is just specify whether it's detailed or not. So, I would just add I would like these to be more presentation. So, not loads and loads of text. Just generate for me three slides to show what I mean. I've also attached an illustration style. I want you to deconstruct what that looks like and then maybe just show me one of the images with it and one should have HTML in there as well. I'd also like the glider logo in the bottom right hand corner. Extract that using your fire crawl skill. Now what I'm using here for image generation is something called KIA API which is great. So if you come over to here, Kia is just the cheapest way I have found so far to leverage Nano Banana 2, which is fantastic. Now the cool thing here is if you can literally if I go to pricing for example, it's about it's pretty it's pretty cheap. If I type in Nano Banana 2, I believe it's like 50% less. So you throw some credits in here. Is it worth doing? I really think so. I mean you can be of that if you want those beautiful presentations, beautiful images. It's super easy to do and it's like six cents um per image, right? Which is uh pretty pretty cheap and you can literally just integrate this within Claude just like everything else.

Then once we've actually provided all this stuff to Claude, the next thing we need to do is actually make the presentation itself so that we can then go ahead and make it epic. And the presentation step is literally it just building the first generation. Now the key thing that we need to do here is basically enshrine our design principles interled with what we're doing as it's going ahead and scraping things. So for example, we just want to be specific on that. So, I would like to lead with metaphors in the presentation when they're designed. I want it to be beautiful to look at and I want you to do some research on what makes great presentations and I want you to implement that throughout the whole process. So, here for example, what we've done is we've got the information from Glider, right? We're getting the branding, we're getting everything that we need here. You can see it's literally going ahead and finding what that brand identity is so we can fuel it in the presentation so we can be consistent with exactly what we're building. And guys, look at this. And it's literally pulled together the exact typography. And look, it's got my logo in the bottom right. And it's got zero one out of three at the bottom left. That is crazy. How do I know this? Well, because from the website, it's the exact color and logo. It did that just by pulling it together with fire crawl. How crazy is that? I go to the next slide and look, it's pulled it through in the exact style that we gave it, right? How insane. If I come up to this, how do I know that? Look, this is the reference style. This is a style it's gone. Do you see how ridiculous this actually is? this now. It's effectively your imagination and it will just go ahead and do it for us. Then on the thumbnail page, what have we got? We got logos. We've got different stuff here. I think this is cool. And it's even got an anim. It's added animations into the slide. That is what we are dealing with now in 2026. It is ridiculous.

And once you've got the core presentation, there's one final thing that we have to do whether it's a website, presentation or app, and that is to simply make it perfect for exactly what we're looking for. So once you've got the initial first draft, the next thing we need to do is make sure it's refined and works perfectly for everything that you're trying to do. Because when we crack that effectively, it's one command and then we sit back, we grab our coffee, and we just have a wonderful time. And then we just give it feedback. So you might say something like, "Hey dude, before we do any presentation, I'm going to give you an idea. I want you to do comprehensive research. I want you to spin up sub agents and fact check that research so the presentation is with actual truth that I want from you a text download on all of the sources." And then you might say something like, and in terms of a design, I want to simplify. I mean, I don't like the now live and beta. Let's never have that. Let's make sure we have the logo on the center of the first deck of everything. And the final deck should be the client's logo that you're going to go and grab based on the transcript that I give you. And effectively, we go back and forth like this, refining it to the point. And then when it's all done, what you're going to do is come down and basically say to her, I would like to turn this entire thing into a skill. So, I'm going to give you some information in the future, and you're going to produce this for me systematically. And at that point, Click Code will turn your design assets into a skill.

Now, think about everything that we've done here cuz this is so so important to bear in mind. We've actually done five things here. Okay. Now, this is a system that can design anything. We chose our format, websites, presentations, social media posts. We did the integrations, the different tools, fire crawl, Kia API, maybe you want to integrate YouTube, whatever, or maybe notebook LM, whatever you want. We gave it reference materials for the things that we wanted to create this design philosophy and then we generated it to get 80% of the way there. Then we simply refine it, give it those micro polishes, and then essentially it's ready to go. And the funny thing here is the numbers about this don't lie. Now check this out. Awesome Design has got over 46,000 stars in 2 weeks. You can tell these systems are gaining traction, and they're gaining traction for a reason. Campber Magic Studio, for example, has 260 million users. The valuation is 42 billion. One of the most successful Australian companies ever. This is basically design, the future of design that we're seeing here. AI design system conferences are getting sold out because there's so much interest and information in it. You can see here for example situations where I reach Figma have fallen off a cliff. We're having design conferences sell out and we're even having people who need to go to these specialist design softwares less and less. That's only going to increase over time.

Now I did a little bit of interesting um research funnily enough using the same system I'm showing you to understand how what people are actually saying about design. What's really interesting though is that 53% of people are already starting to get this. And with systems like this, we have to hire designers less and less. This is where it's going. But what do you do for your own specific situation? So, this is what you should be doing right now. If you're a creator and a founder, you need to start with this straight away. It is going to save you so much money and make you more money by building beautiful designs that look like this. You want to get design files for brands you desire and go through the same process item by item for your business. If you're a developer, you know coding. Design is just coding plus taste. We're now in an era where creatives can just enact basically create their own vision. That's where we're at. Grab the repo put down below in the free resources section and you can start to see how it works. And if you're an enterprising team, the idea here is that you're not going to rip out your core systems overnight. Of course, you're not, but you do need to start becoming a design first business based on when you're at them. So, Monday action, build your first design skill. This is the thing I want you to do right now is follow this exact system and build your very first one. But it does then lead us to one final problem and that's the fact that we're giving it information, but it will lose context. It has amnesia and a memory problem. Which is why the next thing that we need to do is solve that memory problem so we can scale faster than ever before.