This is a tutorial of Stitch, the Google AI-powered UI designer, highlighting some of its features and outlining my design process for building a portfolio website to showcase my skills and projects.
This is also part of a series detailing my steps for the New Year, New Me Portfolio Challenge:
- Overview: New Year New Me: Building My Portfolio with Google AI
- Design: UI/UX Design with Stitch (this one)
- Prototyping: Vibe Coding in Google AI Studio (coming soon)
- Production: Agentic Engineering with Google Antigravity (coming soon)
In this post, I focus on my process from initial concept to designing the UI/UX in Stitch, and finally 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 generates UI designs and frontend code for desktop and mobile apps from natural language or image prompts, aiming to accelerate app creation and bridge the design-development gap through rapid iteration and export to popular formats.
I used Stitch to conceptualize and design my professional portfolio, embodying my distinct persona of a fashion designer and engineer. The post covers the initial design thinking, site architecture, and specific design choices used to realize my vision, preparing the UI design ( and code) for my next step in Google AI Studio.
Initial design concept
Before I started with my portfolio website design, I looked through Canva, Adobe Express templates to get a feel of the type of website I wanted. I also sketched digitally with a rough design:
Given the tight deadline—only two days remain until the challenge—a rough digital drawing of my ideas in GoodNotes 5 will suffice. While I sometimes create high-fidelity UI designs in Figma or Adobe XD, a rough sketch is appropriate for this time crunch.
Design in Stitch
Next, I began the design process at https://stitch.withgoogle.com/.
Given that a significant portion of my work involves AI fashion projects, my goal is for the website to have an editorial and fashion-forward aesthetic.
I began my design in Stitch with a specific prompt:
“I'm creating a portfolio website showcasing my AI fashion projects. Create an image gallery in a 3x3 grid, below each image add hyperlinked text GitHub | Medium | YouTube”
I decided to use Gemini 3.0 Flash for the design. This was because my original sketch was only a rough concept for my personal use, and I don't intend to upload it to Sketch.
I would have chosen Nano Banana Pro for a (re)design if I had a higher-fidelity UI design or an existing website screenshot to upload.
I provided links to the New Year New You Portfolio Challenge and My 2025 in Review blog post, Stitch was smart enough to fill in the design with some info about my projects; however, I found that it works better if I provide more concrete info of my project titles and descriptions.
Afterwards I went through various interactions in the design including:
- Project description on hover
- Add interactive row control: expand/collapse
- Make sure each image tile is 3:4 aspect ratio
- Changing the overall design from a portrait to landscape
Once I'm satisfied with the overall aesthetic and user experience, now ready to export the code to Google AI Studio for additional refinement. Note: the current text and images are just temporary placeholders. You'll notice the text in the generated mockup is sometimes 'Lorem Ipsum' or AI gibberish. That’s expected! I treat Stitch as a visual blocker, knowing I will fix it in the code phase.
Click on Export and choose AI Studio and click on Build with AI Studio which will create a project there for me to continue building my portfolio.
What’s next?
Next up I will update my portfolio website in Google AI Studio and deploy it to Cloud Run from there.
Top comments (0)