🌟 I spent the last few days building Orbit with Google Stitch. 🧵 It’s a dashboard for tracking AI agents in production, every model, every token, every cost, live. I used Google Stitch to build the full design prototype first, because I usually lose a lot of time while coding by figuring out features, structure, flows, and screen connections at the same time. That made Stitch a good starting point for me, because it let me lock the structure and flow before bringing in real data.

🤔 The problem: Most teams do not know what their AI agents are doing in production until something breaks. Tokens are gone, the budget is over, and nobody saw it coming. 💫 Orbit is a live dashboard for your agent fleet. You can track spend, token usage, and status across every model in one place, catch budget overruns as they happen, manage incidents with full timelines, and add new agents through a simple setup that gives you an SDK snippet to drop into your code.

To get the most out of Stitch, I started with my own design.md as a reference, based on a few design inspirations I liked. Here’s how I used Stitch in the workflow: 1️⃣ Where it started: After deciding what I wanted to build, the first thing I did was collect a few reference designs for the visual style and color direction. Once I had that, I attached my design.md to Stitch and wrote a detailed prompt explaining what the app does. I asked it to generate the landing page first. Stitch started streaming the landing page directly onto the canvas. Once the first draft was ready, I moved into smaller edits.

2️⃣ Inline edits and motion: Once the landing page was on the canvas, I used in-place edits to add motion to the hero section. I clicked directly on the hero section and described the effect I wanted, like a shooting star moving from the top right to the bottom left. For the hero background, I also prompted Stitch with the kind of image I wanted, and it applied it without leaving the canvas. This saved me a lot of time because normally I would be switching between different tools just to generate assets and test motion ideas.

3️⃣ Iterating across screens: After the landing page and hero section were done, I generated the remaining screens: dashboard, agents list, agent detail, add agent flow, live watch, incidents, profile, and settings. Every time I needed a change, I used in-place edits. The streaming generation made the process much easier because I was interacting with a real interface rather than a static mockup. I could see quickly what was working and what was not.

4️⃣ Prototype validation: Once all the screens were drafted, I used Stitch’s prototype feature to walk through the full product flow, how the screens connect, how the navigation feels, and whether the hierarchy made sense from start to finish. It replaced the usual separate Figma prototype step and gave me a clearer idea of how the app should work with real data.

5️⃣ MCP sync: After prototyping, I used Stitch’s export option and selected MCP to connect Stitch to my IDE. I created the API key, added the MCP setup in my IDE, and used my existing Next.js project as the base. From there, I prompted the agent to pull the designs from the Stitch project and build the UI using those screens with shadcn/ui components. The result came out really well. It gave me a strong starting point, set up the routes cleanly, and matched the product flow from the prototype. After that, I added the remaining logic and the live data layer, pushed the updated code, and deployed it to Netlify.

🧠 My thoughts The biggest problem for me before this was how much time went into designing first, then switching between different tools for motion, animation, and code handoff, and then again translating all of that into code. Stitch removed a lot of that back and forth. It helped me move faster from idea to prototype, and then from prototype to code.

One thing I liked a lot was how flexible the export options were. You can copy to the clipboard, convert to a React app, preview things live, deploy directly, or sync with your codebase through MCP. The MCP part was especially useful because it made the handoff into my Next.js setup much smoother.

I also liked that when you give Stitch a clear design direction and explain how the product should work, it does a good job keeping the screens connected in a way that makes sense.

So yes, Stitch really did shorten the gap between idea and live app for me.

😊One thing I’d still love to see next in Google Stitch:👇

👉 A way to save motion patterns, so once I describe an interaction style, I can reuse it across sections without rewriting it every time.

Overall, Stitch did not feel like a tool I had to fight with. It felt more like a working canvas that helped me get the product into shape faster. Orbit went from an idea to a live app in a single build session because of that.

⭐ You can test Orbit here: heyorbit.netlify.app

This is highly impressive work. Thank you for sharing.

For this challenge I built a mobile app called Field Signal, a field intelligence prototype for commercial real estate site visits.

It helps an investor or broker capture signals like visibility, access, tenant condition, and risk, then turns those observations into a live deal pulse and structured field memo.

Live app: https://field-signal-452420245800.us-east1.run.app Stitch project: https://stitch.withgoogle.com/projects/15525370502730722305

How I used Stitch: I started in Google Stitch with streaming generation, used in place edits to refine the product flow and motion, and used a DESIGN.md file I prepared to keep the visual system tight across screens before pushing it into a live prototype through Google AI Studio.

Feedback: Stitch felt strongest as an iterative design partner. Streaming and in-place edits made it fast to move from concept to something that actually felt alive and interactive. Super useful & excited to see how this tool integrates with the creative process going forward!

Wow, this is so nice!