00:00:00O design com IA tem melhorado cada vez mais a cada novo lançamento de ferramenta e atualização de modelo,
00:00:04mas um bom design não nasce de apenas confiar em uma única ferramenta e torcer para que seu app fique ótimo.
00:00:09É sempre a combinação de ferramentas e recursos que aprimora os designs,
00:00:12mas, o mais importante, é usar a ferramenta certa para o propósito certo.
00:00:16O Stitch, a ferramenta de design com IA do Google, acabou de ganhar um upgrade incrível que facilitou muito o design de UI.
00:00:21E a Vercel também lançou recentemente algo que superou a extensão do Claude para o Chrome
00:00:26e agora se tornou minha ferramenta favorita para testes de navegador.
00:00:29Temos muito o que conversar hoje porque eu não esperava que esta
00:00:32combinação entregasse um design tão sólido.
00:00:34O Google Stitch agora está disponível como um MCP para conectar o agente de IA,
00:00:39permitindo que ele crie e gerencie projetos, além de desenvolver designs usando o agente.
00:00:43Com essa atualização, não precisei dar prompts detalhados ao Stitch; deixei o Claude fazer isso
00:00:48por mim. Ele oferece vários recursos, como gerenciamento de projetos e a capacidade de criar novos projetos
00:00:53e recuperar todos os seus projetos ativos. Ele consegue gerenciar projetos usando telas de lista
00:00:57e obtendo projetos e telas. Também permite que o agente crie novos designs a partir de um prompt de texto.
00:01:02O processo de instalação está explicado passo a passo na documentação deles.
00:01:06É necessário instalar o Google Cloud SDK usando curl, mas como estou no Mac,
00:01:11instalei via brew e deixei ele baixar o Google Cloud CLI.
00:01:14Você precisa fazer login duas vezes: uma como usuário e outra como aplicação, porque é preciso
00:01:19conectá-lo a um projeto no Google Cloud para ativar a API do Stitch dentro desse projeto,
00:01:24já que ele usa os recursos desse projeto para criar os designs.
00:01:27Depois de passar por todo o processo, você pode conectar o Stitch a qualquer editor.
00:01:31Como usei o Claude Code, configurei lá dentro e todas as ferramentas ficaram disponíveis.
00:01:35Agora, alguém simplificou todo esse longo processo de configuração e criou um MCP do Stitch,
00:01:41que cuida de tudo. Desde a instalação do Google Cloud até a configuração do projeto,
00:01:45ele resolve tudo sozinho. Mas atenção: é não oficial. É apenas uma ferramenta experimental independente,
00:01:50embora funcione muito bem por enquanto. Não importa o que estejamos construindo,
00:01:54o planejamento antes da implementação é essencial. Eu estava trabalhando em um app de simulado de entrevista técnica
00:01:59que não cobre apenas entrevistas de código. Ele também abrange outros tipos de entrevistas,
00:02:03todas voltadas para cargos na área de tecnologia. Durante o vídeo, encontrei vários problemas na
00:02:08forma como o MCP do Stitch opera e como ele poderia ser melhor utilizado no meu processo de design.
00:02:13Coloquei todas essas regras em um arquivo Claude.md junto com o código-fonte deste app no
00:02:18AI Labs Pro. Para quem não sabe, é nossa comunidade recém-lançada onde reunimos
00:02:23todos os nossos recursos deste vídeo e de todos os anteriores em um só lugar, sejam prompts,
00:02:28nossos comandos reutilizáveis, habilidades que criamos para nossos projetos e muito mais. Se você vê valor no
00:02:33que fazemos e quer apoiar o canal, esta é a melhor forma. Links na descrição.
00:02:38Prefiro planejar meus apps usando o modo de planejamento do Claude Code porque ele itera sobre cada aspecto da
00:02:43ideia genérica que eu dou e escreve um documento detalhado, mas você pode planejar com a IDE de sua preferência.
00:02:48Dei a ideia do meu app para o Claude Code no modo de planejamento e pedi para ele criar um guia de UI,
00:02:53garantindo que a interface não parecesse com aqueles designs genéricos de IA que ele costuma produzir.
00:02:58Embora tenha sido um processo demorado, passei por todo o planejamento. É
00:03:03extremamente importante ler o plano minuciosamente; tive até que refiná-lo ao meu gosto
00:03:09fazendo muitas alterações. Continuei refinando até estar completamente satisfeito
00:03:14e, no fim, tinha um plano exatamente como eu queria. Com o plano de design finalizado no modo de
00:03:19planejamento do Claude, era hora de implementá-lo. Honestamente, prefiro as capacidades de design
00:03:24do Gemini em relação aos modelos do Claude. Então, pedi para o Claude pegar o plano gerado,
00:03:29criar um design exato iniciando um novo projeto através do MCP do Stitch. Ele usou a ferramenta MCP para
00:03:35criar um novo projeto e começou a gerar as seções. Ele identificou o projeto por um
00:03:40ID de projeto e enviou um prompt detalhado para o Stitch, que recebeu o prompt e começou a gerar
00:03:45as telas. Ele usou o Gemini 3 Flash para gerar a primeira seção. Uma coisa que não gostei foi
00:03:50que ele enviou prompts para todas as seções da landing page separadamente em vez de criar um
00:03:55design único e longo, como costumam ser os designs web. Isso poderia ser um problema na hora de
00:04:00implementá-los juntos. Então, pedi para o Claude criar o design de uma página longa em vez de
00:04:05componentes individuais. O Claude produziu um prompt bem detalhado que foi recebido pelo Stitch e usado para
00:04:10gerar toda a landing page, mantendo intactas todas as ideias da abordagem anterior por seções.
00:04:15No design, gostei muito de como ele usou referências como comentários e comandos de terminal para
00:04:20dar um ar mais familiar para desenvolvedores.
00:04:25Usei o recurso de visualização do Stitch para ver como a UI ficava em diferentes plataformas e ele implementou efeitos suaves de hover.
00:04:30O design era responsivo e funcionou bem tanto no celular quanto no desktop.
00:04:34Uma vez satisfeito com o design que o Stitch gerou, quis movê-lo para o meu projeto Next.js,
00:04:40onde eu estava construindo o app inteiro usando o Claude Code. Pedi para o Claude usar o MCP do Stitch para pegar o código da
00:04:45landing page completa e implementá-lo no novo projeto Next.js que eu estava iniciando.
00:04:51Ele usou a ferramenta “get screen” para buscar as telas. Essa ferramenta retornou links para download do código,
00:04:56então o Claude usou comandos curl nesses links para extrair o código.
00:05:01Com o HTML em mãos, ficou fácil integrá-lo ao projeto Next.js existente.
00:05:06Ele começou a integrar o design no app, mas só fez mudanças no arquivo page.tsx principal,
00:05:11jogando tudo em um único arquivo e não seguindo uma estrutura de componentes adequada,
00:05:17que é o padrão recomendado para aplicações baseadas em React.
00:05:22Por enquanto, rodei o servidor de desenvolvimento para ver como ficou a UI implementada.
00:05:26O design implementado estava quase idêntico ao gerado pelo Stitch, exceto pela posição do texto no hero.
00:05:31Ele implementou todos os efeitos de hover, adicionou animações para bento grids e rolagem parallax no fundo.
00:05:36Para consertar aquele amontoado de código em um só arquivo, pedi para o Claude usar uma estrutura
00:05:41de componentes adequada para melhor modularidade. Ele refatorou e reorganizou tudo em um
00:05:46conjunto limpo e bem estruturado de componentes e páginas, facilitando a navegação.
00:05:51Com a ajuda do Claude Code e do Stitch, criei uma aplicação completa com um tema que incorporava
00:05:57a vibe de desenvolvedor com estética de terminal. No entanto, ainda havia alguns problemas de UI.
00:06:02Por exemplo, o painel de código deveria ser editável, pois é lá que os usuários digitarão o código nas sessões.
00:06:08Além disso, a pergunta deveria aparecer no topo, pois a posição atual cria uma UX ruim para quem usa o app.
00:06:14Para testar a aplicação, usei o Agent Browser da Vercel. Esta é uma ferramenta de CLI feita para agentes de IA,
00:06:19construída em Rust e Node.js, o que a torna significativamente mais rápida que ferramentas tradicionais de automação.
00:06:24A instalação é simples: basta rodar o comando de install e ela é instalada globalmente no seu sistema.
00:06:29Por enquanto, ela é limitada a navegadores baseados em Chromium e não está disponível para Firefox ou Safari.
00:06:34O Agent Browser oferece recursos melhores que a extensão do Claude, Playwright, Puppeteer ou outras ferramentas de dev.
00:06:40Isso porque a extensão do Chrome depende de rodar um navegador completo, tirar prints,
00:06:44mapear pixels visualmente e então navegar pela interface. Já o Agent Browser
00:06:50é uma ferramenta de CLI que roda como comandos bash e trabalha com snapshots em vez de capturas de tela.
00:06:55Basicamente, um snapshot é uma árvore de acessibilidade de toda a página com seletores
00:07:00para identificar componentes individuais. O agente usa esses seletores para navegar com eficiência.
00:07:05Ele não compartilha a sessão com seu navegador atual e roda em uma instância separada,
00:07:10então não poderá realizar ações que exijam suas sessões ativas, ao contrário da extensão do Claude,
00:07:14que roda dentro do seu próprio navegador e pode agir em seu nome.
00:07:19Se quiser ver os comandos disponíveis, confira o repositório no GitHub, que tem a lista detalhada.
00:07:24Lá mostra como navegar na UI, usar seletores, simular o mouse, gerenciar cookies e monitorar atividade de rede.
00:07:30Para o meu app, adicionei um arquivo Claude.md e instruí o Claude a usar as ferramentas
00:07:35do Agent Browser para todos os tipos de testes. Também disse para usar o comando help
00:07:40caso não soubesse usar algum comando. Você encontra essas regras e o guia de workflow completo no AI Labs Pro.
00:07:45Embora seja uma ferramenta de automação headless, podemos rodá-la no modo “headed” ativando a opção correspondente,
00:07:50que exibe a janela do navegador para vermos o processo. Pedi para o Claude usar o modo “headed”
00:07:55para testar a interface da aplicação. Ele primeiro usou o comando help para ver os comandos e
00:07:59que é tirar um snapshot da página inteira em vez de prints seção por seção como a extensão do Claude faz.
00:08:05it opened the browser. It used an approach similar to what we suggested with Claude browser use,
00:08:09Isso acelerou significativamente o processo de teste, mantendo o mesmo nível de precisão.
00:08:14O agente realizou várias ações, navegando por todo o app e testando múltiplos recursos,
00:08:19passando por diferentes telas e verificando o layout visual. Ele completou todo o teste
00:08:24em apenas quatro minutos, enquanto outras ferramentas demorariam muito mais,
00:08:29justamente por depender da árvore de acessibilidade e não de capturas de tela.
00:08:34Ele também identificou que o editor de código precisava ser editável e implementou o ajuste na hora.
00:08:39Depois, testou no navegador tirando um snapshot, encontrando o seletor do editor e usando as funções
00:08:43de clique e digitação do Agent Browser para editar parte do código e ver se estava funcionando.
00:08:48Isso nos traz ao fim deste vídeo. Se você quer apoiar o canal e nos ajudar a continuar fazendo
00:08:53vídeos como este, pode fazer isso assinando o AI Labs Pro.
00:08:57Como sempre, obrigado por assistir e vejo você no próximo vídeo.
00:09:02thank you for watching and I'll see you in the next one.