Viktor Oddy • 18:47 • 4 segments
The speaker demonstrates Google Stitch as an animation tool that enables users to create websites without requiring additional software such as Web Flow.
Google Stitch allows users to design and generate hero sections using AI, which can be customized with animations and interactive previews.
The speaker uses motionsize.ai for prompts and codes that AI works more effectively with and nanobanana 2 for advanced image generation tasks within Google Stitch.
To improve results, the speaker uploads videos and images from other sources such as designroet.io to provide AI with more information.
The speaker highlights the importance of having reference points when using AI design tools, such as Lambbook, for inspiration and structure, and showcases how to use Lovable.dev to create visually appealing cards with unique sections.
No notable quotes extracted.
**VIDEO PRODUCTION BRIEF** **TOPIC & HOOK:** Title: "Revolutionize Your Web Design with AI-Powered Tools" Hook: "Discover how to create stunning, animation-rich websites without coding expertise and unlock the secrets of AI-driven design." **TARGET AUDIENCE:** This video is designed for web designers, developers, and entrepreneurs looking to stay ahead in the rapidly evolving digital landscape. The target audience consists of professionals seeking innovative solutions for their projects. **KEY TALKING POINTS:** 1. Introduction to AI-powered tools for web design (Google Stitch, Google Stage, Nano Banana) 2. Demonstration of designing a simple prompt using motionsize.ai 3. Creating hero sections with animations and interactive previews within Google Stitch 4. Advanced image generation tasks using nanobanana 2 5. Using reference points like Lambbook and Lovable.dev for inspiration and structure 6. Tips on spacing, padding, and customizing animations in website design 7. Conclusion: Promoting AI-generated landing pages on social media platforms **STRUCTURE & FLOW:** 1. Introduction (approx. 2 minutes): * Introduce the topic of AI-powered web design * Highlight the benefits of using these tools (time-saving, increased creativity) 2. Key points section (approx. 8-10 minutes): * Demonstrate Google Stitch and its features (hero sections, animations, interactive previews) * Showcase motionsize.ai for prompts and nanobanana 2 for image generation * Discuss the importance of reference points like Lambbook and Lovable.dev 3. Tips section (approx. 4-6 minutes): * Share expertise on spacing, padding, and customizing animations in website design * Use examples from Dribbble to illustrate visually appealing cards 4. Conclusion (approx. 2 minutes): * Recap the key takeaways * Encourage viewers to explore AI-powered web design tools **TONE & STYLE:** Educational with a casual tone, showcasing real-world applications and expert insights. **CALL TO ACTION:** After watching this video, viewers should: 1. Explore Google Stitch and other AI-powered web design tools 2. Apply the demonstrated techniques to their own projects 3. Share their experiences using these tools on social media platforms By following this brief, you will create an engaging video that showcases the potential of AI-powered web design tools while providing actionable tips for viewers to improve their craft.
✓ Obsidian export ready
./data/notes/NwSgwp47uWg_The_New_Google_Stitch__Kling_30_Destroys_Every_Sit.md
In this video, you will learn how you can create websites like this with Google ...
just set it and see what it comes back with. Let's select flash and let's see wh...
to five section using exactly these uh design system color CSS liquid glass elem...
this site with all the CSS style, the fonts, the colors, the liquid glass design...
In this video, you will learn how you can create websites like this with Google Stitch. This is a new tool that got updated. And now you can create this beautiful animated website straight in here. You don't need frameware or web flow anymore. And I'll show you the full process for that. So to start with, just go to a new project. Just type Google switch in Google and just open the first link that you see here. And we'll start with designing a simple prompt. Then I'll show you how you can generate beautiful images and how to animate that to create beautiful results that you can then post on social media and get a lot of attention, get clients through that way. So keep watching. None of this part of video is sponsored. Everything I use here because I like it. So let's start with just writing a simple prompt. And I'm going to be building a landing page for my web design agency, let's say, for example. And for the prompt, I'm going to keep it simple. Let's build a landing page for my web design agency that builds websites using AI tools. And for the colors, let's use black and white. Uh primarily the whole website will be in dark mode. So the background should be pure black, no gradients. Just keep it simple. And for the hero section, this is the code that I want you to follow and the prompt that I want you to use. So let's start by going to motionsize.ai. This is a site that has a lot of free prompts that you can just copy to have as a baseline because AI is still not at there that it can create perfect results without anything. But I'm going to copy just the hero section and I'm going to paste this code here. It includes color. It includes some um spacing and typography which will help AI by ton. And then we can say also so build the hero section as in this website. As for the rest of the sections, let's have around four to five sections. You can come up with something that would fit here. So once we have this, let's just send it and see what it comes with. Uh just click design for desktop web and you can keep the flash here and let's just click. If you have more time to wait, you can click this. This will get you about 20% better design. But let's just click it and see what it comes back with. So, it has already started to design our design system, which is pretty cool. I haven't seen something like this with Lava Ball. Of course, you can set that up. But here, let's just wait and see until it generates the rest of our hero section. This is the first result that you've received. As you can see, it does look better than AI generated result would look like. We have the fixed video in the scroll. We have the form that obviously is not displaying well. I mean there is definitely room for improvement but as a starting point it is about middle designer so we can work with this to kind of improve it. Not sure why it's um stretching like that. So here I can also select how many variations I want. So let's say let's add another section where we have a grid of recent uh designs or something like that. Do not generate images. Just add icons there with some descriptions. And let's select about two more variants or whatever. Three more variants. And let's click generate. And in the meantime, I can show you how you can generate images like this straight into switch. So here, all that I have to do is click on red design and select this. And I'm going to say generate an image of a planet similar to what you see in the reference design. And it should be like a cosmos stuff. And so with stitch you can generate images straight into here. You don't need to go to any other separate services like I need to go before to nano banana you can generate. But still if you want to generate something really cool you can you need to use nanobanana 2 directly. But let's see and wait what it will generate. So it just generated me a landing page in this design. But it kind of it's just an image of course. So we don't we can't take much from it. Of course I can just take a screenshot of this. I can go to nanobanana directly. I can upload this image here and I can say remove the background or simpler prompt for that is something like this. So create an image like this in 8K, remove the text button, etc. And it will give us the background that we can then animate and upload to our Google Stitch. So let's preview one more time what we had here and let's see what it's generating. Here we have our new sections with few more of the recent designs as we asked. We have this cards look much better than what you would get from AI generated design because it does look something like it's not doesn't have too many gradients. So let's create a preview. To create a prototype, I assume you would need to click this and create this. Uh click on the play button and it will generate a prototype screen. And here we can preview it. So we can see our recent design. We have this glass effect in background which is pretty cool. Let's say something like to have a im video disappear in the background when we start scrolling. So I'm going to select this. I'm going to say whenever I start scroll down past the hero section, let's fade out the video for about 90% of the opacity. And let's
just set it and see what it comes back with. Let's select flash and let's see what Nano Banana created. So as you can see we have this beautiful background that we can now click animate. So for the animation I'm using cling three all the time. And for the prompt it can be as simple as animate this image. So while it's animating let's look at a few more example that stage creates. Let's see what it does. It seems like it working pretty fast this Google stage. So let's let's click on preview again. So again I'm going to click delete it and I'm going to click preview to see the result. Let's select this. Click on preview. It is going to generate our screen for prototype. And here we can see that when we scroll past the her section the video fades out in the background and we have this beautiful website. And uh now we can obviously work on it to improve some stuff. Here is our animated video. Let's preview it. As you can see, we have this slide zoom as well as planet rotating. Of course, ideally you will select more seconds and higher quality to kind of get better result. So let's try that as well. But let's on a demo version, I'm going to show you how you can implement this into design. So, you would have to upload this to any web hosting service like mox.com to upload your video. For now, I'm just going to use this link. And I'm going to go to Stitch. And for another version, as you can see, it's just creating a lot of different versions, which I like that you can go back and see whichever one you prefer. So, let's select this one. And I'm going to say in the third section, let's have this video as the background of the section. Let's have the opacity of the video about 80% or 90%. And let's have fade out fade at the top and bottom. So the transition is seamless between the section if you know what I mean. So place this video as the background. And let's just place this video as the background and see what it comes back with. So this is the result that we've got. As you can see, as I was scrolling, we have this video. We have this beautiful hover effects. And now let's actually move it to Google AI Studio. So we have more control over it. So to do that, you just click on the version that you liked and just click export. And here you'll have the uh different versions you can export it on. I'm going to export it to Google AI Studio. And then we're just going to edit it here. and keep improving the design. Here we have our design exactly what we built in Google AI Studio. Let's build other pages. Of course, this is not perfect. I'm just showing you how the process works. So, to get the most out of AI, again, we would need to have some reference. So, I'm going to go to Lambbook. And here there is a lot of different pages that I can just look how different sites are made. So, for example, this is the the homepage. But I'm really interested to see how they made the about us page to kind of give the structure for the AI. So I'm going to scroll down and I'm going to click on the about us page. And there are a few way you can prompt it to the AI. You can just basically I think copy the layout. So I'm going to say build about us page. Just going to screenshot this. I'm going to go to stitch and I'm going to say build me about us page. Use the same colors and the the photos and the styles as we have on the home page. Just lay out as I have in the screenshot. So the first screenshot is the hero section. Uh, let's remove the photos. And for the second section, we'll have this page basically, our mission. Let's upload this picture to the stitch as well. Scroll down and we'll have this section. And I'm also going to upload some videos so it knows. Let's start with three sections. And then we're going to give it some videos that we can upload. So again, let's try to generate some of the images, some of the videos, or we can just go to designroet.io and copy some videos from there. I can just click on the video backgrounds, and I'm going to select some of the videos that I think would fit well in that design. So I think something like this. Let's go to Google AI Studio and upload this. And I'm going to upload some more videos just to give AI some food for thought. Something like this could also fit in the color scheme that we need. And then we can just send that and see what it comes back with. So let's preview about us page and see what it created. So this is the about us page. Not sure why it didn't update the videos. Now let's try to create similar process but using Lovable. A lot of you I know using Lovable and asking me to create more videos about it. So, let's go to lovable.dev and create a website using the same absolutely process to give us a quick start so we don't have to set up the colors, the stuff. I'm going to go to a motion sites and I'm going to select a theme that I like for our website. So, I think something like like this would work well. Let's say I'm going to copy this. Uh I'm going to back to global. I'm going to say I'm building a website for AI design tool. So let's create a landing page with about four
to five section using exactly these uh design system color CSS liquid glass elements etc. Here are section as well as the rest of the landing page. So I'm going to paste the styles again. a short prompt that will give us a great quick start. And let's just send and see which one does better result, Lovable or Google AI tool. Here is the first result that Lovable created. As you can see, we have this a little bit different layout from the hero section. Scrolling down, we have this video sticking in the background and we have this cards, eight cards. We have some numbers and some lines in the background. Then we have learning tracks. We have some testimonials, pricing section which looks pretty cool in this glass background. Uh common questions and then we have start building your future today. A yeah can be improved a little bit. But overall I think this is a pretty good result. But as you can see a lot of these sections are pretty standard for AI. Like the layout is nothing special for that. Again, there is another website called Trible, which allows you to find some unique layouts that you can just take a screenshot and send to the AI. Nothing complicated. I'll show you the exact process to do that. So, I'm going to take type landing page in the search bar. Just go here. You don't need to uh pay for it or anything. And in here, you're going to select popular. And in filters, let's just use that. So something in like um let's say something like something minimalistic that we can just take a screenshot of. Yeah, something even like this. It doesn't have to make sense. It just have to look differently than what AI would usually create. So I'm just going to pause this. Move it a little bit further ahead. Let's just wait and see what it's going to have. So it have a lot of different sections. As you can see, we need something with content primarily. So you have something like this. I'm just going to take a screenshot of this. Go back to our AI. And in the section with numbers, I'm going to say in the section with numbers, let's use this layout for our content. Do not add any background images. Just use this as a content inspiration, not as an image or do not generate any images. and keep the background pure. Keep the background as it is right now, which is transparent. So, let's just send it and see what it comes back with. Here it is update. As you can see, it already look a little bit more unique. And we're going to say overall the problem with AI sites, they use a little spacing. So, I'm going to say increase the spacing in all cards by around 15%. Spacing and padding. padding. And while it creates that, let's look for another sections that we can improve. I think the section with features can be improved as as well. We have just six cards there. And I think this is a pretty boring layout. So on dribble again, you can find something that would be more unique. I'm going to scroll through these. And as you can see, even these cards look better because they're larger than what AI generates. If we preview the whole site as you can see these cards so let's say have similar design for the cards have similar design for the cards I mean the layout so have small arrows increase the paddings and the let's just have six cards three in one row keep the same colors the same liquid glass as we have right now everything the same the icons the same just uh increase the spacing the padding in this section Let's just select this whole thing and let's just send that and see what it comes back with. And here we have our updated sections. You see we have this beautiful hour effect. The icon changing color when we scroll. So this is how you update the section. Other than that, I think we can um we can add some more images if we spend more time on this site similar to how this website has it. So they have some graphics. So that's what you can ask Loable to create. for example, take a screenshot of this and instead of having let's say instead of having I'm going to select the first card. Instead of having the first card similar as the second and third one, let's have these this card inside of it. Kind of just recreated using the same style as we have in dark mode. And the second and the third card should stay exactly as it is. But the first card should not have text or the the tagline will have the dis the graphic the UI element with some text as in the exactly as in this screenshot. And let's just send it and see what it comes back with. Here is our final preview. As you can see the site turned out to be great. We have this card as you can see looking more unique than just typical AI website. The same you would do for the rest of the sections. But now, let me show you the best way to get a lot of likes on Twitter. As you can see, I just place this 300 three hour ago and I have 358 likes. All you have to do is just record screen and copy exactly what I wrote. So, for this, I'm going to use this. And if you're asking how do you write a prompt exactly as this I write, this is a great way to get uh attention to your Twitter post. just ask AI. So I'm going to say give me the exact prompt to recreate this exact design exactly as it is on
this site with all the CSS style, the fonts, the colors, the liquid glass design, the video URLs, etc. And I'm just going to send that and it will just write out everything for me. And all that I have to do is just click choose any recording tool. I'm using cleanshot. I'm gonna just record it. Scroll through the pages. Scroll through this hover or on some elements to have this design. And I'm going to just save it. Go to Twitter. Post it here. I'm going to say AI is replacing designers created this in 10 minutes prompt below and then just attach the prompt that AI creates for you. If you like this video, follow me and subscribe to the channel. Leave a like and I'll see you in the next one.
