Transcription
Club Code is the world's number one design agent, but 99% of people get AI slop because they make one mistake. And in this video, I'll show you my new system that lets you build beautiful slides and designs worth thousands in minutes using 20 universal design principles in any style that you want to so easily, even if you've only ever used PowerPoint before. And this is brand new. And if you don't know who I am, my name is Jack. I built and saw my last tech startup with a gazillion customers. Now I'm building my own AI business and I just share here the stuff that works. So if you haven't already, grab that coffee and let's dive straight in.
Now I've got a lot of really cool stuff to share with you in this video and I want to show how you can pretty much build any slides that are gorgeous by just using your words. These are in. PowerPoint is out a lot of the time. I mean look at this for example. These were created uh right here with one shot. I wanted to play pay close attention to things like the numbering, the lettering, the logos. All this stuff was given by just giving it a website. It grabs all the brand assets, all the colors, even the logos, and was able to deliver this crisp design like this. And here's another example for Grind Coffee. Exactly the same. And it the level and positioning consistency are incredible.
This is all under underpinned basically by these universal principles, which come into a second. Because the big problem is we order Picasso and Mr. Bean shows up and this is very capable. It's like a 500 IQ intern, but we've not been treating it properly. So, let me show you how you make slides that look like AI didn't actually uh make them. So, let's take a look at this. And by the way, this works on any URL. The system and skill that I built that does this on autopilot. It's a GitHub link. I'll put it down below so you can just literally grab that and implement this entire for a consistent. It's very, very cool.
First thing to understand though is that design is code. Every great brand is a tiny set of variables, color, type, scale, spacing. Once you rob a token, the design writes itself. And my theory was if we could define what excellent design looks like and codify that and build a system around it. And Claude is capable enough that it could actually execute on that. The only challenge was identifying what is excellent design and how do we reverse engineer that? And I've gotten results that I've never gotten before. And I've had like 11 comments in the past seven days like, "Jack, how are you doing your slides?" Hiding your slides. Hence why I wanted to make this video. So essentially, we come from code like this into basically presentations that look really cool. So let's look at the old versus the new and I'll show you exactly how you do this.
So it's the same content, two different universes. PowerPoint default, you know, defaults to this really old school style of doing things. Same with Canva, but you're still dragging things over and there's thought involved. And the idea here is that instead of using something like PowerPoint or maybe even Canva, you can actually just get this to be programmatically created. You are only limited by your imagination with this incredible technology.
So the other issue that you get with most slide decks that you see and websites for that matter is that every website kind of looks the same. It's got that really weird orangey claw type feel to it. It's like five prompts, five different purple gradients. That's always really common. and the defaults are doing all the work and it's becoming so obvious what an AI website is now but it just drives people away and you're kind of getting them. So that's the big issue here, right? And the big problems that we've got is sameiness. It's generic AI slop. Um, if you give it a bad prompt, in other words, garbage in, you get garbage out. Um, you get drift. So basically, it just changes over time. And there are no underpinning design principles that are actually working. Hence why we have what I call the AI sloth apocalypse. Like you let a backend dev loose on your front-end code. It's chaos. We cannot allow it. It's out of control.
So here's the thing. It's not magic. It's actually measurable. So 20 rules. Each one is codified. Each one is checkable, bicep ratios, etc. Just to really help AI explain what that physically is. So, let me show you for example what that physically looks like. So, these are the 20 universal design rules for AI design superpowers. So, research back. They're pull from very, very premier resources and explain what they are and how this whole system and skill actually works. If you don't understand why design is good, we're never going to be able to actually go ahead and build a design.
So, let me bring this out a second. So, what am I talking about? And by the way, these very slides you're seeing right here, including images, which I'm also going to show you how you do programmatically like this, all done with code in one go. Like that's basically where we're at now. I can build this for anything I want to. And you'll learn those two skills as well.
So the first one, and this is comes out to a really cool book, which is called Don't Make Me Think. So you shouldn't really have to think. And the idea of this is one idea, one slide. The second one is it should be glanceable in 3 seconds. Basically slides are scanned. They're not studied. 3 seconds is the budget. If you can't get the point of three, you don't have a slide. You have a document. So number three is maximum 7, ideal 3 to 5. This is to do with the number of things that are on the page at any one time. You can go down in more detail if you like to. I just want to give you the bird's eye overview and how this works. 40% empty. So white space isn't where the design ends. It's where the design lives. Cramped slides feel anxious. Hero slides want at least 60% standard at 40. And this idea that if you go into any premium brand, right, like you'll always find like an an abundance of space. You also see this at Apple. So, we want to reflect that in our designs. Number five, 5% of everything. This is a really cool one. Actually, this one came from TV. The idea is that no critical content within 5% of any edge. And by the way, if you want to skip these design insiders to get straight into the building, I'll timestamp everything down below for you so you can skip ahead. But I really think this is worthwhile doing cuz this is like the crux what makes it so cool. So, as you can see, we don't want anything touching the edges. And if you come over and have a look at this for example, can you see we have this beautiful border all the way around the side and it did the exact same thing with the grind slides. And again, this was all done with I just gave it URL and this is what it put out. Like this is all following the principles and if you understand it, you'll get what what I'm talking about. Cool.
Number six is going to pick a ratio drive everything. So this here is the golden number. This is what we see this golden ratio all through nature and the world. It's very, very, very cool. Um, basically you you have every number related to that. So you have say your first pixels 100, you divide that by 1.618 and so on and so forth. That's how you get something that just looks magical and correct rather than random. Don't just eyeball it. Use actual ratio. It's like a good little design hack. Four sizes per slide. No more display, subhead, caption. That's the budget. If it's size signals, you didn't make a decision. And the cool thing is guys, you don't even know need to know all this stuff. This just for your knowledge. like we give this to AI as it's kind of coding infrastructure, it's rule book and it runs away with it. So 28 points or readable from row 10. So body text, this is basically just talking about like how the sizing that it needs. Tight to big, loose to small. Again, this is line height. Some good good principles on that. 60 characters most. This is really good, especially presentation. The slide shouldn't have paragraphs to begin with. If they do, cap line length of 60 characters. Anything wider and the eye loses its place between the lines. So when we're building design systems, you actually do have to be specific with the size and actually the length if you want to reproduce high quality consistently. That's what is required. Done.
So number 11 is going to be about ratios. You can check it out in more detail. 60, 30 to 10 is a classic one. So this is 60% dominant, usually the background, 30% secondary, and 10% accent. That's often what we say for color theory in rooms. It's very, very cool. Then we've got the one accent. Uh, that's a budget as you can see. And each of these different designs, guys, has only one accent, which is cool. Color is never alone. 8% of men are red, green, color blind. Encode meaning with shape, weight, position, label, icon. Color reinforces, never substitutes. So again, you can go down these. You got eight pixels always to do with the margins. One grid, everything stops. 12 column grid. Again, it's more to pixel nomics if you like. Distance equals relationships. This one's really cool. Proximity is the cheapest grouping signal. Items related to each other um of like this level apart. So this is basically saying these two things here are obviously like separate, but if they were together, for example, like this text here, they would be viewed when you look at the screen as one like unit basically. to that has to do with like just kind of codifying distance.
So what I did, I tried to find all the best design insight and there might be more. So this list might grow and if you've got any great suggestions, limit it down below, but these are the best ones I found. And essentially, we're just codifying those design principles. 80% of the ink should be data, which is cool. Strip every chart pixel that isn't carrying meaning. No 3D, no gradients, no drop shadows and bars, no redundant legends, uh top left or invisible. This is really cool. Eye tracking is unambiguous. Attention enters top left and swoops right. So again, we even got this nailed down and pick a mood and stay in it, which is really cool.
So this is basically our entire system, which is really freaking cool. So the question is, well, how do we then take all this beautiful design stuff and actually build something? Get into the build. So what you're going to do is you're going to come over here, you're going to click on this GitHub right here, and then we're going to head over to this guy. And all you're going to do, and as you can see, we've got the power design there. We've got all the different images. Um, you can see everything there rocking and rolling. So you're going to come over here to code, and you're going to click on this. And then you can head over to your integrated development environment of choice. If that sounds like I'm speaking Spanish, I did just launch a full Claude code course in my community. I cover everything from foundation setup, building a website with insights and design hacks I've never shared anywhere before. It's really crazy power features, memory system, the whole thing. I'll put a link if you want to check this out down below, but if you want to level up massively, I can I can share that with you.
So, what we've done is we've copied this. Now, I'm going to go ahead and build this in anti-gravity. And then we can kick some butts. And now we're in anti-gravity. I'm just going to come down here to open folder. I'm going to give a brand new one. I'm going to call this one something like power design, which is the name of the repo. And this one specifically is for slides. But I'm going to expand this I think over time to pretty much encompass any kind of design framework. I'm really excited with the results I've got. And we can see together just how this works for anything. So I'm going to say, "Hey dude, do me a favor. Go ahead, download this repo, clone it, and then familiarize yourself with it." And then we're just going to throw in the URL like so. Bada bing, bada boom. And then we are rocking and freaking rolling.
Now this repo is a fork of a repo called Vault Design which has brand systems for everything. And I thought that would be a really great basis for this because if you come over to brands here, you can see it's got essentially the brand style for loads of different brands that you can play around with as inspiration. What I often recommend you do is look at the HTML behind it. So this is good for insight if you want a quick idea. But what we're going to do here is basically for this process. So basically you're going to paste in a URL. So this could be your website. Once we've done that, Firecrawl is going to go and extract the DNA basically from that or you can just use one of these pre-built things in the library. Then you're going to give it what you want it to look like and then it's going to generate slides and then you can iterate on it following between design rules. Sound really cool? Let's freaking do it.
So I think we should go ahead and do uh clickup.com, right? So let's just do clickup.com and then we're going to come down and say these are the Firecrawl credentials. Now, the reason that we're using Firecrawl, and I really like Firecrawl is because a, it saves on tokens, grabbing things. But most importantly, it can actually extract the brand identity from the website super duper easily. So, this is ClickUp. This is the example that we're going to do first of all. But if I come over here to this, come into fc.dev. Literally, just grab your API key from the homepage. Just API. Come back over and then we just throw in our credentials into anti-gravity. Or if you've got the net connection, you can just put it there. And just like that, guys, it's downloaded all the stuff. So, we've got a brand style MD full 10 section brand spec which is great for in the repo's template. Then we've got the actual clickable logo which is awesome. Visual theme color palette. This actually went over and took screenshots of the website to get a little bit of sense of it. Visual brand. All the components look like I said SVG. So now it is ready to rock and roll. So I'm going to say, "Awesome. Do me a favor. Go ahead and just create for me three slides in a slide deck as a sample using this style."
And while Claude is cooking in the background, let me show you how this process connects together cuz effectively it's 3 minutes from any URL. That's all I gave it to a deck with this skill. How does it work? First thing we've done is we grabbed the repo tick. We picked a website or gone from the brand library. We chose ClickUp. Firecrawl has extracted the brand DNA. Fantastic. Claude has generated the deck or way to do that. And when that's done, we can actually either share this via GitHub and Vercel CLI if we want to, which means we can actually share this HTML deck with anybody. For example, these 20 rules thing that I designed, that's what I did at the final stage. I built all this stuff out. And there we go, guys. Look at this. This, by the way, is one shot. I have not added anything else to this. It's all done this itself. Look at this logo. It's even got the logo in the bottom left. And the sizing, the spacing. This is really, really cool. The cost of tool sprawl. There we go. And it's even got that cuz look at this guys. If I find the website here, you can see how ClickUp has this like gradient type of thing where it goes from that's a pretty cool feature from one type to another. It's added that in. It gets that which is really freaking cool. These are just really freaking crisp. I'm really I I think for a first shot this is cool. And obviously you can just go ahead and do what it wants to add that runs on your work guys. Like for honestly like this is ridiculous. I'm really super duper impressed with this. And again just coming out to show what it looks like. Get started. It's free. Watch a demo and see if this button works. If I do that, it does actually open a new page and open into that which is cool. Now, obviously, I know there'll be 17-year design experts that comment saying, "Well, actually, this should be here." I get that you could improve this. Of course, you can, but for a first shot, like it is just really freaking cool.
So, let's give it another example from a completely different brand and see how it gets on with it. I'm beautiful. As you can see, I literally on the left hand side, I said, "Hey, now do Stripe. It's done it. Financial infrastructure." And by the way, guys, it did it in like I don't know, it tells you how long it took, right? How long did it take? Uh, like a couple seconds. It didn't take very long at all. It was very, very freaking quick. And if you're wondering why I've come over to the Claude desktop app instead, it's because this one has 4.7 native in and I wasn't using the terminal. So, if I bring this one over, let's have a look at what we've got. Payments for the internet. It's got a nice beautiful subtle hue to it. Like I think a lot of people design expect loads of whizbangs and like less is way more sometimes. You can see these really use the premium space. Building payments takes months. Stripe takes an afternoon. Really crisp. One API every part of running money online. Really freaking cool. And then it's even got a different contrast which is decent like that. That's nice. And then start integrating your minutes. Cool. I mean like it's not like it's a very professional cool thing that you would feel comfortable sharing in a corporate environment. I think that's really freaking crap and these are awesome. And bear in mind even the ones that I showed you earlier guys all designed with this system.
So why don't we now instead take it one step further because design is one thing, typography, colors, HTML, animations. But what we could do to take this another level further is actually bring in the world's best image generation models. And when we do that, we can get something that really creates an incredible wow factor. So, for example, these are our ClickUp slides, right? Which I think are pretty decent. And I I think they're very, very cool. But what if I wanted to get some images to throw in there like on one of the slides? Well, what I personally use is I use this website called Krea.ai. It's basically Willy Wonka's Emporium for APIs for like image video generation, that kind of thing. and you basically create an account. You can throw like $5 to $10 in it. It's really freaking cool and you get really good prices in my stuff. I'm not affiliate with these guys. It's just the one honestly that I've been tending to use.
So, we're going to go ahead and grab your API key on API keys on the left hand side. It's just Krea API hyphen key. Go ahead and grab one of your API keys. Then you come back over to Claude and basically what you're going to do is say, "Hey, here is my API key for Krea AI. I would like you to use the brand new ChatGPT image generation model to generate me. Let's do three more slides." And on each of those three sides, I would like one image uh one graphic integrated in the below style. And then add your API key in here. And then for your actual style, one of the things I like to do is if you come over to something like midjourney.com as an explore, you can actually search for different graphical styles. Or maybe you go to Google and you say um illustration simple, something like that, right? Try and find different ideas and graphics that you think are really cool that would really sit uh and kind of complement that. Let's have a quick look. So you can get a good idea. I recommend using these image gen platforms if you want to. Maybe you like this one. I would never take one from Google when I'm building anything. But just as a for instance, let's say that you really like um let's say this fox design. Actually, this is kind of quirky. This is like millennial-esque type of thing, right? So, let's say we want to grab that and do that more. And in fact, even on Pinterest. There we go. This is a really cool one. This is like a really consistent style. So, let's come over here and let's say we want to download the image, which is cool. Download that to our computer. Then you can swing back over and then we literally just pop it in here by uploading. It is the last file that I downloaded on my computer. Cool. And then just throw in the API key. Beautiful.
So now we have this. It is eight slides. Let's check out what it's done. Okay, let's have a quick scroll down. And wow, this is literally exactly the style. It's given it a little bit of a sticky table. I didn't ask it to do that. That's insane. And again, can you see from the first cell to the first balloon? This looks ridiculous. Like I'm super impressed with how it's just done that. like that looks like the view was sat in a big stuffy corporate office building with a big mahogany desk and this came across on the slide. You may perk up a little bit. You may be able to pay attention the rest of the meeting. This is really freaking impressive. Obviously, this rabbit hole goes way deeper. That's what I cover in the big course if you'd like to learn more. But for building slides, this can do it programmatically for any brand. You enter the website in and you get to enjoy beautiful things just like this.
Then if you say, "Hey, I want to go ahead and host this and share it to other people." We can post that on Vercel super easily. And all you need to host Vercel is a GitHub account. And then secondly, you need a Vercel account. And you basically just say to Claude, "Hey, I want you to connect to GitHub and Vercel via the CLI." And once it's connected to those two things, both your GitHub and Vercel, it is able to post basically your entire website super easily.
Now, building beautiful presentations is one thing, but presentations are just one part of a multifaceted design ecosystem. So, what we need to do next is learn how to leverage other tools to get you further ahead, which we're going to do by watching this video right.