00:00:00O design do Claude é a melhor coisa que aconteceu
00:00:01ao seu trabalho de front-end desde que surgiram as habilidades.
00:00:05Mas se você não sabe o que está fazendo,
00:00:06você vai esgotar toda a sua cota de uso
00:00:09antes mesmo de conseguir colocar uma landing page no ar.
00:00:11Mas esta masterclass de design do Claude
00:00:12ajudará a resolver esse problema
00:00:14enquanto mostro quais recursos realmente valem o seu tempo.
00:00:17Além disso, faremos um teste comparativo
00:00:19entre o Claude Code normal e o Claude Design.
00:00:22E falaremos sobre alguns dos casos de uso interessantes
00:00:25que vão além do simples trabalho com landing pages.
00:00:27Esta é uma ferramenta incrível e temos muito o que cobrir.
00:00:30Então, vamos começar.
00:00:31O Claude Design é a resposta da Anthropic ao Stitch do Google.
00:00:35E assim como o Google Stitch,
00:00:37ele nos dá a capacidade de criar vários mockups visuais
00:00:40para nossos aplicativos web, mobile e até apresentações.
00:00:43Para acessar o Claude Design, é preciso estar no aplicativo web.
00:00:45Ou seja, claude.ai/design.
00:00:47Não está disponível no Claude Code
00:00:48e não está disponível no aplicativo para desktop.
00:00:51E falando em limitações,
00:00:52uma grande limitação que precisamos destacar logo de cara
00:00:54são os limites de uso.
00:00:56Ele tem seu próprio limite semanal e é o mesmo limite
00:00:59seja no Pro, Max 5 ou 20X.
00:01:02E essa coisa consome muitos recursos,
00:01:05especialmente se você usar uma certa ferramenta
00:01:08sobre a qual falaremos mais tarde neste vídeo.
00:01:10Mas mesmo com essas limitações,
00:01:11o Claude Design é um grande salto à frente
00:01:14quando se trata de trabalho de design front-end com o Claude.
00:01:17Coisas como o sistema de ajustes tornam muito fácil ver
00:01:20como diferentes mudanças ajustariam a sensação geral
00:01:23do seu aplicativo web.
00:01:23O recurso de editar permite entrar rapidamente nos detalhes
00:01:28e alterar as coisas em um nível granular
00:01:30sem depender de comandos de texto.
00:01:31Mas se você quiser continuar com o sistema de comentários,
00:01:33podemos fazer isso.
00:01:34Eles têm um botão de comentário real
00:01:35onde posso selecionar partes individuais do aplicativo web
00:01:39e deixar comentários que vão direto para o Claude Code
00:01:42ou são adicionados a uma fila de comentários para outros membros da minha equipe
00:01:46adicionarem suas opiniões, porque é muito colaborativo.
00:01:48Você pode compartilhar esses designs com outras pessoas
00:01:50e todos podem trabalhar na mesma coisa de lugares diferentes.
00:01:53Posso desenhar no aplicativo para mostrar o que quero mudar.
00:01:56Posso ver a apresentação facilmente em tela cheia.
00:02:00E o mais importante,
00:02:02posso exportar isso facilmente para o Claude Code.
00:02:05E essa configuração focada em design visual torna muito mais fácil
00:02:09obter o tipo de saída de front-end que você deseja
00:02:11em vez de ficar puramente dentro do Claude Code
00:02:13e ter que lidar com aquela dinâmica de atualizar
00:02:18o servidor de desenvolvimento de código que temos há muito tempo.
00:02:19Mas para aproveitar ao máximo esta ferramenta,
00:02:21há algumas coisas que você precisa saber.
00:02:22Então, vamos começar com o trabalho de design front-end
00:02:25para um aplicativo web, que é o que a maioria das pessoas procura.
00:02:29E também mostraremos o que o Claude Code teria nos dado
00:02:33em comparação com o Claude Design.
00:02:34Assim, você pode ver o que estamos obtendo aqui
00:02:37e se isso realmente vale a pena.
00:02:38Mas antes de fazermos isso, uma rápida palavra do nosso patrocinador, eu mesmo.
00:02:42Acabamos de lançar a Masterclass de Claude Code
00:02:44dentro do Chase AI Plus.
00:02:45E é a maneira número um de ir do zero ao desenvolvedor de IA,
00:02:48especialmente se você não vem de uma formação técnica.
00:02:51Ultimamente, temos focado no nosso sistema de sistema operacional agêntico
00:02:54dentro da masterclass,
00:02:55onde usamos o Claude Code como motor
00:02:58e o complementamos com o Obsidian para memória,
00:03:00com o GWS para anexar toda a nossa suíte Google.
00:03:03E então, com essa base,
00:03:05anexando todos os pacotes de habilidades personalizados,
00:03:09que fazem sentido para nossos casos de uso.
00:03:12E até conversamos sobre como empacotar tudo isso
00:03:14e vender para clientes.
00:03:15Então, se isso é algo que lhe interessa,
00:03:17definitivamente confira.
00:03:18Está dentro do Chase AI Plus,
00:03:19haverá um link no comentário fixado.
00:03:21Então, vamos falar sobre o Claude Design e seu aplicativo web,
00:03:24porque há algumas decisões que precisamos tomar
00:03:26antes mesmo de começar a dar comandos a esta coisa.
00:03:28E agora vou me mover por toda a tela
00:03:31durante este vídeo, então tenha paciência comigo.
00:03:32Agora, a primeira pergunta que vamos nos fazer é:
00:03:35vamos usar um sistema de design?
00:03:38Aqui para mim, você vê nenhum
00:03:40e vê um sistema de design de sistema operacional agêntico.
00:03:42O seu dirá nenhum no início.
00:03:44Se quisermos criar um sistema de design,
00:03:47vamos subir aqui
00:03:48e vamos em sistemas de design.
00:03:50Então, provavelmente você não terá nada aqui
00:03:52e você clicará em criar.
00:03:53Agora, o que é um sistema de design?
00:03:56Bem, essencialmente é como um modelo visual
00:04:00que você pode aplicar a qualquer projeto que criar no futuro.
00:04:03Então, se você tem fontes específicas, usa logotipos específicos,
00:04:07qualquer coisa específica, mesmo que seja apenas um clima geral,
00:04:10você pode fazer isso aqui.
00:04:11É aqui que você configura isso.
00:04:12Para não ter que se repetir
00:04:13para cada projeto individual.
00:04:15Se você tem algum tipo de linha condutora
00:04:17do ponto de vista visual de design.
00:04:20Então você insere o nome da sua empresa
00:04:21e fornece exemplos.
00:04:23Agora, esses exemplos podem ser códigos.
00:04:25Então posso vincular um repositório GitHub.
00:04:27Posso arrastar uma pasta para cá.
00:04:29Posso fazer upload de arquivos.
00:04:30Posso adicionar fontes, ativos, o que quiser.
00:04:33É aqui que você define sua marca.
00:04:36Agora, uma ressalva.
00:04:39Isso é o que eu estava falando quando disse devorador de tokens.
00:04:42E por devorador de tokens, quero dizer que executar um sistema de design
00:04:45levará, A, entre cinco e 15 minutos
00:04:47porque ele ingere tudo, depende do tamanho.
00:04:50E B, isso consumirá cerca de 20 a 25% do seu uso
00:04:55logo de cara.
00:04:56Então entenda isso, não venha aqui pensando,
00:04:57oh, a primeira coisa que vou fazer
00:04:58é criar uns cinco sistemas de design.
00:05:00Absolutamente não, absolutamente não.
00:05:02Faça um se você sabe o que quer fazer
00:05:05e vou mostrar como fica
00:05:07enquanto configuramos isso.
00:05:08Mas não faça mais do que isso.
00:05:09Pelo menos não agora, até que aumentem os limites,
00:05:11o que provavelmente farão no futuro.
00:05:12Então, devorador de recursos, não deixe que isso te prejudique.
00:05:16Não deixe que isso atrapalhe você.
00:05:17Agora, se você quiser fazer isso,
00:05:19você apenas preencherá tudo isso
00:05:20e então clicará em continuar para a geração
00:05:21e uma caixa pop-up mostrará algo como:
00:05:24ei, isso vai levar de cinco a 15 minutos.
00:05:26Assim que ele terminar de ingerir todos esses ativos,
00:05:29você obterá algo como isto
00:05:30onde ele pede que você revise o rascunho do sistema de design
00:05:33que ele criou.
00:05:34O que eu forneci foi o código do meu painel do sistema operacional agêntico
00:05:38que mostrei um pouco mais cedo.
00:05:40Ele tem esse tipo de tema de cores do Claude.
00:05:43Tem fonte de texto específica, tudo isso.
00:05:45Então foi isso que eu alimentei,
00:05:46foi essencialmente esse tipo de visual.
00:05:48E ele voltou com tudo isso.
00:05:49Então, ei, isso parece bom.
00:05:53Isso parece bom.
00:05:53Ei, olha aquele mascote.
00:05:54Parece um pouco familiar.
00:05:55Isso parece bom.
00:05:57A voz percorre todas as cores.
00:05:59Então ele entra em detalhes bem específicos
00:06:03do tipo, ok, como você quer que sejam essas cores?
00:06:06Como você quer que sejam os cartões?
00:06:07É muito específico.
00:06:08É muito legal.
00:06:09E novamente, muito reminiscente do Stitch.
00:06:11Muito, muito reminiscente desse tipo de coisa.
00:06:14E então segui em frente e aprovei tudo.
00:06:16Ele está dizendo que falta a fonte da marca.
00:06:17Então, se eu tivesse fontes específicas que sempre quis usar,
00:06:20também posso carregá-las.
00:06:21E a qualquer momento posso voltar aqui
00:06:23porque ele dividiu todo o material dos componentes,
00:06:26clicar nele e depois dar uma olhada e editar conforme necessário.
00:06:30E assim como o que você verá mais tarde
00:06:31com as landing pages reais e as apresentações
00:06:33e tudo isso, podemos compartilhar isso, certo,
00:06:36para uma equipe ou qualquer coisa, ou posso exportar.
00:06:39Como PowerPoint, PDF, podemos enviar para o Canva, HTML,
00:06:42Claude Code, muito, muito fácil, a apenas um clique de distância.
00:06:44Além disso, temos os arquivos de design reais.
00:06:46Então posso olhar aqui dentro e ver tudo o que está acontecendo,
00:06:50os próprios arquivos HTML e tudo isso.
00:06:52Então há muito que você pode personalizar e brincar aqui.
00:06:55Não é uma caixa preta de jeito nenhum onde é tipo,
00:06:57bem, espero que o Claude Design tenha criado algo bom.
00:06:59Quem sabe o que está acontecendo abaixo da superfície?
00:07:01Não, você tem visão.
00:07:03Tipo, isso tudo é código.
00:07:04Tipo, essa é uma maneira legal dele criar código
00:07:06e podemos levar esse código para nossa própria máquina local
00:07:09a qualquer momento.
00:07:10Não estamos presos aqui.
00:07:11E então, para trazer de volta ao Claude Design e aplicativos web,
00:07:13essa é a primeira pergunta que estamos respondendo.
00:07:15Vamos usar um sistema de design?
00:07:16Isso é algo na mesma veia visual
00:07:18do que fizemos no passado?
00:07:19E mais importante,
00:07:20você criou algum sistema de design?
00:07:22Você desistiu de 20% dos seus tokens semanais
00:07:25para os deuses da Anthropic e já tem até essa opção?
00:07:28Agora, para esta demonstração, vamos ficar com "nenhum".
00:07:30Assim, estamos todos na mesma sintonia.
00:07:32A próxima pergunta é, ei,
00:07:33quero fazer um wireframe ou quero fazer alta fidelidade?
00:07:37É provável que você queira fazer alta fidelidade.
00:07:39Para que você possa ver como vai ficar de verdade.
00:07:41Mas, novamente, ei, se você quiser fazer um wireframe,
00:07:43você sempre pode alternar entre eles.
00:07:44Você não está preso a um ou outro.
00:07:45Mas, para isso, faremos alta fidelidade.
00:07:47Então, chamaremos de CD demo e vamos criar.
00:07:50Depois, ele vai nos trazer aqui e pedir contexto.
00:07:53Então, você tem esse sistema de design ou apenas uma captura de tela
00:07:56ou uma base de código ou um arquivo do Figma?
00:07:58De qualquer forma, se você está começando do zero no passo zero,
00:08:01ou se você tem uma base de código,
00:08:03você quer fornecer algo a ele, idealmente.
00:08:05Se você tem uma base de código, como conversamos,
00:08:07você já vem trabalhando em um aplicativo, dê isso a ele.
00:08:09Dê ao Claude Design.
00:08:10Vai funcionar melhor.
00:08:12Mas mesmo que não esteja e você esteja começando do zero,
00:08:14eu sugiro fortemente que, no mínimo,
00:08:16você procure por aí no mundo
00:08:18e encontre algum tipo de inspiração que você goste,
00:08:20seja do Dribbble, Awwwards ou Godly Websites,
00:08:23qualquer coisa, certo?
00:08:25Começar do zero absoluto e esperar que o Claude Design
00:08:27faça todo o trabalho pesado,
00:08:28porque aposto que o seu prompt será ruim.
00:08:30Apenas entenda que, quanto menos contexto você fornecer,
00:08:33maior a chance de ter uma regressão à média.
00:08:35Então, entenda isso antes de começar.
00:08:36Temos a capacidade de fazer esboços.
00:08:38Então, sabe, podemos desenhar aqui
00:08:40e pensar, ok, aqui está nossa imagem.
00:08:44Quero o texto aqui.
00:08:48E depois quero a imagem de destaque.
00:08:53Imagem de destaque aqui.
00:08:59E então vamos fazer um banner de rolagem.
00:09:10Vamos dar algo a ele,
00:09:12mesmo que seja uma obra de arte brilhante como esta.
00:09:15E você pode fazer muito mais do que apenas isso.
00:09:16Podemos trocar a caneta, certo?
00:09:18Podemos inserir texto.
00:09:19Posso adicionar diferentes, tipo, posso adicionar notas adesivas.
00:09:21Então, há muito o que fazer aqui.
00:09:25E a partir daqui, você só precisa fazer o prompt da coisa.
00:09:28Você também tem a capacidade de mudar o modelo.
00:09:30O Opus 4.7 é o que eu sugeriria,
00:09:33porque, especialmente se você estiver adicionando coisas como capturas de tela,
00:09:35o Opus 4.7 tem a fidelidade mais alta
00:09:37e as resoluções mais altas para a captura de tela.
00:09:403x o que você está obtendo com o Opus 4.6.
00:09:42Então agora vamos dar um prompt a ele.
00:09:44Estou dizendo para criar uma página de destino para o Argus,
00:09:46uma plataforma de inteligência de mídia social
00:09:48que ajuda criadores a identificar tópicos em alta
00:09:49em seu nicho antes que eles estourem.
00:09:51Esse é um layout, sabe,
00:09:53praticamente espelhando o que você escreveu aqui.
00:09:55Portanto, esse é um prompt tão ruim quanto poderíamos dar a ele.
00:09:58Tipo básico de SaaS.
00:10:00Então, vamos ver o que ele cria.
00:10:02E aqui está o que o Claude Design criou,
00:10:03com um prompt muito simples e nenhum contexto fora nós
00:10:06apenas rabiscando na página.
00:10:08E é isto, que eu acho decente para uma primeira tentativa.
00:10:13Em termos de uso, alerta de uso, 4%.
00:10:16Levou 4% do nosso uso semanal total
00:10:18para gerar esta página de destino.
00:10:20E aqui está o que o Claude Code nos deu
00:10:21com exatamente o mesmo prompt,
00:10:22usando também a habilidade de design front-end.
00:10:25Nada mal.
00:10:26Quero dizer, algumas pequenas coisas que podemos criticar imediatamente,
00:10:28que é tipo, ei, o texto está cortado aqui e aqui.
00:10:32Não há tanto erro neste.
00:10:35O texto fica meio sobreposto aqui.
00:10:39Ele mostra "rising now" aqui embaixo,
00:10:41que também fica meio sobreposto, mas bem perto.
00:10:45Quero dizer, para ser sincero,
00:10:46eu gosto um pouco mais do design original,
00:10:47mas eu poderia ver alguém gostando deste
00:10:49um pouco mais também.
00:10:50Então, primeira tentativa, não é uma diferença enorme.
00:10:52Então, por que usar o Claude Design?
00:10:54Onde ele começa a se destacar?
00:10:55Bem, ele começa a se destacar
00:10:56quando começamos a falar sobre variações
00:10:59e sobre a capacidade de iterar.
00:11:00E você vê isso imediatamente com os ajustes.
00:11:03Então, a capacidade de eu fazer isso é algo grande.
00:11:07Eu poder mudar o título muito rapidamente
00:11:10ou ver o ticker.
00:11:13E podemos expandir isso também.
00:11:16Então, eu escrevi "aumente a quantidade de ajustes agressivamente".
00:11:18Eu quero poder brincar com isso o máximo possível.
00:11:20Então, vamos ver o que ele traz de volta.
00:11:22Tudo bem, então agora podemos ver que ele adicionou muito mais ajustes
00:11:26para mexermos.
00:11:27E qual foi a taxa de uso?
00:11:30Adicionar todos esses ajustes adicionou 7%.
00:11:32Então você pode ver que só de adicionar uma página de destino
00:11:36e uns 14 ajustes, já usamos, o que é isso?
00:11:39Cerca de 11% do nosso total.
00:11:40Agora, acho que os ajustes são importantes.
00:11:43Eu falei mais cedo na introdução,
00:11:44quais são os recursos nos quais realmente queremos focar
00:11:47quando se trata do Claude Design?
00:11:48Porque quando fizemos apenas o "one shot",
00:11:49não foi muito diferente do que consegui
00:11:51com a habilidade de design front-end.
00:11:52Bem, esses ajustes e a capacidade de mexer
00:11:55em todas essas coisas e essas mudanças sutis rapidamente,
00:11:59certo, esse é realmente o poder do Claude Design.
00:12:02Vou dar um zoom um pouco maior
00:12:03para podermos ver os ajustes em ação um pouco melhor,
00:12:05mas posso fazer tudo agora, da paleta aos detalhes,
00:12:10raio do canto, grade de fundo, sem grade de fundo,
00:12:14fontes, ênfase, diferenças de títulos, trocas de layout, certo?
00:12:19Esse é o poder aqui.
00:12:21O poder não é, tipo, ah, ele consegue fazer o design da UI de primeira
00:12:23e o design da UI de primeira é tão bom.
00:12:25Não, é o fato de que eu realmente posso iterar muito rapidamente,
00:12:29muito rapidamente, isso é, pense na rapidez com que estou fazendo isso
00:12:33e pense em quanto tempo levaria
00:12:34para percorrer tudo isso dentro do Claude Code.
00:12:36Quero dizer, podemos até mudar o nicho
00:12:39do tipo de coisa de mídia social que ele está olhando
00:12:41nesta imagem, de IA e tecnologia para jogos, para finanças.
00:12:46Graças a Deus posso ajustar a velocidade do ticker
00:12:47porque essa coisa estava voando, mas sim, isso é incrível.
00:12:52Esta é a parte um e acho que há duas coisas.
00:12:54Bem, na verdade há um pouco mais do que isso,
00:12:56mas os ajustes eu acho que são o maior valor agregado do design
00:12:59porque tudo gira em torno da iteração visual.
00:13:01E, na minha opinião, o segundo recurso mais impactante
00:13:04do Claude Design é a variação das páginas da web.
00:13:07Então, os ajustes são muito micro, certo?
00:13:09Tipo, estamos falando de cores, estamos falando de detalhes,
00:13:11estamos falando de fontes, mas e se eu quiser variações
00:13:14da página de destino como um todo, tipo, enlouquecer com isso.
00:13:18Não estou falando de uma fonte diferente,
00:13:19estou falando de um design completamente diferente
00:13:21e eu quero poder vê-los empilhados.
00:13:23Novamente, assim como posso fazer com o stitch.
00:13:25Quero poder fazer isso.
00:13:26Bem, podemos fazer isso dentro do Claude Design
00:13:28e é muito fácil.
00:13:29Vamos apenas pedir que ele faça exatamente isso.
00:13:32Então eu fiz o prompt do design e disse,
00:13:33você pode agora criar mais duas variantes desta página de destino
00:13:36que eu possa clicar entre elas, que sejam estilos muito diferentes,
00:13:39sugira estilos variantes diferentes para mim primeiro.
00:13:42Então ele voltou com seis opções diferentes para mim.
00:13:44Podemos fazer estilo terminal Bloomberg,
00:13:48hipermaximalista editorial, brutalista, synthwave, pastel suave,
00:13:53ou jornal impresso.
00:13:56Vamos, sim, meio que um e dois.
00:13:59Então eu direi, vamos fazer um e dois
00:14:03e, obviamente, manter o layout atual também.
00:14:08Então, o Claude Design terminou com uma variante.
00:14:10Então aqui está a editorial, a que começamos.
00:14:13Agora temos uma opção terminal.
00:14:18Assim como uma opção editorial maximalista,
00:14:21o que é meio interessante, algo diferente.
00:14:24Agora, se você não pedir,
00:14:25ele só fará os ajustes para o original.
00:14:28Portanto, quando você fizer essas variantes,
00:14:30acho que o fluxo de trabalho geral deveria ser,
00:14:33é você começar primeiro com as variantes.
00:14:35Então, em um nível macro, você está pensando, ok,
00:14:37eu meio que quero ir nessa direção.
00:14:39E então, uma vez que você escolhe um desses macro,
00:14:42digamos que decidimos ficar com o que gostamos,
00:14:44então você iria para o estágio de ajuste muito agressivo.
00:14:47Para que você possa ver tudo
00:14:49e aprofundar no que você quer.
00:14:51Porque com a forma como o uso está configurado agora,
00:14:54se você for no macro e disser,
00:14:56não quero apenas três opções.
00:14:57Quero quatro, cinco variantes e quero ajustes em todas elas.
00:15:00Você vai apenas consumir seu uso.
00:15:02Porque adicionar essas duas variantes, maximalista e terminal,
00:15:04foi uns 5% extras.
00:15:05Então isso eleva para cerca de,
00:15:07acho que estamos em 17% agora para a página de destino,
00:15:11duas variações da página de destino mais ajustes.
00:15:13E eu sei que continuo insistindo no uso,
00:15:14mas para muitas pessoas, isso é um grande negócio
00:15:16e deveria ser.
00:15:17Acho que futuramente,
00:15:18isso provavelmente mudará toda essa coisa de uso,
00:15:19mas apenas tenha isso em mente.
00:15:20E, portanto, com essas duas coisas funcionando em conjunto,
00:15:23essa variação nos ajustes,
00:15:26é o que nos permite chegar a uma solução de 80%, 90%.
00:15:31Agora posso ficar ainda mais hiperfocado nisso.
00:15:35Podemos ir lá em cima como eu mostrei no início.
00:15:37Podemos fazer edições.
00:15:39Posso, por exemplo, clicar neste cabeçalho superior.
00:15:42Posso alterar a opacidade.
00:15:43Posso alterar a largura, a cor, tudo isso.
00:15:45Então podemos ser muito, muito específicos se quisermos,
00:15:47mas o verdadeiro poder vem de atingir aquela solução de 90%,
00:15:50ficando tipo, ok, gostei do primeiro editorial.
00:15:54Gosto da ênfase estar na marca,
00:15:55sendo uma, aquele anel parece horrível, sendo uma marca.
00:15:59Gosto desse subtítulo específico, desta manchete, o que quer que seja.
00:16:04E então ficar tipo, tudo bem, vamos com isso.
00:16:05Nós gostamos dos ajustes.
00:16:06Agora vamos finalizar o resto da página de destino,
00:16:09porque esta é apenas a seção principal.
00:16:11E então o que você faz é exportar isso para o Claude Code.
00:16:14Você entrega isso para o Claude Code.
00:16:15Quando eu clico nisto, você tem algumas opções.
00:16:17Você pode baixar o zip ou simplesmente copiar este comando
00:16:20e trazê-lo para dentro do Claude Code.
00:16:22E acho que este tipo de fluxo de trabalho é infinitamente mais rápido
00:16:25do que estar aqui, que é o que o Claude Code nos deu
00:16:28com exatamente o mesmo comando.
00:16:29Quero dizer, tipo, ok, tudo bem, Claude Code,
00:16:32vamos mexer na cor agora.
00:16:35Vamos fazer algumas variações.
00:16:36Vamos mexer na manchete agora e fazer algumas variações.
00:16:39Isso pode levar horas, enquanto isso levou minutos.
00:16:44E pelo menos para mim, eu preciso ver as coisas
00:16:47e preciso ver várias opções
00:16:48antes de realmente ver o que eu gosto.
00:16:50E melhor ainda, as chances são de que, uma vez que vejo algo,
00:16:53eu possa mudar.
00:16:54Porque, para ser honesto, se eles estão vendo isso,
00:16:54eu gosto meio que desse super vertical.
00:16:56Talvez façamos algum tipo de ícones aqui ou algo assim.
00:16:58Tipo, eu só quero iterar.
00:17:00Eu só quero ver coisas diferentes.
00:17:02Então essas são as duas maiores melhores práticas que posso lhe dar
00:17:05quando se trata da parte do aplicativo web disso.
00:17:08Macro, certo, peça por variações.
00:17:11E então micro, peça por mais ajustes.
00:17:13A única coisa que não fizemos aqui,
00:17:15e mostraremos isso em coisas como o slide deck
00:17:18e coisas assim,
00:17:19é pedir para ele basicamente rodar seu próprio modo de plano.
00:17:22Então nós demos o comando e logo de cara,
00:17:24ele cuspiu isso para nós.
00:17:25O que poderíamos ter feito em vez disso é dizer,
00:17:26ei, eu meio que quero fazer um modo de plano com você.
00:17:28Eu quero que você me faça várias perguntas.
00:17:30E ele, em vez disso, vai te levar através
00:17:32de um número significativo de perguntas,
00:17:33tipo cinco, oito, 10 perguntas sobre, tipo,
00:17:35ok, o que você quer aqui?
00:17:36O que você quer ali?
00:17:37O que você quer lá?
00:17:38Dessa forma você não precisa fazer tantas iterações
00:17:40e, finalmente, isso economiza seu uso.
00:17:42E eu passei pelo mesmo tipo de fluxo
00:17:44quando estava criando o front-end
00:17:46para o meu painel do sistema operacional agentico.
00:17:47Você pode ver aqui em cima,
00:17:48isto é com o que eu comecei originalmente.
00:17:51E então eu consegui, de certa forma, passar
00:17:52por todas essas opções diferentes.
00:17:53Eu eventualmente cheguei nesta, a do cockpit,
00:17:56embora eu tenha pensado em fazer esta com o sprite legal.
00:17:58E então eu simplesmente trouxe essa versão de volta para o Claude Code
00:18:01e então fiz pequenos ajustes nas margens
00:18:03e realmente, tipo, conectei tudo.
00:18:04Então era um aplicativo web adequado.
00:18:06Agora vamos fazer o design e o slide deck do Claude.
00:18:08Então vamos passar por isso um pouco mais rápido
00:18:09porque muitos dos fundamentos que passamos
00:18:13quando se trata de aplicativos web também se aplicam aos slide decks.
00:18:16Então não vou me alongar nesses pontos.
00:18:17E desta vez mostraremos o sistema de design em ação.
00:18:21E lembre-se de que o sistema é baseado nos visuais
00:18:24do nosso sistema operacional agentico.
00:18:26Então vamos em frente e clicar em criar.
00:18:27E o que vemos?
00:18:28A mesma configuração de antes.
00:18:30E algo pedindo para você fornecer contexto,
00:18:32seja capturas de tela, bases de código ou arquivos Figma.
00:18:35Agora, o único contexto que vamos dar a ele
00:18:37é o sistema de design que já está lá.
00:18:39Assim como um comando dizendo,
00:18:41queremos um slide deck que fale sobre as diferenças
00:18:45entre o design do Claude e o Google stitch.
00:18:48E eu tinha o Opus 4.7 em outra janela com o Claude Code,
00:18:53para criar o comando.
00:18:54Então eu tive que fazer uma busca na web.
00:18:55Ok, aqui estão mais ou menos as diferenças entre os dois.
00:18:57Agora, no final, escrevi: antes de construir qualquer coisa,
00:19:01faça-me todas as perguntas que tiver.
00:19:02Para que estejamos na mesma página.
00:19:05Então, em certo sentido, estamos quase forçando-o a fazer
00:19:07meio que um modo de plano.
00:19:08E assim você vê isso populando aqui.
00:19:10Novamente, você pode ter esse modo de plano forçado
00:19:12totalmente ocorrendo quando você faz aplicativos web também.
00:19:14Apenas certifique-se de colocá-lo no comando inicial.
00:19:16Então, para quem é este deck?
00:19:18Digamos que seja para uma palestra pública.
00:19:20Diremos, vamos mantê-lo curto e doce.
00:19:24Coloque em seis, faremos cinco minutos.
00:19:28Faremos cinco slides.
00:19:30Faremos um pouco opinativo, estilo de título, peça central.
00:19:34Diremos apenas mapa de posicionamento dois por dois.
00:19:37Preço de chamada, sim.
00:19:39E então vamos passar pelo resto deles.
00:19:43Sem anotações.
00:19:44E então, ao todo, ele nos faz uma, duas, três, quatro, cinco,
00:19:47seis, sete, oito, nove, 10, 11, 12, 13, 14, 14 perguntas.
00:19:52Mais, você sabe, um pequeno lembrete geral aqui embaixo,
00:19:56que eu realmente gosto.
00:19:58Novamente, o modo de plano do Claude Code às vezes fará,
00:20:00eu sinto que, no máximo, sabe, algumas,
00:20:03tipo duas iterações de quatro perguntas cada.
00:20:05Então isso é ótimo.
00:20:06E aqui está uma olhada no slide deck.
00:20:07Eu o coloquei em tela cheia e, para referência,
00:20:10isso consumiu 5% do nosso uso.
00:20:12Então cerca de 1% por slide.
00:20:15Então temos a página de título, pequeno rodapé sobre o deck
00:20:19sendo gerado pelo Claude Design.
00:20:22Temos os números, você sabe, onde eles caem.
00:20:26Bem, temos meio que um gráfico mostrando onde eles caem
00:20:30em termos de custo.
00:20:31Obviamente, o Claude Design sendo muito mais caro.
00:20:34Relatório de campo.
00:20:37E então nos dá meio que,
00:20:38ei, aqui está um pequeno gráfico mostrando
00:20:40o que você deve usar para qual caso de uso.
00:20:43Então eu acho que o slide deck parece muito legal,
00:20:45para ser honesto com você.
00:20:46Mas mais importante do que isso,
00:20:48ele seguiu o sistema de design.
00:20:49Este SO agentico sobre o qual todo o sistema de design foi construído
00:20:53está definitivamente refletido no deck.
00:20:55Essas duas coisas parecem ter vindo do mesmo lugar.
00:20:59E assim como com o aplicativo web,
00:21:00podemos passar pelo mesmo fluxo.
00:21:03Este foi o original que ele nos deu.
00:21:05Agora podemos pedir por variantes macro e dizer,
00:21:07ok, nós realmente queríamos ficar com, você sabe,
00:21:09nosso sistema de design?
00:21:11Ou queremos ir em uma direção inteiramente diferente?
00:21:13Ok, nós vemos, você sabe, duas, três, quatro variantes diferentes.
00:21:16Tudo bem, vamos focar em uma.
00:21:17E agora vamos trazer os ajustes
00:21:19e realmente ajustar essa coisa.
00:21:20E é assim que eu acho
00:21:22que você deve abordar o slide deck.
00:21:23Da mesma forma que abordamos aplicativos web.
00:21:24Agora, para referência, aqui está o slide deck
00:21:27que o Claude Code nos produziu.
00:21:29Eu dei a ele exatamente o mesmo comando
00:21:31e criei isso a partir do mesmo diretório,
00:21:34o sistema do SO agentico ao vivo.
00:21:36Então ele tinha acesso total ao mesmo sistema de design,
00:21:38por assim dizer.
00:21:39Além disso, também pedi para ele me fazer perguntas.
00:21:42Ele só me fez sete.
00:21:43E as perguntas, para ser honesto, não eram tão boas.
00:21:46Eram um pouco mais superficiais
00:21:47em termos de, bem, contagem de slides.
00:21:49E o que você quer que a proporção de aspecto seja
00:21:51versus o que vimos no design?
00:21:52E eu acho que isso se reflete no geral,
00:21:55em um resultado muito mais brando.
00:21:57E estou meio surpreso que não tenha sido mais próximo
00:22:00em termos de estilo visual em comparação ao que o design nos deu.
00:22:02Quer dizer, não é ruim.
00:22:05Quer dizer, as cores são próximas, o texto é próximo,
00:22:07mas quer dizer, vamos ser sérios.
00:22:10Este tipo de supera o outro,
00:22:12se vamos ser honestos.
00:22:13Por último, vamos falar sobre design de aplicativo móvel.
00:22:15E você tem duas opções aqui.
00:22:17Uma, você vai direto para o móvel.
00:22:19Você não está fazendo nada de aplicativo web.
00:22:21E é bem simples.
00:22:22Você só vai fazer o que fizemos com a parte do aplicativo web
00:22:25no início deste vídeo.
00:22:26E você só vai dizer no começo,
00:22:28isto é para um aplicativo móvel.
00:22:29Certifique-se de que os visuais reflitam isso.
00:22:32Mas se você está pegando um aplicativo web
00:22:33e então quer traduzir isso para uma plataforma móvel,
00:22:35é bem simples.
00:22:36Embora pudéssemos ficar aqui nesta janela de comando em que estamos,
00:22:40de fato, ok, agora mostre-me isso em móvel.
00:22:42Provavelmente faz mais sentido ter um projeto separado
00:22:45com exatamente as mesmas coisas acontecendo.
00:22:46Mas agora temos uma clara delimitação
00:22:48entre o aplicativo web no qual estamos trabalhando versus o móvel.
00:22:51E então, para fazer isso, você só vai chegar no canto superior direito
00:22:53onde diz compartilhar.
00:22:54E então você vai clicar em duplicar projeto.
00:22:57Uma vez que você faça isso, ele o levará para uma página como esta.
00:23:00Mas se você voltar para a página inicial,
00:23:02agora podemos ver que existe um remix de demonstração do CD.
00:23:05E esse remix é o projeto duplicado.
00:23:08E então agora eu só vou comandá-lo e dizer,
00:23:10você pode me mostrar o mesmo design em um formato móvel?
00:23:13E aqui estão as versões móveis que ele nos deu.
00:23:15Ele foi em frente e criou variantes de todos os três.
00:23:18Eu não especifiquei isso, mas ele fez.
00:23:19Então ele nos deu essencialmente nove maquetes
00:23:21e o custo total foi de 5% de uso.
00:23:25Então o mesmo fluxo de sempre.
00:23:27Ele nos deu o macro bem aqui.
00:23:29Então escolheríamos o que gostamos,
00:23:30obviamente seria o que você decidiu para o seu aplicativo web.
00:23:32E então, a partir daí, diríamos,
00:23:34ei, eu gosto do editorial.
00:23:36Agora traga alguns ajustes para que eu possa realmente acertar isso.
00:23:38Mas a verdade seja dita,
00:23:39se você tiver tudo configurado na versão do aplicativo web,
00:23:42as chances são de que você já tenha feito os ajustes.
00:23:44Então não deveria haver muito
00:23:47que você precise mudar neste ponto.
00:23:48Mas sempre há um pouco,
00:23:51você sempre encontra problemas quando vai do aplicativo web padrão
00:23:53para um design móvel.
00:23:55Mas como você vê aqui, muito fácil de fazer,
00:23:57apenas um único comando.
00:23:58Então é aqui que vou deixar vocês hoje.
00:23:59Espero ter conseguido eliminar as diferenças
00:24:02entre o Claude Design e o Claude Code,
00:24:04especialmente destacando os recursos
00:24:06que realmente fazem nosso dinheiro dentro do Claude Design,
00:24:09que são os ajustes e que são as variantes.
00:24:11E realmente o que isso nos compra é velocidade de iteração.
00:24:15Eu posso passar por uma tonelada de versões diferentes
00:24:17do que quer que eu esteja tentando criar
00:24:19para que eu possa finalmente chegar a algo que eu goste.
00:24:21E uma vez que eu faça isso,
00:24:22então eu o puxo para dentro do ecossistema do Claude Code.
00:24:25E espero ter conseguido tornar os custos de uso
00:24:27um pouco mais claros ao chamar as porcentagens que perdemos
00:24:31após cada iteração e criação.
00:24:33Então, como sempre, deixe-me saber o que você achou.
00:24:35Definitivamente fique atento para mais material do Claude Design
00:24:38porque acho que esta é uma ferramenta super legal.
00:24:40Certifique-se de conferir o Chase AI+
00:24:42se você quiser colocar as mãos na Masterclass do Claude Code,
00:24:45e vejo você por aí.