Isso é Insano... O Debate Entre Google Stitch e Claude Design Acaba de Terminar
AAI LABS
컴퓨터/소프트웨어창업/스타트업사진/예술AI/미래기술
Transcript
00:00:00O Gemini tem sido o modelo de ponta em design, apesar de não estar no mesmo nível em outras áreas,
00:00:05especialmente com sua ferramenta de design Stitch, que usamos várias vezes em nossos fluxos de trabalho.
00:00:09Isso ficou ainda melhor quando o Stitch lançou sua atualização 2.0 com vários recursos novos,
00:00:14distanciando-o ainda mais. Mas a Anthropic também avançou e entrou no espaço de design com o
00:00:19lançamento do Opus 4.7 e do Claude design, que causou tanto impacto que as pessoas começaram a chamá-lo
00:00:24de o fim do Figma. Mas a real questão é: qual deles é realmente melhor? Para resolver isso,
00:00:30estamos colocando-os à prova em várias categorias e, ao final, você saberá qual
00:00:34merece um lugar no seu fluxo de trabalho. Tanto o Claude design quanto o Google Stitch têm muitos recursos
00:00:39que os distinguem um do outro. O Claude design foi lançado junto com o Opus 4.7 e rapidamente
00:00:45ganhou popularidade como o “Figma killer” por causa de seus recursos interativos. O modelo
00:00:49em si melhorou muito em design e, junto com sua ferramenta de design, suas criações evoluíram bastante.
00:00:54O Google Stitch, por outro lado, já existe há algum tempo e não era tão bom até que o Google
00:00:58lançou o Gemini 3, o modelo que é absurdamente melhor em design comparado a todos os outros modelos. Então,
00:01:04combinado com o Stitch, os designs melhoraram significativamente. Agora, vamos ver onde cada
00:01:08um deles realmente se destaca. O Claude design tem esse recurso onde você pode criar uma apresentação usando
00:01:13seus recursos e também escrever notas do orador dentro dela. Mas o Stitch não tem nada parecido,
00:01:17pois o Stitch foca apenas em UI e não oferece recursos para outros designs além de interfaces móveis e web.
00:01:23No Claude design, você também pode referenciar outros projetos que deseja que o design siga,
00:01:28conectando seu repositório GitHub, o que basicamente permite que o Claude importe os estilos de design
00:01:32dele e crie os próximos designs com base nisso. O Stitch lida com isso de forma um pouco diferente. Ele usa
00:01:37sistemas de design para a mesma tarefa, onde você pode copiar o sistema de design de outros sites que estão
00:01:42no ar, apenas fornecendo o link no Stitch, e a partir daí ele importa o estilo exato e
00:01:46cria um sistema que é usado em designs posteriores. Quando se trata de fazer alterações, o Claude design permite
00:01:51usar novos prompts, mas você também pode clicar diretamente na área onde deseja mudanças e elas refletem
00:01:56no seu design. Você pode simplesmente comentar diretamente sobre qualquer coisa que queira diferente e ele
00:02:00começa a aplicar as mudanças diretamente nela. Você pode acumular os comentários e enviá-los ao Claude
00:02:04todos de uma vez. O Stitch segue outro caminho aqui. Você não pode fazer alterações diretamente nele, exceto
00:02:09mudar textos. Então, se quiser qualquer mudança como cor ou tamanho da fonte, você deve adicionar um comentário
00:02:14na área que selecionar ou anotá-la, e então enviar o comentário ao Gemini para que ele incorpore suas mudanças.
00:02:19A entrada de voz é outra diferença. O Claude design permite que você use sua voz para ditar o prompt em vez
00:02:24de digitar. Mas este é um ponto onde o Stitch vence, porque o recurso de tela de voz no Stitch é
00:02:28basicamente uma conversa ao vivo que você tem com o modelo, onde você conta tudo sobre o design que
00:02:33quer criar, e ele faz perguntas relacionadas ao design e o cria para você,
00:02:37tudo acontecendo de forma conversacional. O Stitch também tem um recurso de visualização ao vivo em um painel separado,
00:02:42onde você pode ver como seu design fica no desktop, celular e tablet e interagir com o design diretamente.
00:02:47O Claude design não tem esse recurso de visualização separadamente. Em vez disso, ele exibe a UI no
00:02:52mesmo painel onde você pode interagir com os elementos diretamente, sem precisar ir para outra tela
00:02:57de pré-visualização, mas você não pode verificar a responsividade como faz no Google Stitch. O Claude design também
00:03:01foi feito para trabalhar em equipe, então ele permite compartilhar um projeto com múltiplas permissões,
00:03:06como permissões de edição e comentário separadamente, o que o Stitch não possui. No Stitch, você pode apenas
00:03:11compartilhar o projeto e deixar que todos trabalhem nele, em vez de ter permissões separadas como o Claude design.
00:03:15Portanto, apesar do fato de o Stitch ser um projeto muito mais maduro e o Claude design ser um projeto
00:03:20que foi lançado recentemente, daríamos pontos ao Claude design pelos recursos. O Claude
00:03:24design é um produto mais novo que está disponível apenas nos planos Claude Pro, Max, Team e Enterprise.
00:03:30O Stitch, por outro lado, está disponível gratuitamente independentemente do plano e usa apenas um sistema de
00:03:35créditos para rastrear o uso. Então, em termos de usabilidade, o Stitch oferece muito mais créditos.
00:03:40Ele permite 400 créditos de design diários e 15 créditos de redesign diários, então você ganha muitos créditos para
00:03:46usar mesmo em um único dia, e os créditos mensais são ainda maiores. Normalmente, um design simples custa três
00:03:51créditos e pode variar com a complexidade e o número de gerações, então você poderá obter muitos designs.
00:03:56O Claude design tem limites separados que abrangem uma semana. Esse limite não
00:04:00contribui para seus outros limites do Claude Code, então você pode usar livremente outros recursos do Claude mesmo se
00:04:05os limites de design terminarem. Mas, como falamos no vídeo anterior, esse limite é praticamente inutilizável
00:04:10porque não permite experimentar livremente e se esgotará antes que você possa usá-lo para qualquer
00:04:15construção substancial, e isso é ainda pior se você estiver no plano Pro, porque ele permite apenas
00:04:20experimentar alguns designs antes de acabar. Portanto, se você realmente quiser tirar proveito do
00:04:24Claude design, precisaria mudar para os planos Max. Comparando os custos de ambos, o Stitch é
00:04:29o vencedor claro por uma grande margem, porque ao menos permite experimentar designs, o que o Claude
00:04:34design não faz. Testamos ambas as ferramentas com o mesmo prompt, com um resumo sobre o estilo do site e
00:04:39as seções que queríamos. O Claude design criou as tarefas como o Claude Code costuma fazer e começou
00:04:44a trabalhar. E enquanto o Claude design levava seu tempo, demos exatamente o mesmo prompt para o Google Stitch.
00:04:49A primeira coisa que o Stitch fez foi criar o sistema de design visualizando tudo, desde cores até
00:04:54tipografia, ícones e botões. Antes mesmo de o Claude design terminar, o Stitch já tinha concluído. Ele construiu uma landing
00:04:59page usando o estilo exato de seu sistema de design, com equilíbrio total entre as cores principal e
00:05:04de destaque. O Claude design levou muito mais tempo e, após terminar, começou a trabalhar nas etapas
00:05:09de verificação. Cada parte do trabalho do Claude design era interativa, ao contrário da página estática do Stitch.
00:05:15Em sua primeira execução, ele nos ofereceu a opção de decidir entre as cores de destaque e o tema principal,
00:05:20para que pudéssemos fazer pequenas alterações nós mesmos em vez de usar novos prompts. Em um teste de qualidade de design, daríamos
00:05:25os pontos ao Google Stitch porque seu design foi muito melhor que os outros. O Stitch usou criativamente
00:05:30a paleta de cores para combinar com o estilo e se adequar ao clima do app, enquanto a escolha do Claude design
00:05:34pareceu genérica e sem profundidade. Além disso, em termos de velocidade, o Stitch também vence aqui porque o Claude
00:05:39design demora demais em cada design. Sempre que o Claude design precisa adicionar imagens, ele cria SVGs
00:05:45e os integra ao design. A menos que você forneça seus próprios recursos, ele depende inteiramente da geração
00:05:50de SVGs. O Google, por outro lado, tem o Nano Banana, seu próprio modelo de geração de imagens. Assim,
00:05:55o Stitch o integra diretamente ao produto e, mesmo que você não diga explicitamente, ele usa a geração de imagens
00:06:00para todas as seções do design e os resultados ficam muito melhores. Não importa o quão
00:06:05alta seja a qualidade dos SVGs, eles não podem competir com um modelo de imagem. Portanto, nesta situação, o Google Stitch
00:06:10é o vencedor claro. O Stitch não é muito conhecido por animações, pois seu foco exclusivo é no design,
00:06:16mas ainda assim tentamos ver como ele as lidaria. Ele tentou adicionar algumas, mas as animações não eram
00:06:21visíveis diretamente e só podiam ser visualizadas em uma aba separada, e ele só gerou a revelação
00:06:26ao rolar em uma seção da página. Mas quando demos a mesma tarefa ao Claude design, ele adicionou múltiplas
00:06:32animações, como um letreiro abaixo da seção hero. A revelação ao rolar também foi adicionada, mas estava muito
00:06:37mais coordenada e aplicada corretamente a cada componente, não apenas à seção hero. O Claude design
00:06:43é muito melhor em animações que o Stitch porque usa bibliotecas populares como shaders e é capaz
00:06:48de criar animações muito mais interativas que mudam o comportamento com o movimento do mouse e cliques.
00:06:54Então, em termos de animações, o Claude design é o vencedor claro. Além disso, se estiver gostando do nosso conteúdo,
00:06:59considere apertar o botão “hype”, pois isso nos ajuda a criar mais conteúdos como este e alcançar
00:07:04mais pessoas. Para testar o quanto cada um entendeu o app e lidou com mudanças, pedimos que criassem
00:07:09páginas de cadastro e login sobre o app existente. O Stitch concluiu o design primeiro, usou o
00:07:14mesmo sistema de design para cada página e implementou o mesmo cabeçalho e rodapé em cada uma. Pudemos
00:07:19ver como elas fluíam com o recurso de protótipo e ver como cada botão se conectava ao outro.
00:07:24A implementação do Claude design se ajustou melhor à ideia do app e ele entendeu melhor o que era
00:07:28necessário. Ele construiu criativamente a página de login e, na página de cadastro, foi além
00:07:33e implementou múltiplos estilos de contas. Também queríamos ver como cada um incorporava
00:07:38mudanças. No Claude design, apenas adicionamos comentários e os enviamos juntos e ele começou a implementá-los.
00:07:44No Stitch, tivemos que anotar as áreas onde queríamos mudanças, mas a alteração não foi exatamente
00:07:49o que queríamos. Ele apenas adicionou um rodapé no lugar errado, logo após as citações, o que foi estranho.
00:07:54No geral, iterar com o Stitch não é amigável porque, para cada mudança solicitada, ele cria uma nova tela
00:07:59e, a certa altura, as telas ficam muito bagunçadas. O Claude design é uma experiência muito melhor porque
00:08:04as mudanças refletem diretamente no design e, como ele entende o app, as implementa corretamente
00:08:09sem se desviar do estilo. Portanto, em termos de iterar no design, o Claude design é claramente
00:08:14a melhor forma. Cada ferramenta tem seu próprio sistema de design. Para o Claude design, um sistema de design identifica sua
00:08:20marca, pois esta ferramenta é destinada a equipes que trabalham em kits de marca. Você pode adicionar uma descrição dele
00:08:25junto com fontes, logotipos, recursos e tudo mais, e ele cria um sistema completo que representa
00:08:30o estilo da sua marca. Para o Stitch, o sistema de design é um arquivo que não identifica uma marca, mas sim
00:08:36representa um design específico. Esse arquivo não é limitado ao Stitch. Você pode exportá-lo e usá-lo em
00:08:41qualquer agente, e ele será entendido e implementado diretamente. Como mencionamos anteriormente, você pode importar
00:08:46sistemas de design de outros sites ou criar o seu próprio. O Stitch abriu o código do arquivo design.md,
00:08:52que contém comandos npm para instalação e formatação adequada. Cada sistema de design serve a um
00:08:57propósito diferente, mas preferimos o do Google porque permite alternar entre plataformas facilmente e não
00:09:02prende você ao Stitch. Agora que testamos os designs, é hora de falar sobre como é a transição
00:09:07do design para o código em cada um. Como mencionamos antes, o Claude design oferece mais opções de exportação
00:09:13com controle de permissão. Ele permite exportar como pdf, slides e até exportar para o Canvas para que você possa
00:09:18continuar seus designs lá. Mas o padrão de transição que mais usamos é a transição para o Claude Code,
00:09:23pois é onde mais desenvolvemos nossos apps. Assim, copiando um único prompt e colando-o
00:09:28dentro do Claude Code, ele copiará o design e o implementará no app. O Google Stitch, por outro
00:09:33lado, tem padrões de transição muito melhores. O Stitch tem um MCP através do qual você pode conectá-lo ao seu
00:09:39agente de codificação e deixá-lo enviar prompts para o Stitch para criar designs e buscar designs dele para implementar
00:09:44no app. O Claude design não tem integração com MCP, então gostamos do MCP do Stitch porque ele
00:09:49funciona de forma inversa, ou seja, agentes de código podem dar prompts na linguagem ajustada do Stitch e nós
00:09:53não precisamos nos preocupar com o prompt adequado e ainda obtemos os designs que queremos. O Stitch também permite
00:09:58exportar como código zip, mas você também tem outras opções. Você pode exportar para o Google AI Studio,
00:10:04onde pode desenvolver seu app ainda mais usando os recursos do estúdio e o Firebase integrado diretamente
00:10:09no app, ou pode exportar diretamente para o Figma para trabalhar com outras pessoas lá. Nós usamos a
00:10:14exportação por MCP na maioria das vezes porque, com essa integração, não precisamos nos preocupar com a transição e os
00:10:19agentes de código cuidam disso sozinhos facilmente. Ele também permite exportar como um PRD, que você pode entregar a outras
00:10:25pessoas ou agentes de codificação, permitindo que implementem o app facilmente sem problemas. Portanto, em termos de estilo
00:10:30de transição, o Stitch é o vencedor claro. Isso nos traz ao fim deste vídeo. Se quiser apoiar o
00:10:35canal e nos ajudar a continuar fazendo vídeos como este, você pode fazê-lo usando o botão “valeu demais” abaixo.
00:10:40Como sempre, obrigado por assistir e vejo você no próximo.