The New Google Stitch - Are Designers Finished?

Hello everyone. Over the past year, AI has completely changed how we build software from simple ideas to fully working products. And now, Google Stitch is taking this to the next level. Stitch started as a simple design tool, but now it is evolving into a full AI native design canvas where you can create, iterate, and collaborate using just natural language. Instead of starting with wireframes, you can simply describe your idea, what you want to build, how users should feel, or even reference existing websites, and Stitch will generate highquality UI designs for you. With the new infinite canvas and powerful design agents, you can explore multiple ideas in parallel, refine them in real time, and stay fully in your creative flow. It also introduces design systems with design.md lets you extract styles from any website and even turns your designs into interactive prototypes instantly. And the best part, you can talk to it using voice, collaborate with AI in real time, and even export everything to code. So in this video, I'm going to show you all the new features of Google Stitch and how you can use it to design full apps faster than ever. Let's get started. Here I am selecting the web option and for this demo I am using one of the suggested prompts. Once I submit it you will notice a completely different project page in stitch. At the bottom you can monitor the agent logs in real time and you also have the option to run multiple agent chats. I will show that shortly. And here once it analyzes the prompt it starts by creating a design system. Previously, Stitch would directly generate screens, but now it first builds a proper design system with primary and secondary colors, fonts, and components like buttons and inputs. Once that's done, it applies everything to generate the screens. It's creating two screens now. Just give it a few seconds. And at the same time, I can show that I am able to edit the entire design system, colors, fonts, even corner radius. They are also providing a design.md file for deeper customization. And if needed, I can create a completely new design system as well. Now the two screens are successfully generated. The first page is the gallery and the next one is the classes page. Both designs look very clean. And in the top right corner, there's an export option where I can export this design in multiple ways. The Figma export is a newly added feature. I can also connect to an MCP server and use tools like an IDE or Claude to convert this design into actual code like Nex.js, JS, React or any other framework. I already covered that in a previous video. Now I select the Figma export option and click on convert. Then I open a new Figma screen in Figma. Copy the design from here and paste it using control or commandV. It pastes the full design with completely editable layers. This is really useful for UI designers to quickly get a clean UI, make changes if needed, and share it with the team. And I can also use Figma MCP to convert this design into actual code. And we can also directly get code from Stitch itself. It provides HTML and Tailwind CSS out of the box. If you have already used Stitch, you probably already know this feature. I just wanted to remind you. Now I am going to create a brand new design system. Here you can see two options, manual creation or importing from a website. This is really interesting because I can just enter a website and it will automatically fetch the design system. So I am using the IMDb website just pasting the URL and submitting it. Now you can see the agent log starting and within a few seconds it will generate the design system. At the same time I can also show the edit options. I can modify any component. For example, images can be updated by adding a URL or even edited using AI. The design system is still being created, but I do not have to wait for it. I can run another agent in parallel. So now I am asking it to create an about page for this website. As you can see, both agents are running in parallel. And this is one of the really nice new features in Stitch. So our new design system is now created. If I want to apply this to the screens, I just select the screens. I will select all of them and click on the modify option. This opens the design system menu where I can apply the new theme to the entire website. If needed, I can also duplicate the screens and apply the new design there. Within a few seconds, the whole website theme gets updated. It's really fast and saves a lot of time. And this makes it super easy to experiment with different styles without rebuilding everything from scratch. Another powerful part of Stitch is how fast you can iterate and stay in the flow. Instead of static screens, Stitch instantly turns your designs into interactive prototypes. You can connect screens in seconds, hit play, and preview the full app flow right away. It can even generate the next logical screens automatically based on user actions. You can also switch to mobile view to check responsiveness. And there's a tablet mode as well. In the edit tab, I can directly modify any element, edit text manually or use AI, and even connect screens. This is useful for creating page navigation like linking buttons to different pages. When I select an element, it gets attached in the chat, making it easier to request changes for that specific part. If I click on an image or section, it can even generate a new related screen automatically. I can open any screen in a new tab to view it without the editing UI. And if I open it again, it shows like a final website preview after development. So I can fully experience how the website will actually look and behave. And you can also share this project with others. They can view it and even remix the screens. That's another really useful feature. Currently I am using the Gemini 3 flash model, but I can easily switch to other models like 3.1 Pro. I can also use the redesign option to update the existing app or even use nano banana pro to attach an image and recreate the design based on that. I can also use the ID8 option to explore multiple design ideas before choosing the best direction. And I can also choose the design system I want to before starting the project. Finally, we have the live mode preview. Once I start it, the AI can see all the screens in real time. Right now, I have selected the about screen. So it is responding based on that. >> Hey, what are we designing on the about ceramic earth studio screen today? >> Now I am going to speak to it directly. Hey, add a strong CTA button in the hero section so users clearly know what to do next. Also add testimonials, show the number of students or workshops and include logos or Instagram previews to build trust. Audit working on that. Here you can see it has started a new agent log and the updated about screen is now in progress. >> Done. I've added the CTA, student count, logo, and Instagram link. What's next? >> And that's it. It has added the CTA button and testimonials as well. You can continue refining the design like this just by giving simple instructions and it keeps updating the UI in real time. This makes the whole design process much faster and more interactive. Overall, Stitch is becoming a really powerful tool for building UI faster with AI. From generating design systems to creating screens, editing with voice, and exporting to real code, it covers almost the entire workflow. If you're into UI design or building apps, this can save a lot of time and effort. Thanks for watching. I will see you in the next video.