O Design do Claude é, na verdade, uma armadilha
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00O Claude Design foi lançado e mudou tudo sobre design, mas na verdade é muito mais
00:00:04hype do que a maioria das pessoas imagina.
00:00:05E é exatamente por isso que o que você tem visto no X não é a história completa.
00:00:09Se você acha que o Claude Design está fazendo algo inovador ou que aquelas demos insanas circulando
00:00:13por aí são prova de que você precisa mudar para ele, você está realmente enganado.
00:00:17A ferramenta em si nem é a razão pela qual esses designs parecem tão bons, e a maneira como as pessoas estão
00:00:21usando está agindo silenciosamente contra elas de uma forma que a maioria ainda não percebeu.
00:00:25O Claude Design foi comercializado como um produto revolucionário para a indústria de design no momento em que
00:00:29foi lançado.
00:00:30As pessoas começaram a chamá-lo de assassino do Figma ou o fim dos designers, e o impacto foi grande
00:00:34o suficiente para que as ações do Figma caíssem e sua avaliação sofresse um golpe.
00:00:38É uma ferramenta para criar protótipos realistas, wireframes, designs, apresentações e outros
00:00:43tipos diferentes de design.
00:00:44Mas a realidade é que é mais hype do que qualquer outra coisa.
00:00:47É literalmente o Claude Code reembalado como outra ferramenta e vendido como tal, porque o Claude Code pode
00:00:52fazer o mesmo e possivelmente mais.
00:00:54Existem recursos como edição e comentários no Claude Design, mas nada aqui é algo que
00:00:58o Claude Code não possa fazer se você lhe der as ferramentas certas.
00:01:01E quando dizemos que este é o Claude Code reembalado, não é porque não o testamos.
00:01:05Demos a ele um prompt simples, pedindo para criar um site comunitário e respondemos às perguntas
00:01:09que ele tinha.
00:01:10Ele criou dois designs que eram impressionantes por conta própria e muito melhores do que a maneira que o Claude
00:01:14usava para gerar landing pages anteriormente, mas eles ainda tinham muitos problemas.
00:01:18Uma versão foi cortada na seção de preços e não havia rodapé, então testamos
00:01:23como o Claude Code se sairia com um prompt semelhante.
00:01:25Usamos o Opus 4.7 com esforço máximo para comparar os dois, e o design que ele produziu ficou
00:01:30no mesmo nível das capacidades do Claude Design.
00:01:32Houve alguns problemas, como a cor da fonte do botão de inscrição não ser escolhida corretamente,
00:01:37mas, no geral, foi um design muito bem construído.
00:01:39E isso apesar de não ter o mecanismo de design e sem qualquer prompt especial que
00:01:43o Claude Design tem integrado, puramente por conta própria, com nós fornecendo quase nada.
00:01:48Mas as demos que você deve ter visto por aí parecem impressionantes, e há algo escondido atrás
00:01:52delas.
00:01:53O que está circulando nas redes sociais é baseado em hype, e não no que a ferramenta realmente
00:01:57faz por conta própria.
00:01:58As pessoas geram designs seguindo fluxos de trabalho extensos e então os apresentam como se o Claude
00:02:03Design tivesse construído tudo de uma vez só.
00:02:05Mas esses mesmos fluxos de trabalho podem ser executados no Claude Code diretamente sem precisar do Claude Design
00:02:09de jeito nenhum.
00:02:10Então, mesmo que este produto seja feito para designers, eles deveriam simplesmente usar o Claude Code em vez do
00:02:14Claude Design, porque desta forma eles poderão experimentar diferentes variações, experimentar
00:02:19mais e obter resultados iguais ou melhores do que o Claude Design.
00:02:22Eles podem iterar mais vezes com o Claude Code em vez de serem interrompidos logo quando o
00:02:26design está realmente chegando a algum lugar.
00:02:28Construir sobre o que o site já é, em vez de começar do zero toda vez, dá a eles
00:02:32melhor controle sobre a direção de cada design.
00:02:35E porque tudo o que o Claude Code produz é código real, o que eles acabam tendo não é
00:02:39um protótipo descartável, mas algo que pode ser enviado diretamente para o produto sem
00:02:43ser reconstruído por outra pessoa depois.
00:02:45E além de tudo isso, há um problema de custo com o Claude Design.
00:02:48O Claude Code pode fazer as mesmas coisas a um custo muito mais barato, enquanto o Claude Design é construído separadamente
00:02:53e contabilizado em limites que são semanais, e não conta para seus outros limites
00:02:57mas consome o uso em um ritmo muito mais rápido do que você normalmente esperaria com modelos
00:03:02através de outros aplicativos do Claude.
00:03:03Isso atinge os designers com mais força porque a cota é tão baixa que eles não podem realmente experimentar
00:03:08da maneira que precisam, e seu limite acaba depois de apenas algumas iterações de design.
00:03:12E é exatamente disso que muitas pessoas estão reclamando.
00:03:15Quando alguém estava trabalhando com ele, esgotou seu limite de design rapidamente logo após cerca de
00:03:1920 iterações de design, mesmo estando no plano máximo mais alto.
00:03:23E muitos outros dizem que atingiram o limite em apenas uma hora e ainda acabam com um design simples
00:03:27que é facilmente implementável com o Claude Code de uma só vez.
00:03:31Portanto, não é realmente utilizável na prática, já que eles atingem os limites antes que possam
00:03:35até mesmo terminar o fluxo de trabalho em que estão trabalhando, tornando-o muito pior em comparação com os limites do Claude Code.
00:03:39de limites.
00:03:40A razão pela qual o trabalho do Claude Design parece tão impressionante é, na verdade, o lançamento do modelo Opus 4.7, não a
00:03:45ferramenta em si.
00:03:46O Opus 4.7 é novamente o modelo de última geração com capacidades incríveis e está tendo um desempenho
00:03:50melhor em todos os benchmarks.
00:03:52Mas a atualização que realmente importa aqui é a visão.
00:03:54Este modelo tem uma visão substancialmente melhor e pode ver imagens com uma resolução muito maior
00:03:59do que era capaz anteriormente.
00:04:00O Claude Opus 4.6 era capaz de analisar imagens com uma resolução de 1,15 megapixels, enquanto o
00:04:074.7 é capaz de analisar 3,75 megapixels.
00:04:10Então, isso implica que ele é capaz de entender o design a partir de uma referência muito melhor.
00:04:14Se você der a ele um design de referência, ele processa essa referência com muito mais clareza e
00:04:18percebe coisas que teria perdido antes.
00:04:20Com essa atualização de modelo, a Anthropic preencheu a única lacuna onde os modelos Claude estavam faltando e
00:04:25precisavam de um trabalho extenso, que era o design de front-end.
00:04:27Este modelo é mais elegante e criativo ao concluir uma tarefa e, por conta própria, produz
00:04:31interfaces e designs de maior qualidade.
00:04:34Então, quando o Claude Design foi lançado, foi apresentado com muito hype por causa de seus designs insanos,
00:04:38mas na realidade, foi o modelo que melhorou.
00:04:41Não foi a ferramenta que ficou tão insanamente boa a ponto de resultar nos visuais diferentes que
00:04:45você vê.
00:04:46O Claude Design foi apenas outra maneira inteligente de vender algo e criar hype em torno dele pela Anthropic.
00:04:50Agora você pode obter os mesmos benefícios que obtém no Claude Design no Claude Code 2 ou possivelmente
00:04:55melhor.
00:04:56Você pode replicar o fluxo de questionamento do Claude Design no Claude Code criando uma habilidade simples.
00:05:00Quando você cria um projeto no Claude Design, você dá um prompt e ele faz muitas perguntas
00:05:04para que ele possa determinar adequadamente a direção do design.
00:05:07Ele pede muito mais do que o modo de planejamento do Claude Code, mas uma habilidade pode fazer exatamente o mesmo.
00:05:11A habilidade contém instruções sobre como executar uma sessão de perguntas exatamente como o Claude Design
00:05:16usando perguntas para preencher as lacunas que o prompt cria e perguntando sobre o que precisa ser construído.
00:05:21Ele define quando acionar perguntas de acompanhamento e como o fluxo deve realmente funcionar.
00:05:25Ele também inclui exemplos de perguntas para executar a sessão, uma biblioteca de perguntas e até mesmo
00:05:30layouts ASCII de sites para que ele possa determinar o posicionamento dos elementos na landing
00:05:34page.
00:05:35Quando você dá um prompt a ele, ele usa a habilidade e faz perguntas relacionadas às lacunas que identifica
00:05:39exatamente como o Claude Design.
00:05:41Ele faz várias perguntas em diferentes áreas e, uma vez que tenha todas as informações
00:05:45necessárias para implementar, ele começa a construir.
00:05:47A melhor parte é que ele produz código diretamente, então não há handoff de design para código.
00:05:51E com essa abordagem, você pode iterar o quanto quiser sem se preocupar em ficar
00:05:55sem limites em apenas uma hora.
00:05:57A geração de interface do usuário a partir do mesmo tipo de prompt, juntamente com o fluxo de questionamento semelhante no
00:06:01Claude Code, foi mais ou menos semelhante ao que o Claude Design gerou.
00:06:05A principal diferença é que o Claude Design tinha uma vantagem em certos aspectos, onde tornava o
00:06:09site mais imersivo adicionando pequenas animações para torná-lo mais envolvente.
00:06:13Mas antes de avançarmos, vamos ter uma palavra do nosso patrocinador.
00:06:16HeyGen. Você provavelmente já tentou fazer um vídeo com
00:06:18uma ferramenta de IA.
00:06:19Vinte minutos depois, você está lidando com linhas do tempo, regravando narrações e lutando com sincronização labial que parece
00:06:24uma dublagem ruim.
00:06:25O HeyGen pula tudo isso.
00:06:26HeyGen é o gerador de vídeo por IA que acabou de lançar uma nova CLI, o que significa que um vídeo de avatar
00:06:31gêmeo digital completo pode ser gerado com um único comando.
00:06:34Sem linha do tempo, sem câmera, sem equipe.
00:06:36Grave seu gêmeo digital uma vez e o HeyGen permite que você publique consistentemente sem refilmar,
00:06:40transformando newsletters, PDFs, PowerPoints em vídeos.
00:06:44Gere vídeos multicena totalmente editados a partir de um único prompt com o agente de vídeo e depois traduza
00:06:48para um público global com sincronização labial completa.
00:06:51Construa com avatares, vozes, agente de vídeo, tradução e muito mais em developers.heygen.com
00:06:56Gêmeos digitais requerem consentimento verificado.
00:06:59Seu conteúdo nunca é usado para treinar modelos públicos e toda a plataforma é construída para
00:07:03segurança de nível empresarial.
00:07:04Comece a enviar vídeos com qualidade de estúdio sem tocar em uma câmera.
00:07:07Clique no link no comentário fixado e experimente o HeyGen hoje.
00:07:11A maioria dos designs interativos de rolagem que você pode ter visto no X quando as pessoas estavam mostrando
00:07:15o Claude Design são apenas sites usando fundos de vídeo, o que os torna muito mais
00:07:20premium e dá a impressão de que são mais impressionantes do que realmente são.
00:07:24A maioria das demos são muitas vezes apenas prompts copiados de sites que fornecem modelos de prompt
00:07:28prontos para usar.
00:07:29Os prompts incluem um link para um vídeo que deve ser usado como fundo, juntamente
00:07:33com diretrizes detalhadas sobre como implementá-lo.
00:07:36Portanto, qualquer agente é capaz de implementar esse tipo de site, não apenas o Claude Design, desde
00:07:40que receba prompts semelhantes.
00:07:42Mas estes são apenas prompts de exemplo para sites de vitrine.
00:07:45Na realidade, aplicações de nível de produção são construídas usando bibliotecas como Lenis, que é
00:07:49usada em muitos aplicativos de produção, bem como o GSAP, que é uma das bibliotecas mais populares
00:07:54para implementar animações suaves que tornam a experiência do site muito mais imersiva do que
00:07:59antes.
00:08:00Para testar isso, baixamos um vídeo e, em nosso prompt, apenas dissemos ao Claude Code para
00:08:04usar o vídeo como a seção principal, juntamente com os temas de cores que queríamos, e ele implementou
00:08:08o restante do site por conta própria.
00:08:10Só tivemos que corrigi-lo uma vez, onde tivemos que explicar sobre o que era o vídeo.
00:08:14E ele incorporou o estilo perfeitamente na landing page, tornando-a muito melhor do que
00:08:18a versão anterior.
00:08:19O site foi implementado muito bem, o que é bastante poderoso, dado o quão simples o prompt
00:08:23era, e incluía diferentes animações e interações que tornaram esta parte do site
00:08:28muito mais poderosa e interativa do que antes com as capacidades do Claude.
00:08:32Agora, no Claude Code, você também pode complementá-lo com mais ferramentas com facilidade em comparação com o Claude
00:08:36Design, porque o Claude Code é mais tecnicamente capaz e pode implementar coisas mais perfeitamente.
00:08:42Você pode até usar uma habilidade de código aberto como "scrollytelling", que basicamente permite animações de
00:08:46contação de histórias por rolagem em seu projeto.
00:08:48Então, com essa habilidade, o Claude pode facilmente implementar contação de histórias em vários níveis a partir de um prompt simples
00:08:53e trabalhar para criar animações que vão muito mais a fundo do que o que o Claude Design
00:08:57seria capaz de fazer por conta própria.
00:08:59Além disso, se você está gostando do nosso conteúdo, considere apertar o botão de hype, porque isso nos ajuda a
00:09:03criar mais conteúdo como este e alcançar mais pessoas.
00:09:07Usar o Claude Code em vez do Claude Design torna mais fácil implementar UIs porque, com
00:09:11o Claude Code, você pode integrar sistemas de design integrados com facilidade incorporando componentes
00:09:16do Shadcn, Aceternity ou Hero UI, que já incluem muitas animações pré-construídas.
00:09:22Isso reduz a necessidade de o modelo descobrir como cada componente deve parecer e se comportar,
00:09:27e, em vez disso, permite que ele se concentre em melhorar o design geral.
00:09:30Então, o resultado é muito mais fácil de alcançar em comparação com trabalhar diretamente no Claude Design por padrão.
00:09:35Você também pode usar habilidades de design de front-end ou outras habilidades especializadas adaptadas ao seu projeto,
00:09:39construídas usando um criador de habilidades que analisa o estado atual do projeto.
00:09:43Isso o ajuda a implementar recursos com mais eficácia, sem perder tempo.
00:09:47O Claude Code também é mais flexível porque você pode conectar servidores MCP a ele.
00:09:51Por exemplo, você pode usar um servidor MCP do Shadcn para que o agente possa instalar os componentes certos
00:09:56por conta própria, em vez de ser explicitamente instruído sobre o que usar e onde.
00:09:59Da mesma forma, você pode usar vários MCPs que ajudam a construir UIs de forma mais eficaz, em vez de confiar
00:10:04em um design puramente gerado.
00:10:06Mesmo com modelos como o Opus 4.7 e ferramentas como o Claude Design, designs gerados diretamente
00:10:11muitas vezes revelam que foram produzidos por um modelo, porque tendem a seguir padrões semelhantes.
00:10:16Mas usar bibliotecas estabelecidas ajuda a reduzir esse problema e faz com que o resultado pareça mais natural
00:10:20e menos previsível.
00:10:22A maior vantagem de usar o Claude Code em vez do Claude Design é que você pode conectá-lo
00:10:26ao Git.
00:10:27Agora, embora você também possa conectar o GitHub ao Claude Design, há uma enorme diferença
00:10:30em como ambos funcionam.
00:10:31A integração do Claude Design com o Git é bastante básica.
00:10:34Ele permite principalmente buscar arquivos de um repositório GitHub conectado e usá-los para
00:10:38entender os designs.
00:10:39Mas seu propósito é limitado principalmente à leitura e referência.
00:10:42Ele não faz alterações no repositório.
00:10:45O Claude Code, por outro lado, é muito diferente.
00:10:47Ele pode realizar operações Git completas, como commits, ramificações e muito mais.
00:10:51Então, se algo der errado na sua implementação ou se você preferir uma versão mais antiga depois de fazer
00:10:55alterações, você pode facilmente reverter para uma versão anterior usando o Git.
00:10:59Isso é algo que você não conseguiria fazer com o Claude Design conforme você o usa, o que torna
00:11:02o Claude Code uma abordagem muito mais forte.
00:11:04Para projetar protótipos diferentes, em vez de ir para o Claude Design ou usar o Figma, é
00:11:09mais eficaz se você fizer mockups diretamente em HTML.
00:11:12Para experimentar variações diferentes, você também pode fazer uso de agentes paralelos e árvores de trabalho
00:11:16para dividir tarefas, de forma semelhante a como o Claude Design explora designs, mas de uma maneira gerenciada pelo Git,
00:11:21para que você possa manter a melhor versão e descartar o restante facilmente.
00:11:24Você pode simplesmente dar a ele um prompt para usar subagentes em árvores de trabalho separadas e pedir a cada agente para
00:11:29implementar uma variação diferente do mesmo design.
00:11:31Com isso, o Claude irá gerar agentes em espaços de trabalho separados.
00:11:35Usar agentes paralelos ajuda você a economizar tempo e esforço ao explorar várias direções
00:11:39de uma só vez.
00:11:40Agora, uma vez que cada agente tenha terminado seu trabalho, você obtém várias variações que pode revisar
00:11:44a qualquer momento e escolher aquela que melhor se adapta às suas necessidades.
00:11:47A partir daí, você pode fazer alterações e continuar construindo o aplicativo com base no estilo exato que
00:11:51você mais gosta.
00:11:52E apesar de não serem gerados pelo Claude Design, cada um dos designs gerados ainda tem um
00:11:57visual estético com SVGs adequados criados inteiramente através de código para representar elementos e um equilíbrio
00:12:02geral muito melhor.
00:12:04Você pode então mesclar sua versão preferida no main e remover as árvores de trabalho que contêm
00:12:08os designs que você não gostou.
00:12:09As habilidades usadas aqui, juntamente com outros recursos, estão disponíveis no AI Labs Pro para este vídeo
00:12:15e para todos os nossos vídeos anteriores, de onde você pode baixar e usar para seus próprios projetos.
00:12:19Se você encontrou valor no que fazemos e quer apoiar o canal, esta é a melhor maneira
00:12:23de fazer isso.
00:12:24O link está na descrição.
00:12:25Isso nos leva ao final deste vídeo.
00:12:26Se você gostaria de apoiar o canal e nos ajudar a continuar fazendo vídeos como este, você pode fazer
00:12:30isso usando o botão "super thanks" abaixo.
00:12:33Como sempre, obrigado por assistir e vejo você no próximo.