Google Stitch Just Got WAY Better (MCP + Gemini CLI + Agent Skills)!

All right, so Google Stitch just had probably the most insane week I've seen from a developer tool in a while. They dropped three major updates during developer week. And honestly, each one is kind of a big deal on its own. I want to walk you through what happened because if you're using AI coding assistance, and let's be real, you probably are. This changes a lot about how you can work with design and code. So, let's start with day two. So

the big announcement on day two was that Stitch MCP server. If you're not familiar with MCP, that's model context protocol. It's basically a standard way for AI agents to connect to external tools and services. Think of it like an API, but specifically designed for AI assistants to use. What Stitch did here is pretty clever. They made Stitch available as a remote MCP server. Most MCP servers you probably use are local. They read files on your computer or run scripts on your machine. Stitch is different because it lives in the cloud, which means any of your AI tools can connect to it and access your design system. The practical result, your coding assistant, whether that's cursor, anti-gravity, cloud code, whatever you're using, can now directly interact with your stitch projects. It can see what designs you have. It can pull code from those designs, and it can even generate new designs for you. Let me break down what this actually means in practice. First, visual awareness. Your AI agent can now understand your design system. It knows what projects you have, what screens exist in those projects, what colors you're using, what fonts, all of that. So, when you're working with your coding assistant, it has full context about your designs. Second, you can fetch code instantly. If you have a screen design in Stitch, your agent can just grab the HTML through React components, whatever format you need. No manual export and no copy paste. The agent retrieves it itself. And third, this one's really interesting. You can generate entirely new screens. You can tell your coding agent, create a checkout page for this coffee shop app, and it'll use Stitch to generate that design. Not just code, but the actual visual design, too. The reason this matters is it completely changes the workflow. Before you design something, export it, bring it into your code, fix all the spacing issues because nothing quite matches, update colors, all that tedious stuff. Now your agent just handles it. It knows your design system. It could generate consistent designs and it can give you production ready code. That's the foundation. That's what the MCP server enables. But then Day3 took this even further. Day three was the

Gemini CLI extension for Stitch. If you use the Gemini command line tool, there's now an official extension that brings Stitch into that workflow. The installation is dead simple. One command and you're done. But what's interesting isn't the installation is what this enables. So the extension comes with something called design prompt enhancement. This is where it gets really smart. Here's the difference. If you're using a regular AI and you say create a checkout page, it's going to give you a generic checkout page. random colors, random fonts, just a standard form. It has no context about your brand or your existing designs. With the Stitch extension in Gemini, it knows everything. It knows your existing designs, your color palette, your typography, your component patterns. So, when you ask for a checkout page, it creates one that actually matches your app. Same colors, same fonts, same style, everything's cohesive. This is huge for consistency. One of the biggest problems with AI generated designs is that they feel disconnected from your existing work. You have to spend time manually adjusting things to match. But when the AI has full context about your design system, it just generates stuff that already fits. And because it's in the CLI, your whole workflow can happen in the terminal. You don't need to switch between tools. You describe what you want. Gemini generates it using Stitch and you get the code right there. You can iterate, make changes, export components, all from the command line. For people who live in the terminal, this is perfect. No context switching, no opening different apps. Just describe what you need and it happens. But here's where it gets even better. Day four, introduce agent skills. Agent skills are

basically pre-built expert workflows that you can just inject into your AI agents. Instead of explaining to your agent how to do something complex, you just install a skill and it already knows. The way it works is through this add skill installer. One command and your agent suddenly has specialized knowledge about a specific task. Stitch launched this with two skills and both are really useful. The first one is called design MD. What this does is generate a design MD file from your stitch project. Essentially, it's a documentation for your entire design system. It analyzes your stitch project and creates a markdown file with all your colors, typography, spacing rules, component patterns, everything. This becomes your single source of truth for design decisions. The problem this solves is consistency across teams. When you have designers and developers working together, there's always questions. What's the exact shade of our primary color? What font weight do we use for headings? What's our spacing scale? With Design MD, all of this is documented automatically. Everyone on your team has the exact same reference, so there's no more guessing and no more inconsistencies. The second skill is React components. This one handles the full conversion from Stitch design to productionready React code. What makes this different from just asking an AI to convert HTML to React is that the skill knows all the best practices. It knows how to structure components properly, how to handle TypeScript, how to set up responsive breakpoints, and how to configure Tailwind. More importantly, it maintains design token consistency. Every color, every spacing value, every font, it all comes from your stitch design system. So, you're not getting generic converted code. You're getting productionready components that match your design. Pixel perfect. And here's amazing thing. These skills are open source. If you need a Vue version or Flutter or some custom workflow for your team, you can create it and submit it. The community can build these together. That's really the bigger version here. Making it easy to share and reuse workflows for turning design into code.

The two skills that I said are available right now, the design MD and React component skills could be downloaded from this GitHub repositories. So I'll include this GitHub repository in the comments. So make sure you guys look for it over there. And the installation is pretty simple. You can install any skill from this repository using the add skill in the CLI. So this will add your the specific skill. For example, if you wanted to add all the available skills, you would use the first command. If you want to install a specific skill, you would install this. So, make sure you look out for this in the comments. In the comments, I'll also include a link to this setup guide. And this setup guide helps you understand how to set up Stitch via the MCP. So, there are a couple of steps and the process is pretty simple. You just have to follow it properly. The first thing is installing the Google Cloud SDK. So, this you can do it standalone like this version over here using Homebrew as well. So, that's not that hard. Then you have the authentication. You got to do it two times. once as yourself the user and the second time as the application and then you just got to configure the project and permissions and then you will be generated two secrets and this will give you the access token you need and you need to save that as a env file. So, I'll all this I'm just going over quickly, but I'll include all these detailed instructions in the comments. But then the cool thing is that let's say if you're using cursor, this guide actually tells you like, okay, this is what you would do in cursor and anti-gravity VS Code. So, you have options and even cloud code, which is kind of funny since this is a Google project, but it also gives you the ability to use cloud code and use the cloud MCP command to add it. And then also the Gemini CLI one. If you're somebody that loves that CLI environment, you can also do it over there. And then once you have all of that set up, there's also a guide that I'll share with you guys as well. So it's going to obviously authenticate you and then it's going to ask you what coding agent you want to use. So you can use any coding agent as long as it supports HTTP MCP server. So make sure you have that available. And then you know if for example these are some examples if you want to prompt the stitch you can say something like show me my stitch project and list out each screen under each project and a screen ID. So you know this is an example of that. And you might see a response like this. For example, you have this project. You were created on this date and these were the screens. You have a home menu, full menu, a checkout. But you can also, you know, prompt for fun. Tell me what my stitch projects say about me as a developer. There's also one for code. So, these are some example prompts you can use. I'd love to see what you guys try out. Share your prompt in the comments and maybe we'll all try those out as well. So, these are only some of the updates from Google Stitch. Maybe you'll get more and maybe I'll follow it up in the next video. Make

sure to subscribe to our channel. We do real tests, not just headlines. Make sure you're also subscribed to The World of AI. And don't forget to check out our newsletter for deeper breakdowns you won't see on YouTube. And I'm growing my Twitter following, so make sure you follow me on Twitter as well. Hope you guys enjoyed today's video and I'll see you in the next