00:00:00Seus agentes de IA ficaram muito bons em design agora.
00:00:02Eles não têm mais aqueles problemas em que os sites vinham com elementos quebrados.
00:00:06Mas como os modelos foram treinados com os mesmos dados, os designs são sempre muito
00:00:10similares e genéricos.
00:00:11Até os modelos do Claude precisam de um prompt especial para não cometerem esse erro.
00:00:15O Google Stitch é uma ferramenta feita para design e pode ser conectada diretamente
00:00:19ao seu fluxo de trabalho no Claude Code.
00:00:21Neste vídeo, veremos 4 formas de usar o Stitch com o Claude Code para garantir
00:00:26que seus apps não fiquem com a cara de qualquer outro site gerado por IA.
00:00:30A nova atualização do Stitch usa um sistema de design para construir sua UI, e esses sistemas
00:00:34são baseados em recursos que formam o guia de UI para sites, o que inclui
00:00:38campos como cores, temas, fontes e muito mais.
00:00:41Esses recursos são formados na verdade usando o arquivo design.md.
00:00:45Este arquivo é o que torna o design transferível de um agente para outro.
00:00:49Você pode transferir este arquivo design.md para qualquer agente onde implementar o design,
00:00:54e ele manterá todo o estilo e tema perfeitamente combinados.
00:00:56Isso funciona porque o arquivo é especializado para agentes.
00:00:59Ele contém uma linguagem mais direcionada para que eles entendam a intenção do design com facilidade.
00:01:04Ele também visualiza todos os sistemas de design na tela, então você não precisa
00:01:08interpretar o estilo apenas por texto.
00:01:10Você consegue ter uma ideia de como o app ficará ao ser implementado, vendo
00:01:14as cores e fontes uma ao lado da outra.
00:01:16Sempre que você constrói algo com o Stitch, o primeiro passo dele é criar um design.md
00:01:21e um sistema de design.
00:01:22Mesmo que você não peça explicitamente no seu prompt.
00:01:25Com o sistema de design definido, ao criar qualquer site, ele garante a consistência
00:01:30em várias páginas e regenerações.
00:01:32Isso resolve o maior problema que tínhamos ao trabalhar com o Stitch, pois ele
00:01:36não conseguia manter a consistência do design tão bem quanto agora.
00:01:39Mas em vez de depender do sistema de design que o Stitch cria sozinho, você pode criar os seus.
00:01:43Você pode configurar o tema conforme suas necessidades ou, se tiver um arquivo de design,
00:01:45basta fazer o upload, e ele incorporará o arquivo como um sistema de design e o visualizará.
00:01:49O importante é garantir que qualquer design.md que você usar siga uma
00:01:53estrutura adequada.
00:01:54Essa estrutura é otimizada para agentes, especificamente o Stitch, e os ajuda
00:01:58a entender as intenções de forma eficiente.
00:01:59Muitas vezes fazemos brainstorming de ideias de apps com o Claude ou outros agentes.
00:02:04Então, se quiser criar designs dessas sessões no Stitch, você pode levar
00:02:06o estilo de design para o Stitch na forma de um arquivo design.md.
00:02:09Você pode dar ao Claude a estrutura de arquivo que pode ser obtida no repositório oficial
00:02:13de habilidades do Google, que contém as funções relacionadas ao Stitch.
00:02:17Nos exemplos, você encontra um template de arquivo de design otimizado para o Stitch.
00:02:21Assim, qualquer agente que você usar, pode fornecer o estilo do site que deseja criar
00:02:25junto com o template, para que ele gere o design.md seguindo
00:02:29o guia de estilo corretamente.
00:02:33Assim que seu agente gerar o arquivo design.md detalhado, leve-o ao Stitch e cole
00:02:38na seção de design.md ao criar um novo sistema de design.
00:02:39No momento em que você clica em salvar design, ele cria uma visualização para ele.
00:02:44Com a visualização pronta, você pode pedir ao Stitch para implementar a UI usando o
00:02:48novo sistema de design como base.
00:02:52O Stitch então implementa o design refletindo o sistema que você criou, capturando exatamente
00:02:56o estilo do design.md.
00:02:59Usando esses sistemas de design, você pode criar iterativamente quantas páginas quiser,
00:03:03e cada uma seguirá o mesmo estilo visual.
00:03:05Se você já criou projetos no Stitch e quer extrair o design.md deles,
00:03:10pode fazer isso usando as habilidades criadas pelo Google.
00:03:12Nessas habilidades, a função design.md converte projetos do Stitch em um arquivo design.md
00:03:16de acordo com o template otimizado para o fluxo do Stitch.
00:03:19Além disso, se estiver gostando do nosso conteúdo, considere clicar no botão de hype,
00:03:25pois isso nos ajuda a produzir mais vídeos e alcançar mais pessoas.
00:03:28As capacidades do Stitch são impressionantes, mas ainda há lacunas na implementação
00:03:32de uma boa UX para o nicho específico de site que você está criando.
00:03:35Nem sempre é preferível começar o design do zero.
00:03:39Sites existentes usam padrões que realmente funcionam para o nicho deles,
00:03:42então imitar esses padrões ajuda a criar um site que funcione para seus usuários.
00:03:44Antes, ao construir com IA, fornecíamos um screenshot e pedíamos à ferramenta
00:03:48para copiar aquele design.
00:03:53Ela tentava replicar o layout, os componentes, tudo exatamente igual.
00:03:54Mas a nova atualização do Stitch mudou isso.
00:03:58Com o recurso de redesign do Stitch, você ainda envia o screenshot, mas agora ele não
00:04:00o copia apenas.
00:04:04Ele usa esse screenshot como um guia de estilo.
00:04:06Ele extrai os padrões, a posição dos componentes e a linguagem visual da referência e
00:04:10os aplica ao seu próprio site.
00:04:11Assim, você constrói algo original baseado em um padrão existente.
00:04:12Para usar o recurso de redesign, você precisa de um screenshot.
00:04:17Mas tirar print de seção por seção é um método cansativo.
00:04:18Em vez disso, use extensões como GoFullPage para capturar a página inteira de uma vez
00:04:22e fornecer a referência de estilo completa.
00:04:25Ao enviar o screenshot do site que deseja replicar, ele o usa como
00:04:28referência de estilo e posicionamento, criando uma UI similar.
00:04:33Ele utiliza as capacidades de geração de imagem do Nano Banana para criar imagens
00:04:35para diferentes seções que combinem com o estilo da UI.
00:04:39Existem outras formas de copiar o estilo de outro site também.
00:04:44Você pode imitar o estilo de um site inteiro copiando o link e, nos sistemas de design,
00:04:45importar o design de qualquer site como um arquivo design.md.
00:04:50Basta fornecer o link e ele importará o sistema de design fazendo o rastreamento
00:04:51do site para obter o estilo e a tipografia.
00:04:54Mas às vezes o Stitch não capta exatamente o estilo que você tinha em mente.
00:04:59Nesses casos, você pode simplesmente carregar um esboço ou wireframe com o estilo
00:05:03que você realmente deseja.
00:05:06Você também pode especificar o tema de design que deseja que seu site utilize.
00:05:09Com as referências e a especificação do tema, a UI gerada pelo Stitch corresponderá
00:05:12ao wireframe e ao guia de estilo exatamente, alinhando o site aos seus requisitos.
00:05:17E se houver algo específico que você queira modificar, pode fazer isso usando
00:05:18os recursos de anotação e edição do Stitch.
00:05:21Você pode anotar a parte que não gosta e descrever como deseja, clicar em aplicar
00:05:26e ele implementará o estilo solicitado.
00:05:31Mas antes de prosseguirmos, uma palavra do nosso patrocinador.
00:05:34Uptime Robot.
00:05:36Você está construindo com APIs de IA, OpenAI, Anthropic, o que for.
00:05:40Tudo parece bem, status 200 OK, mas a resposta é um lixo.
00:05:42Seu app quebra e você só descobre quando os usuários começam a reclamar.
00:05:45É aí que entra o Uptime Robot.
00:05:46Ele detecta isso antes deles.
00:05:49Ele testa suas APIs e verifica a resposta real, não apenas o código de status, alertando você
00:05:52instantaneamente no Slack, e-mail ou onde você preferir trabalhar.
00:05:56Monitore endpoints de IA, acompanhe créditos de API e pegue erros antes que
00:05:57virem tickets de suporte.
00:05:59Você ainda ganha páginas de status públicas mostrando uptime ao vivo e histórico de incidentes.
00:06:04A configuração leva segundos.
00:06:06Adicione seu endpoint, defina a resposta esperada, escolha os alertas e pronto.
00:06:10Existe um plano gratuito com 50 monitores para você testar.
00:06:12O monitoramento de API está incluído por apenas 7 dólares mensais, mais barato que hospedar você mesmo.
00:06:16Use o código AI Labs para 10% de desconto, válido até o fim do ano.
00:06:18Clique no link no comentário fixado e comece a construir hoje mesmo.
00:06:21Outra forma de construir é conectando as capacidades do Stitch com seus agentes atuais,
00:06:24como o Claude Code ou qualquer outro agente que suporte habilidades de agente.
00:06:28O Google desenvolveu várias habilidades para esse propósito, fornecendo funções que dão
00:06:32capacidades extras ao agente para trabalhar com o Stitch.
00:06:35Você pode instalar a habilidade que precisar seguindo os passos no repositório.
00:06:40A mais importante para o seu fluxo de trabalho é a habilidade "Enhance Prompt".
00:06:44Ela transforma os prompts vagos que você cria em prompts otimizados para o Stitch,
00:06:48garantindo que ele funcione da melhor forma.
00:06:51Ela contém referências para palavras-chave comuns, pois o Stitch usa adjetivos para
00:06:54identificar o "clima" do design em vez de descrições exatas.
00:06:58Além disso, há uma habilidade para criar sites completos chamada "Stitch Loop".
00:07:02Ela permite que o agente use ferramentas de desenvolvedor do Chrome para construir o site
00:07:05iterativamente no Stitch usando um padrão de loop autônomo.
00:07:09A ideia é manter o rastreamento correto dos prompts e passá-los de uma etapa para outra.
00:07:12Como essas habilidades gerenciam tudo sozinhas, é o fluxo mais próximo de criar
00:07:16um app de uma só vez.
00:07:20Mas antes de usar essas habilidades, você deve garantir que o Stitch MCP esteja conectado,
00:07:23pois é isso que o Stitch usa internamente para construir e buscar designs.
00:07:28Há um vídeo no canal que mostra o processo de instalação do MCP e como resolver
00:07:32problemas comuns de instalação que você pode conferir.
00:07:33Agora, ao exportar o design do Stitch via MCP ou código, ele geralmente entrega
00:07:38um arquivo HTML enorme com tudo em um só lugar.
00:07:41Como a maioria das aplicações é baseada em React e componentes, isso gera um trabalho extra
00:07:46para os agentes mapearem o HTML para React.
00:07:49Para simplificar isso, você pode usar a habilidade de componente React.
00:07:53Ela converte o design do Stitch em componentes modulares usando métricas de validação adequadas.
00:07:56Ela usa scripts para validar e buscar designs para que os componentes sejam mapeados facilmente.
00:08:01Com este fluxo, você pode criar um Claude.md listando o fluxo que deseja usar.
00:08:03Ele precisa seguir esta ordem.
00:08:06Primeiro, use o "Enhance prompt" para converter seus prompts vagos em prompts específicos,
00:08:10garantindo que o Stitch receba a entrada corretamente.
00:08:15Depois, ele deve construir o design usando o "Stitch loop".
00:08:20Com a construção finalizada, ele implementa o design no app usando componentes React.
00:08:21Ao dar o prompt para a landing page que deseja criar, ele seguirá as instruções
00:08:26definidas no Claude.md.
00:08:28Ele carrega primeiro a habilidade de aprimorar prompt, que gera o prompt otimizado
00:08:31usando as ferramentas disponíveis.
00:08:35Quando o prompt estiver pronto, ele pedirá sua permissão para a próxima etapa.
00:08:39Após a aprovação, ele carrega o Stitch loop e usa o Stitch MCP para criar o projeto.
00:08:41Com o projeto criado, ele envia o prompt aprimorado para o Stitch,
00:08:45que gera primeiro o sistema de design e depois o design propriamente dito.
00:08:47Para as imagens, ele utiliza a geração de imagens como parte do processo de design.
00:08:50Concluído o design, ele avança para criar a estrutura de componentes React
00:08:56e implementar o app corretamente, otimizado para o framework que você estiver usando.
00:09:00Se rodar o servidor de desenvolvimento, verá que a aplicação mapeia exatamente o design
00:09:04do Stitch, incluindo efeitos de hover nos botões, tornando esse fluxo muito mais rápido.
00:09:08Isso facilita muito a criação de aplicativos totalmente funcionais.
00:09:12O arquivo Claude.md usado aqui, junto com todos os recursos criados, estão disponíveis no
00:09:17AI Labs Pro.
00:09:18Isso inclui recursos deste vídeo e de todos os anteriores, que você pode
00:09:22baixar e usar em seus próprios projetos.
00:09:26Se você vê valor no que fazemos e quer apoiar o canal, esta é a melhor maneira.
00:09:28O link está na descrição.
00:09:33Construir do zero nem sempre é a melhor ideia, e isso vale também para os componentes.
00:09:34UIs geradas com componentes React puros são muito estáticas e focadas apenas no visual,
00:09:38exigindo esforço extra para adicionar interações e animações.
00:09:40Em vez de começar do zero, você deve usar bibliotecas de UI em seus apps,
00:09:43pois elas facilitam a criação com recursos de interação nativos que deixam
00:09:44sua interface muito mais viva.
00:09:46Para facilitar ainda mais, o Google fornece uma habilidade de ShadCN UI, que orienta
00:09:50a conversão de uma aplicação do Stitch para componentes ShadCN.
00:09:54Esta habilidade é basicamente um guia detalhado sobre como implementar corretamente
00:09:58esses componentes por todo o app.
00:10:02Como o ShadCN suporta múltiplos registros, você pode expandir suas capacidades
00:10:07ainda mais integrando-os e aproveitando seus recursos.
00:10:08Recomenda-se configurar o ShadCN MCP antes de construir para que o fluxo
00:10:13ocorra sem interrupções.
00:10:16Para usá-lo efetivamente, você também deve configurar um arquivo Claude.md com instruções
00:10:21para que, ao usar o Stitch MCP, ele use automaticamente o ShadCN para converter o design
00:10:22em componentes.
00:10:26Como você pode adicionar registros, pode especificar quais deseja usar no seu projeto.
00:10:30Por exemplo, ao criar o site, escolhemos Glassmorphism e Motion Primitives
00:10:35porque possuem componentes com um visual premium.
00:10:36Você pode escolher os que melhor se adaptarem às necessidades do seu projeto.
00:10:41Se você já criou uma UI no Stitch, pode convertê-la em um app com
00:10:47componentes ShadCN.
00:10:48Basta especificar o nome do projeto que deseja implementar e pedir ao agente.
00:10:52Ele primeiro buscará o projeto pelo nome, carregará a habilidade de ShadCN e usará
00:10:57as ferramentas do ShadCN MCP junto com os registros especificados para implementar o app.
00:11:00Assim que a implementação terminar, o app refletirá exatamente o que você vê no Stitch,
00:11:03mas construído com componentes ShadCN UI.
00:11:07Isso faz uma grande diferença, pois o app gerado de uma vez se torna muito mais interativo
00:11:08devido à facilidade de implementação.
00:11:12Isso nos traz ao fim deste vídeo.
00:11:13Se quiser apoiar o canal e nos ajudar a continuar produzindo vídeos como este,
00:11:18você pode fazer isso através do botão "Valeu demais" abaixo.
00:11:23Como sempre, obrigado por assistir e nos vemos no próximo vídeo.
00:11:24Até a próxima!
00:11:27[Música de encerramento]
00:11:29[Créditos]
00:11:34Assine para mais conteúdo de IA.
00:11:36Compartilhe este vídeo com seus amigos.
00:11:38Deixe seu comentário abaixo.
00:11:42Confira nossos outros tutoriais.
00:11:44Obrigado!