00:00:00Your AI agents have gotten pretty good at designing now.
00:00:02They don't really have the problems now, where the sites they made had stuff broken in it.
00:00:06But since the models have all been trained on the same data, the designs are always too
00:00:10similar and generic.
00:00:11Even Claude's models need a special prompt to make sure they don't make this mistake.
00:00:15Google Stitch is a tool built specifically for design, and it can actually plug directly
00:00:19into your Claude Code workflow.
00:00:21So in this video, we're going through 4 ways to use Stitch with Claude Code, to make sure
00:00:26your apps don't end up looking like every other AI generated site.
00:00:30The new Stitch update uses a design system for building your UI, and these systems are
00:00:34built upon all the features that form the UI guide for websites, which includes different
00:00:38fields like colors, themes, fonts, and more.
00:00:41These features are actually formed by using the design.md file.
00:00:45This file is also what makes the design transferable from one agent to another.
00:00:49You can transfer this design.md file to any agent you implement this design with, and it
00:00:54will get the whole styling theme perfectly matched.
00:00:56The reason this works is that the file is specialized towards agents.
00:00:59It contains more targeted language so that they can grasp the design intention with ease.
00:01:04It also visualizes all the design systems on screen, so you don't just have to interpret
00:01:08the style using only text.
00:01:10You can get the gist of how the app will look when it is implemented, by actually looking
00:01:14at the colors and fonts next to each other.
00:01:16Whenever you build anything with Stitch, the first step Stitch takes is creating a design.md
00:01:21and a design system.
00:01:22Even if you don't explicitly tell it to do so in your prompt.
00:01:25Once the design system is locked in, whenever it creates any site, it is able to ensure consistency
00:01:30across multiple pages and regenerations.
00:01:32This fixes the biggest problem we had while working with Stitch, because it was not able
00:01:36to maintain design consistency as well as it can now.
00:01:39But instead of relying on the design system Stitch creates on its own, you can create your
00:01:43own design systems as well.
00:01:45You can set the theme according to your requirements, or if you have a design file, you can just
00:01:49upload it, and it will automatically incorporate that file as a design system and visualize
00:01:53it for you.
00:01:54The important thing is that you need to make sure whatever design.md you use, follows a
00:01:58proper structure.
00:01:59This structure is known to be optimized for agents, specifically Stitch, and helps them
00:02:04understand the intentions efficiently.
00:02:06Often times we brainstorm our app ideas with Claude or other agents.
00:02:09So if you want to create designs from those brainstorming sessions in Stitch, you can take
00:02:13the design style to Stitch in the form of a design.md file.
00:02:17You can give Claude a structure for the design file that you can get from the official skills
00:02:21repo by Google containing all the skills related to Stitch.
00:02:25From the examples you can get a design file template that is optimized for Stitch.
00:02:29So whichever agent you are using, you can provide the style of the website you want to create
00:02:33along with the template, so that it can generate the design.md on top of the template following
00:02:38the style guide properly.
00:02:39Once your agent generates the detailed design.md file, you can take it to Stitch and just paste
00:02:44it into the design.md section under the creating new design system.
00:02:48The moment you press save design, it creates a visualization for this design.
00:02:52Once it is visualized, you can use it and ask Stitch to implement the UI using the newly
00:02:56created design system as a base.
00:02:59Stitch then implements the design, which reflects the system you created, capturing the exact
00:03:03styling from the design.md.
00:03:05So using these design systems, you can iteratively create as many pages as you want, and each
00:03:10will follow the same design style.
00:03:12If you have already created projects on Stitch and you want to extract the design.md for them,
00:03:16you can do so by using the skills created by Google.
00:03:19In the skills they have created, the design.md skill converts Stitch projects into a design.md
00:03:25according to the template, which is optimized for Stitch's workflow.
00:03:28Also if you are enjoying our content, consider pressing the hype button, because it helps
00:03:32us create more content like this and reach out to more people.
00:03:35Stitch's capabilities are impressive, but there are still gaps in it implementing good
00:03:39UX for the niche of websites you are building.
00:03:42It is not always preferred to design from scratch.
00:03:44Existing websites are built on patterns that actually work for the specific niche they
00:03:48are made for, so mimicking their patterns helps you create a website that actually works for
00:03:53your users.
00:03:54Before, when building with AI, we used to provide a screenshot and then asked the design tool
00:03:58to copy that design.
00:04:00It would try to replicate the layout, the components, everything as it is.
00:04:04But Stitch's new update has changed that.
00:04:06With the redesign feature of Stitch, you still give it a screenshot, but now it doesn't
00:04:10copy it.
00:04:11It uses that screenshot as a style guide.
00:04:12It pulls the patterns, the component placement, the design language from that reference and
00:04:17applies it to your own website.
00:04:18So you are basically building something original on top of an existing pattern.
00:04:22In order to use the redesign feature, you need a screenshot.
00:04:25But a section by section screenshot is a tedious way of doing so.
00:04:28Instead, use any extension like GoFullPage for a full page screenshot so that you can
00:04:33provide the style reference in one go.
00:04:35Once you give it a screenshot of the website you want to replicate the design from, it uses
00:04:39that screenshot as a style and components placement reference and creates another UI similar to
00:04:44the one in the screenshot.
00:04:45It uses Nano Banana's image generation capabilities to generate images for different sections matching
00:04:50the UI style.
00:04:51There are other ways you can copy the style from another website as well.
00:04:54You can mimic a whole website's style by copying the link and then from the design systems,
00:04:59you can import the design from any website as a design.md file.
00:05:03Just provide the link and it will import the design system from the website by crawling
00:05:06it and obtaining the style and typography from it.
00:05:09But often times Stitch does not get the style that you had in your mind.
00:05:12In those cases, you can just upload a rough sketch or a wireframe with the style you actually
00:05:17want.
00:05:18You can also specify the design theme you want your website to use.
00:05:21With the references and theme specification, the UI generated by Stitch will match the wireframe
00:05:26and the style guide exactly, making the website aligned with your requirements.
00:05:31And if there is anything specific that you want to modify, you can do so by using the
00:05:34annotating and editing features of Stitch.
00:05:36You can annotate the part you do not like with the way you want it, click apply and it will
00:05:40implement the style you wanted.
00:05:42But before we move forwards, let's have a word by our sponsor.
00:05:45Uptime Robot.
00:05:46You're building with AI APIs, OpenAI, Anthropic, whatever.
00:05:49Everything looks fine, 200 OK, but the response is garbage.
00:05:52Your app breaks and you only find out when users start complaining.
00:05:56That's where Uptime Robot comes in.
00:05:57It catches that before they do.
00:05:59It pings your APIs, checks the actual response, not just the status code, and alerts you instantly
00:06:04on Slack, email or wherever you work.
00:06:06Monitor AI endpoints, track API credits before you hit limits, and catch errors before they
00:06:10become support tickets.
00:06:12You even get public status pages showing live uptime stats and incident history.
00:06:16Setting it up takes seconds.
00:06:18Add your endpoint, set the expected response, pick your alerts, and you're live.
00:06:21There's a free tier with 50 monitors to try it out.
00:06:24API monitoring is included at just $7 a month, cheaper than hosting it yourself.
00:06:28Use code AI Labs for 10% off, valid until year end.
00:06:32Click the link in the pinned comment and start building today.
00:06:35Another way to build is by connecting Stitch's capabilities with any of your existing agent
00:06:40capabilities like Claude Code or any other agent that supports agent skills.
00:06:44Google has developed multiple skills for this purpose and provided skills that give additional
00:06:48capabilities to the agent for working with Stitch.
00:06:51You can install whichever skill you need by following the steps in the repo.
00:06:54The most important one to use in your workflow is the Enhance Prompt skill.
00:06:58It transforms the vague prompts you provide into Stitch optimized prompts, making them
00:07:02exactly the way Stitch is optimized to work.
00:07:05It contains references for common keywords because Stitch relies on adjectives to identify
00:07:09mood rather than exact descriptions of the design.
00:07:12Aside from that, there is a skill for building complete websites called the Stitch Loop.
00:07:16It allows the agent to use Chrome dev tools and iteratively build the website from Stitch
00:07:20using an autonomous loop pattern as detailed in the prompt.
00:07:23The idea is to maintain proper prompt tracking and pass prompts from one stage to another.
00:07:28Since these skills manage everything on their own, this is the closest workflow to building
00:07:32an app in one shot.
00:07:33But before you actually use these skills, you need to make sure that Stitch MCP is connected
00:07:38because this is what Stitch uses under the hood to build and fetch designs.
00:07:41There is a video on the channel that walks through the MCP installation process and debugging
00:07:46common issues with the installation which you can check out.
00:07:49Now when you export the design from Stitch, either via MCP or code, it usually gives out
00:07:53a huge HTML file where everything is chunked in one file.
00:07:56Since most applications are React-based and component-structured, this becomes an overhead
00:08:01for agents to map the HTML to React.
00:08:03So to simplify this, you can use the React component skill.
00:08:06It converts the Stitch design into modular components using proper validation metrics.
00:08:10It uses scripts to validate and fetch designs so that components can be easily mapped.
00:08:15With this workflow, you can create a Clod.md that lists the workflow you want to use.
00:08:20It needs to follow this order.
00:08:21First you use the Enhance prompt skill to convert your vague prompts into Stitch-specific prompts,
00:08:26ensuring Stitch receives the input correctly.
00:08:28Then it should build the design using the Stitch loop.
00:08:31Once the build is done, it needs to implement the design in the app using React components.
00:08:35When you give the prompt for the landing page you want to build, it will follow the instructions
00:08:39laid out in Clod.md.
00:08:41It first loads the Enhance prompt skill, which then generates the Enhance prompt using the
00:08:45available skills and tools.
00:08:47Once the prompt is ready, it asks for your permission to proceed to the next step.
00:08:50After approval, it loads the Stitch loop skill and uses the Stitch MCPs to create the project.
00:08:56Once the project is created, it sends the prompt generated by the Enhance prompt skill to Stitch,
00:09:00which first generates the design system and then the actual design.
00:09:04To facilitate images, it uses image generation as part of the design process.
00:09:08Once the design is complete, it moves to the next step using the React component skill to
00:09:12create a component-wise structure and implement the app properly, optimized for whichever framework
00:09:17you are using.
00:09:18If you run the dev server, you can see that the application exactly maps the design from
00:09:22Stitch, including hover effects on buttons, making this workflow much easier and faster
00:09:26for building fully functional apps.
00:09:28Now, the Clod.md used here, along with all the resources created, are available in AI
00:09:33Labs Pro.
00:09:34This includes resources from this video, as well as all previous videos, which you can
00:09:38download and use for your own projects.
00:09:40If you have found value in what we do and want to support the channel, this is the best way
00:09:43to do it.
00:09:44The link is in the description.
00:09:46Building from scratch is not always a good idea, and this applies to components as well.
00:09:50The UI generated by bare React components is too static and just focused on the looks so
00:09:54you would need extra overhead to add interactions and animation effects.
00:09:58Instead of building from scratch, you should use UI libraries in your apps because they
00:10:02make creation easier by having interaction features built right into them which you can
00:10:07use to make your UI livelier.
00:10:08To make this even easier, Google provides a ShadCN UI skill, which gives guidance while
00:10:13converting an application from Stitch to ShadCN components.
00:10:16This skill is essentially a detailed guide on how to properly implement these components
00:10:21across the app.
00:10:22Since ShadCN supports connecting with multiple registries, you can expand its capabilities
00:10:26even further by integrating them and making use of their features as well.
00:10:30But it is recommended to set up the ShadCN MCP prior to building so that the workflow
00:10:35remains smooth.
00:10:36To use it effectively, you should also set up a Clod.md file and include instructions
00:10:41so that whenever you use Stitch MCP, it automatically uses the ShadCN skill to convert the design
00:10:47into components.
00:10:48Since you can add registries, you can specify whichever ones you want to use in your project.
00:10:52For example, when we were building the site, we chose Glassmorphism and Motion Primitives
00:10:57because they contain components that have a premium feel.
00:11:00You can choose whichever ones best suit your project's needs.
00:11:03If you have previously created a UI in Stitch, you can convert it into an app with ShadCN
00:11:07components.
00:11:08You need to specify the name of the project you want to implement and ask it to implement
00:11:12it in the app.
00:11:13It will first fetch the project with the specified name, then load the ShadCN UI skill and use
00:11:18ShadCN MCP tool calls along with the registries you have specified to implement the entire
00:11:23app.
00:11:24Once the implementation is complete, the app will reflect exactly what you see in Stitch
00:11:27but built with ShadCN UI components.
00:11:29This makes a big difference because the app generated in one shot becomes much more interactive
00:11:34because of the ease of implementation.
00:11:36That brings us to the end of this video.
00:11:38If you'd like to support the channel and help us keep making videos like this, you can do
00:11:42so by using the super thanks button below.
00:11:44As always, thank you for watching and I'll see you in the next one.