# Google Stitch, is it any good? ## Метаданные - **Канал:** Jesse Showalter - **YouTube:** https://www.youtube.com/watch?v=r1sAC1zC3dQ - **Дата:** 29.05.2026 - **Длительность:** 20:42 - **Просмотры:** 10,698 ## Описание Is Google Stitch actually good… or just another AI design tool with big promises? 👀 Let's put Google Stitch to the test; I wanna stress test its ability to turn inspiration into real UI, websites, and product design workflows. A few of the features we will dive into:  * Infinite Canvas * AI iterations * Voice mode From vibe-driven prompts to actual usable layouts, we explore where Stitch shines, where it breaks down, and whether it’s genuinely useful for designers and developers… or just another flashy prototype machine. Can AI really help bridge the gap between ideas and production-ready design? Let’s find out. ... Remember to Subscribe https://goo.gl/6vCw64 Checkout Mobbin.comhttps://mobbin.com/?via=jesse ------------------------------------------------------------------------------------ 🏆 //////////// Grow your career and level up skills through on-demand courses, live trainings, and a thriving community.: https://designchamps.io/ ------------------------------------------------------------------------------------ 🎨 ////////// I Design in Figma https://psxid.figma.com/ixbomhqzoiy0 🖥️ ////////// I build websites in Framer https://framer.link/jesse 📅 ////////// I run my life with Notion https://affiliate.notion.so/tokendsfahjf 🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: https://fm.pxf.io/c/1372011/1347628/16252 ## Содержание ### [0:00](https://www.youtube.com/watch?v=r1sAC1zC3dQ) Segment 1 (00:00 - 05:00) Google Stitch is a viriven AI design tool that's supposed to help you go from inspiration to designs, websites, user interface, mobile apps, web apps, and do it super fast. But is it any good? Well, that's what we're going to find out. I'm going to stress test this platform to see what it can and cannot do. Check out the infinite canvas, AI iterations, building out different things, utilizing voice mode, and maybe even using some new design. Markdown files to see what it can generate. We're going to dive right in here because we have Google Stitch open. And the first thing we should see is let's uh let's click meet the new Stitch. It's going to take us over to Twitter and they have a post here that tells us a couple of cool things. Got AI native canvas, smarter design agents, voice, instant prototypes, design systems, and design. Markdown files. Let's jump back over and let's just give it some sort of prompt and see what happens. We could say something like, "Hey, Stitch, why don't you design for me a marketing site for a modern women's clothing line? It should be clean, light, bright, with some feminine touches with modern navigation and liquid glass style effects. So, we're just going to turn off our transcription. All right. Now that we have our prompt in, we get the obvious. We can use a design system if we have one. We can import it or use one that's already here. This is kind of interesting because it allows you to import from a design. mmarkdown file, which is kind of a hot topic right now. Being able to create a textdriven instructions file that dictates style, color, spacing, everything. We'll get to that, but for now, why don't we just try working off of this simple prompt and see what it gives us. I'm going to go ahead and click go. And it's going to take us into our infinite canvas. It's processing my prompt right over here. And it says it's planning everything out. And it tells me that it's going to be building multiple pages like homepage, shop, collection grid, product and detail page, and our storyed. Okay, cool. So, it's working. Let's see what it comes up with. All right, so Stitch has come up with basically a plan. It's told me it's going to build out a homepage, a shop all collection grid, a detail product page, and an editorial. And it asked me, "Hey, does this look good? " And the place that you're supposed to select is down here near the prompt box. Hey, that looks great. Let's get started. Add a lookbook page, too. make it more minimalist. Sure. Let's just get started and see what it does. It's going to generate for a minute or two and then come back to us with some designs. I want to pause for a moment and say thank you to the sponsor of this video, and that's mobin. com. Mobin is the one-stop shop, best place on the internet to go to find the inspirations and solutions for the problems that you and me are trying to solve each and every day as web and digital product designers. Mobin members get access to applications and sites so you can be inspired and solve those problems. I especially love their search capabilities. I can jump over and find things that are trending, categories, screens, specific UI elements, and even entire flows. If I'm trying to solve a editing profile flow or an onboarding flow, there's 749 examples of the experts who have already solved that problem. We're talking about the best in the industry like Headspace and Grab and Adobe and on you go. You can download all of these, bring them into your Figma projects and use them as inspiration. Spend less hours toiling to figure it out yourself and trust the experts that have been solving these problems for years. Let it inspire you and let it save you tons of time. Subscribers of this channel get a special deal, 20% off an annual plan. You can find that link down in the description. Thank you to Mobin for powering the design community and inspiring us all. You can see that it's already starting to generate a few things. It's always going to give you a bit of a style guide. So, it's selected some primary colors for us, some typography, button styles. This is what we would call a mood board or a style tile, and it's starting to take those elements and start to generate designs off of it right here on the canvas. Now, what's also interesting to note is over on the right hand side, you do have a selection of tools. We have our normal kind of select tool. You have your mark tool, a direct edit tool, pan tool, uploading files to the canvas. You can also, you know, update a design system and you can favorite this design. And that's basically what you have. So, if you're looking for a fullfeatured Figma design tool where we can click on layers and see your layers panel and a properties panel, you're not going to get that. This is not that kind of tool. But you can see that it is generating all of the designs. And if you're thinking about, I just need some concepts. I need to get something on the page. This kind of conquers that blank page issue. It's finished. And it looks kind of decent, kind of interesting. It's given us a homepage here. So, let's just see if we can tuck this away so we get a little bit more full screen. And it gives us some imagery, AI generated imagery. You got your navbar up there. It took that liquid glass prompt, and tried to apply it as much as possible. So, we're getting these kind of like glass-like aesthetics. Now, it's ### [5:00](https://www.youtube.com/watch?v=r1sAC1zC3dQ&t=300s) Segment 2 (05:00 - 10:00) interesting as I click on any of these boards or these canvases here. So, like your homepage or you have your shop collection page or you have a pretty decent looking product page with kind of a gritted product image gallery and all of your sizes and everything. It's anticipated a lot of the details that we might be looking for and it's applied a pretty consistent application of the style guide or design system that it's created. Now again, you can grab any of these and move them around if you want. But we get a couple of options after things have been generated. So if you zoom in here, we can see if I click on generate at the top, I can create an instant prototype out of these. I can create variations of the selected board. I can regenerate if I don't like. I can actually create a predictive heat map, which is kind of cool, although AI based and not necessarily going to be the most accurate, although AI driven predictive heat maps are not bad. uh a mobile app version and missing states. So, we'll play with that here in a second. But we can modify also by editing, annotating, and seeing the design system. And then we can also get some preview stuff like opening this up in a new tab, showing the QR code, and then dropping it down to other sizes. That might be the easiest thing we want to see. So, let's drop this down to mobile. It's regenerating quickly on the fly. Let's go back up to desktop. So, after you've done it once, you get a decent something happening there. And we can kind of extend this out. Notice that it is responsive like baked right in as it's kind of created it, which is pretty cool. It's given us like a max width, which is a reasonable thing. And it just has responsive nature kind of baked right in, which is actually pretty dope. Now, if you're the type of person that wants to see all of these designs with all of their responsive sizes, you could drag, I'm assuming, you could copy over here and paste that same design. And then we'd be able to just drop into preview. Show it to me in tablet. And then we could paste one more time. preview that and drop it down into mobile. And then we could grab the bottom here and extend that out. And grab the bottom of our tablet and extend that out. Although it doesn't give us just normal pull from the bottom. You're going to get always the responsive nature to it, which moving from three down to two, fine. That works. So there's no sort of like direct control on the actual canvas tools where again if you feel like you want something to be very similar to Figma, you're not going to get that behavior here. So now we can look at it in desktop, tablet and mobile view, you know, and the mobile view is not updating the typography to be mobile. So if we play with it again, no, we're not getting any sort of mobile typography like adaptive typography switches, but kind of interesting. Now, if I wanted to take this desktop version and modify it or actually generate and why don't we give me some variations of this, it'll ask me how many variations. Do I want two variations? Sure. Creative, range, refine, explore, reimagine, open your mind to varied options, be creative, but nothing crazy. Why don't we reimagine? And the aspects that we want to vary are maybe the layout, the images, and let's do the text and font. Generate those variations. And now those should be generating somewhere here on our canvas. Although it has to work through the prompt method again. It's going to go back through the whole thing and start to generate the variations that we might want. So it's giving us variant one, variant 2, variant 3, and describing what they're going to be. Immersive editorial, horizontal flow, asymmetric mosaic. And so now we can see those kind of generating on our canvas. So again, for quick iteration, for quick conceptualizing of ideas and trying to get them on the board quickly, it does a pretty decent job. Now, you're wondering right now as you're watching this, do I have to stay here? Like, what's the next steps off of working inside of Google Stitch? Unlike some of the other platforms out there, there is a way for me to basically grab artboards like this, export them, and I have lots of export options. As you can see here, I can export out to AI Studio, Figma, Zip Files, MCP, Lovable. So, they have lots of integrations, which tells me that Google Stitch knows that this is not the end all beall. place that I'm going to end my design process, which I actually enjoy quite a bit. So, we could actually say, hey, I want to take this into Figma, and why don't we convert into Figma ready design. So, we'll do that. And while that's happening, you can see the iterations that we got. So again, a little bit more mosaic variant, horizontal variant. This is kind of interesting. So we could see like a horizontal sliding section. And then you also have this other version over here. So it's kind of done its job over here for the export. We can copy that. And all we should have to do now is commandV inside of Figma. So why don't we open up a new Figma design and just press commandV. And sure enough, it brought all those elements right into Figma, which is pretty cool. Now, obviously, you know, once it's in Figma, it's not going to have all that responsive ### [10:00](https://www.youtube.com/watch?v=r1sAC1zC3dQ&t=600s) Segment 3 (10:00 - 15:00) nature. So, you're probably going to want to come in, if you like all these, grab all the different sizes, and you can only grab one at a time, it seems like. Oh, no. I can grab two at a time. export, bring those into Figma as well, convert them, and then I'd be able to bring all of those concepts directly into Figma with all of their responsive or adaptive sizes, which I mean, let's go. Not bad. Not bad at all. Let's copy those really quickly. Come back over to Figma. Paste them in. And again, look, now we have our tablet right there, and we have our desktop right there. How would I use this? I think probably just like I have by concepting and getting some initial thoughts and designs and then bringing them into Figma to do some of that customization whether it's color palette, typography, sizing, spacing, just the general look and feel and then have that manual design process of riffing ideas even more here. But when it comes to riffing ideas, I mean, not bad. Like we can bring in, for instance, these other versions. And if you're like, I'm not really sure if I'm ready to riff on this idea, then we might be able to generate, for instance, an instant prototype because there's probably some detailed interactions that are happening here. So, it's opening up my prototype. And let's see, we can do the scrolling directly in here. And we can't do any vertical scrolling, but we do get some interactions. Like on hover, I'm getting this nice kind of shimmer effect and a zoom effect that's happening here. Our left to right buttons are not necessarily working. But I mean, I'm not complaining here at all because as far as getting an idea of what this could look like. I mean, as far as interaction, like scrolling, pretty cool. Not bad. I'm into it. We even get like on kind of scroll or on hover. You get your but your button moving into place. So, this is all pretty cool. And then we can also head into edit mode when we're in here in the preview. And we can for instance update things like if we want this to say not collections but like articles. You can do some on canvas live editing. Let's go back to the preview or let's actually move out of that prototype mode which I find that interaction to be a little funky to move in and out of prototype. But now we've created that prototype and you can always doubleclick it and actually move back out. So actually not funky. I actually kind of like it. Instead of having the prototype living here and having to press a play button and like in Figma, I can actually just work right here. Okay. So, this is pretty cool. The concept of creating something, generating something, um, and then just working with that thing and bringing those back into whatever platform you want to work with. I like that process quite a bit. Let's go back to all projects here really quickly. Let's do something just a little bit more complex. I have these designs that I was working on for a real client and we did all this fantastic work inside of Figma, but can Google Stitch get me anywhere close to this kind of product thinking? Well, I took this image and actually uploaded it to Claude and said, "Give me a PRD, like a product requirement document, and actually write for me a markdown file, a design. Markdown file, which I have sitting here on my desktop. So, I have the image, I have the markdown file, and I have the description of everything. So, I'm actually going to grab this entire PRD directly out of Claude. And you could do this in any AI tool. Let's just do the UI description here. And we'll come back over and I'm going to throw that entire prompt inside. I'm also going to inject a design markdown file, which Claude created for me based off of the designs that I already had. So, let's open that up. We'll scroll down. You can upload, paste, generate from a codebase, or pull it from the web. I'm going to upload a markdown file. And that markdown file is literally just markdown text that has all those descriptions. If we look at it in claude again, you can see what that markdown file is kind of describing. Brand and tone, the layout system, page frames, regions, colors, so on so forth, typography. It's really just acting like a style guide, a written set of instructions for that style guide. So, let's drag that markdown file in here and let's press go and see what Google Stitch can come up with now that we've supplied it more information. You can see it's actually grabbed that entire design system, that markdown file, and we can come in here and edit this if we want, but now it's designing leveraging all the assets that we've given it. And we'll see how close it can get. Now, it's generating the design right now just to refamiliarize oursel. This is a note an AIdriven note-taking app for the accounting and bookkeeping space. Has a global sidebar and top navigation. Has a two column layout. The left column being the content, the right column being the transcript. And there's a couple features happening inside of here. Let's see how close Google Stitch can get to this. Because what I'm thinking is if I already have a design that's in process, that's already established, can I bring it into Google Stitch, get it close enough, and then start adding variations, riffing ideas here without having to do all the manual labor? This might be the second way that I would consider using something like Google Stitch. And you can see it's actually gotten pretty close to what I had there. So, let's say, for instance, I like this ### [15:00](https://www.youtube.com/watch?v=r1sAC1zC3dQ&t=900s) Segment 4 (15:00 - 20:00) idea, but I want to riff off of this idea. then I could start to make some of those variations. Why don't we turn on live mode and preview mode? So, I want to take this uh meeting details screen that I have selected on the board and I want to create a couple of variations. Maybe one where the transcript sits in the top row instead of a two column layout. Another variation where it's one single column and it's embedded all of that transcript and video content into the main content column. Okay, so she says she's on it. She's working on it. Let's see what she comes up with. And this is their kind of live, you know, audio mode. And you can go in here and change the tone or the voice that you hear if you don't like that. If you're not into this, I could have just done this by prompt as well, but it's supposed to be like a responsive kind of design assistant that's giving you feedback. So, you know, she's generating stuff and talking to me. If that's not your thing, then feel free to not use that at all. All right. So, she's generated it and she was giving me some kind of audio feedback. She was saying she liked this single column vibe and I don't wholeheartedly agree with her. I think the two columns better, but interesting to note that she did take my previous design here. Let's just grab it really quickly. And it's hard to grab these artboards. Like, let's make sure we move on to the click and drag tool and bring it down and look at it all together. So, again, this was my original. This was the one that generated off my original, which is pretty close. And then these were the variations that it gave me. Now, if I like this again and I want to maybe work with this a little bit more, you can see I've kind of had some stuff. It was tying up and locking frames on top of each other, which not a big deal. We can always move those things out of the way. Maybe this is the variation I like more. Then we'd be able to generate again some more variations here. and let's reimagine layout and color scheme, images, text font and text content and just give me two more variations. So, this is one of those workflows that I might consider using something like Google Stitch already established designs that I want to riff on quickly and get rough ideas. Now, I still wouldn't live here and die here. I'm going to take any of these variations and ideas and then probably bring them back into my design tool so I can dive in. I this client for instance had a very dialedin design system. I want to make sure that any of the elements that are being used here are part of that componentized system. So that would allow me to just explore quickly and then bring thoughts back in rough states and then get maybe some feedback from my client or from stakeholders and then start maybe implementing those a little bit more. So that's also a very interesting use case for Google Stitch. Now, a lot of people online are creating insane designs using tools like Google Stitch or Claude, and it comes with an extensive prompt. This was a post from Victor Audi, and he says he has an entire prompt that we could just use. So, we could just grab this entire detailed prompt. And this way, you're working not from a basic prompt. You're not working from already established designs, but you're working from very intense prompts. Let's see what Google Stitch can do with something like this. So, I'm going to do web here. I'm going to paste this all in. I'm going to press go. And let's see if we can get anywhere close to what Victor had created using this prompt. Let's see if it's on. off. But this is a pretty cool design. You know, lots of animation involved with it. Animated heroes elements. Really interesting layout. Um, very dialed in as far as the aesthetic. So, let's see if again if it can get anywhere close. It's dragging in different colors for instance. But again, this would be the prompt master direction. Like you're going to spend that time prompting something. And again, how do you get such a detailed prompt? You can use already established prompts like I just did. You can go grab inspiration from elsewhere, have AI tools give you a detailed prompt or markdown file, and then implement that. This is where we get into AIdriven creative direction with high levels of detail hoping to get highlevel output out of a tool like this. All right, it's given us our design and because this has a lot of animation involved with it, we could just connect a preview and instant prototypes right here. Click on this and it's generating that prototype for us. Soon as we open that prototype up, it's obviously again we get animated elements down here at the bottom which is pretty cool. We get nice hover elements. Our navbar works pretty good. As we scroll down, we get some generated assets. These are not uh animated either. I would say this is like B minus maybe C++ level design. But again, a great start. So, as we just go back to our design, we could retweak this, change this, tell it the specific areas that we want to animate. And I didn't even mention that in any of these cases, you can actually ### [20:00](https://www.youtube.com/watch?v=r1sAC1zC3dQ&t=1200s) Segment 5 (20:00 - 20:00) doubleclick, click in, or press modify here and hit edit. And this would allow us to get detailed kind of, you know, control over things. Now, I can't drag and drop and move things around my design, but I can click into certain areas and then edit with text or edit with AI. So, I can start to get a little bit granular on the sections. But those are the three ways that I could see people starting to use something like Google Stitch inside of their design workflow process. Hey, if you enjoyed this video, make sure to leave a thumbs up, subscribe to the channel. I do lots of videos about design, development, no code, and AIdriven techniques. So, make sure you ring that bell so you know when more videos like this one come out. I'll see you in the next one. --- *Источник: https://ekstraktznaniy.ru/video/52327*