In this tutorial we will be looking at Stitch, a design tool from Google.

Recently Galileo AI shared the news that they have been acquired by Google, and now this has given born to a new tool called Stitch from Google

Stitch is an ai-powered tool to help application builders generate high-quality user interfaces for mobile and web apps and easily export them to Figma, or directly access the frontend code, It uses some of the latest AI models from Google Deepmind. 

Checkout the video here that we made to give you a overview on how to use this tool.

If you are someone like me who always keeps looking for design inspirations, i got some good news for you

Is it Free ?

Its available for free of charge with certain usage limits. Each user receives a monthly allowance of 350 generations using Flash mode and 50 generations using Experimental mode. 

Walkthrough

Visit stitch.withgoogle.com

You can ask it to design interfaces for mobile or web, let me show you - I am gonna ask it to design a Profile card for Bio in mobile view. 

You can iterate on the design, by instructing on the changes through chat.

Let me ask it to change my name and bio details, as you can see it modified the design with new changes. 

Now let’s try the same for Web - I am gonna ask it create a web app design for profile bio card creator

Nice, we got some really good design ideas here.. 

In the Experimental mode, you have the ability to copy the code, so if you want you can copy the code and tweak it, its based out of tailwind css so it should be responsive as well

Next, lets try to tweak a design based on a uploaded image, for this i am uploaading a existing ui design and asking the AI to give a design for the mobile view based on it.

I am gonna ask it - Can you create a mobile design for the current website in the screenshot

And i am already amazed with the result, as i can compare it with the original ritro ui site and its already so similar in design for mobile view. 

Now I am going to showing you how to use the standard mode, let’s ask it to Design a portfolio website, which is simple and shows my work. and I am gonna select web

After it generates the design, also you have the ability to tweak the theme or the design elements from the Design Edit mode like light/dark, color font, or theme of the design

After it generates the design, I can copy the design using Figma, which you can paste in the Figma to get all the elements

Cool, now you know all the tools in hand, you need to know how to prompt well to make your designs better, you can follow the prompt guide to learn different prompting techniques with examples.

Prompting Guide

That’s all people. 😁

Happy Designing 🙂

Share with your friends and encourage them to subscribe to our newsletter, link below

Weekly Make Me Smart Newsletter - https://bit.ly/make-me-smart-nl

Resources:

Workbreeze.co - Your only location to find, share and drops for all workflows and automations with AI