Transcription
Gemini 3 just changed everything about design, and if you use it properly, you can turn viewers into buyers better than anybody else. Design systems have made me tens of thousands of dollars. And whilst most videos are theory, I'm going to show you the exact systems that I use for design and marketing so that you can save more money, save time, and create outputs that are worth tens of thousands of dollars.
And if you don't know me, my name is Jack Roberts. I built and sold my last tech startup with over 60,000 customers and now I run a seven-figure automation business using these exact systems.
Now, step one is getting your brand guidelines. This is one that we had built for Glider, the world's fastest text-to-speech startup, if I don't say so myself. And you can see we've got things on here like logo placement, how to use it, typography, things like that. The reason this is so important, when we get this for your brand or your client's brand, we can then use this consistently on all the apps. It reflects on your website, it reflects on dashboards, and it can reflect on anything that you basically build.
So, the question is, how do we physically get it? So, if you have one, awesome. If not, there's a couple of things that we can do. One of the things I wanted to show you immediately for this is we can use Fscroll AI. This is great if you want brand inspiration. So, one of the ways we can do this is grab a brand. I've got one here which is Grind Coffee, which is really cool. So, we're going to come over here to fcroll.dev. You're going to click on playground and you're going to enter in the brand. And then on format, you want markdown, and you also want to select branding, like so, and then click on start scraping. What this will then do is grab all the information about that brand for us that we can then use as inspiration, which is really, really cool, and there's lots of ways to do this.
One of the things we want to do is get a generic but kind of detailed template to create our brand identity. So, what we're going to do is grab a prompt from here to use this. Now, what I'd like you to do first of all is get this basic prompt, and then we're going to assemble a series of things that we want to use. For example, we can go to many different websites. This is an example, Behance is one. We can do things like Dribbble. We've got things like Landbook, where you can search on all these different websites for anything you want. What you're looking for is design inspiration to create your own brand identity. Or you'll have your own logos if you haven't created that yet.
But for the purposes of this, if I come over and just grab this visual identity document real quick and copy this information, and then head over to Gemini, we're going to paste that in. And the reason why I'm using Gemini, by the way, is because it just has a sharper understanding of design for many different reasons. And then we want to give it information like our logos, for example, and it will start to design that for us.
Now, what we could do, for example, if you come back over and check out the analysis that we did on this, you can see that we've got all this sort of stuff. So, we could, if we wanted to, if we want to replicate this brand identically, we could just copy all this information. That's completely your call. Alternatively, you can come through and grab screenshots. I personally think screenshots are a great way, and if you combine them together, that is excellent.
So, say for example, we want to replicate that particular brand style. What we may want to do is come over and just grab a screenshot of this, like so, come back over, and then provide that with the information that we just scraped. You can also reverse engineer a brand by using something like this, which effectively is focused in on grabbing everything about the brand from typography, iconography, imagery, style, blah, blah, blah, all this really cool stuff. I'll put a link down below so you can grab that. You basically just copy this prompt, throw it in there with your desired brand, with screenshots, and any information about the brand.
But if you want to save over $10,000 on creating a website, we want to be able to create one with extreme configurability. And then we also want people to get this to be SEO optimized and also published. So, you can save tens of thousands of dollars and do this for your clients. So, how on earth do we do that? Well, as with all things in life, guys, there is an easy way and there's a slightly more intriguing way.
So, the simple way is we can build one in Gemini by giving it a very detailed prompt and giving it examples of what we would like it to be. The other alternative I want to throw your way and point your radar is something called Stitch, which essentially lets you build it out in a configurable way, and we can design it section by section. Quick recap: we want a hero section that grabs attention and hook. We want to have the value proposition, then we want credibility, and then want some kind of CTA.
So, for example, if I check out one of the pages I had here, right, for UI Movement could be a really cool one, but you effectively want to shop around for different brand assets and get some different individual things, right? This is a gorgeous website, by the way. I love this. Okay, let's just say that ironically we want to copy the copy, right? So, say we got this and we want something, and this is what we think is really cool to inspire our brand choice. You can basically design it using Stitch section by section, and then we can import that over to Google Gemini to supercharge.
If I said something like this, bam, I'm building a website for a coffee company called Speedy Coffee. I'd like you to be inspired by this design and create something incredible. Okay, cool. And they want to give it like beautiful modern font. Make it a beautiful, engaging, and responsive hero section of the website. Okay, fantastic. Right. And then we can click on go.
Now, what's cool about Stitch, and the reason why we're talking about this now, is that it's now actually powered and fueled by Gemini 3.0. So, what we can do here is design a hero section. Then, we can design the section underneath that. And what's really cool is that we can pick specific sections of it and edit that only specifically. So, this is going to design this for us now. But then I could say, great. Now, let's just say the next thing that we want is a testimonial section, right? So, let's say I'm over here and instead of dashboard, I want to search for something like testimonials. All right, let's have a look. And we want to find some testimonials. You know what? I'm not in love with all those ones. Maybe we can find something cool on this one here. So, we look for testimonials and open this guy up. And then we can find and search dynamically for specific components. So, this is amazing.
So, I'm going to say this is great. Let's just copy this right here. Then you can come back over to Stitch and you say, "Ace, I'd like you to design for me a testimonial section exactly like this." Okay, beautiful. Actually, what we can do is we can click on the image and add that onto it once it's finished designing, but I'm going to keep them separate for the time being. Okay, so we enter that one there. So, you can literally pick all the bits and then connect them afterwards.
The way that I would encourage you to think about Stitch is Stitch is a design-first way of creating apps. Whereas if you're using Google AI Studio, this is more of a, I guess you could say, dashboard production-ready way of doing it. But the way that we're going to cover in this video, which is very, very new, is we're going to get the design architecture and then what we're actually going to do is then bring this over to Gemini with all of the code, and then we're going to actually design the functionality.
Now, I love design. I love I I spend so long on my design. The truth is, it's always needs to do its job first, and design second. If you had clarity and funkiness on a scale of like new and creative and funky, you'd want to be clearer than you do want to be clever. Remember, don't keep people guessing what the hell things are about, right? So, we can do this, design some really cool stuff. So, "Unlock your day with Speedy Coffee." This is done on a mobile view. Really interesting. And it's got some different brands there. And then it's added some different bits and pieces. Cool. Interesting. So, I don't want this to be a mobile way. I kind of want this to be more desktop. So, to edit things, you click on it like this and say, "Hey, dude, make this 16 by 9." And I want you to actually copy the color palette, color scheme, and the logos of this one identically. Thank you. And then we just pop that one off there.
Awesome, guys. So, I need to make sure that you select web instead of app. I mean, it's very cool that you can do app. You can click through it, but we just need to make sure we select the right one. And now we're back over here. You can see that it's actually redesigned this into dark mode. Now, the cool and biggest advantage of Stitch is the fact that we can stitch these things together. So, check this out. This is now, guys, look at this. Like, it really has understood the specifics. So, the cool advantage here is the fact that if we have done this in Gemini, it's tough to get that level of granularity. So, you can imagine you basically find anything you want to, the animations, whatever it is. We can think about our website now in terms of its purposes, which is every page has to earn its right. We got to hook them. We got to show some proof. We got to do lots of things.
Now, here's cool. Let's say I bring this up here. So, if you're using Stitch and you're taking a design-first approach, what you can effectively do is design it section by section. And then once you've done that, you can highlight them all. And then what we can do is export this then to Gemini. And the way we do that is come up top to more, click on export, and then what we want to do instead of zip, we're going to export to AI Studio, which is really, really cool.
So, once we've done that, what we're effectively going to come and do then, guys, is we're going to come over here and we're going to click on build with AI Studio in the bottom right-hand corner. Will open up a brand new tab for us. Opening up AI Studio. Then we can give to it a prompt and effectively just get it to build based on those exact files, which is cool. So, he's going to load up for us real quick.
What is really cool is this is the part that stitches them together because it gives us the HTML file plus the images, which will then synthesize them together in a brand new app. If you want to build something that's responsive and don't really want to configure it step by step, one of the easiest ways to do that is open up Gemini in a new tab, upload your brand guidelines that we just created, and then we want to give it some kind of prompt with the following. It would sound something like, "I'd like you to design for me a website in four sections. I would like it to be first and foremost a beautiful hero section with an animated background that is looping. I want a very clear value proposition in the top, which is the thing that they get. Uh, this is a text-to-speech software, for example, that saves users, you know, it's basically four to five times quicker than typing. Then I want to have some testimonials. I'd like some more stuff on the value proposition. Uh, three things that make it unique. And then in addition to that, what I'd like after that is going to be a very clear CTA. So, I'd like a mini form where someone could enter their email address, their name, and join the mailing list." And then what we do is here is some additional information. Beautiful. And then what you can do with that, guys, is actually head over to any information you want to give it. So, for example, this is a load of text. But what we do, come back over and then provide that.
Then, guys, after you've given it the prompt, we need to give it some design references that we think are really cool. So, let's go through some different examples. Maybe come through to this, and we go for, I don't know, website on Dribbble. Again, there's so many different sites that we can find. We just have a quick look through all these different ones. Maybe we'll just open up a couple of them actually so we can have a quick look at some really cool designs and pick some stuff that we're really inspired by. Now, generally speaking, what we want the hero design to be the most prominent. That's the first thing that they see. That needs to be the biggest wow factor.
One of the things that I'd highly recommend as well. So, I love this design here, that Webflow kind of creativity edge. So, let's copy that map perhaps. Yeah, these are really gorgeous, right? I love that. So, if we come back over to Gemini real quick, and we can give it that specific prompt. Then again, guys, I saw this seconds later. I think this is amazing. Look at this. This website's really sick. Okay, this is fantastic. So, again, what we could do then is just copy some different things, right? So, we just come over, we just simply copy the screenshot, bring this one down, and we just feed that into Gemini. So, we do one again, just scroll down. You can show these different things. Just copy and paste all these things on there. Typically speaking, what you really want to do is only give it one specific style. It's been my experience that if you overload it with like lots of different styles at the same time, that it will just typically get confused.
And then what we can also do, if we want to, as well. So, let's look at this website. This is a specific site. What I can do is copy this, and then we're going to go to HTML extractor, which will let us basically grab all of the information from the page as well. Fantastic. Click on this guy here. And then what we can do is enter in the URL for any website and just grab the HTML from it. So, we can just use that, exactly copy all of that information. So, scroll all the way down. Beautiful. Thank you very much. And then come back over to Gemini, which is right here. And then we're going to come down and say, "Here is sample HTML that I'd like you to design my website in the style of, but using my colors, my fonts, my guidelines as specified above." Cool. And then, I mean, this is a pretty long prompt, but still Gemini can handle it. I believe in it massively. Okay, cool. And then we want to come to the top and then just give it our own brand guidelines. We'll just copy this stuff here. Beautiful. Okay, great. So, our brand guidelines are going to be here. Here are our brand guidelines. And then just enter in the stuff from earlier. Beautiful.
And whilst Gemini is building out the background, you can see now that the stuff we brought over from Stitch looks very familiar to us, right? So, it's got the exact same thing. It's got these two things that are crossing over, which is cool. Obviously, we can just substitute these with our own logos, which is dead straightforward. While that's learning as well, I also want to show you this really cool thing here, like getting these unorthodox things. Now, typically speaking, what's happening here? So, AI can design anything, but the skills of a designer are still important because a designer knows what to design. A quick little hack I found really helpful with all my startups is that when you're thinking of design, if you reverse engineer it from the user's point of view, it's like design exists to accomplish an objective.
So, for example, with YouTube thumbnails, right? You want hierarchy. You want one central point of focus. A quick hack is always think like, what is the message per what we call the fold? So, this, for example, here, everything I can see without scrolling is what we call the fold. So, it's idea one, fold one message. So, this should be the most important thing you have to say, the second most important thing, and then the third thing here, and then you can obviously build it out as you go down from there.
And then we come back over to Glider and we can see we've done here. Right? Times five, five times faster in every app. This is really beautiful, actually, for a light mode website, which I'm kind of becoming less of a fan of these days. But this is gorgeous, and again, I gave it all the text, so it's really cool. You can tap right here, "How people get their time back." Fantastic. I like this kind of highlight style. I think that's gorgeous. I love the, um, so one of the principles we just spoke about design is what we call hierarchy, which is like, which order should we notice what at the same time? If everything's a priority, nothing is. This is really cool because whitespace reinforces this sense of premium feature, premium elements, and aspects. So, this is very, very nice. So, you can literally build it this way, and then what you can do with your logos, guys, is say, "Hey, I'd like you to add this in as my logo," and then we just upload our logo. And then, guys, we also want to connect this to our CRM. We use Go High Level because it's freaking awesome. So, what we would do is get some stuff here. I'm actually going to give it a command now to send this over, and it's dead straightforward, actually.
You basically head over to Go High Level or your CRM of choice. When you're signed in, you want to come down to automation on the left-hand side. As with all things, guys, any new dashboard is going to be kind of, "Oh my gosh, this is new," when you first get started. Most of the time, it's like, use it a couple of times and you're ready to rock and roll. All we do here, once we've loaded up our beautiful automation, is we are going to add in a trigger. Again, anytime it goes left to right, Go High Level goes up to down. So, we just go for inbound webhook. We just grab that real quick. We've got a URL here. And all we do, guys, we click this connect button. And then once you grab that webhook, you come back over here and then send it into the chat window, which is great. And it can pop off.
And interestingly, one of the things you'll notice now in AI Studio is you see your logo hasn't appeared, and it's got a strange image. When you're editing in the browser, when you're editing in AI Studio or these different app builders, sometimes it's it feels quite difficult to get it to follow the commands. When we take this to our desktop, you're going to see how much easier it is when we bring in the actual publishing of the website, and then also how, how the hell do we make pages, right? How do we get maybe want to write articles, want to rank for SEO? I'll cover exactly how you do that also. Cool.
So, Go High Level now has been connected, we believe. So, how do we test that? Well, we're just going to enter in our information. So, we say, "Hey, my name is Jack. Don't you forget it." And our email is jack@ajack.com. Bam. We get started. "Welcome on board, Jack. You successfully joined the list. Keep an eye on our inbox." Cool. Well, how do we know that's happened? Well, if we come over, we can go and fetch sample requests, and nothing's come through, which is very normal. So, we come back over here. We basically come back over to the chat and we say something like, "Hey there, dude. Nothing got sent over to this webhook. Please make sure that you're sending it over here once I submit the form." Beautiful.
And now Gemini has done that. We're going to hit full screen and we're going to scroll all the way down and do this one more time. We'll call this one test and test@let's just say 1234.com. The world's most unique email, I think we'd all agree. Fantastic. Get that one sent off. And then come back over to Go High Level. And then we can look at this reference payload, and it has pulled through. Again, all the data that you got there will then appear. And this also applies to anything you want to capture. So, how much money are you making? What business are you in? What kind of client are you? What are your goals right now? So, we can get all that cool stuff.
Then all we do in Go High Level, and all we do literally these businesses, is we need to create a contact. So, what Go High Level works is every every scenario filters and focuses around an individual. So, we want to create a contact, and then it's saying, "Cool, well, who is it?" And let's map and connect these things together. So, we'd come down here, and we have their email, which is great. And then all we do is we click on this sort of thing here, and then we got it from the inbound webhook trigger, and then it has already auto-passed that for us, which is really handy, actually. So, we're just saying that the email is the email from the webhook, and then the other thing we caught was the name. So, we'll say full name, and then once again, you can come down here and click on name. But if you collect, you selected income, you selected where did you get us from, you can have all that information saved into your CRM.
This creates a contact, and then we could do anything from sending them SMS messages. We could do anything from sending them an email campaign, which is what we're doing in our startup. So, basically, they come in, then we're going to get like email one, email two, email three. We add all that information in. So, again, test all the way down here. Test 123. And obviously, what you then want to do is add in delays. So, we just simply do that by adding in, I think it's under time, if I remember correctly. Or is it wait? Yeah, it's wait. So, then you may say, typically speaking, email when they join, uh, an email 24 hours, then you want to do 72, then 7 days, and space out, type of thing, which is really cool. And then you can just say, I want you to wait, for example, 3 days. Sweet.
And then once you publish this one live, guys, um, anyone now who completes that form on your website will now get a beautiful email sequence. You can come through and you can test this, create templates, and kick some butt from it. So, now that we've done that, the next thing we want to do really is take this stand into our computer so that we can then edit it, publish it, and start to build out articles for the website, as part of this cool marketing AI systems automation.
Now, to do this, we are going to first of all, I think what we're going to do is probably save this to GitHub. We're going to call this one something like marketing system. Okay, I'm going to call it BTG marketing system. All right, sweet. And click on public and click on create git repo. Now, realistically speaking, it doesn't matter if publisher on GitHub or not, but this is going to be where it lives. Um, and then we're going to what we call clone this repo. So, remember repo just being a series of files. And the cool thing that we can do in Cursor, which is a platform I'm going to be using now, is that we can just go over and grab and yank that down. Stage and commit all changes, which means just push it over to GitHub. And then, if you want to see where that is, you click on GitHub, and you just click on this here, and they will open up in a new tab for us. And all we do is we come down to code and we come down to copy this.
Then we're going to open up Cursor. So, let's open up Cursor and do this beautifully. So, we'll open up a brand new Cursor environment. Obviously, you can use anything you want to, Cuz is just one I'm using. And of course, with cloned code. So, come down here. We're going to click on clone repository, and we just enter it in right there and hit enter. And then it will create a brand new repo for us. And we click select as repo destination. So, let's open a new folder and we'll call this one marketing system B2G, which you just built together. Create. Cool. And then click select as repo destination. And then this will grab all those files from GitHub, and then you are there and ready to rock and roll.
Two things you need to download. One is called Node.js. You want to download Cursor if you want to use this environment. Cursor is just an example of an environment. And then you want to install cloned code. I'll put a link on screen so you can follow those steps clearly and easily. Now we're here. What we want to do is play and mess around with cloned code. So, first thing I want to do is come over and grab on the show terminal. I'm going to type in Claude to open this guy up, and he's going to open up there. I'm going to pin him off to the right-hand side real quick. Awesome. Okay. And then I'm going to shut this guy down. And then we also don't need this right now. Then I also want to show files of which there will be all the files we created. We kind of just want to give it now the logo and get it to build everything and work perfectly for us.
So, let me come and drop the logo into the files. The one I added before is enormous. It was like, freaking 5,000 pixels. So, I just need to add a bit of a smaller one. So, I've done that right there. I'm going to say, "Hey there, dude. Could you add the glido horizontal black.png as a logo to the app, please?" Beautiful. And then what I'm going to say very quickly actually is that what this is a good opportunity for is once you've everything you've built now in the main website, you want to bring into Claude and just improve it a little bit. Obviously, you can still use Gemini if you wish to, but there's going to be things and bits and bats and strange happenings that you're just not going to be a massive fan of. This is a great opportunity to go through and be super comprehensive. You can spin up sub-agents, you can spin up loads of different things. You can bring in Gemini, you can do so many different things in this environment that just enables us to make it kind of website and publish ready. We give, uh, the authority to change everything that it'd like in the beautiful website. And we're happy with that also. And once we've done with that, we can ask it to open up and host.
Awesome, dude. Open this up for me in a local host so I can review what the app looks like. Fantastic. Beautiful, guys. So, I asked to open it up and put it on a local host, which by the way, you can do in Cursor. If you command and click, you can say open in Cursor browser, which is its own internet. And it shows you what that looks like. So, if I refresh this, you'll see that it's not loading up. D. Oh my gosh, none of it works. It does all work, I promise. So, this happens sometimes. So, occasionally when you load it up, it will just be white. Like, for example, I'll show you this, right? Um, just so you know that you're not crazy when it happens to you. Um, because you've got to show that like honestly, it's crazy. People don't show like the actual how this works. You open a new browser, you'll see it's not opening up. When it happens, you just explain the issue. Quick little hack by the way is if that does happen, you can right-click, click on inspect. This is like the matrix. Okay, this is like, oh my gosh, what's going on here? This will tell you if it's tried to do something and it's failed, it will show you what's called the console or like where you inspect on the right-hand side. So, if you refresh, you'll see, look, this is the issue. So, what you can do is copy this or take a screenshot. And actually just share that then with it and be like, "Hey dude, this is why it's not working. Fix this." And then just share it and then send that off, and it will basically fix it for you. You can see it's identified something that wasn't meant for production. So, this is why when sometimes you try to post directly from these builders, whether it's lovable or bowl or AI Studio, it's like it needs that kind of comprehensive like managerial overview that we can get by using cloud code or whatever in these actual environments.
And while we're doing that, I then want to show you what the next level is going to be for this kind of AI marketing system that we're building, and that's going to be the SEO component. So, hosting this and publishing it is one thing, but what we kind of want to do after that is leverage in SEO. So, we're going to publish this one together. And once that's done, we're then going to actually SEO-ify it to make sure that we do everything that we need to to make sure that it's actually going to have the ability to rank. And more importantly, we can add pages to it and just kick some butt. Beautiful.
And almost by magic, guys, it is working. And look at how gorgeous this is. This is really freaking cool. I love this. Cool. So, now we want to do is we want to post it. We want to publish it. So, how on earth do we actually do that? Well, the great news is it's not that tough because basically what we can do now is head over to the wonderful Vercel.com and we can post it directly from our GitHub. So, to do that, we are going to come over and you just connect this to GitHub directly, by the way. So, what we're going to do is click on add new, click on add project, uh, and on the left-hand side, click on marketing system and import that over. One thing I'd recommend that you do as well, by the way, is when you're doing these, make them private, just so other people can't use your stuff, right? And the way that you do that for anything that you have, once you click on it, is you can see this one's private. It will tell you. You can actually come over here to settings, scroll down, and you'll see there'll be a setting for visibility. You just click on that, and then you can decide whether or not you want to make this private or public. And if it's private, again, just the ones connected to your app can physically do it. Small hack, not a lot of people know that. Cool.
So, we've got this. It's got the framework. It will pre-populate, and then you just click on deploy. And then this will upload for us automatically onto the website. And then that's how you physically going to host it. But you'll see that in just a moment, once that loads, and we'll also get a really nice cool thing here. And now we've actually published it. We need to then update it with our updated version. Right? So, to do that, we come down to Cursor and we're going to say, "Hey dude, this is awesome. I would like you to update this in GitHub for me. Push the changes live." Fantastic. And then we can work with Cursor to make that happen. Beautiful. And then Cursor will push that for us automatically. And then the cool thing, guys, is that now when we open this up, it will, it should work perfectly for us. Amazing. And then anything we ever change in cloud code will then reflect for us beautifully on the website. So, we've now published it. It's looking great. We're connected to Go High Level. We've got our AI system. Very cool.
But now, what about creating pages? Great question. I'm going to come grab a specific prompt for this. So, there's a couple of things we want to do with SEO that we need it to create. So, come to business systems down here. Let's go for the SEO infrastructure. Fantastic. All right. Cool. So, basically, we're just going to copy this prompt. What it's basically saying is, "I want you to create a template for me in the style of our homepage." Because I think realistically, what we're trying to do here is have something that's consistent. I want the ability to create articles, and I want the ability for those articles to rank. So, for example, one of the terms that we would like to rank for is, I don't know, text to speech, or or whatever this, whatever the thing is, right? So, we copy all this sort of stuff. We want it to do loads of things like robots.txt to make sure it's crawlable by Google, all that really important stuff. And the great thing is we can come over now and just chat with it and give it this prompt like so.
Now, I'm asking it to create for me another page that's going to be our template. And then from that, we can start to create it and make sure that it's all great and ready to rock from an SEO point of view. And as you can see, it's going to analyze our existing codebase and set up a complete SEO infrastructure for your GLD marketing site. Let me start by exploring the current setup, and then it starts to work in the background.
Now, what's going to be really important, guys, is to get your specific domain. So, in Vercel, I want you to click on domains, and you're going to add in the domain for your website. So, that could be glid.com. Obviously, we've already got that, but we built this together for your purposes. silkcloud.com/b blah blah blah blah blah, and that's how it will sort of work and function for us. You can see here it's got all of the SEO features. So, dynamic meta tags, open graph, social sharing, Twitter cards, JSON LD, canonical URL, sitemap generation. Awesome. Which is great.
So, now we want to check out what the example page looks like, like this. So, I'm going to say, "Awesome. Could you add now you've got a blog section? What I'd like to do is show me an example page." Cool. So, if I click on blog, for example, does it then show us something? So, it does. So, let's just ask for it to fix the typography on this. "I'd like you to fix the typography and the spacing because it doesn't look normal. And I'd like you to add for me an example page using our existing color palette and scheme from the website for something like, I don't know, why keyboards are dead in the future, something like that." And then we actually create a brand new page, and we'll have that structure then on the left-hand side, because you can see, guys, on the left, we've got pages now. So, this is our article page, our blog page, our homepage, and it's got all that information for us. So, now we can like basically start to do the SEO optimization of our site. Beautiful.
And when that's done, we've now got our website, and we should be able to, if we want to, check out our blog. Click this one up from the G blog. "Insights, tips, and updates on voice-to-text technology," blah, blah, blah. And then we've got some cool stuff here, which is why keyboards are dead. Very cool. And we've got this fully organized blog system here. So, if I click on this one, for example, what do I get? And it's kind of populated this into that article. And it's even given it a cool wajamajig. Now, what was really cool here, guys, is the design of this. I basically went online and I was like, um, Stalling Bank blog, which is really cool. And just like before, when we completely just had a look at someone else's HTML, you can do the same thing. So, what I kind of did with this is I grabbed all the, I grabbed the website. I basically have that HTML extractor, and you can download it as a file, um, using the same thing we used earlier, and then actually in Cursor, what you can do is just upload it on the left-hand side as blog page example, and then just say, "Hey, I want you to build me a blog section based on this thing," which is really cool. And then the other really cool thing that we've got on the left-hand side here, guys, is we've got an SEO setup guide, which explains how all of the SEO infrastructure works for us. So, dynamic meta tags, JSON LD, blog system, robots. It's got some cool articles, goes through loads and loads of details, which is very, very cool. And then we can edit everything from how it appears in Google snippets and all of that beautiful stuff.
And that takes us very nicely on to step three, which is developing the content engine for your business. So, this is how we can get creative using incredible image generation technology. So, this will work on Instagram, LinkedIn, YouTube, you name it. And for this, guys, we're going to be leveraging Nano Banana and we're going to be doing it within Higsfield AI. So, for those of you, I'm sure you're super familiar with this, right? That you might you're familiar with, you know, Gemini.com, right? And you basically use Nano Banana in this interface right here. But if you use it in Higsfield, yes, you do get credits with the API, but it's so much better, guys. Honestly, if I come down to image, and also when you're in here, you can then do anything from create insane videos to whatever you could possibly imagine.
So, I come down here on the left, I click on create images, and then this is our interface. So, this is me, you know, actually, guys, these aren't AI generated images. These are actually just my library of things. And I'm even wearing the same thing. How crazy is that? So, what's really cool here is you can generate anything that you want to. What we want to look for though is inspiration and a brand style. And there's a couple of really cool things that we can do with this. So, what I would like to do, and we're going to do a reverse engineering strategy here. So, we're going to come over to images and we're looking for exploration. So, I think if we go into explore section, and then we want to have a look on for images. So, there's in Paint, obviously, there's like, lot, so much stuff in Higsville. This is truly Willy Wonka's Emporium for incredible things. Okay.
Is actually, if you're on the homepage, you come to Nano Banana Pro gallery. This is really cool, and these are all of the cool things that have been created with Nano Banana, right? You can pretty much take your dreams, pick of anything that you want on here. Like, the technology is so cool. Okay, so this is really cool. This is a comic. So, let's say we want to do this kind of style in our business, right? So, "The Unlikely Alliance." Okay, very cool. So, let's just say I want to do one of these, but I want to do it about our cool spring, uh, which is Dexter, and maybe they're doing something AI related. So, I'm going to copy this. Then I'm actually going to head over to Gemini itself. I'm going to say something like, "Hey, I want you to reverse engineer this image so that if I were to give it to a model, I would get the same result with my topic." Right? Bam. And then, but I'm going to say, "I want an what we call an image meta prompt." And then we just say, "Highly detailed, ultra specific." Beautiful. And then we just turn that one off.
And what this is going to give us, guys, is a kind of, think of it as a repertoire, a a kind of arsenal of really brand-specific stuff. So, we wanted to get our own brand style. If you check out Alex Ho's Instagram, for example, I'm sure my editors will blast things up on screen. You'll see that he has a kind of artwork style. And what's cool is in a business, obviously, we want to think in terms of systems. We don't want to rock up every day and think, "What am I designing?" We want to get like a really cool branded artwork style that really works for us. So, we're going to do this with two examples. What I'd encourage you to do is if you go to like LinkedIn, for example, uh, hey there's Ryan, my main man. Very cool guy. Joined me in New York for the NA10 comp. Let's just say that, you know, one of the things on LinkedIn, for example, that really it's important is some really cool interesting visual thing, right? That's like that important. So, if we went to someone who's really high on LinkedIn, like Chris Donnelly, for example, he's like one of the large, I think he might be the largest account on LinkedIn, but check this out, right? If you find his visual style as a for instance, uh, whoops, let me come back and grab this, you'll see exactly what I mean here. Okay, so I would never encourage you just to copy this, by the way. You want your own visual identity, but like things people like, interesting colors, and whatever it is, right? So, let's just say we really like the look of this. Although I don't actually quite like the look of that, if I'm being honest with you, but let's just see if we can find one we think is cool. Like, okay, let's say this is cool. And what happens when you get a visual identity is that people recognize it, which is why like thumbnail consistency is really cool and really important because, um, they know, like, they basically associate that with you when they see that that thing.
So, let's say that we like the look of this. I can, let's just say I want to copy this image. I can't because LinkedIn's very mischievous for some reason. So, we're going to do the old-fashioned brute force of just copying it. Cool. And then I'm come back over to Gemini and I'm going to say, "Do the same for this." Okay. Bam. And then we're going to enter that one in, like so. All right. Once that loads up. Cool. And then what I'm going to do with this one, guys, is pretty much take this one here. And then I'm going to just kind of edit it for what I want. So, effectively, we're going to come down here. We'll just copy this down to here. And then probably what we want to do, and I'm just going to use a sec a second model first cuz that one's already busy. Okay. So, say for example, "Amend this metaprompt to include a Springer Spaniel and a robot who find out that the Jack Roberts YouTube channel exists." Very cool. And here we've got this exact reverse engineering of this. Okay, which is really cool.
So, I'm going to say, "Awesome. Let's just say change this for a, um, I don't know, an educational message on, let's just see what this one's about." So, we can see, "I don't know, dos and don'ts of prompt engineering." All right. Whatever the thing is. Now, what we're going to do crucially when we get to Nano Banana, give it two things. We're going to give it an image overview, and we're also going to give it a text prompt. So, let's first of all give this as a reference image to Nano Banana. So, copy this, head over to Higsfield, which is very cool. And then we're going to paste that one in there. And then we come back over. And then we're going to grab our WhatsApp prompt. Now, what's really cool here, the cool thing here is that we are actually Okay, there we go. I think that's it. Beautiful. Okay, this is going to be crazy. So, if I come up and just copy this, and then I come back
And I paste those in there and I hit generate, what we want to do. Nana Banana Pro. I believe that is, yeah, perfect model. And then we can pick how many different batches we want. Maybe we do two just to be sure. You can pick the size. 1K. I think we want 2K. 1K is very snappy, but 2K took slightly longer, but guys, let me tell you, as with all things in life, sometimes the weight is worth it.
So, we've got this. Meanwhile, while that's cooking, we're going to do the exact same thing here. Uh, come down here. Come down. And once again, come down here. Grab this. And we are going to throw that into uh, obviously that's it generated, which is cool. It's in the cube. So, get rid of this one. Obviously, what it does is keeps it all there in case you just want to amend it or something. So, throw this one in here. And then, obviously, let's just go and grab the Springer Spaniel overview or the image that we fed it initially. So, we can feed that one in. And you can get a sense of how insane this is. Copy image. Beautiful. Come back. And then throw that out there. Fantastic. And then we're going to hit generate once that's loaded.
And guys, just like that, take a look at this. So, this is loaded up. Prompt engineering dos and don'ts. How freaking crazy is this, guys? This is copied like identically everything from Chris Donley Star, right? Content design dos and don'ts. It's got the green number do and the orange number don't. Exactly the same simple rules get better responses and save time. So you get the idea that it's kind of copied it and we can configure this in any number of ways. So the idea here is that we get a series of templates for your content strategy for Instagram, LinkedIn, all the different places and then we can replicate that out. It's so freaking good. Like this replaces professional level designers. Yeah, I really don't think people understand just how insane this is.
And then we've got the Springer Spaniel comic. Let's check it out. The digital discovery scans are complete. The firewalls dissolving. There's Dexter. I know that name. I know it. Careful. Unit 7. Don't find the main frame. They do some stuff. It's the Jack Roberts YouTube channel. Content confirmed. The Jack Roberts channel actually exists. Hit subscribe immediately to be continued. All right. Hit subscribe down below, guys, if you like this comment. If not, feel free not to subscribe. This this comment is so sick. And it's literally grabbed the style of it, right? Like if we even compare that to the style that we gave it as a quick for instance. Yeah. I mean it's crazy how good this is guys. You get the idea.
Then another one I saw was this Travis Scott thing which is like a cool digital thing. And then again you come back over. You have just done the same thing. There you go Jack Roberts. It's literally copied it verbatim which is crazy. So that's cool. But the question then Jack is well that's decent but how do I use this in my ads? Well did you know that we can I'm I'm so passionate about this. I'm even hit my mic right now. We can actually look at every ad that's performing. So, we can do that by heading over to this website here, which is Meta's ad library. And what's really cool here is that we can search it under any anything. If I do all over the world, I can actually find him. I do all ads. This is really broad. I can search based on individuals doing it. So, say I want to see what Alexi is up to because he records. When I met him in the school games, we did several ads. Skull Games is like if we got like the most new month of recurring revenue, you know, in the month from the whole platform, you'd win out, you go out, fly out, have a good time. And he recorded so many ads. He's huge on ads. So he's someone who's crushing it. So we'll look for his active ads and then we can add in filters. Let's just say for example, I wanted to look at specifically images that he's doing that are active that have been active today is for instance what we could do. Okay, so he's got none, right? But if I come over and find out something else like let's have a look. Yeah, from then to then and we apply these filters. So maybe that in itself is quite interesting. I do know that image ads are crushing it. But if I just type in a a random search term like marketing for instance. I don't know. Let's just find something random. What we can do is see all of the ads that hit that specific thing are rocking and rolling. So what we could do then is add a filter in. Let's just say we want to find the ads for instance. Let's say images with little to no text, images and memes. Cool. Yeah. And then we apply those filters. We can have a look at all the text that exists. And then what we can do is actually find this like this one here. Obviously, we want the ones that are doing well. So, we'd need to filter down by like how much engagement they've got and what that all physically looks like. But the idea with this guys is that we could take these and again reverse engineer the style, the formatting, anything we want to for our specific thing. So, for example, I know some platforms that are running ads, they literally crush it and they just do various obviously small little iterations based on that. But the cool tldd is that we can grab this information, find out what's work, iterate it, and then create these on mass using Higsfield.
Now, what's also really cool, it's a slight aside actually, if you want to create videos, one really cool thing that you could do. So, for example, you've got Obama here, right, with his hands up. And you've probably seen that meme of people like taking selfies and running and doing different things, here's something you can really do with this. So, I'll show you how you actually pull, if you wanted to pull together video assets that that loop different videos together. This is going to be really important for you. So you can see I've got these two photos here, right? Me with Israel and a me with Brock Lesnar. What I'm going to do is I can click on this and then here what it lets you do is click on video like this. So you can click on video. This is so sick. And you can add an end frame. So if I click on end frame and I select the second image like this, I can then specify anything I want to like uh happy good vibes uh in the arena. Okay. smiling for selfie. Now, I gave it fun enough an image of me frowning, so it's like it's quite a specific one, but you'll get the idea now. And then obviously you got Higfield light. I think Higfield light is fine. We can do Yeah. 3 to 5 seconds. Cool. We'll just generate this one up. And then this will to stitch videos together, which is why you're seeing, and I'll show you on screen right now all the viral stuff of people taking selfies on the movie sets. They basically just insert themselves on it. But then what this will let us do is create anything for our ad campaigns, any kind of social media thing we want to. We can just generate these videos and get started basically.
Beautiful. Then this loads up and you can see this learn run says me with Israel Adisa after his thing. We shake hands. See you later boy. And then there's Brock Lesnar. Now that was 3 seconds. Obviously you can do any image you want to. You can move around whatever you physically like. Okay, it is actually crazy. So the key thing if you want to make that win is you want to make sure you've got a good clear photo of yourself. Mine I was kind of doing a funny post. My thumbnail it probably saying um thumb clicks on for this video actually. But it's very very cool. So, that's how we're going to build out our marketing asset. And that very nicely brings us on to section four, which is how we can create word documents, Excel spreadsheets, uh, Microsoft PowerPoint, PDFs, documents in your specific brand style. And we can do all of that in the wonderful, fantastic Claude Curt.
So, how do we physically do that? And I want to give a shout out to Mark Kf, my buddy, my main man, who threw a cool video out on YouTube very recently showing exactly this process. What we're going to do for this, guys, we're going to use this Claude skills thing here. Okay. Now, the idea with this is that we're going to give Claude access to a series of skills. If we head over to CL cursor right now, we are going to open a project. Open a brand new project. We're going to create a new one. Let's create a new folder here. Actually, come on to new folder. And we'll call this one something like um operation design. Cool. I'm going create on this one. Fantastic. And we just open it. And then we're going to give Claude a very cool code. So, let's come down here. Click onto show terminal. Let's activate Claude. Beautiful. We'll align this to the right, the panel position on the right hand side. And you're going to give it this command. Uh, and he's basically going to go down over here. He is going to head over to this repo for Claude skills and download them, which lets him play around with the powerpoints, the docx, the PDF, and XLS. So, basically in this repo has everything it needs, all the all the kind of code to actually manipulate and play around with that so that Claude is going to be able to physically do this. So, we say yes, we're happy with that.
The next thing we want to do is give it some kind of brand identity. So, let's come up here and let's go for let's go for show files. And what I'm going to do, guys, is actually upload. Okay, I'm back. I've had my I've had my sip of water. We're ready to go. So, we've got the Glido brand guidelines there, which is cool. So, we've got this very cool thing here, which covers how we want our text to be. So, what we're going to say is, hey, um, create me a Word document uh on something like, I don't know, why Saturday is the best day of the week, uh, for AI automations. Okay, use the GIDO brand guidelines explicitly and use that style. Cool. And then what we'll also do is just throw a logo in as well. Also include our logo on the document. This is on in your files. Cool. And then we just bring the logo in over here too. Cool. And then we hit enter and it's gone off there. And as you can see, we've got our brand guidelines which is really cool. If you don't see PDF, by the way, you may be prompted to download something that just lets you visualize it. So, don't worry if you don't see the PDF. And obviously, it's the same thing with loads of little plugins just like WordPress, just like the app store that just help you do different things like this. So, this is now going to go ahead and do everything we need to. I'm also going to be explicit here on the fact that you must use your tools. That's always good to have just so it's really explicit. Ah, okay. So, one interesting that's happened here, guys, is that the brand guidelines are too large cuz the PDF is gigantic. So, what I'm going to do instead is actually create a markdown file with all of the information in it just so it can do that specifically.
Guys, even better than just copying it, what I'm going to do is just get Gemini to create a really nice prompt based on it, but can actually have some visual overview and context as well as as what's written in there as well. Obviously, if you've got something very specific, you can just copy and paste it, but I'm going to have Gemini just kind of refine and give it lots of interesting dos and don'ts so we can be explicit on what to include and what not to. Fantastic. So, we are going to just copy all of this information here. And again, you can do everything that I described in terms of the um aesthetic. It's got everything we need here. Beautiful. So, let's head over then to cursor. What we're going to do is right click and we're going to play a new file. I'm going to call this one glido. Um just call it like, I don't know, guidelines. Brand guidelines MD, which is just markdown. And then we click on that. And then we just paste it all in there, which is very, very cool. Uh, and then you can see we've got some stuff we need here. So, I'm going to say escape to uh, yes, we'll just create that. Beautiful. And then it can reference the bright guy, the brand guideline PDF, which is very, very cool. All right. Beautiful. Bam.
And just like that, guys, I've opened it up. And look at this. How crazy is that? Why Saturday is the best day for AI automations. But you'll notice it's not really in our brand style, right? Because it didn't have any information. It couldn't read our guidelines. So, what I kind of went back and did is I went back to cursor and I said, "Look, do it for me again, but this time I want you to read the new brand guidelines. We're going to authorize it here and I've also asked it to create for me an Excel spreadsheet using these exact same brand guidelines also." So, it's going to do the same thing. We've got all the information there. What's really cool is added my logo in now. So, you can see the ways in which you can automate this and do various different things. It's so so cool. Okay, so it's now complete the glider brand guidelines. Let me create a to-do list for the task. And then we create both documents with our proper branding. And if it's worked, whatever your business is, your client's businesses is, you can create it now specifically in their style using this exact same strategy.
Here's my recommendation as well is that in addition to having your logos, if you want to take this one level further, what you would want to do is have your your white logo, your dark logo, specify when to do that. You'd want to create a claude.md file on the left hand side that expresses a series of rules of how and when to create documents. And what you would I'd encourage you to do is create a list of reasons and documents and basically blueprints to do when to create what. And actually you want a great example of what awesome looks like. So you can say, "Hey, use this as a template." And then just spin it up in a slightly different version for whatever it is. because the more data and like what we call the best-in-class example you can give it, the way better the results are and that's how you get these systems to just print incredible things out.
Beautiful guys. So that is now officially finished. Let's upload both these and see what they look like. I've got glid I haven't seen these at all. I've got 2026 projections and I've also have the doc x which is this one here. Let's upload and see what they look like. All right, so opening up this one first. Let's see what the Excel spreadsheet looks like. Has it done it in our branding? We're going to find out and see how good this thing is. And oh my goodness, guys, look at that. They've captured the essence of it. That is literally insane. And they've gotten our logo in it. This is all, by the way, of one prompt. I was like, dude, just do it. And they were like, we got it. Beautiful. This is so freaking sick. I freaking love this. Right. Let's check out the word dark. Okay, so this is version two. Let's open this bad boy up and have a look. Okay, let's see. Okay, this is sick. So, it's basically the same thing, but they've replaced the with a light green. So, in our brand guidelines, for example, we wouldn't want the light green on white. So, that's something we'd want to change. But fundamentally, if I was a different color, you can kind of get where this is going and how ridiculous this is. And then we've got this one here, which got the dark on the green. This is literally crazy. Learning these designs is an incredibly viable skill, but if you don't know how to then turn them into full systems with some of the apps and technologies, you're leaving money on the table. And you can learn how to do that by watching this video right.