Este repositório open source acabou de clonar o Claude Design (é BOM)
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00O Claude Design tem que ser a melhor ferramenta que já usei.
00:00:02Na verdade, é completamente inutilizável.
00:00:05Mesmo pagando 200 dólares por mês à Anthropic pelo plano 20x.
00:00:10Atingi os limites de uso semanal do Claude Design em menos de uma hora.
00:00:14Isso é extremamente frustrante, mas, felizmente para você e para mim,
00:00:17há esperança, porque um novo repositório open source acabou de ser
00:00:22lançado,
00:00:23que essencialmente clona o Claude Design e o transforma em uma skill que podemos usar.
00:00:28Chama-se Huashu Design e é construído com os mesmos system prompts
00:00:32que o Claude Design usa.
00:00:33E hoje vamos colocá-lo em um teste direto contra o Claude Design para
00:00:37ver se isso realmente vale o nosso tempo. Porque, se valer,
00:00:41podemos ter uma saída da prisão de limites de uso do Claude Design.
00:00:45O Huashu Design resolve o problema do Claude Design ser uma ferramenta incrível,
00:00:50mas que você realmente não consegue usar por mais de uma hora antes de atingir
00:00:54os limites de uso.
00:00:55Então, eles pegaram todos os system prompts e filosofias de design do
00:00:58Claude Design e transformaram em um repositório open source no GitHub,
00:01:02que é essencialmente apenas uma skill que podemos carregar no Claude Code ou Codex ou
00:01:07realmente qualquer agente de codificação, assim como o Claude Design.
00:01:10Ele é capaz de fazer protótipos interativos para web apps ou mobile apps.
00:01:13Podemos fazer apresentações, motion design, infográficos e muito mais.
00:01:17E é capaz de fazer tudo isso com apenas uma skill porque, na verdade, há
00:01:21muita coisa acontecendo por baixo do capô. Por exemplo,
00:01:24ele tem acesso a 20 arquivos Markdown detalhados que explicam o que fazer para apresentações,
00:01:28diferentes estilos de design, melhores práticas de animação.
00:01:31Então, embora seja uma skill na superfície,
00:01:33ele praticamente tem acesso a 20 mini skills.
00:01:35Também tem acesso a vários componentes, mídias e ativos que pode aproveitar
00:01:40ao projetar coisas para você.
00:01:42E tem toda uma cadeia de ferramentas executável.
00:01:44Isso lhe dá a capacidade de pegar um arquivo HTML e transformá-lo em MP4 ou
00:01:50usar Playwright para verificar se o que ele projetou para você no
00:01:53papel realmente funciona na vida real. E, assim como o Claude Design,
00:01:56podemos ver diferentes variações. Temos o sistema de ajustes completo.
00:02:00E a melhor parte é que, como é uma skill, se eu estiver dentro do Claude Code,
00:02:05é baseado nesse uso, seja pro 5x ou 20x,
00:02:08não estou limitado por esse aparente limite arbitrário do
00:02:13Claude Design. Mas vamos colocá-lo à prova.
00:02:16Então, o que vamos fazer é ver como isso realmente funciona
00:02:18em termos de projetar uma landing page do zero.
00:02:22Depois, vamos ver como ele faz praticamente a mesma coisa,
00:02:24mas se dermos ativos para ele construir, de forma similar ao sistema de design do Claude Design,
00:02:29e, por último, veremos como ele se sai em apresentações e, ao longo do caminho,
00:02:33vamos compará-lo diretamente com o Claude Design.
00:02:36Assim, podemos ver se isso realmente vale a pena. Mas antes disso,
00:02:39uma palavra rápida do patrocinador favorito de todos: eu. Então, no mês passado,
00:02:43lancei a Masterclass de Claude Code e é a principal maneira de ir
00:02:46do zero a desenvolvedor de IA, especialmente se você não tem formação técnica.
00:02:51Atualizo este curso toda semana.
00:02:53E acabei de lançar os módulos do agente de sistema operacional para Claude Code.
00:02:56Então, se você é alguém que quer aprender a melhor maneira de aproveitar essa ferramenta,
00:03:01você precisa conferir. Você pode colocar as mãos nisso dentro do Chase AI.
00:03:04Além disso, haverá um link para isso no comentário fixado. Então, vamos começar.
00:03:08O prompt que estou dando ao Claude Code,
00:03:09e que usará essa skill Huashu Design, é: use a
00:03:13skill de design para criar uma landing page para o meu SaaS fictício, Lighthouse,
00:03:17fazendo as perguntas que precisar antes de começarmos. Agora,
00:03:21também dei esse mesmo prompt ao Claude Design.
00:03:24O Huashu volta com seis perguntas perguntando o que a Lighthouse faz, o perfil do comprador,
00:03:29o estilo, as seções necessárias, as variações. E, você sabe,
00:03:34se deve apenas criar um conteúdo fictício ou se eu tenho a cópia.
00:03:37O Claude Design teve perguntas parecidas,
00:03:40embora vá um pouco mais a fundo e, obviamente, devido à sua natureza gráfica,
00:03:44ele me dá algumas opções para escolher em termos da direção visual
00:03:48que posso ver. Então, para o Huashu, estou dizendo:
00:03:50vamos fazer uma vertente de análise. Estamos focando no desenvolvedor solo.
00:03:54Eu disse que quero ver múltiplos estilos e vibes,
00:03:57dessa forma, posso comparar as variantes.
00:03:59E também quero que ele faça a cópia sozinho. E para o Claude Design,
00:04:02praticamente disse a mesma coisa e que também queria três variantes que
00:04:05pudesse olhar lado a lado.
00:04:06Então, aqui está o que o Claude Design criou versus o que o Huashu criou.
00:04:11E vou desligar minha câmera para podermos dar uma olhada melhor nisso.
00:04:16Vamos ver o que o Huashu colocou tudo na mesma página.
00:04:19Poderíamos ter feito três páginas separadas,
00:04:22mas isso nos permite ver tudo de uma vez. Bem, na verdade, retiro o que disse.
00:04:25Temos aqui em cima, à direita, a habilidade de percorrer todas as três.
00:04:29Então, isto é o que conseguimos com esta skill.
00:04:31Então, essa Ledger parece bem legal. Você sabe,
00:04:35ela nos dá a página web completa. Temos as variantes de terminal,
00:04:40o mesmo tipo de negociação, assim como a versão em papel.
00:04:44E então posso ver todas as três de uma vez. E, honestamente, logo de cara, muito bom.
00:04:49Isso é muito melhor do que se estivéssemos usando apenas o Claude Code sozinho.
00:04:52Até com a skill de design front-end, e dissemos: 'Melhor, sabe',
00:04:55três variantes, bem sólidas. E agora vamos olhar o Claude Design. De nota,
00:04:59o Design nos deu os ajustes logo de cara. Não vamos olhar isso agora,
00:05:03mas aqui está a versão de terminal, sabe,
00:05:07ele percorre tudo, editorial novamente,
00:05:11bem parecido com o editorial aqui.
00:05:15Muito, muito similar espacialmente.
00:05:19Isso é muito horrível. Isso definitivamente transmite aquela,
00:05:24vibração típica de IA. Acho que isso tem muito a ver com o gradiente.
00:05:28E então posso comparar todas as três. Agora,
00:05:32o que quero que você faça agora é não pensar, ah,
00:05:34um parece necessariamente melhor que o outro no vácuo, mas realmente ver quão
00:05:37próxima essa skill que estamos olhando aqui é em relação ao Design. Muito,
00:05:42muito similar, o que é um enorme sinal positivo para a skill do Huashu.
00:05:46Agora, o que gosto de fazer depois de ver essas variações macro é focar em uma
00:05:51em particular, e depois começar a fazer ajustes para ela.
00:05:54Agora, para manter um pouco similar para podermos comparar e contrastar melhor,
00:05:59vou com a editorial no Design,
00:06:03que é conhecida como Ledger aqui na skill.
00:06:06E veremos quão bem eles fazem os ajustes. Agora para o Claude Design,
00:06:09os ajustes já estão aqui. Então para o editorial,
00:06:11podemos trocar entre claro e escuro. Posso mudar o destaque.
00:06:15Ele me dá praticamente qualquer cor que eu possa pensar, o que é bem legal.
00:06:18Posso mudar o título real,
00:06:21mas então ele separa entre espacial e global.
00:06:25Então, o que vou fazer é dizer a ele para expandir os ajustes e tê-los
00:06:29apenas para o editorial. E enquanto isso acontece,
00:06:31pulei no Claude Code e disse,
00:06:33vamos com a variante Ledger e dê a ela uma quantidade agressiva de ajustes.
00:06:36Para que possamos comparar nessa frente.
00:06:38Então, o Claude Design foi em frente e adicionou vários ajustes para nós. E note,
00:06:42neste momento, apenas pelo que você viu neste vídeo,
00:06:44eu já consumi cerca de 15% do meu uso do Claude Design. Bem,
00:06:49do lado da skill,
00:06:49usamos apenas 13% da janela de contexto de uma única sessão.
00:06:54Então, 130 mil tokens, ou seja, nem 1% do meu uso semanal,
00:06:59embora eu esteja no 20x, mas a diferença é impressionante. Embora devamos notar,
00:07:03isso ainda está trabalhando nos ajustes para aquela única coisa.
00:07:05Então é um pouco mais lento e os ajustes do Claude Design estão funcionando como esperado.
00:07:10Os ajustes francamente,
00:07:12são uma das minhas partes favoritas do Claude Design em geral.
00:07:16Acho que o poder do Claude Design não é necessariamente, oh,
00:07:20os designs são incríveis. E eu acho que eles são um passo acima.
00:07:22Não distorça isso,
00:07:24mas é o fato de que posso tão rapidamente percorrer um monte de coisas diferentes,
00:07:28ver como ficam e apenas iterar, iterar, iterar muito rapidamente.
00:07:31E uma coisa que queremos notar aqui é que devido à natureza de como o Claude Design
00:07:36funciona,
00:07:36a habilidade de clicar em coisas específicas como esta e mexer com a
00:07:40tipografia ou deixar comentários específicos.
00:07:43Isso não é realmente algo que podemos fazer dentro da skill de design.
00:07:47Eu certamente não posso desenhar na skill de design e dizer: Ei, dê uma olhada nisto.
00:07:51Vamos, você sabe, mexer com isto, mover isto um pouco para a esquerda,
00:07:54mover isto um pouco para a direita. Esses tipos de coisas.
00:07:57Você precisa de uma interface gráfica para,
00:07:58que é onde o Claude Design obviamente vai sair na frente.
00:08:01Então, vamos comparar isso com os ajustes que obtemos com o Huashu Design.
00:08:05Então, note,
00:08:07os ajustes combinam com o mesmo estilo da própria página.
00:08:10Posso mudar as predefinições.
00:08:13Posso mudar a família de exibição, um modo escuro um pouco diferente.
00:08:18Posso mudar os destaques e parece que posso mudar várias coisas como
00:08:22a densidade do layout. Temos a faixa de confiança?
00:08:26A faixa de confiança desaparece? Sim. Esse tipo de coisa. Então, definitivamente comparável.
00:08:30Existem tantos ajustes aqui quanto no Claude Design? Não,
00:08:32mas estou a apenas um prompt de conseguir mais.
00:08:34E acho que a grande conclusão aqui é que o Claude Code com esta skill de design
00:08:38definitivamente compete com o que você pode obter dentro do Claude Design nativamente e
00:08:42o uso total de tokens neste ponto é 170 mil, basicamente não usei nada do
00:08:47meu uso semanal e consumi 15% do Claude Design. Então, para este exemplo,
00:08:51que é um prompt bruto, sem sistema de design, sem ativos,
00:08:56veja o que você consegue criar. Acho que a skill foi ótima.
00:08:59Então vamos para a próxima demonstração e ver quão bem isso pode fazer.
00:09:02Se realmente dermos algo para ele construir, algum tipo de sistema de design,
00:09:06algum tipo de exemplos de design e colocar a skill à prova,
00:09:10porque já sei que o Claude Design consegue fazer isso muito bem.
00:09:13Quando olhamos para o Claude Design e seus sistemas de design,
00:09:16ele faz um trabalho muito bom em conseguir pegar tudo o que damos a ele.
00:09:19E isso pode ser como uma base de código ou algo assim e extrair um monte de
00:09:23informações, desde espaçamento a componentes, indicadores, botões, herói,
00:09:27tudo isso. Então, quando carrego este sistema de design no Claude Design,
00:09:31sei que ele será capaz de manter isso entre diferentes tipos de
00:09:34entregáveis. Por exemplo,
00:09:36este design de sistema operacional agente é algo que transformei em um sistema de design.
00:09:39E embora o vejamos como um painel aqui dentro do Claude Design,
00:09:42é muito fácil replicar esse tema de design.
00:09:45Então você vê isso dentro de uma apresentação, por exemplo,
00:09:47parece que tudo veio do mesmo lugar e isso é porque o sistema de design do
00:09:50Claude Design é bem poderoso. A desvantagem é que criar esse tipo de,
00:09:55sistema de design consome cerca de 30% do seu uso semanal.
00:10:00Então,
00:10:00o que acabei de dizer ao Claude Design foi para recriar esta landing page da Lighthouse
00:10:04usando aquele painel de sistema operacional agente.
00:10:07Então eu disse ao Claude Code praticamente a mesma coisa, dizendo:
00:10:11Quero usar a estética/sistema de design que corresponde a esse painel.
00:10:14E então eu disse onde ele pode encontrar todas essas informações dentro de um diretório ou
00:10:18referência separada. É praticamente o que ele está usando como
00:10:22inspiração, como sua estética.
00:10:25Então, obviamente, o sprite aqui está pirando,
00:10:28mas o resto faz bastante sentido. Hum,
00:10:33ele foi em frente e recriou um painel aqui também,
00:10:37muito similar a este. Acho que ficou bem legal.
00:10:41Quanto às fontes, cores,
00:10:44tudo isso muito alinhado com o que deveria estar fazendo.
00:10:47A única reclamação real que tenho é o pequeno personagem aqui.
00:10:52Não sei o que está acontecendo,
00:10:54mas isso provavelmente é um conserto relativamente simples.
00:10:56Agora vamos ver como a skill do Huashu se saiu para referência.
00:10:59A skill levou 11 minutos e cerca de 70 mil tokens. O Claude Design
00:11:04levou cerca de três minutos, mas ocupou 10% do seu uso semanal.
00:11:08E aqui está o que conseguimos. Vou desligar minha câmera para podermos ver melhor.
00:11:10Então, temos um pequeno Claude,
00:11:15um pequeno ícone de logotipo aqui, de nota.
00:11:18Este logotipo é um pouco diferente do sprite aqui em cima,
00:11:22mas ei, ele encaixa. As cores e fontes parecem fazer sentido à primeira vista.
00:11:26E temos nosso pequeno sprite lá no topo aqui também, ao lado da Lighthouse.
00:11:30Uh, isto parece bem legal. É como um pequeno ticker.
00:11:35Tudo isso parece bem familiar a partir do painel, em termos de
00:11:40design geral. Isso parece um pouco estranho por aqui.
00:11:43Eu gostaria que esta seção do terminal fosse simplesmente elevada para ficar centralizada com o que
00:11:47temos aqui à esquerda, mas esse é um ajuste fácil. E, no geral,
00:11:51muito bom. Eu diria que gostei um pouco mais dos designs do Claude,
00:11:56especialmente o fato de que ele criou seu próprio painel e o inseriu lá.
00:12:00Mas ei, tipo, isso fez as coisas de design, certo? Ele atendeu aos critérios.
00:12:04Ele tem a mesma fonte, as mesmas cores.
00:12:06Definitivamente parece que veio da mesma família de design. Então, para este teste,
00:12:11eu acho que outra grande vitória para esta habilidade, um grande sinal de positivo. Sim.
00:12:14Demorou um pouco mais? Com certeza.
00:12:15Mas ele estava essencialmente criando o sistema de design por conta própria.
00:12:18Ele não tinha um pré-carregado. É tão bom quanto o design? Hmm. Talvez não,
00:12:22mas é bem próximo e infinitamente mais barato. Então, muito, muito,
00:12:27muito impressionado. Agora, para nosso último teste, vamos dar uma olhada em apresentações de slides.
00:12:29Eu já tinha feito o Claude design fazer isso.
00:12:31E você está dando uma olhada na sua primeira versão agora mesmo.
00:12:33Ele está usando o mesmo sistema de design e está falando sobre nosso produto SaaS falso.
00:12:37Então, em termos de ser capaz de manter o design,
00:12:41obviamente ele fez um trabalho muito bom e tudo isso parece muito
00:12:46bom. A única reclamação é que aquele pequeno Sprite aqui no topo está meio esticado.
00:12:50Mas, novamente, isso não é uma coisa difícil de fazer.
00:12:52O que realmente me preocupa aqui é: parece legal? Isso é um pouco legal.
00:12:56Não corresponde ao sistema de design quando se trata de design do Claude. Sim,
00:13:00ele conseguiu fazer isso em apenas alguns minutos, em termos de uso: 6%.
00:13:04Agora, vamos ver como o Claude code se sai usando a habilidade.
00:13:07E aqui está o que conseguimos. Então, logo de cara, muito reminiscente do site.
00:13:11Ele conseguiu apenas criar, tem a mesma coisa de Sprite subindo,
00:13:15acontecendo lá no topo.
00:13:16E temos nosso pequeno logotipo do Claude code aqui à direita.
00:13:20Então essa é a capa. Número dois,
00:13:23parece que parte do texto está se sobrepondo aqui, mas não é um grande problema.
00:13:27A página três parece boa. Slide quatro. Isso está meio cortado,
00:13:32mas isso pode ser totalmente uma decisão de design.
00:13:34Temos um pouco de texto rolando, parece bom. E no último slide,
00:13:38temos um pouco de sobreposição aqui novamente,
00:13:40mas esses são pequenos problemas que poderíamos facilmente corrigir com um único prompt.
00:13:44Então, no geral, quando comparamos esses dois, o design versus o que conseguimos com a habilidade,
00:13:49muito semelhante novamente,
00:13:50são realmente três coisas seguidas que testamos onde a habilidade é capaz de
00:13:54competir com o que conseguimos no design.
00:13:56E acho que essa é a grande lição deste vídeo.
00:13:58Agora temos uma opção para obter resultados do design do Claude sem ficarmos reféns
00:14:03desses limites de uso malucos, o que é incrível para o usuário comum.
00:14:07Agora, no vácuo, eu ainda acho que o design do Claude é melhor? Sim, claro.
00:14:12A habilidade está apenas imitando tudo o que o design do Claude faz.
00:14:15E o design do Claude tem a vantagem de certas coisas como desenhar, editar, comentar,
00:14:19ser capaz de fazer com que todos em uma equipe usem essa coisa.
00:14:21Então, pela natureza de sua interface gráfica,
00:14:24ele pode fazer coisas que a habilidade nunca será capaz de fazer. Mas para muitas pessoas,
00:14:29o que você acabou de ver aqui é mais do que suficiente. E é um grande salto à frente de,
00:14:34você sabe, usar a habilidade de design front-end, por exemplo. E lembre-se,
00:14:37a habilidade pode fazer mais do que apenas páginas da web e apresentações de slides.
00:14:40Pode fazer coisas como design de movimento, infográficos, todos os tipos de coisas.
00:14:43Então, definitivamente, dê uma olhada nisso. Você realmente não tem nada a perder.
00:14:46Então é aqui que vou deixar vocês hoje. Espero que, com este vídeo,
00:14:50eu tenha conseguido adicionar mais uma ferramenta à sua caixa de ferramentas em constante expansão. Como sempre,
00:14:54me diga o que você achou.
00:14:55Certifique-se de conferir o Chase AI plus se você quiser colocar as mãos na
00:14:58masterclass do Claude e vejo vocês por aí.