Google Stitch 2.0: a poderosa ferramenta gratuita de design com IA do Google é incrível!

Autoria: AICodeKing · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Google Stitch 2.0: The FREE AI Design Powerhouse by Google is CRAZY! · Canal: AICodeKing · 12:57 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Ferramentas de desenvolvimento com IA

Resumo

O vídeo apresenta o Google Stitch como um workspace gratuito de design com IA para criar interfaces, explorar variações, montar protótipos e preparar materiais para implementação. Usando como exemplo um app para criadores de YouTube, demonstra como refinar uma tela, manter consistência entre páginas e adaptar o layout para dispositivos móveis. Também explica como exportar os designs, continuar o trabalho em ferramentas de programação e conectar coding agents ao Stitch por MCP. A recomendação central é iterar com instruções específicas e aplicar o mesmo design system ao projeto inteiro.

Pontos-chave

O Stitch permite criar interfaces a partir de descrições e oferece créditos diários gratuitos, sujeitos a limites.
Prompts que explicam o público, as tarefas e a direção visual ajudam a gerar designs mais adequados.
Revisões focadas em uma mudança de cada vez facilitam comparar resultados e preservar elementos que já funcionam.
Variações, imagens de referência e comandos por voz oferecem diferentes maneiras de orientar a exploração visual.
O design system pode ser aplicado a várias telas, e o arquivo Design.md registra valores e orientações de design.
É possível criar páginas relacionadas, versões para celular e um protótipo navegável para avaliar o fluxo.
O Stitch exporta HTML, imagens e arquivos de design para apoiar a implementação em um coding agent.
A integração MCP permite que um agent acesse projetos e telas do Stitch e solicite designs, edições e variações.
O vídeo recomenda testar a implementação em diferentes tamanhos de tela e verificar se as alterações salvas persistem após recarregar.

Capítulos

Início	Capítulo	Resumo
00:00	Apresentação do Stitch e criação do primeiro design	O vídeo apresenta o Stitch e mostra como iniciar um workspace para criadores com um prompt claro e avaliar a primeira tela.
03:07	Revisões, variações e referências visuais	Demonstra como editar elementos específicos, explorar temas e variações, usar referências e orientar o design por voz.
06:15	Design system e criação de telas consistentes	Explica como definir regras compartilhadas e usá-las para criar páginas de detalhes, calendário e uma versão para celular.
08:18	Protótipo e exportação para implementação	Mostra como conectar telas em um protótipo e exportar HTML, imagens e regras de design para continuar o desenvolvimento.
10:54	Integração MCP e avaliação final	Apresenta a conexão do Stitch com coding agents por MCP e conclui com recomendações para aproveitar as revisões e o design system.

Citações

Essa é uma instrução muito mais clara do que “melhore o dashboard”. — 03:07

Defina isso como padrão do projeto, para que as novas telas herdem as mesmas regras de design. — 06:46

A imagem mostra a aparência pretendida. O HTML dá ao desenvolvedor um ponto de partida concreto. — 09:20

Escolha uma direção, corrija os pontos fracos e aplique esse design system ao restante do app. — 12:26

Conceitos e entidades

Google Stitch (ferramenta): Workspace de design com IA apresentado no vídeo para criar, editar, prototipar e exportar interfaces.
Google (empresa): Empresa responsável pelo Stitch e pelas opções de integração e exportação mencionadas.
Frame Desk (conceito): App fictício usado como exemplo, voltado ao gerenciamento de ideias, roteiros e publicações de vídeos.
design system (conceito): Conjunto compartilhado de cores, fontes, espaçamentos, cantos e padrões de componentes usado para manter a consistência entre telas.
design.md (conceito): Arquivo exportável que reúne valores estruturados e orientações de uso do design system.
MCP (conceito): Integração que permite a um agent acessar projetos do Stitch por meio de ferramentas.
Figma (ferramenta): Ferramenta para a qual o vídeo afirma ser possível exportar designs com texto editável, camadas nomeadas e auto layout.
React (ferramenta): Framework citado como opção para implementar as telas exportadas do Stitch.

Tradução completa (pt-BR)

00:00 [música] Oi, bem-vindo a mais um vídeo. [música] Então, o produto mais útil do Google para criar apps está escondido bem à vista. Ele se chama Stitch e oferece gratuitamente um espaço de trabalho completo de design com IA. Você pode descrever uma interface, explorar diferentes designs, conectar telas em um protótipo e depois levar o resultado para sua ferramenta de programação. E, no momento, o Stitch é gratuito, com limites diários. O que me interessa é o que acontece depois da primeira geração, porque conseguir um dashboard bonito é útil, mas quero saber

00:31 como você o modifica. Como mantém a próxima tela consistente e realmente cria algo a partir dela. Então, neste vídeo, vamos percorrer todo esse processo. Vamos usar um espaço de trabalho para criadores chamado Frames, começando com um prompt em branco e passando por revisões, sistemas de design, layouts para dispositivos móveis, protótipos e a transferência para a ferramenta de programação. Se você já pediu a uma ferramenta de programação com IA para deixar seu app mais bonito e depois passou a hora seguinte explicando o que significa “mais bonito”, vale a pena conhecer este workflow. Então, vamos começar. Primeiro, abra o Stitch com o Google no navegador. Vou deixar o

01:02 link na descrição. Clique em “Try now” e faça login com sua conta do Google para entrar no espaço de trabalho. A interface inicial oferece uma caixa de prompt, uma opção para anexar arquivos e uma escolha entre app e web. Também há modelos, incluindo dashboards e landing pages, caso você queira explorar uma direção já existente. Para o Frames, escolha web. Vamos criar um espaço de trabalho para desktop onde um criador possa gerenciar ideias de vídeos, roteiros e próximos uploads. Abra o seletor de geração e você encontrará as opções “Speed” e “Balanced” na interface atual. “Speed” prioriza uma colaboração rápida

01:34 e “Balanced” busca um equilíbrio entre velocidade e qualidade. Eu começaria com “Balanced” neste caso. Seus créditos diários são redefinidos à meia-noite UTC, e você pode ver o saldo restante nas configurações. Agora, vamos dar a ele algo útil para trabalhar. Você não precisa de um prompt enorme, mas deve explicar para quem é o app, o que essa pessoa precisa fazer e qual é a direção visual geral. Para este exemplo, use algo assim: “Crie um app web para desktop chamado Frame Desk para um criador solo do YouTube. Ajude-me a ver qual vídeo precisa de atenção em seguida. Inclua uma barra lateral com visão geral, vídeos,

02:06 calendário e configurações. Mostre um quadro de vídeos com colunas para ideias, roteiros, gravação e publicados, além de um painel compacto de próximos uploads. Use fundos em branco quente, texto escuro e um toque discreto de laranja. Mantenha o layout prático e fácil de percorrer com os olhos. Use títulos realistas para os vídeos de exemplo.” Então, vamos enviar e deixar a ferramenta gerar. O público e a tarefa principal fazem grande parte do trabalho. Um criador que gerencia vídeos precisa de informações diferentes das de alguém que acompanha vendas. Dar esse contexto ao Stitch ajuda você a avaliar se o design realmente faz sentido. Quando o resultado estiver pronto, confira primeiro a estrutura

02:37 Consegue encontrar o quadro de vídeos imediatamente? Há uma maneira óbvia de adicionar um vídeo? Os próximos uploads estão visíveis sem dominar a página? Eu também conferiria o conteúdo de exemplo. Um dashboard que só funciona com títulos de três palavras pode desmoronar quando você inserir o título de um vídeo de verdade. Experimente algo mais longo, como “Criando um app completo com as ferramentas de design gratuitas do Google”. Agora estamos na tela de trabalho, que permite manter várias telas e direções juntas. Pressione V para selecionar e H para mover a tela. Você também pode abrir a ajuda dos atalhos de teclado com a tecla de ponto de interrogação. Manter a tela original visível é útil durante as iterações. Assim, você tem algo para

03:07 comparar quando uma nova versão muda mais do que você esperava. Vamos fazer uma revisão específica. Selecione a tela, escolha “Edit”, adicione-a ao chat e descreva a mudança específica que você quer. Por exemplo: “Deixe o painel de próximos uploads mais compacto para que o quadro de vídeos tenha mais espaço horizontal. Mantenha as cores, a tipografia e a navegação atuais.” Essa instrução é muito mais clara do que “deixe o dashboard melhor”. Depois da edição, compare a largura do quadro, confira se o texto ainda cabe e certifique-se de que a navegação não mudou sem necessidade. Depois, faça

03:37 o próximo ajuste. Se a ação principal estiver difícil de identificar, peça para tornar “Adicionar vídeo” a ação mais destacada e reduzir a ênfase nos botões secundários. Acho que essa é a melhor maneira de abordar edições comuns. Mude uma coisa importante, examine o resultado e continue. Você ainda pode explorar alternativas mais amplas, mas é bom ter algum controle sobre como chegar lá. Para ajustes básicos de estilo, selecione a tela, abra “Generate” e escolha “Edit theme”. Isso permite ajustar aspectos como aparência clara ou escura, cor de destaque, fonte e raio dos cantos. Para o Frames, você pode experimentar um visual mais escuro de estúdio e compará-lo com a versão clara em tons quentes.

04:08 Observe os cartões dos vídeos e os rótulos de status nos dois temas. Eles precisam continuar legíveis mesmo que a captura de tela geral pareça boa. Agora, vamos explorar alguns layouts diferentes usando variações. Os controles de variações permitem gerar várias opções e ajustar o quanto elas se afastam do original. Um nível mais baixo de criatividade é útil para pequenos refinamentos, enquanto um nível mais alto dá à ferramenta mais liberdade para repensar o design. Vamos pedir três opções. Mantenha o mesmo conteúdo do Frames, mas explore um quadro compacto, um layout editorial espaçoso e um layout escuro de estúdio. Deixe claro o prazo do próximo vídeo em todas as versões. Ao compará-las, procure a versão que melhor favorece

04:39 a tarefa. Eu daria preferência a um layout em que seja fácil percorrer os títulos e prazos com os olhos a um que tenha uma decoração impressionante, mas pouco espaço para o trabalho de verdade. Você também pode selecionar uma variação promissora e refiná-la ainda mais. Talvez você prefira um layout, mas queira trazer de volta a paleta original. Descreva essa combinação explicitamente e depois confira o resultado. Se estiver explorando várias direções, o gerenciador de agents ajuda você a acompanhar o trabalho em paralelo. Mantenha esses experimentos focados, por exemplo, uma direção para o dashboard e outra para a tela de detalhes do vídeo. Agora, o texto não é a única

05:12 maneira de dar contexto ao Stitch. Você pode adicionar uma imagem de referência, um wireframe simples ou uma captura de tela. Por exemplo, desenhe uma barra lateral à esquerda, o quadro de vídeos no centro e os próximos uploads à direita; anexe o desenho e explique que quer preservar essa estrutura, melhorando a tipografia e o espaçamento. Você também pode usar uma referência para comunicar um estilo específico. Por exemplo: “Use esta referência para a tipografia e o espaçamento, mas mantenha o conteúdo e o workflow do Frames.” Assim, você dá à ferramenta uma tarefa mais específica do que simplesmente copiar tudo o que vê. O Google também permite trazer arquivos de código e de design existentes

05:44 para o workflow, então há um caminho tanto para melhorar algo que você já tem quanto para começar um projeto novo. Outra opção é o modo ao vivo. Você pode conversar com o Stitch e orientar o design enquanto o agent trabalha. No nosso exemplo, uma instrução de voz útil seria: “O dashboard parece muito cheio. Dê mais espaço aos títulos dos vídeos e facilite encontrar o prazo.” Você também pode pedir ao agent que critique a hierarquia ou ajude a descobrir o que a página precisa. Assim, você pode olhar para o design e dizer o que quer mudar, mantendo a conversa em andamento. É uma maneira bem natural de trabalhar em uma interface. Agora, antes de

06:15 gerarmos o restante do app, vamos cuidar da consistência. É aqui que o painel de sistema de design e o design ganham importância. Selecione a tela que você quer usar como base e abra o painel de sistema de design. Ele mostra as cores, fontes, espaçamento, arredondamento e padrões de componentes ativos. Você pode editar as propriedades principais ali, em vez de descrever repetidamente a mesma paleta no chat. Para o Frames, as regras devem explicar aspectos como onde usar o toque de laranja, como deve ser o status de um vídeo e qual texto deve receber mais destaque. Esses

06:46 detalhes serão importantes em todas as telas. Defina isso como padrão do projeto. Assim, as novas telas herdarão as mesmas regras de design. Aplique essas regras também às telas existentes para deixar tudo consistente. Design.md é a versão portátil dessas regras. Ele contém valores de design estruturados e orientações por escrito que explicam como usá-los. Você pode exportá-lo com o projeto e fornecê-lo a outra ferramenta ou a um agent de programação. Se você já tem uma marca, forneça ao Stitch o URL do seu site ou uma imagem de referência, e ele poderá extrair as regras de design. Isso evita que você tenha que descrever sua marca do zero toda vez. Agora, vamos criar

07:16 a tela de detalhes do vídeo. Use o dashboard escolhido como contexto e peça isso: “Crie uma página de detalhes de vídeo para o Frame Desk usando o sistema de design do projeto. Inclua um título de vídeo editável, um seletor de status, um editor de roteiro grande, uma lista de verificação de gravação e uma data prevista de publicação. Mantenha a barra lateral consistente e inclua uma forma clara de voltar ao painel de vídeos.” Depois que ela for gerada, compare os elementos compartilhados. A barra lateral, os botões, as fontes e as cores dos status ainda devem parecer fazer parte do mesmo app. Se algo destoar, peça para corrigir essa diferença específica na próxima edição. Depois, adicione a tela de calendário. Peça um calendário mensal de publicações usando o

07:48 mesmo sistema de design, com vídeos agendados e uma lista compacta dos próximos prazos. Clicar em um vídeo deve levar à tela de detalhes dele. Eu também incluiria um estado vazio para alguém que ainda não adicionou nenhum vídeo. Peça uma explicação clara e uma ação para adicionar seu primeiro vídeo. Essa é uma tela que um novo usuário de verdade talvez veja antes de qualquer conteúdo de exemplo atraente. Agora, vamos adaptar o dashboard para um celular. Peça ao Stitch uma versão para dispositivos móveis que preserve as mesmas tarefas, usando um padrão de navegação compacto e uma forma legível de alternar entre

08:18 as etapas dos vídeos. O principal a verificar é como o layout muda. Um painel para desktop com quatro colunas provavelmente não deveria simplesmente virar quatro colunas minúsculas. Confira se a proposta para dispositivos móveis oferece ao usuário uma forma confortável de navegar pelas mesmas informações. Então, temos um dashboard, uma página de detalhes do vídeo e uma proposta de calendário. Vamos conectar o fluxo principal em um protótipo. Para começar, selecione uma tela, abra “Generate” e escolha “Prototype”. Você pode conectar telas relacionadas por meio de pontos de interação e usar “Play” para visualizar o fluxo do Frame Desk. Conecte um cartão de vídeo no dashboard à página de detalhes dele.

08:49 Conecte o calendário na navegação à tela de calendário e confira se um vídeo agendado pode levar de volta aos detalhes dele. Depois, percorra esse fluxo como usuário. Abra um vídeo, encontre o roteiro, procure a data de publicação e volte ao painel. Verifique se as ações e a navegação fazem sentido em cada etapa. Um protótipo também permite explorar a navegação e a rolagem, além de ver como as telas funcionam juntas. É muito mais fácil perceber um fluxo estranho quando você clica nele. O Stitch pode até sugerir ou gerar a próxima tela enquanto você explora. Assim, você pode continuar

09:20 desenvolvendo a jornada do usuário a partir das telas que já tem, o que é bem legal. Agora, vamos tirar o trabalho do Stitch. Para fazer a entrega principal, selecione as telas desejadas e use “Download” para obter o HTML e as imagens em um arquivo ZIP. Ao exportar o projeto, mantenha também o arquivo de design incluído. Guarde tudo junto. A imagem mostra a aparência pretendida. O HTML oferece ao desenvolvedor um ponto de partida concreto. E o arquivo de design explica as regras compartilhadas. O código de frontend gerado pelo Stitch inclui HTML e CSS com suporte a Tailwind. Se o seu app usa React, Vue ou

09:52 outro framework, um coding agent pode usar esse material para criar os componentes de que você precisa. Abra um projeto no seu editor de código, adicione os arquivos exportados e dê ao agent uma instrução específica: “Implemente estas telas do Frame Desk como um app React usando o HTML, as imagens e o design.md exportados. Crie navegação, cartões de vídeo, rótulos de status e botões reutilizáveis. Conecte o dashboard, os detalhes dos vídeos e o calendário. Comece com dados de exemplo. Preserve a direção visual fornecida e compare as páginas renderizadas com as referências.” Depois que o agent criar essa primeira versão, peça para iniciar uma prévia local. Repita a mesma jornada, do

10:22 painel para um vídeo e, depois, para o calendário. Compare as páginas com as referências do Stitch nos tamanhos para desktop e celular e corrija quaisquer diferenças que afetem o layout ou a usabilidade. Depois, adicione os comportamentos de que você precisa, como salvar roteiros e atualizar datas de publicação. Teste se as alterações salvas continuam lá depois de recarregar. Isso oferece um caminho concreto do design até um app que você pode continuar desenvolvendo. Também há exportação para o Figma, com texto editável, camadas nomeadas e layout automático. Então, se você ou sua equipe já trabalham no Figma, pode levar o design para lá e continuar refinando-o. Você também pode passar para o AI Studio para obter um resultado compartilhável. Exporte

10:54 para o Antigravity para implementar ou publique pelo Netlify. Há bastante flexibilidade sobre o próximo destino do projeto. Agora, para quem usa coding agents, há outra opção útil: a integração do Stitch com MCP. O MCP permite que seu agent acesse projetos do Stitch por meio de ferramentas. As operações disponíveis incluem listar projetos, ler telas, gerar designs, solicitar edições e criar variações. Assim, você pode pedir ao agent que trabalhe diretamente com um projeto específico do Stitch, o que é útil quando pretende continuar alternando entre design e implementação para

11:25 configurar a conexão com a API key. Abra as configurações do Stitch, encontre “API keys” e crie uma chave. Depois, siga as instruções de configuração do Google para sua ferramenta de programação. Mantenha a chave privada e fora do código de frontend do seu app. Por exemplo, no Antigravity, abra o menu do painel do agent, depois “MCP servers”, “Manage MCP servers” e “View raw config”. Adicione a configuração do Stitch que está na documentação e forneça sua chave. Depois de conectar, peça primeiro ao agent para listar seus projetos do Stitch. Em seguida, indique o Frame Desk e peça para inspecionar as telas selecionadas

11:55 antes de implementá-las. Assim, você tem uma forma simples de conferir se ele está lendo o projeto pretendido. O Google também publica skills do Stitch para workflows de design e desenvolvimento, além de uma CLI e um SDK para quem quer automatizar o processo. Você pode começar pelo navegador e usar essas opções quando seu workflow precisar delas. Então, o que acho de tudo isso para um desenvolvedor solo ou uma equipe pequena? O lado útil é poder tomar decisões de design desde o começo. Você pode comparar propostas, trabalhar nas telas principais e dar à sua ferramenta de programação um alvo visual específico. A maior dica que eu daria é dedicar tempo às revisões. Escolha uma direção, corrija os

12:26 pontos fracos e aplique esse sistema de design ao restante do app. É assim que você aproveita muito mais do que uma única tela gerada. E o preço facilita experimentar. O Stitch é gratuito e oferece créditos diários. Quaisquer assinaturas de ferramentas de programação ou serviços de hospedagem que você escolher depois são cobradas à parte. Na minha opinião, este é um dos produtos mais úteis do Google para quem está criando interfaces. A combinação de exploração visual, regras de design reutilizáveis, prototipagem e entrega de código faz valer a pena testá-lo em um projeto real. Pegue uma tela de um app que queira criar, dê ao Stitch uma descrição clara, faça algumas revisões deliberadas e leve o

12:57 resultado para o seu workflow de desenvolvimento. É aí que você pode avaliar se ele economiza seu tempo. No geral, é bem legal. Enfim, conte nos comentários o que achou. Se gostou deste vídeo, considere fazer uma doação pela opção Super Thanks [música] ou virar membro clicando no botão “Join”. Além disso, deixe seu gostei neste vídeo [música] e inscreva-se no meu canal. Vejo você no próximo vídeo. Até lá, tchau.

Transcrição original

[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.