New Year, New Me: UI/UX Design with Stitch

Source: Dev.to

Overview

This tutorial walks through using Stitch, Google’s AI‑powered UI designer, to create a portfolio website that showcases my skills and projects. It’s part of the New Year, New Me Portfolio Challenge series:

• Design: UI/UX Design with Stitch (this post)
• Prototyping: Vibe Coding in Google AI Studio (coming soon)
• Production: Agentic Engineering with Google Antigravity (coming soon)

The focus here is the process from initial concept to UI/UX design in Stitch, and exporting the design/code to Google AI Studio.

What Is Stitch?

Stitch is an experimental AI UI design tool from Google Labs, announced at the 2025 I/O Developer Keynote. It can generate UI designs and front‑end code for desktop and mobile apps from natural‑language or image prompts, aiming to:

• Accelerate app creation
• Bridge the design–development gap
• Enable rapid iteration and export to popular formats

Design Process

1. Inspiration & Sketching

Before diving into Stitch, I explored templates on Canva and Adobe Express to gauge the style I wanted. I then created a quick digital sketch in GoodNotes 5—enough to capture the layout within the two‑day challenge deadline. While I sometimes use high‑fidelity tools like Figma or Adobe XD, a rough sketch was sufficient for this sprint.

2. Starting in Stitch

I launched the design at and set a goal: an editorial, fashion‑forward aesthetic that reflects my dual persona as a fashion designer and engineer.

Prompt Details

• Model: Gemini 3.0 Flash (chosen because my sketch was low‑fidelity)
• Alternative: Nano Banana Pro would be better for a higher‑fidelity UI or an existing screenshot

I supplied links to the New Year New You Portfolio Challenge and my “2025 in Review” blog post. Stitch auto‑filled some project information, but I refined the titles and descriptions for better results.

3. Iterating on Interactions

During the design phase I added several interactive elements:

• Project description on hover
• Expand/collapse row control
• Consistent 3:4 aspect ratio for image tiles
• Switched overall layout from portrait to landscape

4. Exporting to Google AI Studio

Once satisfied with the visual and UX, I exported the code:

1. Click Export → choose AI Studio.
2. Click Build with AI Studio to create a new project in Google AI Studio.

The generated mockup contains placeholder text (often “Lorem Ipsum” or AI‑generated gibberish). This is expected—Stitch serves as a visual blocker, and the content will be cleaned up in the code phase.

Next Steps

• Refine the portfolio website in Google AI Studio.
• Deploy the final site to Cloud Run directly from AI Studio.

Stay tuned for updates on the prototyping and production phases!