DEV Community: Margaret M.

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

Margaret M. — Thu, 05 Feb 2026 19:21:18 +0000

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 You 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.

New Year, New Me: Building My Portfolio with Google AI

Margaret M. — Sun, 01 Feb 2026 14:16:59 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About me

I work at the unique intersection of AI, art, and design: I design AI & 3D fashion and study at Parsons School of Design, exploring how AI can reshape fashion and creative workflows. As a Google Developer Expert (GDE) in AI and Cloud, I regularly contribute to open source projects.

For this challenge, I wanted to build a portfolio that breaks down the silos between my "developer" life and my "artist & designer" life, and also being a leader in the Google Developers communities. Usually, developers have a GitHub, and designers have a Behance. I needed one space that could showcase both my code and designs.

My goal with the portfolio site is to: 1) Showcase my multi-dimensional skillsets 2) Explore how I can quickly prototype with Google's GenAI tools.

Portfolio

How I built it

I built my portfolio website using various Google AI tools:

Step 1. NotebookLM - first I explored the rules and brainstorm ideas by giving NotebookLM the links to the "New Year, New You Portfolio Challenge", my 2025 Year in Review blog post, and a few of my YouTube videos.
Step 2. Stitch - I started a few iteration of UI / UX design in Stitch, then I selected a UI design to export the code to Google AI Studio.
Step 3. Google AI Studio - I spent a few hours coding there and deployed my portfolio to Cloud Run by pressing the rocket icon.
Step 4. Antigravity - I downloaded the code from Google AI Studio and integrated it into my repo as a functional web application using Antigravity. In addition, I'd like to move from prototyping to on-going development including backend code.
Step 5. I mapped the Cloud Run app URL to a custom domain margaretmz.me.

Throughout the entire process I used Gemini to guide me in tools, processes, brainstorm design and help write this blog post.

Overall it took me about 2 days to design and build this website. Half of the time was spent on graphic design, UI/UX design and half of it on coding and small amount on deployment.

The tech stack

Framework: React (for a modular, component-based UI).
Deployment: Google Cloud Run. I deployed directly from Google AI Studio, which allowed me to go from a local prototype to a live, scalable HTTPS URL in minutes without managing servers.
Antigravity - while I could deploy to Cloud Run with one button click from Google AI Studio, it was lacking a lot of fine control of deployment which I could in Antigravity.
Assets: I set up a dedicated GitHub repository (/portfolio) acting as a Content Delivery Network (CDN) for my assets, serving "Web Quality" (600x800) images to keep the Cloud Run container lightweight and fast.

You can see the code on my GitHub repo https://github.com/margaretmz/portfolio.

The "hybrid" license

One of the interesting challenges was intellectual property. As an open-source advocate, I wanted to share my code, but as a designer, I would like to protect my artwork. I implemented a Hybrid Licensing model:

The Code: Licensed under Apache 2.0 (Open Source).
The Art: Licensed under CC BY-NC-ND 4.0 (Creative Commons), protecting my original fashion designs while allowing the community to learn from the repository structure.

Design decisions

Being a designer & engineer, I want to emphasize the aesthetics of design and I would like to have my portfolio to look fashion-forward and editorial while keeping my tech DNA: from the font type (Playfair Display & Montserrat) to color palette of black, white and gold.

Instead of the standard "About" and "Projects" tabs, I structured my portfolio site around the three dimensions of my skills and it's so happened that I'm also a 3D artist. I used Gemini to help me refine this information architecture so it tells a story rather than just listing links:

Engineer (AI & Fashion): Showcasing technical skills building AI fashion projects
Creative (Art & Design): Highlighting visual design: fashion, graphic and motion design.
Leader (GDE & Community): Focusing on community contribution, early access and product test (of Google AI products), and speaking engagements.

What I'm most proud of

I am most proud of the fact that I put together my portfolio within 2 days, with limited web development knowledge. It was also great that I successfully deployed to Cloud Run in Google AI Studio with just a single button click. I was also able to transition the code successfully from Google AI Studio to Antigravity and deploy to a new Cloud Run service.

What's next?

Now that I have a beautiful portfolio website deployed to Cloud Run from Google AI Studio, and transitioned the code to Antigravity. I will continue to update my portfolio website with new projects, and include a few interactive features with Gemini and generative media models on Google Cloud.

This post only contains a high-level overview of how I built my portfolio website. Stay tuned for more in-depth tutorials on Stitch, Google AI Studio, Gemini CLI and Antigravity!