Google Stitch + Claude Code = Insane App Design

Google just dropped one of the biggest changes in the AI design world with this latest release. And I know this might

latest release. And I know this might seem like hype, but what they've done with the latest version of Google Stitch actually marks a significant change in the way that we design with AI. It's not

just about a new tool, it's about a new paradigm for maintaining your design styles in code. So, in this video, we're going to break down how to create incredible designs in Stitch. How to

create a design system in Google Stitch, which is called design.md, and then how to use design.md with clawed code to update the UI design in any app or website project. If you don't know me,

website project. If you don't know me, my name is Chris, and for the last 15 years, I've been designing apps and advising startups on product and design.

And if you are building apps and you're interested in designing them so that they don't look like AI slop, I've got a community helping people do just that with over 250 other people building and designing apps and actually making money from them. You can find a link in the

from them. You can find a link in the description down below. Otherwise, let's

jump straight into Google Stitch and see what it can do. So, this is the announcement from Google Stitch and there is a ton of stuff that they have introduced with this latest release of Google Stitch. But the main one that I

Google Stitch. But the main one that I want to focus on in this video is the design systems and design.md paradigm

because this really changes how designers are going to document their design styles and then bring that into code with tools like claude code. And I

want to show you exactly how you can use Stitch and Claude code together. And

this is one of the questions I get asked over and over again in my community. How

do I design apps that actually look good and not like AI slop? And how do I maintain those styles throughout the rest of my app as I continue to build it with AI? So, this is basically solving

with AI? So, this is basically solving that problem. And if you've seen a

that problem. And if you've seen a previous video I did on how to design with cursor, I basically recommend that you create a design system file as a way of documenting all of your design styles

and then referencing that throughout your codebase using tools like claude code and cursor. So, maybe they saw that video and that was a bit of inspiration for this. They probably didn't, but

for this. They probably didn't, but either way, it's a huge need in the AI design space and design. MD really

represents a step change in the way that we approach design creating design systems and applying them to our applications using AI coding tools. And

so let's rough let's quickly break down the features that they've launched here.

So basically an AI native canvas. So

this is a spatial canvas accepts images code and PRDs as creative seeds which is great because now we can start from a PRD of our app and that's what we're going to do here. We're going to design the screens for our app as well is a

smarter design agent which is basically better at creating designs. So, an agent that's just better at creating designs, the voice kind of interaction, which is something that is being added to all of these AI agent tools where I can just

talk basically to the app and it will transcribe that into the prompt that I'm sending. Instant prototype, which means

sending. Instant prototype, which means I can click to preview my app and view a prototype. I think this works way better

prototype. I think this works way better than a lot of vibe coding tools like Lovable or Bolt for actually building prototypes and kind of walking through them. It's more of a Figma style

them. It's more of a Figma style interaction where you kind of view your prototype and then you can share that with people. And then the final one

with people. And then the final one here, the big one, design systems, design MD. So you can see as you're

design MD. So you can see as you're building your app, it's creating a design system for you in Google Stitch.

And then using the Google Stitch MCP and the Google Stitch skills, you can use that in clawed code to maintain consistent design styles throughout your

entire application or website. And this

one is huge. So, with that all covered, let's actually get into Stitch and start building something. So, for the purposes

building something. So, for the purposes of this video, I've been building an app for someone, which is basically an app for a copywriting agency that's going to help them create different social

content for their clients, referencing a bunch of different files like brand tone of voice and social formats for that brand, as well as this copywriting agency's own kind of frameworks for

writing copy that actually works. But at

the moment, as you can see here in this demo, um it looks pretty vibecoded. It

looks pretty basic. Like it's not the styling is not great. All I've done is go through and build the basic version of this with no real styling applied.

So, what I'm going to do here is I'm going to take screenshots of this app.

So, we've got our two screenshots of the two pages in this app. And then I'm basically going to use these screenshots to create designs in Stitch to kind of improve the design style of this. And

the goal with this is to show you how you can create incredible designs just from screenshots using Google Stitch or from a PRD. Once we've done that, we're going to generate our design system and we're going to tweak the design of it

maybe. And then after that, we're going

maybe. And then after that, we're going to pull that design style into this actual app using the Google Stitch MCP to read the design. MD file and then apply that design to the application

here. So, let's go over to Google

here. So, let's go over to Google Stitch. I'm going to drop my images in

Stitch. I'm going to drop my images in here. So, now let's now we've dropped

here. So, now let's now we've dropped our screenshots in here. Let's put our prompt into Google Stitch. I want to redesign these two screens for this web app. The purpose of this web app is to

app. The purpose of this web app is to help a c a copyrightiting agency to write content for their clients using AI. The app shows a dashboard and a

AI. The app shows a dashboard and a library screen. So, let's redesign those

library screen. So, let's redesign those two screens. I'd like to redesign this

two screens. I'd like to redesign this in a more professional, minimal, and dark mode user interface style. And I

also want to change the fonts that we're using for this as well. So, can you recommend me some more professional looking serif fonts for the headings and create some versions and also a sand

serif font that is readable for the body copy here. So, that is my prompt with

copy here. So, that is my prompt with these screenshots. Let's send these off.

these screenshots. Let's send these off.

Now, you can choose a bunch of other options here as well. So, we can attach a screenshot sketch or visual inspiration. You can click to use a

inspiration. You can click to use a design system and it has some preset design systems here. We're not going to use those for the purposes of this. So,

let's send this to Google Stitch. And so

Google Stitch has imported these um these designs onto the canvas here. I

also just really love this this canvas background with the mouse interaction. I

think that's great. Maybe it's not super performant, but I was just doing this for ages. So now you can see that Google

for ages. So now you can see that Google Stitch has created these two updated designs on the canvas here. Now these

are looking a lot better. Kind of

following my instructions, they already look way better than the generic designs that we had over here. just going to this like makes a huge amount of difference. Now, the problem is that

difference. Now, the problem is that these are mobile designs right now. So,

we're going to create some desktop designs here for these as well. Let's

create the desktop versions of the redesigned library and dashboard screens. So, I'm going to send that to

screens. So, I'm going to send that to the Google Stitch agent. And we can see our agent chats down in the bottom left here. This is our agent log. But the

here. This is our agent log. But the

interesting thing about Google Stitch, and this is where it starts to get really, really powerful is the design system part of this. So you can see down at the bottom here, it's created this Obsidian Script design system. And this

is for this app that we're building here. Now, if I go into design systems

here. Now, if I go into design systems on the right hand menu, you can see Obsidian Script is here. And it's got like an overview of what the styles for this look like. If I go into this, I can

see all of the styles in the design system here. But even better than that,

system here. But even better than that, I can go into design. RMD and this is a markdown file for my design system documentation and it has everything that

you need to apply this design style in your app project. So we can use this design.md file with this information to

design.md file with this information to redesign our app following the same design language that we're using here.

And we can also use the Google Stitch MCP to be able to access these actual designs and the code for these designs so that we can basically recreate this with claude code in our AI coding

environment. So you see we've got

environment. So you see we've got typography broken down. So it's got display and headline fonts, label and title and body fonts. It is using inter.

I'm going to change that because everything uses in elevation and depth components here. Dos and don'ts. So

components here. Dos and don'ts. So

rules for the styling as well which is super interesting. So now we've got our

super interesting. So now we've got our design system and our design. There's a

few changes that we're going to make here. First, I'm going to generate the

here. First, I'm going to generate the the desktop designs for these. And then

after that, I'm going to make a few styling changes to maybe the colors or to the layout to get this looking exactly how I want. And then once I've done that, I'm going to pull that into the app project using Claude Code and

the Google Stitch MCP to redesign our app following this design language. And

as it's working here, you can see that it's got the design system reference file here. So if I go over to this,

file here. So if I go over to this, let's zoom in on this. You can see this is the visual kind of reference for our design system here. And not only has it kind of interpreted the original

designs, it's also created a very kind of complimentary color palette here with this tertiary color which we didn't have in the original designs, but also a secondary color which is like a less

saturated version of the primary color and works together. Something that you would pick as a designer, but if you were just a non-designer, you probably wouldn't pick this kind of set. And

we've got the scales of all of these colors here as well, which you can find out the information about examples about how the components look here. And these

are being applied to our designs on the canvas here. Now, Stitch seems to be

canvas here. Now, Stitch seems to be overlaying these frames, which is interesting. So, we're going to wait for

interesting. So, we're going to wait for it to finish, and then I'll move these frames apart. But this is looking so

frames apart. But this is looking so much better than the app that we had previously. And this is all just from

previously. And this is all just from one prompt, giving it a bit of design direction, giving it the screenshots, and redesigning our existing application without even using any design references. And if you wanted to take

references. And if you wanted to take this to the next level as well, you could use design references from Dribble or Mobin and pull those into this to kind of redesign your app as well. But I

feel like this is probably one of the fastest ways of going from an existing kind of vibecoded app that you have that kind of looks a bit AI sloppy um into

something that actually has like a professional look and feel to it. And

this is pretty crazy so far. So what I'm going to do here now that we've got this library and dashboard page is I'm just going to prompt a couple of changes to update our design system and update the

styles for this app here. I'm going to say let's change the primary colors here from purple to something that's a bit more neutral and warm and friendlier and

feels a bit more like editorial. And can

you also pick a complimentary tertiary color to go with that as well? Make sure

you update the design system and the desktop designs that we have for this app here. And we're going to send that

app here. And we're going to send that off to Google Stitch. Get it to update this design system and then get it up to update the designs for these screens here as well. All right. So, Google

Stitch has now updated our um basically called another it's created another design system here called Obsidian Script Editorial and this is looking way better. So, we've removed that kind of

better. So, we've removed that kind of purple element of the of the designs and we've got much better designs here for these pages. Now, it has called the app

these pages. Now, it has called the app Obsidian Script which I don't think it needs to do but I really like the layouts that are applied here. There are

some elements here that I don't want to I want to remove. So we can remove like this quote section here and we can remove this recent drafts here and we can remove like some of the but overall

I like the direction of this a lot. So I

want to now apply this design to my app using claw code. So how do I actually do that? So first there are a couple of

that? So first there are a couple of ways that we can do that. We can either do this by just going into the design here and we can get this Obsidian script editorial design system. We can click

through to that. Go to design.mmd. Copy

that to our clipboard. And then go over to our wherever you're building your app here. Go to the files. I'm just going to

here. Go to the files. I'm just going to create a new file here and call this design.md. And in this designd file, I'm

design.md. And in this designd file, I'm going to paste all of this design system information here. And then save that. So

information here. And then save that. So

that design.md file is now saved in our project here. Now that I've got that, we

project here. Now that I've got that, we can go into claude code. So I'm just going to launch a new terminal here. And

if you're interested in what app I'm using to build my apps with here, it's called Orchestrate and it's just an app that I've built myself to match my way of working and you can sign up to the weight list over at orchestrate.build if

you're interested. Um, now we've got Claude Code up and running. I'm going to just ask it to follow the sty redesign the app following the styles as documented in design. I'm going to

switch it into plan mode for this. So,

first we're going to see like how well does Claude Code follow design without using the Google Stitch MCP. Create a

plan to redesign the the entire UI for this app using the exact instructions from design.md.

from design.md.

We're going to send this off to claude code. And now we're going to get Claude

code. And now we're going to get Claude Code to create a plan to redesign our app following design.md. Whilst we're

doing that, I'm going to start a new terminal here, and I'm going to show you how to set up the Google Stitch MCP. So,

we're going to run Claude Code here. And

if you go to this documentation on the Google Stitch website, if you just search for Google Stitch MCP setup, you're going to get a link to this exact page. And if you scroll all the way down

page. And if you scroll all the way down here, you're going to get an install command for basically any platform that you're using. So, you can do it in

you're using. So, you can do it in cursor anti-gravity, VS Code. We've got

our claw code instruction here. We're

also going to have to get an API key.

So, we're going to need to go into Google Stitch, go into settings, and then scroll to the API section and create an API key. So, let's go and create our API key in Google Stitch. So,

we just go to Stitch settings here. Go

down to API key and click create key.

And now we have our API key here, which we can copy to our clipboard. Now that

we've done that, I'm going to go back to the MCP setup documents. I'm going to paste this command into claude code to set up the Google Stitch MCP. We also

need to add in our our Google API key in here. So, we're going to copy and paste

here. So, we're going to copy and paste that API key in. Now, once we've got clawed code up and running, let's go back to orchestrate. I'm going to paste this command. And then, we're going to

this command. And then, we're going to go back here and replace this with our API key. So, let's go and copy our API

API key. So, let's go and copy our API key. Let's copy that. We're going to go

key. Let's copy that. We're going to go back to Claude Code. We're going to paste this in here. And then I'm just going to submit that to Claude Code.

Now, really, you just need a fresh terminal to do this. or what you can just send it to claude code like this and it's going to be able to do it for us. So this is actually a terminal

us. So this is actually a terminal command and claude code is just going to set this up for us. I know it's not 100% right to use the terminal command like in claude code actually you can just run it straight in the terminal but now the

stitch MCP server has been added to your user level cla claude code config and if you start a new session of claude code so once you've added the MCP server you need to do a you need you'll need to start a new claude code session you can

see that I've got stitch connected here and I can use the stitch MCP claude code so claw code has now created a plan to basically update the app based on this

designd file It's got the digital Italia UA UI redesign here and we've removed a bunch of colors. We've changed a bunch of colors. We've got a few phases for

of colors. We've got a few phases for this design. So like phase three is the

this design. So like phase three is the sidebar layout. Phase four is the

sidebar layout. Phase four is the feature components. Phase phase five is

feature components. Phase phase five is page level typography. So I would say to read through this in a bit more detail, but I'm just going to trust Claude code on this one. And we're just going to say yes, clear context and auto accept

edits. And then see how well Claude Code

edits. And then see how well Claude Code does interpreting this design file. And

what I'm trying to do here is basically to see how comprehensive is this design.

MD file and how well is it how good is it at replicating the design that you actually have in Stitch by by just using that markdown reference file. So let's

let Claw Code run on this and then we're going to come back once it's finished the redesign. All right. So, Claw Code

the redesign. All right. So, Claw Code has finished redesigning our app, going through these six phases based on the designd file that we imported from Google Stitch, which is this um design

system strategy that we just copied over from Google Stitch. I'm going to go over to the browser now and see what it looks like. So, let's go over here, refresh

like. So, let's go over here, refresh this app, and see what we've got. So,

this is definitely like a lot better, but it's not following the same style.

It's got like some of the it's got like the right fonts in here, but they're not done in the exact right way. And this is compared to the designs that we have in Google Stitch here. So, what I'm going

to do now is we're just gonna say we're just going to use the Google Stitch MCP to actually copy the layout of this page um specifically in this kind of format

here. So, let's go back over to Claude

here. So, let's go back over to Claude Code. So, I'm just going to do for/clear

Code. So, I'm just going to do for/clear in Claude Code here to start a new session. and we're going to say, let's

session. and we're going to say, let's update the client dashboard screen to match the layout of the editorial dashboard desktop screen in Google

Stitch using the Stitch MCP. We're going

to send that over to Claude Code and that is going to use the Stitch MCP to get the design from the frame on Google Stitch. So, we're going to say yes to

Stitch. So, we're going to say yes to list our projects on Google Stitch. This

is going to find the right project here and then it's going to fetch the details of this screen. It's looking at the HTML code and a screenshot to understand this design. So, what it's just doing is it's

design. So, what it's just doing is it's looking at the source code from what Google Stitch has pulled together and Google Stitch has built all of these designs in HTML and CSS. So, Claude Code

when it reads this design can understand the layout and how it kind of comes together. So, let's go back to Claude

together. So, let's go back to Claude Code here and see what it's going to do.

One thing that it's also doing here as well is it's seeing that there is a recent draft section on this design and it's actually figuring out how to do this with the database to actually pull

any recent drafts through into this section and build that feature for us.

So you want to be careful between the features that you have in Google Stitch and what you're actually building in Claude Code or any AI coding tool to make sure that what you're going to get in your app is going to match what

you've got in Google Stitch. And so make sure if you've got any extra features that you haven't built in Google Stitch that you make sure to explicitly not include those or update the designs in Google Stitch to match your app's

features. It's just something to be

features. It's just something to be aware of here. So Claude Code has updated our our app based on the design in Google Stitch. So for reference, let's have a look at what we've got in Google Stitch here. So this is the

screen that we've got in Google Stitch.

I'm going to go back to our app. So

let's go back to our app in the browser and have a look what we've got. So, this

is actually pretty good. This has

expanded it because this is on a wider screen. One thing that I'm noticing here

screen. One thing that I'm noticing here is I don't think it's pulled the correct font through here. And so, it's using a serif font, but it's not using the same fonts that we outlined in um in Google

Stitch. And the styling, it doesn't

Stitch. And the styling, it doesn't match 100% and the colors are not matching 100% here. But I do think this is giving us a great foundation to work from. So, we can go into any of these

from. So, we can go into any of these content types here into the blog article. Uh, we've got our new form

article. Uh, we've got our new form here, which is looking all right. We

still want to make some design changes to this, but using this design file to kind of document our design system and use this to kind of guide our AI coding

tool into actually designing an app that looks like the one that we're designing in Google Stitch. Still feels like a super powerful workflow here. And it's

even it's done the layouts of these pretty nicely. And it's got these little

pretty nicely. And it's got these little kind of hover effects here as well.

They'll work really well that is added in that we didn't have in Google Stitch.

And from this, we can go into the library page here and redesign that library page based on the way that the library page looks in Google Stitch as well. So that is how you can use Google

well. So that is how you can use Google Stitch to create design systems that you can replicate in code, apply to your existing app projects so that you can

take your apps from AI slot to apps that actually look like real products that people would want to use. And yes,

design.md is not perfect, but it's giving us a starting point for a design paradigm for how to design in code using a file that stores all of our design

system details in and allows us to maintain consistency throughout our project as well. And using this, we can also get claude code to update our design.md files as well as we go with

design.md files as well as we go with any new rules or new components that we want to bring in here. So is the Google stitch new design. ND paradigm for UI

design in apps and websites. Perfect?

Absolutely not. It's not 100% there yet.

But what I love about design.nd ND is that this is based on a pattern that a lot of people were already doing by documenting their design systems and their design rules in markdown files,

giving you a canvas to explore a lot of different design directions on and also having an MCP server to connect to Claude code or any coding agent so that you can use design references directly

from Google Stitch in your actual app project just changes the way that a lot of designers will start to approach designing websites and apps. And it also gives a lot of non-design people a

really easy way, a playground to sort of explore different designs, raise the floor of what the lowest kind of design quality is, and helps so many people avoid just AI slop looking designs. Now,

you could go way deeper than I went in this video. This is just scratching the

this video. This is just scratching the surface of what the new version of Google Stitch can do. I previously

didn't really rate Google Stitch, but I actually really like the direction that they're taking with design. MD and the way that they're approaching design systems in with AI agents and so this is definitely one that I would recommend

trying out if you are building an app and you want to elevate that design of your app to try exploring different visual directions with Google Stitch and then applying that design MD direction to your actual codebase. Now, if you are

building apps with AI or you want to learn how to build apps with AI and actually make them look good, as well as how to make money with them, I've got a community helping people do that over at school.com/hairapps.

school.com/hairapps.

There's over 250 people in there building apps, launching apps, and making money with apps that they've designed themselves as well. So, head

over there to check it out if you're interested. If you enjoyed the video,

interested. If you enjoyed the video, don't forget to like and subscribe.

Thank you for watching and I will see you next