An Entirely New Way to Work With AI

We're about to look at the most functional and popular Vibe Design application out there. Look, in just 60 seconds, you can make this by talking to your computer. Go ahead, build the whole thing.

Working on it. Great. I've created the full app flow for you. You can take a look now. What would you like to do next?

Holy, look at that.

I love the clean minimalist aesthetic.

It's called Google Stitch and it's essentially AI-native Design Canvas. If you're familiar, it's like Figma that was designed with AI at its core from the ground up. I'm going to show you how to get started immediately and some of the standout features. So whether you're brand new to vibe design or an experienced designer, this video will show you what that workflow actually looks like. By the end, you'll hopefully know if this is for you. So this app has been around for a while and Google has been experimenting with it, but now they just added a few critical features and made it a full-fledged application. It's available in 230 countries, but the core features are restricted to English only. To use it, you must be signed into a personal Google account or Google Workspace account. One note is if you're on a Workspace account, your Google Workspace admin has to enable Google Workplace experiments for you to access Stitch with that account. While this app is free to use as it's still in this experimental lab phase, it does operate on a monthly credit system, which gives you 350 standard generations and up to 200 high complexity pro generations. As in device, I would highly recommend a desktop computer with Google Chrome. Mobile support is limited and certain features like voice voice design don't work properly in other browsers. And we'll have a lot of fun with that one in a second here. Alright, so let's just open up the application. You can find the link in the description below. Once you sign up with a Google account, this is what you see. There's a navigation bar on the left and a standard chat interface in the middle. There's a few options here, but the core feature is this button down here, the model switcher. When you click it, you'll see a few different Google models, this redesign capability, but really the key one that I want to show you here is the Ideate feature. And that's what sets this apart from so many other apps. And that's why this is being called vibe design too. Before, if you wanted to create these application interfaces, websites, whatever you wanted to design, you had to have solutions to certain problems along the way. That's not the case anymore. Ideate helps you solve those. So maybe you're designing something and you're not sure how to solve something, or you're starting from scratch, which we'll do here by saying something like, usually I'm overwhelmed when I want to find new recipes online. I'd like to be able to save favorites, have those favorites categorized. I'd also like to have some kind of let's cook it mode where I can see the ingredients and directions and nothing else on the screen. And down here, I'll just select if I want a mobile application or a website. Let's just go with a website here as I'm viewing this on a laptop. And right away, this moves into this new infinite canvas that Stitch uses where on the left, you can see it working. At the bottom, we have our chat. And on the right side, we have some tools to move around or add things. And any second here in the middle, our cooking site should appear. It's that simple. Okay, so let's look back at this chat window. As you can see here, it asked me what kind of design direction I want to take. It gave me 3 options. I don't need to know anything about design to say, yeah, editorial zen sounds good. So I'll just type 1, hit enter. To this point, it created a so-called PRD, a document outlining all the details of our application. If you're familiar with other Vibe coding apps, this is usually the most efficient workflow. And I actually don't need you to know any of that. All I need you to know is that here, by pressing this button, this live mode, which is very similar to ChatGPT's voice mode, we talk to it and it talks back. If you know that this button exists, you don't need to know much else in this interview. Let me show you.

Hey, what are we designing on Editorial Zen today?

Hey, I wonder what the next step here is.

Let me take a closer look. Hmm, let me see. That's a brilliant start. To really elevate the flow, adding a robust Search and filtering experience is crucial for discovery and personalization.

Sure, go ahead, build the whole thing.

Working on it.

Little tip on a Mac, if you press Shift+1, just zooms out and shows the whole thing. You could also just scroll on your mouse, but Shift+1 is a bit more dramatic.

Great, I've created the full app flow for you. You can take a look now. What would you like to do next?

Holy, look at that.

I love the clean minimalist aesthetic. The Let's Cook It mode is incredibly distraction-free. It really puts the—

Okay, I'll pause that for a second. First of all, isn't this site just beautiful? It's as minimalist as we wanted it to be. Secondly, talking to this AI assistant that just builds things for me like I would talk to a designer is a surreal experience. Let me tell you, you might have noticed the lighting changed in the video. That's because the sun just set behind this Miami skyscraper outside of this window here. Let me just show you. And as the sun dramatically sets, my AI assistant is building a multi-page recipe application while I talk to the assistant that just does it for me. I'm saying that because it just feels surreal even doing this. Look, it also created all the placeholder images. And what did I do? I gave it 2 sentences and then spoke another sentence. And I know nothing about application design. This way you could also create mobile apps, by the way. Oh, and here's the fun part. You can just press this play button and it will turn it into an interactive application so you can actually experience it. Okay, so this would be here. I can go over to my collection, open up one of these minimal recipe pages. That button brings me back to here. Gorgeous. If I'm happy with this, I can go back to the prototype mode here in the top left and I can just hit export. And then there's a bunch of options. If I'm a designer and I'm working with Figma, I could export it in that native format. If I just want this thing to be live on the internet, the easiest way is the default one, the AI Studio option. Or if I say build with AI Studio, it imports all the code and the exact look. And then Google's AI Studio, which is their product to vibe code applications, will just rebuild this. And then with a press of another button, it's actually live on the internet. It's the simplest way to get a website up. But maybe I want to keep working with this. Maybe I want to bring it into Cloud Code or ChatGPT, keep editing. For that, you could get a zip with all the files that also include the visuals, or just copy the code to clipboard. Or finally, and this one is also new, you could turn it into instant prototype, which allows you to click share, toggle this enable sharing on, and then you can copy a link to it. And then anybody you want to show your idea to can just open up that link and see your application in various views. And that's really the app. It's really different from ChatGPT because you talk to it and things just appear and it's just this interactive experience. Now I showed you the full flow from nothing to a fully hosted website or ready to be handed off to somebody else. But we're not just done yet because there's a few more fun features in here that I want to show you. This plus button allows you to add a screenshot as an inspiration. If you want to rebuild the Apple website, have something similar, you could add a screenshot of that in here. You could also add a hand-drawn sketch of what you're imagining and it'll build that. This color palette button allows you to really dial in your color palette, your fonts, and the corner radius. And also here you can prompt for a certain type of design. And then the entire site will respect that as you keep working on it. And then this bar on the right is pretty self-explanatory because it's just a better way to interact with the chat that is always on the left. I could basically select certain elements so that when I talk in chat, it knows exactly what I mean. It's almost like pointing your finger at the screen to a designer that is sitting next to you. I'll close that selection here. Direct edit allows you to, well, make direct edits to, let's say, this element. I could just say, hey, I don't want an avocado toast. I want an avocado crunchy chili toast. If you know, you know. The hand is just a way to move the canvas around. And here I could upload additional images as inspirations for me to work with as a part of the app. And that's pretty much it. If you never learned Figma, well, now it's at your disposal. If you don't know anything about design, well, you know how to talk. So now it's just about clarity on your vision. The requirement for technical abilities to get to a prototype completely fell away with this. And because you can export directly to Figma or copy the code, you're not trapped inside of this environment. You just use this as a starting point. A really fun one, that is. This really removes all the early friction of going from idea to something that is presentable to others or even usable. It's actually damn good. And that's pretty much it. We just turned a feeling into an interactive working prototype in just a few minutes. If you haven't tried this yet, I strongly recommend it. My name is Igor Pogany, and I hope you have a wonderful day.