Vibe Design First THEN Build Apps 🎨 Full Google Stitch Tutorial + MCP Agentic AI
This tutorial demonstrates Google Stitch's vibe design approach, where users create visual designs first before building apps with AI. The presenter shows how to design an interactive NASA Artemis dashboard prototype and export it to coding tools like Google AI Studio and MCP-connected agents.
Summary
The video introduces the concept of 'vibe designing' as a prerequisite to AI coding, addressing the common problem where AI builds something different from what users envision. The presenter argues that most coding failures stem from design problems rather than technical issues, and demonstrates Google Stitch as a solution that helps visualize ideas before building. The tutorial walks through creating a comprehensive NASA Artemis spacecraft tracking dashboard with multiple screens including mission overview, orbital trajectory, space weather, and crew information. Stitch provides an infinite canvas where users can design multiple app screens, create interactive prototypes, and iterate on designs using various AI models (Gemini Flash, Pro, and specialized modes). The tool generates a crucial design.md file that serves as a blueprint containing the entire design system, colors, typography, and component definitions. This markdown file acts as an architectural blueprint that AI coding agents can read to understand and build apps in the specified style. The presenter demonstrates two export methods: a one-way export to Google AI Studio for immediate app building, and a bidirectional MCP (Model Context Protocol) connection to tools like Antigravity that allows ongoing synchronization between design changes and code updates. The MCP approach enables users to make changes in Stitch and pull those updates into their coding environment, creating a seamless design-to-development workflow.
About this episode
Is Vibe Design the new first step in vibe coding? 🤔 In today’s video, I explore the new infinite canvas in Google Stitch, explain how you can bring your idea to visual life with AI, and then use that vision as a blueprint for your coding tool so your agentic AI actually builds what you imagined ✨ Google Stitch just got a major overhaul that helps you both build and test app designs: 1) Infinite canvas 2) Auto-imagine new app pages 3) Interactive prototyping 4) Voice to design 5) DESIGN.md The DESIGN.md file is a portable design system that you can give to any other coding tool. It's a design blueprint, something that ensures a single source of style across your different tools & apps. These features make it easier than ever to turn your idea into a visual so you can design the best system possible BEFORE you ever start coding. Design first. Code second. One you have your app design finalized, you can one-click export to other tools including: 1) Google AI Studio 2) Figma 3) Jules 4) Zip & copy 5) Model context protocol The MCP option even lets you create a live connection between Stitch and your AI coding tools like Claude Code, Google Antigravity, Cursor, and more. That way, if inspiration strikes, you can vibe design more features for your app and use agentic AI via MCP to pick up the updates and bring them into you real app. Vibe coding apps just got a lot easier with vibe design, and I’m excited to see where it goes next! Here is my vibe coding resource repository: https://github.com/wanderloots-tutorials/vibe-coding If you want to dive deeper into Google AI studio or app building in general, check out this Google AI studio playlist here: https://www.youtube.com/playlist?list=PLWhMzDKA7vJ6G6-9bnO8_jeW-7aPemv-H To learn more about Google Antigravity, check out this playlist here: https://www.youtube.com/playlist?list=PLWhMzDKA7vJ7SHSDLz_7wtzaGePSryGzI I hope you enjoy! ✨ P.S. I greatly appreciate any feedback, please let me know what you think 😊 Join My Membership: https://www.youtube.com/channel/UCFiU1vIpPD3lQltke_18m3A/join 💌 Sign up for my [free newsletter: Recalibrating](https://paragraph.xyz/@wanderloots.eth?referrer=wanderloots.eth) 🧠 Join my [Hypersub Exclusive Membership ] (coming soon) 🏡 Wander my Digital Garden https://wanderloots.xyz 📰 Try Ground News For Research: 40% discount https://check.ground.news/wanderloots Timestamps: 00:00 Intro To Vibe Design 00:52 Why We Need Vibe Design 01:41 Getting Started With Google Stitch 02:50 Step 1: The Vibe Design Prompt 03:59 Step 2: The Initial Generation 05:05 Step 3: Add & Modify Design Features 05:58 Step 4: Interactive Prototypes 07:04 Editing The Prototype 08:29 Adding & Editing Screens (Prototype) 09:38 Connecting Buttons & Screens 10:20 Design.md - Portable Design System 11:11 Reviewing The Design System 11:51 Step 5: Exporting The Design 13:41 Export Example 1: Google AI Studio 15:16 Export Example 1b: Multi-Screen Google AI Studio 17:01 Export Example 2: MCP Connection 18:32 Using MCP To Bring Design.md Into Coding Environment 19:22 Example Workflow: Stitch + Google AI Studio + Antigravity 20:11 Next Steps: Design Then Build LINKS (MY WORLD) 🧭 [Recalibrating Newsletter Home](https://paragraph.xyz/@wanderloots.eth?referrer=wanderloots.eth) 🏔️To start reading from the beginning: [Recalibrating Newsletter Entry 1: What Recalibrating Means To Me](https://wanderloots.substack.com/p/1-what-recalibrating-means-to-me) 🌍 My [Website](https://wanderloots.com/) 📸 My [Print Shop](https://wanderloots.darkroom.com/) ✨ SOCIALS 🟣 [Farcaster](https://warpcast.com/wanderloots.eth) 📸 [Instagram](https://www.instagram.com/_wanderloots/) 📰 [Flipboard](https://flipboard.com/@_wanderloots) 📍 [Pinterest](https://www.pinterest.ca/wanderloots/) 🤖 [Reddit](https://www.reddit.com/user/_wanderloots) MY FAVOURITE TOOLS 😴 🤯 The [Waking Up App](https://dynamic.wakingup.com/guestpass/SC4914439) (use this link for a 30 day free trial) 📝 [Obsidian](https://obsidian.md/) (decentralized note-taking) 📹 [Adobe Suite](https://prf.hn/l/lQ9DwpA) (general creativity) EQUIPMENT USED 6. Camera [Sony A7iii](https://amzn.to/3seSHv6) 7. Lens [Sony F2 28 mm](https://amzn.to/3TiWCT2) 8. Tripod [K&F Concept](https://amzn.to/3soCKCP) 9. Main Lighting Neewer 660 PRO RGB: https://amzn.to/3CEcU2V
Key Insights
- Most AI coding failures are actually design problems rather than technical problems, occurring because people jump into coding with only partially visualized and vague ideas
- Stitch creates a portable AI-readable design.md file that contains the entire design system including colors, typography, spacing rules, and component definitions, serving as an architectural blueprint for AI coding agents
- Google AI Studio provides only a one-way export where changes made in Stitch cannot be pushed again after initial export, while MCP connections enable bidirectional communication between design and coding tools
- Complex multi-page apps can overload Google AI Studio during export, requiring users to export pages individually rather than all screens simultaneously for better results
- MCP integration allows AI agents to access external tools and create a two-way system where design changes in Stitch can be pulled into coding environments and vice versa
Topics
Transcript
[0:00] it's going to take all of these screens, and it's going to stitch them together into an interactive preview. I can click through everything, and it actually builds the app in a way that I can see and move through. If you've ever looked at what your AI built and you thought, "That's not what I meant." you didn't have a coding problem, you had a design problem. Vibe coding is when you build with AI, but vibe designing is what you should do first. And that one change will help AI build what you actually imagine. Hi, my name is Callum, also known as Water Loupe, and welcome to today's video on vibe designing in Google Stitch. Today,…
Full transcript available for MurmurCast members
Sign Up to AccessMore from Wanderloots
The Future Of AI? 🤯 Hermes Agent Intro & Benefits #ai #agenticai #hermes
Hermes is an AI agent that improves over time by learning from user workflows, unlike most static AI tools. It automatically identifies recurring patterns, creates reusable skills, and applies them to similar future tasks without explicit training.
One Agent, Many Devices? 🧠 Full Hermes Agentic AI + Tailscale Workflow
This tutorial demonstrates how to access a single Hermes AI agent from multiple devices using Tailscale VPN and a remote dashboard setup, enabling unified session history, centralized file access, and continuous memory across laptop and desktop without fragmentation.
Safer Agentic AI? 🧠 Full Docker + Hermes Agent Tutorial (Desktop)
This tutorial demonstrates how to safely run AI agents like Hermes inside Docker containers to sandbox code execution and prevent unauthorized access to sensitive files on your computer. By configuring Docker volumes and mounting specific folders, users can give agents access to only the files they choose while keeping code execution isolated from the main system.
Full Hermes Agent Tutorial (Desktop) 🧠 A Useful Agentic AI Workflow
This tutorial demonstrates how to set up and use Hermes, an open-source AI agent by Nous Research that learns and evolves over time through persistent memory and automated skill generation. The video covers local model setup with Ollama, cloud model integration with OpenAI, messaging gateway configuration via Telegram, and creating a self-improving daily AI briefing automation.
100% Free & Private AI 🦙 Build & Run Local AI Agents #ai #agenticai #ollama #localllm
The video introduces local AI models as a privacy-preserving alternative to cloud-based AI services. By running AI assistants locally on your computer, users can maintain complete control over their data while leveraging AI capabilities for personal tasks like analyzing notes and answering work-related questions.