O Claude Code Acabou de Receber sua Maior Atualização de Design do Ano (E Veja Como Dominá-la)
CChase AI
Computing/SoftwareInternet Technology
Transcript
00:00:00O Claude Code acaba de receber sua maior atualização nos recursos de design de front-end em muito tempo com a nova habilidade Slash Design.
00:00:07Agora, a habilidade Slash Design essencialmente pega o melhor do aplicativo web independente Claude Design, que você vê aqui, e o insere no próprio Claude Code.
00:00:16Em vez de ter que alternar entre dois aplicativos separados ou transferir seus projetos de forma estranha do Claude Design para o Claude Code, agora temos o melhor dos dois mundos.
00:00:25Além disso, obtemos a funcionalidade adicional de todas as nossas habilidades que já usamos dentro do Claude Code.
00:00:30Portanto, podemos combinar este novo recurso Slash Design com coisas como o Impeccable ou a habilidade Taste, nos dando resultados muito melhores.
00:00:36Então, hoje, não vou apenas mostrar como o Slash Design funciona, vou dar a você o melhor fluxo de trabalho para aproveitar ao máximo.
00:00:42Portanto, se você faz algum trabalho de design de front-end com o Claude Code, vai querer ficar por aqui para ver este.
00:00:46Agora, o grande apelo da habilidade Slash Design é o que você vê bem aqui.
00:00:49Agora, estou dentro do aplicativo Claude Desktop, mas o mesmo se aplica se você estiver usando o terminal.
00:00:53E é a ideia de que, quando eu digito slash design e peço para ele criar algo para mim, ele vai gerar uma prancheta muito semelhante ao aplicativo web Claude Design.
00:01:02Tenho várias opções para escolher e, quando olho para essas opções, posso ser muito detalhista sobre o que muda.
00:01:09Como você pode ver à direita, ao clicar em diferentes componentes do design de front-end criado, posso alterar praticamente tudo.
00:01:17Além disso, posso pedir muito facilmente várias versões do mesmo tipo de resultado e, assim que gostar de uma versão específica, posso fazer o Claude Code ir trabalhar e codificar isso.
00:01:27Agora, usar a habilidade de design é muito fácil.
00:01:38Tudo o que vou fazer é digitar slash design e, em seguida, dar o comando do que estou tentando criar.
00:01:43Então, digamos que eu queira criar uma postagem de mídia social, ou pense em algo como uma postagem do Instagram, detalhando o que a nova habilidade slash design faz.
00:01:49E digamos que eu queira criar três variações disso em três estilos de design bem separados, e eu queira usar a habilidade Impeccable.
00:01:50Vou apenas abrir meu microfone e dizer algo exatamente assim.
00:01:54Então, podemos criar um modelo para uma postagem de mídia social?
00:01:56Pense nisso como algum tipo de postagem do Instagram detalhando o que a nova habilidade slash design do Claude Code faz.
00:02:01Quero três variações extremamente diferentes, então estilos de design muito diferentes, estilos estéticos muito diferentes.
00:02:10E quando você fizer isso, quero que invoque a habilidade Impeccable para ajudar a criar isso.
00:02:19Agora, se eu fizesse exatamente a mesma habilidade dentro do aplicativo Claude Desktop, ela apareceria neste tipo de painel lateral, o que é o motivo pelo qual gosto de fazer isso no aplicativo desktop, porque tudo está em um só lugar.
00:02:22Dentro do terminal, o que você verá é que ele criará um artefato, então essencialmente será aberto no meu navegador.
00:02:27Portanto, embora não seja tão conveniente quanto um aplicativo desktop, ainda é bastante fácil de fazer as coisas.
00:02:34Agora, antes de olharmos para o artefato, uma rápida palavra do patrocinador de hoje, eu mesmo.
00:02:41Acabei de lançar uma versão atualizada do meu Claude Code Masterclass, e é a maneira número um de ir de zero a desenvolvedor de IA, especialmente se você não vem de uma formação técnica.
00:02:45Nós nos concentramos em casos de uso reais, casos de uso práticos, e eu atualizo isso todas as semanas.
00:02:57Portanto, se você é alguém que está tentando descobrir como usar essa ferramenta insana, então isso é para você.
00:03:02Você pode encontrá-lo dentro do Chase AI+.
00:03:06Há um link no comentário fixado.
00:03:10E aqui está uma olhada no artefato que ele criou.
00:03:19Então temos três estilos de design diferentes para nossas postagens do Instagram, assim como vimos dentro do aplicativo desktop.
00:03:24Temos esta barra de propriedades aqui à direita.
00:03:32Posso dar zoom, posso clicar em algo e começar a obter muito mais detalhes sobre o que exatamente estou ajustando.
00:03:33Você também notará aqui no canto superior direito, temos uma seção de ajustes, que agora está vazia.
00:03:35A qualquer momento, posso pedir ao Claude Code para me dar um painel de ajustes, assim como você veria dentro do aplicativo web Claude Design.
00:03:37E posso ajustar ainda mais coisas do que vejo aqui.
00:03:44Portanto, em termos de realmente usar essa coisa, é relativamente simples.
00:03:46Basta digitar slash design e pedir o que você quer.
00:03:52Agora, como deve ser realmente o nosso fluxo de trabalho?
00:03:57Como tiramos o máximo proveito disso?
00:04:03Bem, existe um fluxo de trabalho simples de três etapas que você deve usar todas as vezes que fizer qualquer tipo de design de front-end com o Claude Code.
00:04:07E a primeira etapa será a inspiração, porque o que quero dar ao Claude não é apenas um comando dizendo, ei, eu quero três coisas diferentes.
00:04:10O que eu idealmente quero dar ao Claude Code são alguns exemplos.
00:04:12Quero tirar capturas de tela de pôsteres de que gosto.
00:04:14Quero tirar capturas de tela de estilos de design que aprecio.
00:04:16Alimentar isso para o Claude Code e dizer, ei, você pode criar algo na mesma linha que isso?
00:04:22Agora estamos trabalhando apenas em um pôster, mas isso também se aplicaria se você estivesse criando uma página de destino ou uma seção de destaque ou qualquer coisa parecida.
00:04:30Agora, sua próxima pergunta deve ser: onde posso encontrar inspiração?
00:04:33E felizmente, há uma tonelada de lugares para conseguir ideias.
00:04:35Um bom site é o Pinterest.
00:04:39Eu simplesmente pesquisei infográfico do Instagram e vejo todos esses designs potenciais.
00:04:43Outro bom é o Landbook, que é muito bom para design de sites e seções de destaque.
00:04:50E também temos coisas como o Dribbble, e esse é Dribbble com três Bs.
00:04:52A ideia é que você só precisa ir lá e realmente deve começar a criar algum tipo de biblioteca de designs que você possa sempre consultar e trazer para o Claude Code quando quiser projetar algo.
00:04:55Para que você não precise repetir esse processo de inspiração todas as vezes.
00:04:57Então, vou tirar algumas capturas de tela de alguns de que meio que gosto.
00:05:01Eu gosto deste.
00:05:06Acho que isso parece bastante interessante.
00:05:11E lembre-se, você está apenas buscando uma estética geral da qual deseja que o Claude extraia.
00:05:21E acho que este também parece bastante interessante.
00:05:24Então agora vou soltar essas três capturas de tela na janela de comandos.
00:05:27E agora vou essencialmente dar a ele o mesmo comando que demos antes, que é tipo, ei, eu quero aquele tipo de postagem do Instagram.
00:05:29Eu quero três versões diferentes.
00:05:31Exceto que desta vez vou dizer, consulte estas capturas de tela.
00:05:36Quero que sejam usadas como inspiração.
00:05:39Você pode ter um tipo diferente de design para cada tipo de captura de tela.
00:05:43E também vou dizer, ei, certifique-se de usar a habilidade Impeccable.
00:05:48E também vou dizer a ele, se quiser gerar ativos externos, para usar algo como o Higgs field MCP que eu tenho.
00:05:49Você poderia usar outras coisas, como se tivesse file.ai para outro tipo de geradores de imagem.
00:05:52A ideia é que, como estamos dentro do Claude Code agora, podemos puxar o que quisermos para este processo de design.
00:05:54E novamente, você não precisa usar imagens externas se não quiser.
00:05:59Mas é assim que meu comando vai soar.
00:06:02Então, vamos realmente recriar estas três postagens que fizemos.
00:06:09Novamente, estamos usando a habilidade slash design.
00:06:14Mas eu joguei três capturas de tela aqui.
00:06:19E gostaria de usá-las como inspiração para o nosso processo de design.
00:06:23Então eu quero três novas gerações.
00:06:25Faça uma geração que extraia de cada uma destas capturas de tela apropriadas.
00:06:29Novamente, use a habilidade de design Impeccable.
00:06:31E lembre-se, você tem acesso ao Higgs field MCP.
00:06:33Portanto, se você sentir que precisa gerar ativos externos que possamos usar para os pôsteres, faça isso também.
00:06:37Deixo isso a seu critério.
00:06:39E essa é realmente a etapa um e dois deste processo.
00:06:43A etapa um sendo encontrar a inspiração.
00:06:45E a etapa dois é realmente usar aquelas habilidades adicionais que realmente não podemos usar dentro do aplicativo web Claude design.
00:06:48E se você estiver tipo, ei, você continua mencionando o Impeccable, eu não tenho ideia do que seja isso.
00:06:55Esta é apenas uma habilidade gratuita de código aberto que você pode adicionar ao Claude Code.
00:06:56E é tudo sobre design de front-end.
00:06:59Essencialmente, o foco principal dele é reconhecer como é a porcaria gerada por IA, se livrar dela e adicionar melhores princípios de design a tudo o que você está criando.
00:07:00E se você quiser um mergulho mais profundo nisso, tenho vídeos que entram muito a fundo em como usar melhor o Impeccable.
00:07:08E agora aqui está uma olhada nos novos pôsteres que o Claude criou usando o Slash design.
00:07:11E você pode ver que eles definitivamente se inspiram naquilo que demos a ele.
00:07:16E a qualquer momento, assim como antes, posso dar zoom aqui.
00:07:18Posso dar uma olhada nas propriedades e posso começar a editar as coisas.
00:07:26Agora, vamos falar sobre os ajustes.
00:07:31Portanto, este design ainda não tem controles ajustáveis.
00:07:35Descreva o que você quer ajustar e o Claude adicionará um painel de ajustes para isso.
00:07:39Bem, vamos fazer isso porque agora estamos meio que na etapa três do processo, onde queremos começar a ajustar as coisas até gostarmos.
00:07:43Então, o que vou fazer é abrir o terminal, onde você está, e dizer, ei, podemos agora adicionar alguns controles ajustáveis aqui?
00:07:46Gostaria que os ajustes fossem bem agressivos.
00:07:49Então quero poder editar quase tudo o máximo que puder, tipo o máximo possível usando o painel de ajustes dentro do Claude design.
00:07:50Então agora você pode ver esta parte de ajustes aqui à direita.
00:07:53E então estamos olhando para este no meio.
00:08:00Portanto, posso mudar a cor do papel, certo?
00:08:10O que queremos fazer aqui?
00:08:12E também lembre-se, esses ajustes também podem meio que apenas dar ideias.
00:08:21Portanto, a qualquer momento, você também pode voltar ao Claude Code e dar comandos para chegar a essas diferentes alterações.
00:08:24Novamente, a grande vantagem de ver tudo isso visualmente é apenas o fato de que, tipo, agora posso iterar tão rapidamente em vez de ter que pedir ao Claude Code, esperar pela geração, ver se gosto, pedir ao Claude Code, esperar pela geração, certo?
00:08:25Isso apenas torna todo o processo muito mais rápido.
00:08:29O que queremos fazer aqui?
00:08:30E lembre-se também de que esses ajustes podem dar ideias.
00:08:33Portanto, a qualquer momento, você pode voltar ao Claude Code e pedir essas diferentes alterações.
00:08:39Novamente, o grande diferencial de ver tudo isso visualmente é poder iterar rapidamente, em vez de ter que pedir ao Claude Code, esperar a geração, ver se gostou, pedir de novo, esperar, certo?
00:08:52Isso torna todo o processo muito mais rápido.
00:08:55Podemos alterar a aparência do texto.
00:08:58É possível mudar o tamanho real, a espessura, o espaçamento, e assim por diante.
00:09:03Então, tudo o que você vê aqui pode ser editado.
00:09:06Mas lembre-se de que também podemos fazer grandes mudanças.
00:09:08Se eu não gostar do visual geral, sabe, do segundo modelo,
00:09:12também podemos fazer isso.
00:09:13Posso dar outro comando dizendo: ei, não gostei do conteúdo real disto.
00:09:17Quero que explique melhor às pessoas o que o comando design faz.
00:09:21Então posso dizer algo como: para o design, o segundo, eu gostaria de seguir por esse caminho.
00:09:26Mas, para ser honesto, eu gostaria de mudar o conteúdo.
00:09:29Mais uma vez, estamos buscando um infográfico que explique o que o comando design realmente oferece.
00:09:34Portanto, ao recriá-lo, você pode ignorar os outros dois.
00:09:36Quero focar apenas naquele por enquanto.
00:09:38Vá até a web, certifique-se de entender o que o comando design realmente traz e coloque isso na nova versão deste infográfico.
00:09:48E aqui está a versão atualizada desse pôster.
00:09:49Como você pode ver, há muito mais informações sobre o que o novo comando design realmente faz.
00:09:53E novamente, como usamos essa nova habilidade de design, é muito fácil editar.
00:09:56Ah, eu não gostei do texto aqui.
00:09:59Posso movê-lo para onde eu quiser.
00:10:00Posso ajustar o texto em si, e assim por diante.
00:10:03A partir daí, você continua aquele processo de três etapas: inspiração, uso das habilidades certas e iteração no design de sua preferência.
00:10:11Portanto, se quisermos escolher este do meio, basta dizermos ao Claude Code: ei, quero trabalhar apenas com este do meio.
00:10:16E você continuaria iterando até gostar do que criou.
00:10:20E então você pode fazer o que quiser com ele.
00:10:22Em suma, essa habilidade de design torna o front-end muito mais fácil dentro do próprio Claude Code.
00:10:28Muitas vezes, tivemos que recorrer a ferramentas externas como o Impeccable para fazer esse tipo de design ao vivo na Web.
00:10:34Então, tire um tempo para experimentar este novo recurso.
00:10:36Acho perfeito para quem usa o Claude Code, mas gostava do aplicativo web de design do Claude e achava incômodo alternar entre os dois.
00:10:45Esse é o nicho.
00:10:46Esse é o público que ele atende.
00:10:48Portanto, como sempre, me diga o que achou disso.
00:10:51Não deixe de conferir o Chase AI Plus se quiser ter acesso à minha masterclass de Claude Code.
00:10:55E fora isso, nos vemos por aí.