Vibe code an app from a prompt transcript

Hi everyone, I received a challenge email from Google. Now, what it reads is "Most 2 a.m. app ideas die in the design desert. We are challenging the old-school development cycle by proving that today, your ‘vibe’ is your code. Now, the goal is to go from simple sentences to a live production-ready app using Google Stitch and AI Studio.” Let's begin. First stop: Google Stitch. Here I have Google Stitch open on my browser.

So, what are we going to build today? How about designing a mobile app for eco-conscious travelers? I'm going to put it in the prompt box here. I want to build a mobile app for eco-conscious travelers. Once you have put it in, I have also mentioned the feature that I would like to have— the CO2 calculator. So, let's click on the button, and it will start building or designing with the Gemini model. So, as soon as it's taking up the instruction and going through the thinking process, within seconds it already has some nice suggestions for your design.

In here, you can see it's actually giving you different styling, colors, fonts, and so on. This isn't just a normal design tool, it's an active AI-native design canvas. You can see that it starts building on top of all the different designs and screens, without needing you to drag-and-drop all the buttons and so on. We are building it using the Gemini 3.0 Flash. While waiting for the design, I will also show you: if I have a napkin sketch, I can also upload it here and use it to interpret my bad drawing to become a high-fidelity layout.

Within minutes, it's already done. You can see it's actually building different pages without me mentioning it. It's suggesting the dashboard, the itinerary, the calculator, and then also the destination pages. This looks good, but how about if we want to preview it on a device like a mobile phone or tablet? I'm going to click on this preview button to generate the preview in prototype mode. We want to check and see if it is actually consistently applying all the theme layouts across different pages, without needing you to manually make the changes.

After reviewing the designs, I would like to make some changes. What I would like to show you is you can also speak and iterate with your voice. So, what I’ll do is I'll just go to this Start Live Mode button. Although it's in preview, it's working well. "Hey Stitch, make the sidebar collapsible." "On it, let me make that change for you." So, Stitch is able to capture the instruction and feedback, and work together to collaborate with you as a design team.

When you are ready with your design, and you are satisfied with all the edits and so on, select all and export it to AI Studio. With a single click, it will actually open up the Google AI Studio webpage, and at the same it's actually importing all your images, files, and documents into Google AI Studio. So you don't need to copy and paste or get frustrated about how you want to turn your design idea into a real application.

Now, it's done importing. Also at the same time, it's giving you a simple prompt to build the application. I'll just use the default instruction here, which is looking good for me. I'll click on the build button. What is running at the backend is that it's trying to already start implementing the code. We can take a look in the code section. If you are a developer by nature, this looks like an interface that you are familiar with— the languages and the syntax and so on.

You can already review what is being implemented and check if there's any architecture design that needs to be changed. If there's anything that you want to check, ask, or even make changes, you can actually work together with the AI. You can select any file and then start typing in the chat box. Communicate with AI what you want to change or what you want to cross-check with. So it’s very fast. It's actually creating the different main components of my application— the calculator, dashboard, the explore tab, and itinerary.

Voila, it's done now. You can see that it's also showing you a summary of all the steps that have been done. And in the preview, it's generating the preview of your application. And it's functional. You can also check the design or the application in different device modes. So this is a mobile application. Let's go to the tablet mode. Let's check on the CO2 emission calculator. Cool, it's already implementing the logic behind it.

Sometimes there are features that are not built with the logic behind it, so in this time, you will be able to not just preview, but at the same time do some testing on your application. So when you are done, let's try to publish and deploy the application to Google Cloud. So what I will do is I will click on the publish button. After selecting the Google project, you can actually easily deploy your application to your GCP.

Historically, the deployment is where the fun stops. You have to work on the tedious parts or get very technical on the Dockerfile, setting up the cloud security, the IAM roles, projects, CICD, and so on. But in here, with Google AI Studio, I just hit the publish button. And when it's done, I'll click on the live URL. This is your working application. And your application is live now. From a single prompt using Google Stitch to design the layout, to a functional AI-integrated application deployed to Google Cloud Run.

This is the future of development. We aren't just coding anymore, we are directing. We are using Stitch to design the soul of the application, and Google AI Studio to give it a brain, making it a workable application. If you have a Google account, you have this entire pipeline for free in Google Stitch and Google AI Studio. Have fun with web design and web building. Let's have fun together. Go build something, share your idea!