Google Stitch 2.0: The FREE AI Design Powerhouse by Google is CRAZY!

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: Google Stitch 2.0: The FREE AI Design Powerhouse by Google is CRAZY! · Channel: AICodeKing · 12:57 · Watch on YouTube

Topics: AI agents, Software engineering with AI, AI developer tools

Summary

The video walks through using Google Stitch, a free AI design workspace with daily limits, to create and refine an app design before handing it off to a coding workflow. Using a creator workspace called Frame Desk, it demonstrates targeted revisions, design variations, reference inputs, design systems, responsive layouts, and interactive prototypes. It also explains exporting HTML, images, and design rules, and connecting Stitch to coding agents through its MCP integration. The main advice is to make deliberate revisions, carry a consistent design system across screens, and test the result in a real development workflow.

Key points

Stitch can generate app and web interfaces from prompts, with speed and balanced generation options and daily credits that reset at midnight UTC.
A useful prompt explains the intended audience, their tasks, and the visual direction; the example project is a video-management workspace for a solo YouTube creator.
Iterate with specific changes, inspect the result, and compare alternatives based on how well they support the task.
Reference images, wireframes, existing code, and design files can provide additional context for the design.
A project design system captures colors, fonts, spacing, roundedness, and component patterns so new screens can stay consistent.
The walkthrough creates dashboard, video-detail, calendar, and mobile screen directions, then connects related screens into a prototype.
Exporting HTML, images, and Design.md gives coding tools visual references, a starting point, and reusable design rules.
Stitch’s MCP integration can let coding agents list projects, read screens, generate designs, request edits, and create variations; API keys should be kept private.
The video recommends refining the design across screens rather than stopping at a single generated screen.

Chapters

Start	Chapter	Summary
00:00	Introducing Stitch and setting up the project	The presenter introduces Stitch and begins a Frame Desk design by choosing a web workspace and writing a prompt for a creator dashboard.
03:07	Revisions, themes, and design variations	The walkthrough demonstrates targeted edits, theme changes, layout variations, reference inputs, and live voice guidance.
06:15	Design systems and building more screens	The video explains how to define reusable design rules and apply them to detail, calendar, and mobile screen directions.
08:18	Prototyping and exporting the design	The presenter connects screens into a prototype, then exports project materials and describes using them in a coding workflow.
10:54	MCP integration and final recommendations	The video covers configuring Stitch’s MCP integration and concludes with advice on refining designs and trying the workflow on a real project.
12:57	Closing	The presenter wraps up by inviting comments, asking viewers to support and subscribe, and saying goodbye.

Quotes

It’s called Stitch and it gives you an entire AI design workspace for free. — 00:00

Change one major thing, inspect it, and keep going. — 03:07

Design.md is the portable version of these rules. — 06:46

Pick a direction, fix the weak parts, and carry that design system through the rest of the app. — 12:26

Concepts and entities

Google Stitch, Google, Frame Desk, design system, design.md, MCP, Figma, React

Full transcript (original language)

00:00 [music] Hi, welcome to another video. [music] So, Google’s most useful product for building apps is hiding in plain sight. It’s called Stitch and it gives you an entire AI design workspace for free. You can describe an interface, explore different designs, connect screens into a prototype, and then take the result into your coding tool. And right now, Stitch is free to use with daily limits. The part that interests me is what happens after the first generation because getting one nicel looking dashboard is useful, but I want to know

00:31 how you change it. Keep the next screen consistent and actually build something from it. So, in this video, let’s walk through that entire process. We’ll use a creator workspace called frames, starting with a blank prompt and going through revisions, design systems, mobile layouts, prototypes, and the coding handoff. If you’ve ever asked an AI coding tool to make your app look better and then spent the next hour explaining what better means, this is a workflow worth looking at. So, let’s get right into it. First, open Stitch with Google in your browser. I’ll put the

01:02 link in the description. Click try now and sign in with your Google account to enter the workspace. The starting interface gives you a prompt box, an attachment option, and a choice between app and web. There are also templates including dashboards and landing pages if you want an existing direction to explore. For framees, choose web. We’re designing a desktop workspace where a creator can manage video ideas, scripts, and upcoming uploads. Open the generation selector, and you’ll find speed and balanced in the current interface. Speed prioritizes quick

01:34 collaboration, while balanced aims for a balance between speed and quality. I’d start with balanced here. Your daily credits reset at midnight UTC, and you can see your remaining allowance in settings. Now, let’s give it something useful to work with. You don’t need a huge prompt, but you should explain who the app is for, what they need to do, and the general visual direction. For this example, use something like this. Design a desktop web app called Frame Desk for a solo YouTube creator. Help me see which video needs attention next. Include a sidebar with overview, videos,

02:06 calendar, and settings. Show a video board with ideas, scripting, recording, and published columns, plus a compact upcoming uploads panel. Use warm-off white backgrounds, dark text, and a restrained orange accent. Keep the layout practical and easy to scan. Use realistic sample video titles. So, let’s send that and let it generate. The audience and the main task are doing a lot of work here. A creator managing videos needs different information from someone checking sales. Giving Stitch that context helps you evaluate whether its design actually makes sense. Once the result is ready, check the structure

02:37 first. Can you find the video board immediately? Is there an obvious way to add a video? Are the upcoming uploads visible without taking over the page? I would also check the sample content. A dashboard that only works with three-word titles might fall apart when you enter a real video title. Try something longer, like building a complete app with Google’s free design tools. Now, we’re on the canvas, which lets you keep multiple screens and directions together. Press V for selection and H for panning. You can also open the keyboard shortcut help with the question mark key. Keeping the original screen visible is useful while you iterate. It gives you something to

03:07 compare against when a new version changes more than you expected. Let’s make a targeted revision. Select the screen, choose edit, add it to the chat, and describe the specific change you want. For example, make the upcoming uploads panel more compact so the video board has more horizontal space. Keep the current colors, typography, and navigation. That’s a much clearer instruction than make the dashboard better. After the edit, compare the board width, check that the text still fits, and make sure the navigation hasn’t changed unnecessarily. Then make

03:37 the next adjustment. If the primary action is hard to spot, ask it to make add video the most prominent action and reduce the emphasis on secondary buttons. I think this is the best way to approach normal edits. Change one major thing, inspect it, and keep going. You can still explore big alternatives, but you want some control over how you get there. For basic styling, select the screen, open generate, and choose edit theme. This lets you adjust things like light or dark appearance, accent color, font, and corner radius. For framees, you could try a darker studio look and compare it with the warm light version.

04:08 Look at the actual video cards and status labels in both themes. Those need to stay readable even if the overall screenshot looks good. Now, let’s explore a few different layouts using variations. The variations controls let you generate multiple options and adjust how far they move from the original. A lower creative range is useful for smaller refinements, while a higher range gives the tool more freedom to rethink the design. Let’s request three options. Keep the same framees content, but explore a compact board, a spacious editorial layout, and a dark studio layout. Make the next video deadline clear in every version. When you compare them, look for the version that supports

04:39 the task best. I would favor a layout where I can scan titles and deadlines comfortably over one with impressive decoration, but very little room for actual work. You can also select a promising variation and refine it further. Maybe you prefer one layout, but want to bring back the original palette. Describe that combination explicitly, then check the result. If you’re exploring several directions, the agent manager is there to help you track a parallel work. Keep those experiments focused, like one direction for the dashboard and another for the video detail screen. Now, text isn’t the only

05:12 way to give stitch context. You can bring in a reference image, a rough wireframe or a screenshot. For example, sketch a sidebar on the left, the video board in the center, and upcoming uploads on the right, attach it, and explain that you want to preserve that structure while improving the typography and spacing. You can also use a reference to communicate a particular style. Say, use this reference for its typography and spacing, but keep frames content and workflow. That gives the tool a more specific job than copying everything it sees. Google also supports bringing existing code and design files

05:44 into the workflow, so there is a path for improving something you already have as well as starting a new project. Another option is live mode. You can talk to Stitch and steer the design while the agent is working. For our example, a useful voice instruction would be, “The dashboard feels too crowded.” Give the video titles more room and make the deadline easier to find. You can also ask the agent to critique the hierarchy or help you work out what the page needs. So, you can look at the design, say, “What you want changed, and keep the conversation going. That’s a pretty natural way to work on an interface. Now, before we

06:15 generate the rest of the app, let’s deal with consistency.” This is where the design system panel and design become useful. Select the screen you want to build on and open its design system panel. This shows the active colors, fonts, spacing, roundedness, and component patterns. You can edit core properties there instead of repeatedly describing the same pallet in chat. For framees, the rules should explain things like where the orange accent belongs, how a video status looks, and which text should receive the most emphasis. Those

06:46 details will matter on every screen. Set this as the project default. So new screens inherit the same design rules. Apply it to your existing screens as well to bring everything together. Design.md is the portable version of these rules. It contains structured design values and written guidance explaining how to use them. You can export it with the project and give it to another tool or coding agent. If you already have a brand, give Stitch your website URL or a reference image and it can extract the design rules. That saves you from describing your brand from scratch every time. So now let’s create

07:16 the video detail screen. Use the chosen dashboard as context and ask for this. Create a frame desk video detail page using the project’s design system. Include an editable video title, a status selector, a large script editor, a recording checklist, and a target publication date. Keep the sidebar consistent and include a clear return to the video board. Once it generates, compare the shared elements. The sidebar, buttons, fonts, and status colors should still feel like the same app. If something drifts, target that specific difference in the next edit. Then add the calendar screen. Ask for a monthly publishing calendar using the

07:48 same design system with scheduled videos and a compact list of upcoming deadlines. Clicking a video should lead to its detail screen. I’d also include an empty state for someone who hasn’t added any videos yet. Ask for a clear explanation and an add your first video action. That is a screen a real new user might see before any of the attractive sample content. Now, let’s adapt the dashboard for a phone. Ask Stitch for a mobile version that preserves the same tasks using a compact navigation pattern and a readable way to switch between

08:18 video stages. The key thing to inspect is how the layout changes. A desktop board with four columns probably shouldn’t just become four tiny columns. Check whether the mobile direction gives the user a comfortable way to browse the same information. So, we have a dashboard, a video detail page, and a calendar direction. Let’s connect the main flow into a prototype. To start, select a screen, open generate, and choose prototype. You can connect related screens through interaction hotspots and use play to preview the flow for frame desk. Connect a video card on the dashboard to its detail

08:49 page. Connect calendar in the navigation to the calendar screen and make sure a scheduled video can lead back to its details. Then walk through that as a user. Open a video, find the script, look for its publication date, and return to the board. Check whether the actions and navigation make sense at each step. A prototype also lets you explore the navigation and scrolling and see how the screens feel together. It’s much easier to spot an awkward flow when you’re clicking through it. Stitch can even suggest or generate the next screen as you explore. So, you can keep

09:20 building out the user journey from the screens you already have, which is pretty cool. Now, let’s get the work out of Stitch. For our main handoff, select the screens you want and use download to get their HTML and images in a zip file. When you export the project, keep the included design file as well. Keep those together. The image shows the intended appearance. The HTML gives the developer a concrete starting point. And the design file explains the shared rules. Stitch’s generated front-end output includes HTML and CSS with Tailwind support. If your app uses React, Vue, or

09:52 another framework, a coding agent can use that material to build the components you need. Open a project in your coding editor, add the exported files, and give the agent a specific instruction. Implement these frame desk screens as a React app using the exported HTML, images, and design.md. Create reusable navigation, video cards, status labels, and buttons. Connect the dashboard, video details, and calendar. Use sample data first. Preserve the supplied visual direction and check the rendered pages against the references. Once the agent builds that first version, ask it to start a local preview. Repeat the same journey from

10:22 the board to a video and then to the calendar. Compare the pages with the stitch references at desktop and phone sizes and fix any differences that affect the layout or usability. Then add the behavior you need, such as saving scripts and updating publication dates. Test that saved changes survive a reload that gives you a concrete path from a design to an application you can keep developing. There is also Figma export with editable text, named layers, and auto layout. So if you or your team already work in Figma, you can take the design there and keep refining it. You can also move into AI studio for a sharable result. Export

10:54 to anti-gravity for implementation or publish through Netlefi. There’s a lot of flexibility in where you take the project next. Now, for people using coding agents, there is another useful option, Stitch’s MCP integration. MCP lets your agent access Stitch projects through tools. The available operations include listing projects, reading screens, generating designs, requesting edits, and creating variations. So you can ask the agent to work with a particular stitch project directly which is useful when you expect to keep moving between design and implementation to

11:25 configure the API key route. Open stitch settings, find API keys and create a key. Then follow Google’s setup instructions for your coding tool. Keep the key private and out of your app’s front-end code. For example, in anti-gravity, open the agent panel menu, then MCP servers, manage MCP servers and view raw config. Add the stitch configuration from the documentation and supply your key. Once connected, ask the agent to list your stitch projects first. Then point it to framees and ask it to inspect the selected screens

11:55 before implementing them. That gives you a simple way to check that it’s reading the intended project. Google also publishes stitch skills for design and build workflows, plus a CLI and SDK for people who want to automate the process. You can start with the browser and use those when your workflow needs them. So, what do I think of all this for a solo developer or a small team? The useful part is being able to make design decisions early. You can compare directions, work through the main screens, and give your coding tool a specific visual target. The biggest tip I’d give you is to spend time on the revisions. Pick a direction, fix the

12:26 weak parts, and carry that design system through the rest of the app. That’s how you get much more out of this than a single generated screen. And the pricing makes it easy to try. Stitch is free with daily credits. Any coding subscriptions or hosting you choose afterward are separate. Personally, I think this is one of Google’s most useful products for people building interfaces. The combination of visual exploration, reusable design rules, prototyping, and code handoff makes it worth trying on an actual project. Take one screen from an app you want to build, give Stitch a clear brief, make a few deliberate revisions, and carry the

12:57 result into your development workflow. That’s where you can judge whether it saves you time. Overall, it’s pretty cool. Anyway, let me know your thoughts in the comments. If you like this video, consider donating through [music] the super thanks option or becoming a member by clicking the join button. Also, give this video a thumbs up [music] and subscribe to my channel. I’ll see you in the next one. Until then, bye.