Google acabou de corrigir o design com IA ao lançar isto

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 Just Fixed AI Design By Releasing This · Canal: AI LABS · 13:22 · Assistir no YouTube

Tópicos: Agentes de IA, Avaliação e benchmarks de IA, Engenharia de software com IA, Geração de conteúdo com IA

Resumo

O vídeo apresenta a CLI do Stitch, que permite a agentes como Claude Code criar designs sem a configuração anterior do MCP no Google Cloud. A equipe demonstra um workflow que combina Stitch, skills e arquivos de orientação para planejar, criar e implementar um site com narrativa ao rolar a página. Em seguida, revisa o site em diferentes tamanhos de tela e ajusta as animações com uma avaliação focada na qualidade da experiência. O processo termina com uma nova revisão para melhorar o ritmo, a fluidez e a legibilidade do site.

Pontos-chave

A CLI do Stitch facilita o uso da ferramenta por agentes e carrega as ferramentas no contexto apenas quando necessário.
A skill do Stitch orienta o agente sobre como usar a ferramenta e trabalhar com o arquivo design.md.
A skill scroll-telling ajuda a criar animações e uma narrativa que se desenrola conforme a pessoa rola a página.
O arquivo brief.md registra a ideia e a sequência da história do site para manter os designs coerentes.
Claude Code pode gerar e comparar várias versões de design no Stitch antes de implementar o site.
Uma revisão com capturas de tela ajuda a identificar problemas de responsividade em celulares e tablets.
A revisão de design verifica a aparência, enquanto a story review avalia a narrativa, as animações e a legibilidade.
Animações em excesso podem prejudicar a experiência, mesmo quando cada efeito parece bom isoladamente.

Capítulos

Início	Capítulo	Resumo
00:00	Stitch e a nova CLI	O vídeo apresenta a CLI do Stitch e explica como ela facilita o uso da ferramenta por agentes.
02:32	Preparação do projeto e skills	A equipe instala a CLI e as skills do Stitch e de scroll-telling, além de preparar o arquivo brief.md.
06:07	Geração e implementação dos designs	Claude Code usa o brief para gerar versões no Stitch, e o design escolhido é transformado em um site.
09:15	Revisão do design e responsividade	Uma skill compara o site com o design original e verifica capturas de tela em diferentes tamanhos de tela.
10:48	Animações e narrativa ao rolar	A skill scroll-telling adiciona movimento e efeitos que fazem a história avançar conforme a página é rolada.
12:20	Revisão da experiência e encerramento	A story review avalia a narrativa, o ritmo e as animações, e o vídeo apresenta os recursos disponíveis no AI Labs Pro.

Citações

O Google lançou uma ferramenta CLI para o Stitch, então agentes podem usá-lo sem passar pela configuração do Google Cloud. — 01:32

Quando cada prompt vem de uma ideia escrita, todos os designs acabam seguindo essa ideia. — 05:07

O site que Claude construiu a partir do design do Stitch pode estar faltando algo, mesmo que pareça bom à primeira vista. — 09:15

A primeira revisão verificou se o site correspondia ao design do Stitch, mas a story review verifica se o site é realmente bom. — 12:20

Conceitos e entidades

Stitch (ferramenta): Ferramenta de design do Google que usa modelos Gemini para gerar interfaces de sites e aplicativos.
Claude Code (ferramenta): Ferramenta usada no vídeo para acionar o Stitch, implementar o site e revisar o resultado.
Gemini (modelo): Família de modelos que o Stitch usa para gerar designs.
Google (empresa): Empresa responsável pelo Stitch e pela CLI apresentada no vídeo.
MCP (conceito): Integração mencionada como uma forma anterior de permitir que agentes interajam com o Stitch.
scroll-telling (ferramenta): Skill que orienta a criação de sites cuja narrativa e animações se desenvolvem durante a rolagem.
brief.md (conceito): Arquivo que registra a ideia, a história e os requisitos do site para orientar os designs.
WhisperFlow (ferramenta): Ferramenta de conversão de voz em texto apresentada como patrocinadora do vídeo.
AI Labs Pro (empresa): Comunidade do canal AI LABS onde, segundo o vídeo, estão disponíveis as skills e outros recursos criados.

Tradução completa (pt-BR)

00:00 Stitch é uma das principais ferramentas de design disponíveis, e agora o Google corrigiu justamente o que dificultava seu uso com agents. Agora, Stitch funciona diretamente no seu terminal, então agents de IA como Claude code podem criar o design do seu site no Stitch para você. Usar os dois juntos tornou o processo de design muito melhor, e seus designs não ficam mais parecidos com os de todo mundo. Então, criamos um workflow completo em torno de Claude code e Stitch e o usamos para fazer um site completo. Esse workflow combina as próprias ferramentas do Stitch com outra skill que deixa o site imersivo, mas o site ainda tinha problemas que Claude

00:30 e Stitch não perceberam sozinhos. Por isso, o workflow tem uma etapa que detecta esses problemas antes de o site ficar pronto. Então, se você chegou agora, somos uma empresa de software, e este é o nosso canal, AI labs. Neste vídeo, vamos mostrar como usar a nova atualização do Stitch para criar um design e, depois, explicar cada etapa em detalhes, para que você também possa criar um site como este. Agora, esta seção é sobre o que é Stitch e como usá-lo. Então, se você já sabe disso, pode avançar direto para o workflow usando o marcador de tempo na descrição abaixo. Stitch é basicamente um produto de design

01:01 do Google que temos usado bastante em nossos vídeos anteriores. Ele usa modelos Gemini para gerar designs tanto para seus aplicativos móveis quanto para sites, e seus designs são muito mais refinados do que aquilo que esses modelos criam sozinhos. Ele também tem o modelo de geração de imagens do Google integrado, então pode usá-lo diretamente para gerar imagens e adicioná-las aos seus designs. Ele tem muitos recursos, como importar arquivos design.md de outros sites e experimentar versões diferentes a partir do mesmo prompt. Mas o problema com Stitch era que ele era apenas um aplicativo de design. Então, você precisava abri-lo e escrever o prompt por conta própria

01:32 e, depois, exportar os designs para o agent de programação com que estava criando seu aplicativo. Stitch lançou um MCP, para que agents pudessem enviar prompts para ele, mas configurá-lo exigia várias etapas no Google Cloud. Para facilitar a configuração, o Google lançou uma ferramenta CLI para Stitch, então agora os agents podem usá-lo sem precisar passar pela configuração do Google Cloud. Essa CLI é muito mais fácil de configurar, e vamos mostrar como daqui a pouco. Ela também usa menos tokens porque Claude só carrega a ferramenta no contexto quando realmente precisa dela, ao contrário do MCP, que permanece no contexto o tempo todo. Só para você saber,

02:02 você também pode usar Stitch por conta própria. Basta abri-lo e escolher entre mobile e web. Depois, diga o que quer criar. Stitch cuida do resto e cria o design com base no seu prompt. Se não gostar do design, você pode clicar nele e pedir ao Stitch para alterá-lo ou criar mais algumas versões. E, quando o design estiver do jeito que você quer, pode baixá-lo como código e criar seu site a partir dele. Mas, se estiver seguindo este workflow, não precisará escrever o prompt para Stitch por conta própria, porque vamos fazer Claude code enviar prompts ao Stitch pela CLI e criar os designs. Usar Claude code para enviar prompts ao Stitch é melhor porque Stitch não

02:32 permite usar skills, mas Claude permite. Assim, você pode criar um workflow completo em torno do Stitch que use suas skills e outras ferramentas. Por isso, também estamos usando algumas outras skills para criar um site inteiro, do começo ao fim. Então, o primeiro passo desse workflow é preparar o projeto para o tipo de site que queríamos criar. E, para isso, vamos usar este site como exemplo. Para criar um site como este, a primeira coisa que você precisa fazer é instalar a CLI do Stitch. Para instalá-la, basta copiar o comando de instalação e executá-lo no seu terminal. Depois que Stitch estiver instalado, você precisa executar o comando de login, que abre um navegador onde você

03:04 faz login na sua conta do Google. Depois disso, você estará conectado ao Stitch e poderá usar as ferramentas dele. Mas estar conectado não basta, porque seu agent não fica sabendo que a nova ferramenta do Stitch existe só por você instalá-la. Para explicar como usar essa ferramenta, você precisa adicionar a skill do Stitch, que informa ao seu agent que a ferramenta está disponível e como usá-la bem. Você pode instalar a skill com o comando de instalação, mas também precisa mencionar a pasta dot Claude junto com o comando. Isso porque Claude só carrega skills da pasta dot Claude, mas o comando coloca a skill em outra pasta que Claude não verifica. Então, se você não

03:35 mencionar a pasta dot Claude, ele não conseguirá carregar a skill quando você enviar um prompt e só a procurará quando você pedir isso no próprio prompt. Então, com essa parte adicionada, depois que você executar o comando, a skill do Stitch estará na pasta dot Claude do seu projeto. Essa skill contém guias que o agent consulta. Há um guia sobre design.md, e Stitch usa esse arquivo para manter as mesmas cores e fontes em todos os designs. Há também uma lista de termos de design que transforma nossos prompts simples em prompts detalhados. Além desses guias, a skill inclui um workflow que cria o arquivo design.md

04:06 e o mantém sincronizado com seu projeto do Stitch, além de outro workflow que compara o site em execução com o arquivo design.md. Depois de instalar a skill do Stitch, você também precisa adicionar mais uma skill. Isso porque estávamos criando um site que conta sua história à medida que você rola a página, e Claude e Stitch não conseguem fazer isso sozinhos. Então, adicionamos uma skill chamada scroll-telling, que contém as etapas para criar essas histórias durante a rolagem e deixa o site muito melhor. Ela aborda os efeitos de rolagem necessários para esse tipo de site, além de um guia detalhado sobre animação. E adicionamos a skill scroll-telling desde o início porque Claude code seria quem

04:36 enviaria prompts ao Stitch, e queríamos que esses prompts usassem a skill. Depois da instalação, a skill scroll-telling fica na mesma pasta dot Claude que a skill do Stitch. Assim, as duas skills estarão prontas para Claude code quando começar a enviar prompts ao Stitch. Mas, antes de avançarmos para a próxima etapa, seria ótimo se você se inscrevesse no canal e apertasse o botão de hype. Esse pequeno gesto de apoio significa muito para nós. Agora, com a skill scroll-telling pronta, há mais uma etapa que você precisa seguir antes de criar o site. Como Claude code é quem envia prompts ao Stitch, Claude precisa ter toda a ideia do site escrita, junto com a ordem

05:07 da história que o site conta enquanto você rola a página. Assim, sempre que Claude enviar um prompt ao Stitch, saberá exatamente o que pedir. Escrever a ideia também ajuda a resolver um problema do Stitch. O estilo do Stitch muda de um design para o seguinte, então os designs nem sempre combinam. Mas, quando todos os prompts vêm de uma única ideia escrita, todos os designs acabam seguindo essa ideia. Então, o próximo passo é pedir a Claude code que escreva essa ideia em um arquivo chamado brief.md. Para fazer isso, você precisa contar a ele sobre o site que quer criar e pedir que entreviste você a respeito. No nosso prompt,

05:37 também dissemos a ele que continuasse fazendo perguntas até entender completamente a ideia e não ter mais nada a perguntar, oferecendo algumas opções para escolher em cada pergunta. Assim, vocês planejam o site juntos, e cada resposta vai para brief.md. Então, quando você envia esse prompt, Claude começa a fazer perguntas como que história o site deve contar, que sensação deve transmitir e para que o site realmente serve. Quando Claude não tem mais nada a perguntar, ele escreve brief.md e o salva na pasta do seu projeto. Esse brief começa com um breve resumo e, em seguida, explica toda a história do site, passo a

06:07 etapa, junto com todos os outros detalhes que dão forma ao site. Quando isso estiver pronto, Claude terá o que precisa para começar a pedir designs ao Stitch, então você poderá passar para a próxima etapa. Agora, seu briefing está pronto, e a próxima etapa é usar o Stitch para criar seus designs. Para isso, você precisa pedir ao Claude que envie um prompt ao Stitch e diga para usar brief.md como guia. Você também precisa pedir que ele crie várias versões diferentes do design, para que você possa escolher a que mais se aproxima do que quer. Quando você envia esse prompt, Claude começa carregando a skill do Stitch que instalamos e lendo todas as instruções. Primeiro, ele cria um projeto no Stitch

06:40 e envia a descrição de brief.md. Depois, pede ao Stitch diferentes versões e verifica cada design. Se Claude encontrar um problema no design, envia outro prompt ao Stitch para obter uma versão melhor. Como Claude continua verificando e corrigindo os designs, essa etapa inteira demora bastante. Mas, quando você abrir o Stitch, verá um conjunto completo de designs para o seu site. Todos são versões do mesmo design, e cada uma corrige o problema que havia na versão anterior. No nosso caso, Claude criou oito designs porque, toda vez que encontrava um problema em um design, pedia uma nova versão ao Stitch. Então, Claude continua tentando novas versões até que o design fique bom

07:11 o suficiente. Quando esses designs estiverem prontos, você poderá visualizar cada um diretamente no Stitch para ver como fica antes de construir qualquer coisa. A prévia mostra a aparência do design tanto na tela de um computador quanto na de um celular. Mas o design no Stitch não tem animações: são apenas imagens estáticas, sem efeitos de rolagem. Isso porque vamos adicionar as animações mais tarde no Claude Code. Então, se um design não estiver bom o suficiente, peça ao Claude que envie outro prompt ao Stitch e continue aprimorando-o até chegar ao que você quer. Quando estiver satisfeito com os designs, a próxima etapa é adicioná-los ao seu projeto, para que Claude Code possa construir o site de verdade a partir deles. Mas, primeiro,

07:43 vamos falar um pouco do nosso patrocinador, WhisperFlow. Se você cria com IA, passa o dia digitando prompts no Claude e no Cursor, e digitar é a parte lenta. WhisperFlow é uma ferramenta de voz para texto que permite simplesmente falar, transformando a maneira natural como você fala em prompts bem escritos, prontos para enviar, diretamente nos aplicativos que você já usa. Nós usamos no Claude e no Cursor sem nenhuma configuração e sem precisar ativar nada. A verdadeira mágica está no que ele faz com uma fala desorganizada. Disparamos um prompt longo, mudamos de ideia no meio, deixamos escapar algumas palavras de preenchimento, e WhisperFlow organizou tudo, manteve

08:14 a correção e até escreveu corretamente os nomes das nossas bibliotecas e funções. Aquelas coisas que a função de ditado integrada sempre estraga. Um prompt que levaria 2 minutos para digitar ficou pronto em cerca de 20 segundos. WhisperFlow é gratuito, e nosso link dá a você um mês de WhisperFlow Pro com palavras ilimitadas. O link e o código estão na descrição e no comentário fixado. Então, quando o design no Stitch estiver pronto, finalmente será hora de transformá-lo em um site de verdade. Para isso, basta pedir ao Claude Code que coloque esse design no seu projeto. E essa parte é fácil porque o Stitch é uma nova ferramenta que já consegue

08:45 entregar cada design ao Claude Code como uma página da web mais uma imagem dele, e Claude consegue ler os dois. Então, quando você pedir ao Claude para construir o site, ele usará a ferramenta do Stitch para baixar cada design, junto com suas imagens e fontes. Depois disso, começa a construir o site no seu projeto. Então, quando Claude terminar de construir, ao abrir o site no navegador, você verá que o design que visualizou no Stitch agora está no site. Mas, neste ponto, o site provavelmente também terá algumas animações pequenas que não estavam no design do Stitch, como imagens que aumentam um pouco de tamanho. Elas vêm

09:15 do Claude, porque ele costuma adicionar animações simples como essas por conta própria. Mas essas animações pequenas não são as grandes animações de rolagem que queríamos. Então, vamos adicionar as grandes mais tarde. Agora, antes de adicionarmos as animações que contam a história conforme você rola a página, há mais uma coisa que você precisa fazer: revisar o site comparando-o com o design. Essa revisão é necessária porque pode estar faltando algo no site que Claude construiu a partir do design do Stitch, mesmo que ele pareça bom o suficiente à primeira vista. Quando testamos isso, os sites que Claude construiu a partir dos designs do Stitch ficaram bons em um computador, mas apresentaram problemas em um celular. Isso aconteceu porque o Stitch criou nosso design

09:46 apenas para a tela de um computador. Então, ninguém havia verificado a aparência do site em um celular. Para resolver isso, pedimos ao Claude que criasse uma skill de revisão do Stitch. A skill compara o site que Claude construiu com o design original no Stitch e também verifica se o site funciona em celulares e tablets. Para verificar essas telas menores, a skill faz capturas de tela do site em diferentes tamanhos de tela. Assim, Claude consegue ver a aparência do site em todas as telas, não apenas em um computador. Também adicionamos um link para a skill de revisão do Stitch ao arquivo claude.md do projeto. Assim, não importa onde você execute a revisão, ela sabe qual

10:17 projeto usar como referência. Com tudo pronto, executamos o comando de revisão do Stitch. Claude carregou a skill de revisão do Stitch e obteve o design original do Stitch. Depois, fez capturas de tela para ver a aparência do site. No final, Claude nos entregou um relatório. O relatório cobriu todos os tamanhos de tela e listou os problemas, começando pelos mais graves. Então, pedimos ao Claude que corrigisse todos esses problemas, e ele atualizou o site para deixá-lo mais parecido com o design e com uma aparência melhor. É por isso que essa etapa de revisão é muito importante. Ela garante que o site construído por Claude corresponda ao design original. Mas a revisão só verifica a aparência do site

10:48 e não o seu comportamento, então não consegue nos dizer se algo dará errado mais tarde. Vamos verificar isso quando o site começar a se mover. Portanto, a próxima etapa é adicionar as animações de rolagem. Agora, finalmente chegou a hora de fazer o site se mover, e talvez você se lembre de que instalamos a skill de narrativa com rolagem no começo. Essa skill ensina Claude a fazer as coisas se moverem e aparecerem conforme você rola a página. Assim, o site conta sua história passo a passo. Então, é essa a skill que usamos. Pedimos ao Claude Code que usasse a skill de narrativa com rolagem para criar as animações, e Claude alterou cuidadosamente todas as partes do site e fez o site estático

11:19 se mover. Essa tarefa demora bastante, mas, quando Claude terminou, o site inteiro havia mudado, e cada parte da história fluía suavemente para a seguinte. Para chegar a esse resultado, Claude usou imagens e movimentos, como um tremor no início, para fazer o site inteiro parecer uma viagem pelo espaço. Também fez as estrelas no fundo do nosso site espacial passarem rapidamente sempre que você rola a página. Além das estrelas, Claude adicionou um indicador que mostra em que capítulo da história você está. Depois, na parte da página que mostra a linha do tempo, a página se move para os lados conforme você rola, embora o restante do site se mova

11:49 para cima e para baixo. Nenhum desses efeitos estava na versão anterior às animações. E, como já havíamos garantido na etapa de revisão que o design funcionava em todos os tamanhos de tela, todas essas animações também funcionavam em celulares e tablets, não apenas em um computador. Mas funcionar em todas as telas não significa que o site tenha uma aparência adequada. Então, quando as animações estiverem prontas, você precisa verificá-las com cuidado. Isso porque Claude tende a adicionar muitas animações, e animações demais podem cansar a vista, mesmo quando cada uma parece boa por si só. Vimos isso com as estrelas criadas por Claude. Elas pareciam boas, mas, quando rolávamos rápido, tantas estrelas

12:20 passavam que era demais para os olhos. Para resolver isso, pedimos ao Claude que criasse outra skill de revisão, chamada revisão da história. A primeira revisão verificava se o site correspondia ao design do Stitch, mas a skill de revisão da história verifica se o site é realmente bom. Para isso, ela verifica se a história flui de uma parte para a seguinte e se cada animação ajuda a contar a história. Também verifica a velocidade dos acontecimentos conforme você rola a página e se o texto do site é agradável de ler. Depois, avalia tudo isso com base na ideia que escrevemos em brief.md no começo. E dissemos à skill de revisão da história para ser bem rigorosa com o site e avaliá-lo

12:51 como os melhores sites de design premiados. Quando a skill de revisão da história termina, ela gera um relatório com todos os problemas encontrados. Para cada parte da história, o relatório diz se aquela parte funciona ou precisa de mais trabalho. Em seguida, classifica os problemas por gravidade, para que os mais sérios apareçam primeiro. Então, você pode pedir ao Claude que corrija todos esses problemas, e o Claude começa a fazer as alterações. Quando o Claude termina, você percebe uma grande diferença na aparência e no movimento do site. As animações ficam mais suaves e dão menos saltos, e há menos estrelas, então o site fica muito mais agradável aos olhos. Agora, todas as skills que criamos neste

13:22 vídeo, junto com outros recursos, estão disponíveis no AI Labs Pro, que é a nossa comunidade. Então, se você encontrou valor no que fazemos e quer apoiar o canal, essa é a melhor maneira de fazer isso. O link está na descrição. E assim chegamos ao fim deste vídeo. Se quiser apoiar o canal e nos ajudar a continuar fazendo vídeos como este, você pode fazer isso usando o botão Super Thanks abaixo. Como sempre, obrigado por assistir e até o próximo vídeo.

Transcrição original

[00:00] Stitch is one of the top design tools out there, and Google has now fixed the one thing that made it hard to use with agents. Stitch now works right from your terminal, so AI agents like Claude code can design your site in Stitch for you. Using the two together made designing so much better, and your designs don’t look like everyone else’s anymore. So, we built a whole workflow around Claude code and Stitch and used it to make a complete site. That workflow combines Stitch’s own tools with another skill that makes the site feel immersive, but the site still had problems that Claude

[00:30] and Stitch didn’t notice on their own. That’s why the workflow has a step that catches those problems before the site is done. So, if you’re new here, we’re a software company, and this is our channel AI labs. And in this video, we’re going to show you how to use Stitch’s new update to build a design and then explain every step in detail so that you can also build a site like this as well. Now, [snorts] this section is about what Stitch is and how to use it. So, if you already know that, you can skip ahead directly to the workflow using the timestamp in the description down below. Stitch is basically a design

[01:01] product by Google that we’ve been using a lot in our previous videos. It uses Gemini models to generate designs for both your mobile apps and websites, and its designs are much more refined than what these models make on their own. It also has Google’s image generation model built in, so it can use that directly to generate images to add in your designs. It has a lot of features like importing design.md files from other sites and trying different versions from the same prompt. But, the problem with Stitch was that it was only a design app. So, you had to open it and prompt it yourself

[01:32] and then export the designs to the coding agent you were building your app with. Stitch did release an MCP, so agents could prompt it, but setting it up took a lot of steps on Google Cloud. To make the setup easier, Google has released a CLI tool for Stitch, so agents can now use it without having to go through the Google Cloud setup. This CLI is much easier to set up, and we’ll show you how in a bit. It also uses fewer tokens because Claude only loads the tool into context when it actually needs it, unlike MCP, which stays in the context all the time. Just so you know,

[02:02] you can still use Stitch on its own as well. You just need to open it and choose between mobile and web. Then you tell it what you want to build. Stitch handles the rest and builds the design from your prompt. If you don’t like the design, you can click on it and ask Stitch to change it or make a few more versions of it. And when the design looks right, you can download it as code and build your site from it. But if you’re following this workflow, you won’t need to prompt Stitch yourself because we’re going to have Claude code prompt Stitch through its CLI and build the designs. Using Claude code to prompt Stitch is better because Stitch doesn’t

[02:32] let you use skills, but Claude does. So, you can build a whole workflow around Stitch that uses your skills and other tools. That’s why we’re also using a few other skills to build a whole site from start to end. So, the first step of that workflow is to get the project ready for the kind of site we wanted it to build. And for that, let’s take this site as an example. To build a site like this, the first thing you need to do is install Stitch’s CLI. To install it, you just need to copy the install command and run it in your terminal. Once Stitch is installed, you need to run the login command, which opens a browser where you

[03:04] log into your Google account. Once you do that, you’re logged into Stitch and you can use its tools. But being logged in isn’t enough on its own because your agent doesn’t know Stitch’s new tool exists just by installing it. To tell it how to use this tool, you need to add the Stitch skill, which tells your agent the tool is there and how to use it well. You can install the skill with the install command, but you also need to mention the dot Claude folder along with the command as well. That’s because Claude only loads skills from the dot Claude folder, but the command puts the skill in a different folder that Claude doesn’t look at. So, if you don’t

[03:35] mention the dot Claude folder, it won’t be able to load skill when you prompt it and would only look for it when you ask it in your prompt. So, with that part added, once you run the command, the Stitch skill is now in the dot Claude folder in your project. This skill has guides that the agent reads. There’s a guide on design.md and Stitch uses that file to keep the colors and fonts the same in every design. There’s also a list of design words that turns our simple prompts into detailed ones. Along with these guides, the skill has a workflow that writes the design.md file

[04:06] and keeps it matched with your Stitch project and another that checks your running site against the design.md file. With the Stitch skill installed, you also need to add one more skill. That’s because we were building a site that tells its story as you scroll and Claude and Stitch can’t do that on their own. So, we added a skill called scroll-telling and it has the steps for building these scroll stories, which makes the site much better. It covers the scroll effects this kind of site needs along with a detailed guide on animation. And we added the scroll-telling skill from the start because Claude code would be the one

[04:36] prompting Stitch and we wanted those prompts to use the skill. After the install, the scroll-telling skill is in the same dot Claude folder as the Stitch skill. So, both skills are ready for Claude code when it starts prompting Stitch. But, before we move on to the next step, it would be great if you subscribe to the channel and hit the hype button. This small gesture of support goes a long way for us. Now, with the scroll-telling skill ready, there’s one more step you need to take before you build the site. Because Claude code is the one prompting Stitch, so Claude needs the whole idea of the site written down along with the order

[05:07] of the story the site tells as you scroll. That way, every time Claude prompts Stitch, Claude knows exactly what to ask for. And writing the idea down also helps with the problem Stitch has. Because Stitch’s style changes from one design to the next, so the designs don’t always match. But, when every prompt comes from one written idea, all the designs end up following it. So, the next step is to ask Claude code to write that idea into a file called brief.md. To do that, you need to tell it about the site you want to build and ask to interview you about it. In our prompt,

[05:37] we also told it to keep asking questions until it fully understood the idea and had nothing left to ask with a few options to choose from for each question. That way, you plan the site together, and every answer goes into brief.md. So, when you send that prompt, Claude starts asking things like what story the site should tell and how it should feel, along with what the site is really for. When Claude has nothing left to ask, it writes brief.md and saves it in your project folder. That brief opens with a short summary and then explains the whole story of the site step by

[06:07] step, along with every other detail that shapes the site. Once that’s done, Claude has what it needs to start prompting Stitch for the designs, so you can move on to the next step. Now, your [snorts] brief is ready, and the next step is to use Stitch to create your designs. To do that, you need to ask Claude to prompt Stitch and tell it to use brief.md as its guide. You also need to tell it to create several different versions of the design, so you can pick the one that’s closest to what you want. When you send that prompt, Claude starts by loading the Stitch skill we installed and reading all of its instructions. First, it creates a project in Stitch

[06:40] and sends it the description from brief.md. Then, it asks Stitch for different versions and checks each design. If Claude finds a problem with the design, Claude prompts Stitch again for a better one. Because Claude keeps checking and fixing the designs, this whole step takes a long time. But, when you open Stitch, you’ll see a whole set of designs for your site. They’re all versions of the same design and each fixing the issue there was in a previous version. In our case, Claude made eight designs because every time Claude found a problem with a design, it asked Stitch for a new one. So, Claude keeps trying new versions until the design is good

[07:11] enough. When those designs are ready, you can preview each one right inside Stitch to see how it looks before you build anything. The preview shows how the design looks on both a computer screen and a phone. But, the design in Stitch isn’t animated and it’s just still images with no scrolling effects. That’s because we’ll be adding the animations later in Claude code. So, if a design isn’t good enough, ask Claude to prompt Stitch again and keep improving it until it’s the one you want. Once you’re happy with the designs, the next step is to add them to your project, so Claude code can build the real site from them. But first,

[07:43] let’s have a word by our sponsor, WhisperFlow. If you build with AI, you’re typing prompts into Claude and Cursor all day, and typing is the slow part. WhisperFlow is a voice-to-text tool that lets you just talk instead, and it turns the way you naturally speak into clean, ready to send text prompts right inside the apps you already use. We used it in Claude and Cursor with no setup and nothing to switch on. The real magic is what it does with a messy voice. We rattled off a long prompt, changed our mind halfway through, let a few filler words slip in, and WhisperFlow cleaned all of it up, kept

[08:14] the correction, and even spelled our library and function names right. The stuff built-in dictation always butchers. A prompt that would have taken 2 minutes to type was done in about 20 seconds. WhisperFlow is free to use, and our link gets you a month of WhisperFlow Pro with unlimited words. The link and code are in the description and pinned comment. So, once [snorts] the design and Stitch is done, it’s finally time to turn it into a real site. To do that, you just ask Claude Code that design into your project. And that part is easy because Stitch is new tool can already

[08:45] hand each design to Claude Code as a web page plus a picture of it, and it can read both. So, once you ask Claude to build the site, it uses the Stitch tool to download every design along with its images and fonts. After that, it starts building the site in your project. Then, when Claude is done building, when you open the site in your browser, and you’ll see that the design you previewed in Stitch is now there on the site. But at this point, the site will probably also have a few small animations that weren’t in the Stitch design, like images that zoom in a little. These come

[09:15] from Claude because it usually adds simple animations like these on its own. But these small animations aren’t the big scroll animations we were aiming for. So, we’ll add those big ones later. Now, before we add the animations that tell the story as you scroll, there’s one more thing you need to do, and that is review the site against the design. You need this review because the site Claude built from the Stitch design might be missing something, even if it looks good enough at first. When we were testing this, the sites Claude built from Stitch designs looked good on a computer, but they broke on a phone. That’s because Stitch made our design

[09:46] for a computer screen only. So, nothing had checked how the site looks on a phone. So, to fix that, we had Claude make a Stitch review skill for us. The skill checks the site Claude built against the original design in Stitch, and it also checks that the site works on phones and tablets. To check those smaller screens, the skill takes screenshots of the site at different screen sizes. That way, Claude can see how the site looks on every screen, not just on a computer. We also added a link to the Stitch review skill in the projects claude.md file. So, wherever you run the review, it knows which

[10:17] project to check against. With that ready, we ran the Stitch review command. Claude loaded the Stitch review skill and got the original design from Stitch. Then, it took screenshots to see how the site looked. At the end, Claude gave us a report. The report covered every screen size and listed the problems with the worst ones first. So, we asked Claude to fix all of those problems, and it updated the site so it matched the design more closely and looked better. That’s why this review step is really important. It makes sure the site Claude built matches the original design. But, the review only checks how the site

[10:48] looks, not how it behaves, so it can’t tell us if something will go wrong later. We’ll check that once the site starts moving. So, the next step is adding the scroll animations. So, now it’s finally time to make the site move, and you might remember that we installed the scroll-y telling skill at the start. That skill tells Claude how to make things move and appear as you scroll. So, the site tells its story one step at a time. So, that’s the skill we use. We asked Claude code to use the scroll-y telling skill to build the animations, and Claude carefully changed every part of the site and made the still site

[11:19] move. This task actually takes a really long time, but when Claude was done, the whole site had changed, and each part of the story now flowed smoothly into the next. To get there, Claude used images and movement like a shake at the start, so the whole site feels like a trip through space. It also made the stars in the background of our space site streak past whenever you scroll. Along with the stars, Claude added a marker that shows which chapter of the story you’re on. Then, in the timeline part of the page, the page moves sideways as you scroll, even though the rest of the site moves

[11:49] up and down. Neither of these was in the version before the animations. And since we had already made sure the design worked on every screen size in the review step, all of these animations also worked on phones and tablets, not just on a computer. But, working on every screen doesn’t mean the site looks right. So, once your animations are done, you need to check them carefully. Because Claude tends to add a lot of animations, and too many animations can be hard on the eyes, even when each one looks good on its own. We saw this with the stars Claude made. They looked good, but when we scrolled fast, so many stars

[12:20] flew by that it was too much to look at. To fix that, we had Claude make another review skill called story review. The first review checked that the site matched the stitch design, but the story review skill checks if the site is actually good. To do that, it checks that the story flows from one part to the next, and that every animation helps tell the story. It also checks how fast things happen as you scroll, and whether the words on the site read well. Then, it judges all of that against the idea we wrote in brief.md at the start. And we told the story review skill to be really tough on the site and judge it

[12:51] like the best design sites on awards. Once the story review skill is done, it gives you a report with every problem it found. For each part of the story, the report says if that part works or needs more work. Then, it sorts the problems by how serious they are, so the worst ones come first. So, you can then ask Claude to fix all of those problems, and Claude starts making the changes. When Claude finishes, you’ll see a big difference in how the site looks and moves. The animations are smoother and don’t jump as much, and there are fewer stars, so the site is much easier on the eyes. Now, all the skills we created in

[13:22] this video, along with other resources, are all available in AI Labs Pro, which is our community. So, if you found value in what we do and want to support the channel, this is the best way to do it. The link’s in the description. That brings us to the end of this video. If you’d like to support the channel and help us keep making videos like this, you can do so by using the Super Thanks button below. As always, thank you for watching and I’ll see you in the next one.