Image by Author | Canva# Introduction
What usually happens during app development is that you and your team finalize a design, go through development and testing, and when it’s finally time to review what you’ve been building for weeks, it just feels off. It either looks underdeveloped or simply “not right.” Too many iterations, too much time, and somewhere along the way, the original idea gets lost.
To solve this, Google introduced a new tool called Google Stitch. You just give simple English commands and get a beautiful, responsive, production-ready prototype you can deploy. And the best part? It’s free to try at stitch.withgoogle.com. In this article, I’ll walk you through my experience using Google Stitch and teach you how to get started too.
# Getting Started with Google Stitch
Head over to stitch.withgoogle.com and sign in with your Google account before starting.
// 1. Choose Your Mode
From the top-right corner of the screen, you can switch between the following modes:
- Standard Mode (Gemini 2.5 Flash): Best for quick drafts and MVPs.
- Experimental Mode (Gemini 2.5 Pro): Lets you generate UI from image inputs, wireframes, or sketches that you can upload for inspiration.
// 2. Describe or Upload
You’ll see a prompt box with a canvas next to it.
- Text prompt example: “A signup form page with logo at top, email/password fields, submit button in primary color.”
- Image prompt (Experimental): Upload a wireframe or screenshot to guide the generation alongside your text.
For instance, I used Standard Mode and gave the following prompt:
“Quiz page in a language learning app with a progress bar at the top. The title challenges you to match an Urdu word with the correct answer, offering four possible options.”
It generated an amazing UI based on this:
// 3. Preview and Tweak
Use the sidebar to adjust themes: change color palettes, fonts, border radius, and switch between dark and light mode. Google Stitch also lets you modify designs using updated prompts.
For example, I updated the theme to dark and changed the font to Manrope. After clicking Apply Theme, the output looked even more polished:
// 4. Iterate Smartly
You can refine individual components or screens. For example:
- “Make the primary button bigger and blue.”
- “Add a navigation bar to the top of the homepage.”
Stitch follows your step-by-step instructions very accurately. In my case, the Urdu words initially appeared as romanized text. So I updated the prompt:
“Display the Urdu word in a right-to-left direction with a large Nastaliq-style font, centered on the screen.”
The result was genuinely impressive:
// 5. Export and Build
You can click on the generated image to copy the code, or hit Paste to Figma to drop editable, auto-layout artboards directly into your design workspace.
Here’s what showed up when I clicked on the image and selected Copy Code. It was instantly ready to integrate into a dev environment or a design file.
# Final Thoughts and Getting the Best Results
Although it’s not a complete design solution, Google Stitch is highly recommended for MVPs and early-stage development. You can always export to Figma for advanced design customization or to build multi-screen logic.
Here are a few tips for getting better results:
- Use UI-specific language like “navbar,” “dashboard widgets,” “primary button,” or “auto-spacing” to guide the structure more accurately.
- Start with a high-level description and refine it step-by-step. For example: “fitness tracking app.”
- Be very specific when editing. Mention elements clearly, such as “change the color of the primary button on the signup form to white.”
Google Stitch is fast, intuitive, and gives you a great starting point when you need working prototypes without getting stuck in weeks of back-and-forth. Definitely worth trying.
Kanwal Mehreen is a machine learning engineer and a technical writer with a profound passion for data science and the intersection of AI with medicine. She co-authored the ebook “Maximizing Productivity with ChatGPT”. As a Google Generation Scholar 2022 for APAC, she champions diversity and academic excellence. She’s also recognized as a Teradata Diversity in Tech Scholar, Mitacs Globalink Research Scholar, and Harvard WeCode Scholar. Kanwal is an ardent advocate for change, having founded FEMCodes to empower women in STEM fields.
