I Gave AI 10,000 UI Screens... Then This Happened

0:00 99% of AI websites and apps look like slop because they don't use the correct design systems. And in this video, I'll show you exactly how to give AI over 10,000 beautiful UI systems. So, you can

0:15 build beautiful websites and apps that people actually pay for that is based on beautiful existing designs, all using just one AI tool. And if you're new, I'm Jack. I built and sold my last tech

0:27 startup with like a gazillion customers and now I'm building my own AI startup and I share here the stuff that actually works. So, if you haven't already, grab that beautiful coffee and let's dive

0:37 straight in. So, what happens when you give AI access to 10,000 UI screens? I'm going to show you exactly what that looks like in this video. The idea is many screens, one tool, and we're going

0:47 to build something together that hopefully it's going to blow the proverbial socks off. Now, we're going to do this across four levels. Effectively, the system is super simple.

0:55 We're going to do the build and design, look at the copy to make it sound like it's written by a human, make sure it's functional, so we can do loads of great stuff, and then get the entire thing

1:03 live inside this video, which is cool. So, what's the idea here? The idea here is that we want to give it access to what beautiful existing design looks like. And I'll put all these links down

1:14 below so you can come down and literally grab them. Now the idea of this is if we show AI an existing website app UI system that already crushes. You could actually come down and look at these

1:25 beautiful websites from Stripe, from Apple, from Dualingo that are just absolutely fantastic. There are so many different ideas. You can search by specific elements. You can search by

1:36 websites. You can look at UI design. You can look at different dashboards to get inspiration. There is endless endless inspiration. And often times we don't have the language to explain to AI what

1:49 the thing is that we actually want. So by using these resources and systems we effectively can do anything. I'm going to pop this link down below for you. This has everything you need from

1:57 website galleries, how to UI snipe, save and collect everything like that. And by the end of this video, you're going to be in position to be a design superhero. You've just got to bring your own cape.

2:07 That's the only thing I can't do. I can't give you the cape. And we're going to be doing this using one tool. So B4 reached out to me. Now transparently I have actually been building in cloud

2:15 code. I haven't played around with the kind of like you know app builders. So I was super excited to give this a real test and see how far can we actually go inside one app. And bear in mind you can

2:26 use all of the premier models. This is just answering the question where does the work happen. So we're actually going to do this in one app together without having to even leave it. So I'm super

2:35 excited to see what that looks like. Quick tell of why we're using this. What it looks like. We can go from prompt to live application. We can feed it design systems. Um, they let you use any model

2:45 and it connects to everything very easily. It can publish it. We can do SEO. We can do a bazillion things with this. So, with that in mind, let's begin with section one, which is going to be

2:55 giving base 44 some taste to see exactly what we can build. Now, I always have the view that I think it would be really cool to do a little bit of a finance app, something that's a little bit, you

3:06 know, we can get people to create an account, maybe something a little bit professional. And I really like the look of this Orus website here. Now, this is just an example. Obviously, you can do

3:14 anything you want to. This is just one website. It really breaks down the design hierarchy, the design skills. And so, all I'm going to do literally is grab this website. And what I might do

3:23 is come to a couple other websites that I just want for inspiration. So, maybe I grab a website. And the first step really is just find your inspiration. Canvas, a great place to do this where

3:32 you can just drop them in. We can head over to websites like this and just have a good browse around. Maybe I want to go for, I don't know, finance, right? Let's see if we can find some interesting

3:40 things for finance. So, I like the look of any of these things and just build up a custom mood board that is 100% unique to you. And once we do that, we're going to head over to base 44 together and

3:50 we're going to see what this puppy can do. So, I'm basically going to say, "Hey there, I want to build a beautiful finance app. I'm inspired by the below designs. I'd like to create for me

4:00 something that looks gorgeous like this." looking at the images and the reference and the design styles. Embody the spirit of this and give it a name like Gorilla Finance and keep it sleek,

4:11 keep it beautiful. All right, very cool. And I'm going to come down and I'm going to drop in any references. Now, once you've added the link and the images and the screenshots, you can choose build

4:19 mode or plan mode. Now, I'm going to go for the full most powerful model on here. Now, what is cool in the model section, I really want to call out here, we can do base one, which is base 44's

4:28 own model. It's really cool because they're trying to really specialize and say, "Well, if we are building apps and websites, what if we optimized a model around doing that?" I think that's

4:38 really interesting to build expertise in this area so you stand out. Auto mode effectively is just going to match it with the best model. This is also going to be quite credit efficient. So, if

4:47 you're building loads of stuff, do you want like a nuclear warhead to open the door? Maybe. I have been known to ask Fable 5.1, how many calories are in my protein shake? But I'm going to come

4:56 down and go for Fable 5.1 cuz I want to go for the big firepower. But if you want more token efficiency, you can do that. So do this and then drop any images that you like in it. But before

5:05 we do that, we want to do one thing, which is just be clear on the functionality. So I'm going to say it needs to be a beautiful website and I would like the ability to have a login

5:14 section. And then I want the ability to customize some random things inside that login section, please. My essential idea here, I'm building a finance app that helps you track your budget. Wouldn't it

5:24 be cool if you could like edit what that looks like inside for example and then base 44 will go ahead and build that for you and honestly it's done a good job. Now one thing I really want to point out

5:34 here I think is really important to bear in mind and that's the fact that this stage all I'm really interested in is basic functionality and for it to be directionally correct on the design.

5:44 Classically I had always said functionality needs to be critically done first then we build design. The reality is this is that the actual infrastructure and the combination of

5:55 things AI can crush that with its sleep with its eyes closed. So I need the design to be near where I want it to be and the basic functionality before we go on to level two. Now if we come over to

6:05 the website itself, a higher standard of business and finance. I love this little gradient it's got here. As I hover over, it's got this nice subtle animation. Remember you are using the premium

6:14 models here. This is nice. It's nice and crisp. I probably move this over to the right. And it's cool. There's going to be things that you want to change. Explore Gorilla. We've got some

6:21 different things here. We can add a nice image in at this section. And we've got numbers. I do love the design of this. This is absolutely I think this is fantastic. Come down. Load things here.

6:31 Nice kind of um green glow in the background. Not bad. And obviously this literally pops out as you scroll down. What our partners say, all the logos that we're working with. And then we've

6:40 got some things that pop up. Obviously, there's a few things I would I want to amend and move around a little bit, but for a, you know, it's it's pretty decent for what it's done straight away. Then

6:47 it's got a nice footer. Fantastic. So, let's see if we can log in and get started. So, let's go over to login. Continue with Google. I like that it's already built a login screen. That's

6:57 pretty decent. So, let's just try sign in with Google. In fact, let's go ahead and create an account first. Then click on continue with Google. Now, interestingly, it's already opened up

7:04 Google. This probably is the biggest benefit is it removes the fafage of connecting everything, which is fantastic. So, I'm just going to go ahead and sign in with a random account.

7:12 And we're going to give it access. And once I've done that, I'm now in. It recognizes my email address. That's pretty cool. And I've got some information. So let's see if we can

7:20 amend any data or information in here. Okay. So engineering infrastructure, let's say that I don't want that to be 25K. Let's say actually Jack, we're doubling the budget. We are going big.

7:29 We're going to 500,000 and that is our new limit. Okay, cool. That's decent. So what if I log out now? I'm really curious to see if this is fully updated. Then we can log back in just to make

7:38 sure that the functionality is done. Okay, we're back on the homepage. We're going to click on login again. We just continue with Google. I'm signing in and let's have a look if that is fully

7:46 updated and fully connected. That would be wonderful. If so, let's come down and just like that. Again, they've basically pulled in the dashboard. They pulled in all the information. Again, I just gave

7:55 it a random prompt and it's done this. So, I think that's pretty cool that it's done that. So, now we have the basic UI and the basic functionality. I mean, I mean, that dashboard thing was pretty

8:04 easy to do. The next thing that we need to do is tackle its biggest problem in the in our war against the AI slop monster. And by the way, if this sounds like I'm speaking design Spanish, I'm

8:14 going to put a link down below for my full cla code master class that will take you from beginner. You're going to learn about how to build beautiful websites, power features, memory

8:22 systems, stuff I've never shared on the channel, and you also get full access to my entire Agentic operating system, my memory systems, uh mechanisms to help reduce your cost, as well as the full

8:32 design operating system. I'll put a link down below uh so you can get light years ahead of your competitors. It won't be fair on them, but you will get light years ahead. Now, the next thing we need

8:40 to do is essentially solve the text problem. And we're going to do this with the slop monster. And this is a big issue, guys, because if it sounds and reads like AI text, nobody is going to

8:49 buy it. Remember, apps and websites are not read. They are skinned. So, I'm going to put a link down below. We're going to head over to slot monster. It's something that I built. Basically, this

8:57 is built on the top humanizing AI repos that existed. I found all of them. Took all the best bits from all of them and put them into one place. And then, crucially, what I did is we put into

9:07 five sections. So this is going to find classic AI vocab. It's going to find AI constructions for us, any punctuation cadence, rule of three rhythms, and crucially, it's built on sales and

9:17 marketing systems based on Horozi, Daniel Priestley, Krug, loads of great things and just shows you loads of examples. Um, which is which is really helpful to understand. So for example,

9:26 it would take texts like the area's most trusted roofing experts to roofing and only roofing since 2001. Again, it just completely humanizer. I love this project. Um, yeah, I'm going to be

9:37 building to all the time, so you can just come over and grab this. Then you're going to come back over to base 44. After you've told it, yo, you're going to say, "Hey, there I would like

9:43 to improve the copy on the website. Please use the systems in this repo slop monster to do that, please." And then come down and paste it in. It's just behind me, and it'll be ready to rock

9:53 and roll. And so now it's working off in the background. Now, obviously, if you're building this in Claude or Chatbt 5.6 six or you know Astra for example, there are going to be more things that

10:03 you can do in there like spin up a bazillion sub agents stuff like that. The value prop here is it's moving way further up the ease where you're literally saying things build me this

10:13 build me this and it's just completing everything together and they're building deep expertise in this specific arena which I think is great and as I'm going to show you in a second as well what you

10:21 can also do here if you come over to the dashboard I can easily change app visibility I can see all of the users so the two accounts that I created which is great I think I've even got here I can

10:29 edit the user I can delete I can do so many different things I can manage my data I've got analytics in this again I think This is really handy to be fair. When you publish the app live to see how

10:39 many views you're getting, I can look at domains, integrations to code, agents, workflows, like a bazillion different things. I can even connect it to all my apps, which I'll show you in a second.

10:48 Now, as you can see on the left hand side, it's gone ahead and completed that, which is cool. It's run through Sloth Monsters rules. We come back over to the preview, and we can see the

10:55 changes that it has made. And if you look guys, I asked it to share what it did there. Look, before it said stuff like banking, cards, treasury, and more all in one platform. That became

11:03 accounts, cards, and treasury in one place. Nothing to reconcile at the end of the month. Before three interconnected divisions driving control, liquidity, and efficiency. Now

11:12 it's where the money sits, how fast it moves, and who is allowed to touch it. You can just see the difference. Like it's absolutely gorgeous. And the second part on level two is just kind of

11:21 polishing it up a little bit. So for example, I'm going to give it some feedback. I'm going to say, "Hey, there on the text where it says, "We guard your capital." As I scroll down in the

11:29 full expanded version, it's too far to the left hand side. So maybe we could expand the text out, maybe add one or two more words and make it such that it isn't just on the left hand side. I will

11:39 attach a screenshot for your reference so you can see exactly what that goes ahead and looks like. And then guys, the next thing that we're going to do as well is I want to add in a custom

11:48 component. Now, the way that we can do this, if we come over to this app that I built for you down below, you click on UI sniping. Let's click on 21st.dev, for example. Mobin is another great one with

11:57 those UI screens. Really easy. We can browse icons. We can do anything here. But I want you to click on the top left. And you're going to come down and click on components. And then you can see

12:05 loads of gorgeous animations that we can just add to our website. Let's say I like the look of this AI prompt box. Wouldn't this be cool? All I'm going to do is come down and copy the prompt. I'm

12:14 going to head back over now to base 44 and say uh come down here and give it information. And I'm going to say in addition to that, I would also like to integrate this beautiful interactive

12:23 thing about this AI prompt box. Do it in a very cool interactive way that would elevate the quality of the website. All right. And all I'm going to do, guys, is lally drop in that link. As you can see,

12:33 it's got everything right there, all the code, and then it'll rock and roll. All right, guys. So, let's take a look at what she has cooked up. Let's have a look. Come down and see. All right, it's

12:41 fixed it. It's taking my feedback on board. I like to see it. Come down. We're going to need to add an image in here as well, to be fair. Let's scroll down and see if it's added in the

12:49 feature I wanted. Ask us anything. Type a real question. You'll get a straight answer, not a brochure. Okay, actually one sec. Let's ask Glide up. Hey dude, how do virtual accounts work? Let's get

12:57 a quick answer to what the situation is here. Virtual accounts, digital placeholders that you receive. Send and manage money without. Okay, that's cool. Right, let's go off and just send this

13:04 one off and see what the answer is. Okay, now it's getting a bit No, I didn't code this, but again, it's come down and actually given me the answer. I think that's pretty cool. How fast do

13:12 international wise land? You know, this is actually pretty cool. connects this idea of web MCPS very decent. But as you can see, it's actually built this entire UI. And if you've seen any videos from

13:21 like two years ago, guys, you'll know how much it takes to build a chatbot that does stuff like this. And this is fully embedded. I just gave it the UI. Now, once we perfect the design, it

13:30 takes us very nicely on to level three, which effectively is going to be its ability to connect to accounts, data, a integrations, everything that we need. As you can see, we can connect to

13:38 Stripe, we can connect to Slack, notion, any system that we need to. So let's say for example I want to I don't know send myself an email and get a connect to Google sheets. I can do that super

13:48 easily. I could use any connector I want to. Let's say for example I wanted to go ahead and use something like Zapia. I use Zapia personally as my authentication layer because I can

13:57 connect this to any app, any system I want to like Hermes Claude Grobar um base 44 all these different locations. And I can just have my email my different accounts and I can

14:08 specifically toggle on and off the certain levels of access that I wanted to have. So, all I do, come back over and I'll say, "Hey there, dude. I want you to go ahead and use Zapia. I want

14:16 you to send me a daily email of all the new signups that I've got using that please." And just like that, we're going to send that one off. And then effectively, this will guide us through

14:24 setting it up. Now, I'm just showing you this as an example. In reality, you can connect anything that you want to to your kind of Apple system. And then, just like that, it just needs to get the

14:32 Zapia web hook URL, and it tells you exactly how to do that. So you can come back over to Zappia for example and you can grab that connect it vin MCP server and just do a bazillion other things.

14:42 Likewise guys if we wanted to we can go ahead and connect Stripe. So I could say hey there I want to add a payment plan to this. I'd like people to pay $10 a month when they sign up to my app. Go

14:51 ahead and help me connect to Stripe. We can drop that message off to base 44. Then we're going to be prompted to install Stripe. We can do that by clicking this button. Then it's added a

15:00 test stripe purchasing system. So, literally we can go through and if I come down to get started, we could probably see that whole thing play up very easily. And then once I've logged

15:07 in, I can scroll all the way down to the bottom and see that I can activate my membership. Now, before I can do that, we have to go on to the fourth and final level, which is going to be level four,

15:17 which is right over here. I can see it. Now, level four effectively is getting this thing live so we can get it in front of customers. I've done a finance app on this one, but obviously we could

15:25 do anything we want to using these different UI screens. Now, crucially with the signup flow, guys, I could come on to something like 21st.dev and type in payments. I could type in, I don't

15:34 know, celebration or confetti or whatever the thing is that I want to happen and I can literally find these things and let's say I like these rewards or something like this. I like

15:43 this. I can just add them in at any point in any section of my website, which I think is just such a hacker. You can see you can grab all this beautiful stuff. So, what I'm going to do first is

15:52 come over and click on publish in the top rightand corner. This has given me a generic URL. That's fine for the moment. Obviously, we can do mobile apps if we want to, but let's just go ahead and do

16:00 a website and click on publish. And once we've done that, we've literally got the website. I click on this. I open a new tab. And there is thick thick secure gorilla vault, which is cool. Now, let's

16:09 log in, continue with Google. Now, I've signed in, which is great. I've got my dashboard. I have my $500,000 limit. And let's come down and activate the membership like so. And just like that,

16:17 it's taken us through to a payment page, which is connected to Stripe. And all we do is sync up our account super easily. And then we're ready to rock and roll. Now, if we want to get our own domain,

16:26 let's go over to dashboard real quick and we're just going to come down on the left hand side to domains. So, maybe we don't want to be called thick secure gorilla vault. I can give it something

16:34 else. So, come down and here you can purchase domains and get everything managed in one section which is handy. And then obviously we can come down to marketing and have a look at SEO and

16:41 GEO, social content, all those different bells and whistles. up. Guys, this does take us on to one final problem, and that's that building these apps with these beautiful UI screens is one thing,

16:52 but if we don't fully know how to use design systems, we're never going to get the most out of our websites and our apps. So, the next thing we need to do is to learn exactly how to do that

17:01 inside this video right