Transcription
Hey guys, welcome to this video where I'm going to be showing you the design part of creating an entire project using Google AI Studio and Claw Code in as short as amount of time as possible.
Now, I have released this as a course on my channel. So, if you go on to my channel and if you go on home and then you click on courses right here and then open this course, this is a completely free course that I've created over the last few days, which is basically an entire system for creating apps using Google AI Studio.
Now, this will be the design part of the course. I want to show you how we do our design. If you don't know, we created SEO.ai, AI, which was designed in the exact same way that I'm about to show you guys how we designed this entire.
So, yesterday I showed you guys how to do the SEO for all of these applications. I don't know where this video specifically is going to fit in. Currently, this is the last video in the series, but I think it will slot in probably as the second video. So, let's just jump into it.
The final thing I want to mention just before we jump into this guys is we do have a completely free call with myself and with my business partner Rowan. If you have an MVP or a SAS project or an application that you want to build or if you're just looking for a way to automate something in your business using the Claude Agents SDK or you know whatever it is that you need, come and talk to us today or book a call today. Come and talk to us guys. Monday and Tuesday. We still got a few slots left on both the Monday and Tuesday for the upcoming week. We're looking for a few more projects to build probably in the final quarter of 2025 slash the first quarter of 2026. Either MVPs or full builds, doesn't matter. Anything that has AI or doesn't even have AI inside it. And because we're augmented by AI ourselves, it's cheaper and faster than traditional dev companies. Okay. Okay.
So, how do we do our design for um our projects? I'm going to show you guys how this works. So, the only thing you really need is the Playright MCP. Uh you could also use the Chrome Dev MCP. You don't have to use the Play MCP. I always use the Play MCP mainly because they just have this really nice command basically. So, once you've got that command, you want to go into the project, right? So, mine is AI image asset studio. This was a This was originally built by Google AI Studio and then we took it and we basically did everything to it that you can see here. So, this is now a live website, I think. Uh, yeah, this is the live website right here. You can see it's uh got a little bit more to it. Now, if I go to localhost 3000, go to view all resources. This is the SEO that we did yesterday. Now, we're going to make everything look nice. We already did Stripe. We already did database. and watch those videos if you want to see them. They're all in the course. This one specifically is going to be about design. Okay.
So, once you got the Playright MCP, we're going to do Claude-C here to continue the conversation. And then we're just going to basically look for websites that we like the design of. Now, I really like the design of Pixels or Pixels. This is a thumbnail generator thing that um I actually used for a little while. I don't use it anymore, but I did I did originally use this uh for a little bit of time. I don't, like I said, I don't actually use it anymore. I use my own system now, which I will be releasing as a SAS eventually. It's not this exact one. It's a slightly different version of this one. But yeah, I actually prefer to um make my own thumbnails on Canva using AI generated assets rather than fully AI generated thumbnails. So I'm going to say please spawn a sub agent and give it this website. Tell it tell it to process the CSS of that website using playright. not just taking screenshots but actually processing the CSS and then apply pixels styles with slightly different colors and blocks on homepage etc to my project. Does this make sense and can you do this with a sub agent? Make sure to pass all relevant context to the sub agent. Okay.
So what this will do is it will basically use the playright mcp to process the CSS of uh the website that I gave it. So in this case pixels, but you can just do it for any website. You can find any website that you like the look of or that's a competitor. It doesn't matter. We're not actually copying them. We are taking inspiration from them. I'm just doing crap, guys. Sorry. Got to always make sure you're crabbing. Okay, we're crabbing. We're all good. Yes, this makes sense. I'll spawn a sub agent to scrape the pixels website CSS using playright and then apply those styles to your project with some modifications. There we go.
Okay, so what I like to do, guys, is I like to actually read the prompt. So, you can do O when it spawns the uh sub agent, right? So, control O and then you can actually read what it's doing. And it looks like it's doing everything correctly here. Okay, so this is actually doing this. Perfect. And then this is processing the JavaScript here. Perfect. Beautiful. Please use pageionation. That's okay. We just need a little bit of info from here. We don't need all of it. And then we got most of the styles there. I believe like I said, we're not copying. We're taking inspiration from there is a big difference. We are not copying. Guys, do not copy people. Okay.
Now, we should start to see it actually applying the styles across my project. And we should see very quickly and very easily that our project looks significantly better than it does at the moment. Okay, so this is the end result. Now, I know this isn't perfect, but the the actual original homepage wasn't that good either, but you can kind of see why this is better, right? This is significantly better than it was before. Let's see if it's also done these pages. I doubt it, but we'll just see quickly if it's also done them. Okay. And then the final thing is it hasn't applied the styles across the site properly. That's kind of my fault for not doing this before. I probably wouldn't leave this till the very last thing that you do. So, if you are watching the course in order, I'll probably put it as the second or third one here. So, just um bear in mind that if you're watching this from the future or then then do this as soon as possible kind of thing. And then you have a theme across the website. Another thing you can do is you can say please actually create a theme, right? And then once you've got a theme, it basically means that it's extremely easy to apply that theme across the website.
Okay guys, so you can start to see how we're beginning to apply this style across the entire website. Now, this isn't perfect again because I did this at the wrong point in the actual project. I would recommend doing this earlier on on the project, setting a theme and then once you've got that entire theme set, then you can start to make other features. Now, this is still fine. Like, it's perfectly acceptable what it's built here. And I do like the look of this and you can see the pixels stuff. I still think it could be better, though. So, I'm just going to just give me five more minutes of your time, guys, or two more minutes of your time. And all I'm going to do is just keep saying expand or make better. And very very soon we should have the complete product.
Okay, so let's just see. It says it's been expanded. Definitely looking better, but still pretty basic. So let's just say, okay, this is great, but do one more sub agent and tell it to go really crazy with animations and making this homepage look perfect. I just think it's missing a little bit of shazam. I don't know what the word is, but I mean overall you can maybe see where I'm coming from with the design stuff. It does look like pixels or pixels, but I think it could be slightly better.
Okay, so this is the final product. Let's refresh this. We can see that we have some animations, etc. Now, it's not perfect. I know. I fully understand that. But you can just see how you can go from something that just looks absolutely terrible to something that has animations, etc., etc. Like this looks really, really good, for example. Perfect. really really nice. It's a lot like pixels, but it's also not pixels. I would feel comfortable um releasing this basically because although it is obviously inspired by pixels, it's also clearly its own thing. And yeah, this is the final result. You can see there's a few couple of weird colors just because of the way that I did things. I didn't do them in the right order, but other than that, this is how we design our site. You can see this is starting to look really, really nice. I still think this could be better, but in terms of not keeping you guys here for half an hour, I'm going to leave the video there.
Guys, thank you so much for watching. If you're watching all the way to the end of the video, you're an absolute legend. And I'll see you very, very soon with some more content. Peace out.