DEV Community: Margaret M.

Fashion with Antigravity & Gemini

Margaret M. — Fri, 11 Sep 2026 17:48:51 +0000

Written by Margaret Maynard-Reid & Jason Davernport

This blog post showcases how we can quickly prototype an AI fashion app using Antigravity, and highlight new features in Antigravity 2.0 and Gemini. Whether you are a builder or experienced developer, you will find this blog post useful.

SOTA on Google Cloud

Here is a high level architecture of the app using the SOTA models and tools on Google Cloud:

Antigravity 2.0

Google Antigravity was released in late 2025 and upgraded it to 2.0 earlier this year.

It is an autonomous AI developer platform designed for the "agent-first" era. Here are some highlights of its features:

An agent first approach to the development lifecycle
Accesses the latest models from Google and other companies
Executes complex, spec driven workflows with the user’s level of comfort in task delegation and privilege
Learns from user behavior and lets users use tools and skills to refine agent behavior
Supports MCP connections to many products including Google Cloud services.
Meets you on the surface of your choice in CLI, IDE, or in Agent Manager
Creates an agent team for you to get your development done
Is powered by the latest Gemini models

And you can get started with Antigravity today by downloading it, or using this Codelab as a great walkthrough.

Gemini Core & Flash Models

Gemini 3.1 Pro is great for multi-step tasks and deep thinking while Gemini 3.x Flash and Flash Lite models are great for speed and coding tasks. These models are used for coding in Antigravity 2.0.

Nano Banana Image Models

Nano Banana Pro, 2 and 2 Lite are state of the art image generation and editing models. Our app showcases some of the new features from the state-of-the-art AI models and deploy to Google Cloud.

Nano Banana Pro has features such as:

Search grounding and thinking
Enhanced realism great for rendering intricate fabric textures in fashion images.
Character and style consistency
Studio-quality camera and lighting controls and editing Image resolutions of 1K, 2K, 4K with a wide range of aspect ratios

A2UI Spec

A2UI is a specification that allows agents to define the interfaces that should be rendered to a user dynamically. In this project, we used A2UI to dynamically render chat information the user wanted to display to the agent. You can read more about the spec here and see some additional examples using A2UI with Flutter for rendering here.

Building the App

How the app is built

Many ‘getting started’ app experiences focus primarily on the application’s look and feel, commonly associated with the frontend of an application. While this is great for a quick idea or a ‘vibe app’, it often is not sufficient as soon as you add additional data or access requirements.

With the Antigravity agent and Gemini 3, we coded an ‘almost three-tier’ app. Three tier applications are common in the cloud web application space. They consist of:

A frontend service: this is typically the interface the user sees and is publicly exposed.
A backend service: this contains the connections to other applications, services, and gateways. A basic principle is to use this and limit the ability to use the services to only the frontend.
A database: this contains a layer to store user state, reference data the application needs, and other structural elements that may be required including configurations.

We used the Antigravity agent to code the frontend and backend, and used a simpler JSON file for our ‘database’. You can use Antigravity to help provision a local container to run a database such as PostgreSQL or provision a cloud database like CloudSQL. These databases give you more flexibility for the types of information you would store and the ability for easier reads and writes.

For an app framework, we used the Flutter framework. Flutter is built on top of the Dart programming language, and gives us the ability to deploy a common code base as a web app, a compiled binary for a target operating system, or even a mobile application.

And the app uses Gemini 3 Pro Image to help with modifying the mood of a specific option in the storefront.

Deploy the app

You can deploy the app to a service like Google Cloud Run, or run it locally.

Prerequisites:

A Gemini API key with access to the Gemini models
A Google Cloud project if you wish to deploy the app

Steps:

Clone the application repo: https://github.com/davenportjw/agentic-fashion
Read the readme to install Flutter and other required dependencies
Build the app
Then there are 2 options to deploy: to Google Cloud Run or run locally

Option 1: Deploy to Google Cloud Run

To deploy the full application to Google Cloud, ensure you are authenticated and have your project configured:

gcloud auth login
gcloud config set project <your_project_id>
./deploy.sh

Once deployment finishes, access the app using the Frontend Cloud Run URL printed in your terminal.

Option 2: Run Locally

If you prefer to run everything locally without deploying, clone the repository and run run_local.sh (this spins up the FastAPI backend, the ADK AI Stylist agent, and the Flutter web frontend).

Using a Gemini API Key:

./run_local.sh --GEMINI_API_KEY <your_api_key>

Or using your Google Cloud Project:

export GOOGLE_CLOUD_PROJECT=<your_project_id>
./run_local.sh

The script will automatically launch Chrome to display the frontend.

App Demo: UI Walkthrough

Once you follow the steps above to clone the code from our GitHub repo and have the app up and running, let’s take a look at what the app does.

At a high level, here are the features:

A store front with a list of fashion images
Select an image to enter the customization process.
The user can change an outfit’s style and color.
Save the outfit by downloading it.
Page through the edit history
Add to chopping cart
An agent the user can chat with to find dresses and customize them in an agentic (chat) interface.

Step by step let’s walk through the app UI demo.

First you are greeted with the store front, click on “Enter the store”,

Select one fashion dress, and click on “Make the design mine”,

Now we can choose a style (default to Classic) and or color to re-design the dress.
Let’s choose Avant-Garde and a Red color and “Generate with Gemini”, here we are using Nano Banana Pro to make this change.

You can download the image by pressing the download button, or page through your edits.

If you choose to use the chat option, you can ask the agent questions about different styles to find the one that you want, and also customize. This is powered by A2UI, where the agent gets to pick how it displays interfaces to you based on designs you set, and rendered by the front end UI.

What’s next?

We’ve built a complex, three-tier application with powerful SOTA AI integration in a fraction of the time, all thanks to Antigravity and Gemini. Start using Antigravity for your development. The future of coding is agentic. In addition, Antigravity 2.0 is great for building multi-agents agentic apps as an example mentioned in our blog above. Check out the SOTA image model, Nano Banana Pro, and see how easy it is to integrate cutting-edge generative AI into your app.

Project inspiration

Margaret Maynard-Reid - I work at the intersection of AI, art, and fashion design, incorporating AI into creative workflows. As a Google Developer Expert (GDE) in Cloud AI, I create tech content and contribute to open-source projects. Jason and I co-presented a short talk "Fashion with Antigravity" at DevFest Seattle 2025, on the day when Antigravity was launched. So we’ve decided to collaborate to demonstrate how to quickly build a production-grade fashion app using Antigravity, extending the short talk to a project with sample code, detailed blog post and YouTube videos (upcoming).

Jason Davenport - Jason is an Area Technical Lead at Google Cloud. He is the overall Tech Lead for information experience, developer relations, and frameworks and languages. He focuses on applied generative AI in coding and software development, including AI in the SDLC, integration with AI in business transformation, and forward looking trends in AI. His background is in data engineering, software engineering, and devops. Prior to his current role at Google, Jason has held various roles in technical leadership and management, including as a practice director for a regional consultancy.

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!