The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
🌟 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
Found my new favorite submission right here.
Thank You @Denis Turbin 🙌
This is highly impressive work. Thank you for sharing.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I built KAIROPI for the Google Stitch Challenge - a playful ramen lifestyle brand that brings together food, sauce, stickers, motion, and colorful city culture.
How I Used Google Stitch
I started by creating a mood board to define how I wanted the website to feel the colors, hero direction, sticker style, typography, food visuals, and overall brand energy.
Then I brought that direction into Google Stitch and built the website step by step, from the hero section to the manifesto, bowls, sauce section, and footer. I kept iterating inside Stitch, using prompts and edits to refine the layout, copy, visual consistency, and interactions.
One of the most useful parts was being able to make changes without starting the whole page again. Once I understood the workflow, Stitch made it much faster to keep the design consistent.
Stitch Features Used
- AI-assisted interface generation
- In-place design edits
- Iterative prompt-based refinement
- Motion and interactive UI direction
- Visual workflow from mood board
My Experience Using Stitch
At first, I was a little confused because it was my first time using Stitch, but I found my way around pretty quickly.
Once I understood how to work with it, the process became much smoother. I really liked how I could keep the design consistent and ask the AI to make edits instead of regenerating everything from scratch.
Overall, Stitch felt fast, flexible, and useful for turning a clear creative vision. If you already know the feeling or direction you want, it becomes much easier to iterate and build quickly.
This is really nice, especially the way you built a full brand world around food + culture + motion. Feels very cohesive.
My submission for this challenge
https://on.contra.com/pnfJBQ
Open to feedback.
on.contra.com
Introducing Voya: Revolutionize Your Travel Planning Experience
Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
Project Title
Stitch Playground
Created by:
Diana D. (UX/UI Designer)
Intro
I created "Stitch Playground" an interactive learning experience that helps Stitch users turn your rough interface ideas into clearer more useful prompts.
This project is designed for people who have an idea for an interface but are not sure how to get started in Stitch. Instead of simply telling users to “Write me better prompts,” Stitch Playground shows them how a vague request can become a stronger design brief by adding the right context: What the interface is, who it is for, how it should feel, what sections it needs, and what visual styles Stitch should follow.
The goal of my project was to make prompt writing feel easier, more approachable, and fun for Stitch users.
What I Built:
I built Stitch Playground in Stitch as a clean interactive experience that helps Stitch users get started easily.
What it includes:
A bold clean interactive landing page introducing Stitch Playground
Motion design in the hero and footer (new Stitch features)
A prompt-learning interactive component based on clearer design direction (Inspired by Vincent's Stitch prompting blog post)
A before-and-after comparison showing how vague prompts become stronger Stitch prompts
An interactive prompt builder for turning rough ideas into more complete prompt structures
A prompt deconstructor concept for understanding what makes a prompt more useful
A starter library of reusable prompt examples for dashboards, blogs, entertainment experiences, and portfolios
How I Used Stitch:
I used Stitch as a creative partner to explore, shape, and refine the experience and ideas from a rough concept into a polished finalized experience.
The starting idea was simple: create a guide that helps people prompt Stitch better. From there, I used the Stitch workflow to think through the page structure, content sections, visual style, and interactive learning moments. The project became both a prototype and a teaching tool: it demonstrates how stronger prompting can lead to clearer interface direction.
I focused on the same process the experience teaches: starting with a broad idea, then refining the design by adding clearer context, visual direction, specific sections, and more intentional interface details.
How This Connects to the Stitch Workflow:
Stitch Playground is built around the idea that better prompts create better starting points.
The experience encourages users to move beyond one-line requests like “make a landing page” and instead describe the product goal, audience, style, layout, content modules, and interaction patterns. This makes the design process feel less random and more collaborative.
I also wanted the project to reflect how Stitch can fit naturally into a real creative workflow: ideating, refining, comparing versions, and turning prompt structure into interface structure.
Stitch Features / Workflow Highlighted:
This project highlights Stitch as an (amazing) interface builder that helps users move from idea to interactive product faster. It also emphasizes prompt-based iteration, structured design direction, and using Stitch as a collaborative design partner.
I used new features presented on Stitch's X last week, such as motion and experimented with the Netify connection, Figma export and Google Studio import. I also added a restriction of 4 prompts per day to ensure my webpage does not get abused.
Feedback on Stitch:
Stitch is incredibly POWERFUL, not just for developers but for designers too. You can easily get started with a simple prompt in Stitch to create something truly amazing.
Why I Built It:
I wanted to make something helpful for the Stitch community. Thank you team. I am so happy to have found this product.
Start Playing in your Stitch Playground >
- Diana
Genius!
Mainframe is a conceptual AI studio — brand system + full multi-page website, built entirely in Stitch. Landing page with animated states, five inner pages (Labs, Studio, Services, Openings), and a complete DESIGN.md covering color, type, and layout. Monochromatic, editorial, cinematic. The kind of system that usually takes weeks — done in one session.
Started with brand tokens, used them as the foundation for every page. Iterated hover states and animations without leaving the design context. The generated DESIGN.md became the actual handoff doc.
Fastest I've gone from concept to a coherent multi-page system. Want: auto-propagating token updates across pages, finer motion controls, native multi-page navigation. Otherwise — best design-gen tool I've used since Figma got auto-layout.
Sahil, I recall seeing that same exact monitor-head concept from a large design studio last week (I forget the name).
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?