How to Vibe Code an App From a Drawing

**TL;DR:** A Google demo shows how to turn a hand-drawn sketch into a working “vibe-coded” retro virtual closet that checks the weather and lets you virtually try on outfits—built in minutes with Google AI Studio and Nano Banana. ## From Doodle to Deployed App The entire build happens inside [Google AI Studio](https://aistudio.google.com/apps), the company’s “vibe coding” environment that turns plain-English prompts into runnable web apps. No local setup, no git repo—just open the browser and start talking to the model. ### Step 1: Capture the Vision - Sketch the interface on paper: a retro-styled closet grid, a mini weather card, and a style-tips panel. - Snap a photo of the sketch. - Grab any reference image that nails the desired aesthetic (Pinterest screenshot, mood-board photo—anything that “feels” right). ### Step 2: One-Prompt Skeleton Paste this into AI Studio: > “Build me a retro virtual-closet app called My Closet with virtual try-on. I’ve attached a design-inspiration image and a layout sketch. Include a style-tips board and outfit suggestions based on real-time weather at my location.” Hit enter. The model returns a fully styled page: color palette, typography, placeholder garments, weather widget, and tip board—ready for interaction. ### Step 3: Feed Real Garments - Create a folder on your desktop and drop in photos of every shirt, jacket, and pair of pants you own. - In AI Studio, switch to code view, drag the folder into the file pane. - Type: > “Replace all placeholder clothing images with the photos in this folder.” The app auto-labels each item (“striped tee”, “denim jacket”, “wool coat”) and sorts them into a scrollable wardrobe grid. ### Step 4: Add Weather-Aware Logic Prompt: > “Use my location and live weather data to auto-scroll the closet, analyze garment thickness, and recommend one feasible outfit for today.” The app now fetches New York’s current conditions (rain, 58 °F), filters for medium-weight layers, and highlights a suggested combo. ### Step 5: Virtual Try-On with Nano Banana New idea: > “Add an upload/photo button so I can pick an outfit and see it composited onto a picture of me—like looking in a mirror.” Behind the scenes the prompt calls Google’s Nano Banana image-editing model. Clicking “Try On” composites the selected garment onto the uploaded selfie in under two seconds. ## Iterate by Talking Every tweak is conversational: - “Make the background peach instead of mint.” - “Sort clothes by warmest first when it’s below 50 °F.” - “Show a confidence percentage for each recommendation.” The loop is: describe → build → test → refine—no traditional coding required. ## Explore the App Gallery Need inspiration? AI Studio ships with a public gallery of vibe-coded demos—chatbots, trip planners, recipe generators, etc. The retro-closet project is now live inside the gallery; anyone can fork it and push the idea further. ## Ship It When you’re happy, click “Deploy” to get a shareable URL or export the code to host elsewhere. The entire process—from doodle to live site—takes “only a few minutes.” **Source:** [How to Vibe Code an App From a Drawing – Google](https://www.youtube.com/watch?v=b1Pvt072wKQ)