00:00:00Então, as atualizações nunca param.
00:00:02A Anthropic acaba de lançar o Claude Design,
00:00:05que agora nos oferece uma interface para criar web apps,
00:00:09sites, basicamente o que quisermos
00:00:11através da interface do Claude.
00:00:13Esta é a versão deles do Google Stitch.
00:00:16E como podem ver neste vídeo de demonstração,
00:00:18trata-se de dar a capacidade de ajustar tudo,
00:00:21do macro ao micro, nestes designs.
00:00:23E não estamos falando apenas de web apps,
00:00:25estamos falando também de designs mobile.
00:00:27E é engraçado porque, quando falamos sobre
00:00:28Anthropic e Claude Code,
00:00:30uma de suas maiores fraquezas é o design de front-end.
00:00:32Então, ver que eles estão lançando agora
00:00:34um aplicativo completo
00:00:36que lida com essa fraqueza é muito legal.
00:00:39Neste vídeo, vou mostrar como funciona.
00:00:41Faremos uma demonstração rápida
00:00:42para que você mesmo possa testar.
00:00:43O Claude Design foi criado com o Opus 4.7 em mente
00:00:46e está disponível para quem estiver em qualquer plano,
00:00:49do Pro Max ao Enterprise.
00:00:51E ele faz de tudo, de protótipos a mockups
00:00:53e apresentações de PowerPoint.
00:00:54E é algo que podemos exportar para ferramentas
00:00:57como o Microsoft PowerPoint ou enviar para o Canva.
00:00:59Uma das coisas legais aqui é o design de marca.
00:01:01Você pode fornecer uma base de código,
00:01:03digamos, o código do seu site,
00:01:05e ele extrairá todos os ativos de marca do site
00:01:09para combinar cores e tipografia
00:01:11com o design em que você está trabalhando.
00:01:12Para começar, basta acessar claude.ai/design
00:01:15e ele levará você a uma página como esta.
00:01:18Logo de cara, à esquerda, temos algumas opções:
00:01:20protótipos, slides, uso de templates ou outros.
00:01:23Aqui embaixo, como eu mencionei,
00:01:25temos a capacidade de criar um sistema de design.
00:01:27Se eu for em "configurar sistema de design",
00:01:29posso inserir algo como o nome da minha empresa
00:01:33e fornecer exemplos do meu sistema de design.
00:01:36Você não é obrigado a fazer isso,
00:01:38mas ajuda se você já tiver algo
00:01:40ao qual queira que o design corresponda.
00:01:41Você pode fornecer o link do seu GitHub.
00:01:43Você pode até arrastar a pasta.
00:01:45Se tiver a base de código no seu computador,
00:01:48pode arrastá-la para cá,
00:01:49ou apenas adicionar fontes, logotipos e ativos,
00:01:51além de quaisquer outras notas.
00:01:52O que eu fiz foi selecionar a pasta no meu computador
00:01:55com os ativos do meu site,
00:01:57e então cliquei em "continuar para geração".
00:01:59Ao fazer isso, especialmente com códigos maiores,
00:02:01primeiro, ele não fará o upload de todo o código.
00:02:03Ele vai identificar quais arquivos fazem sentido.
00:02:05E, segundo, surgirá uma janela dizendo:
00:02:07"Ei, isso pode levar de 15 a 20 minutos",
00:02:09enquanto ele analisa todos os seus arquivos.
00:02:11Agora, se quiser fazer algo do zero,
00:02:12você também pode fazer totalmente.
00:02:13Então, vamos iniciar um novo protótipo.
00:02:16Vamos chamá-lo de "Chase demo".
00:02:17Temos duas opções.
00:02:18Pode ser apenas um wireframe básico
00:02:20ou podemos ir direto para um mockup de alta fidelidade.
00:02:23Faremos o mockup.
00:02:25Isso nos levará a esta página.
00:02:26E, novamente, sinto muito a vibe do Stitch aqui.
00:02:28Vou dizer a ele:
00:02:29"vamos criar um gráfico interativo de tema escuro"
00:02:31"mostrando como a cultura flui entre as cidades,"
00:02:33"um globo giratório com cidades conectadas por caminhos brilhantes".
00:02:35É a mesma coisa que fizeram na demo,
00:02:37mas estou interessado em ver se o que teremos aqui
00:02:40realmente condiz com o que mostraram no vídeo,
00:02:43e quais tipos de diferenças veremos.
00:02:45Quanto eles exageraram no anúncio?
00:02:47Então, vamos enviar.
00:02:48E, a propósito, vocês podem ver aqui,
00:02:50podemos escolher coisas como o modelo.
00:02:52Você pode anexar arquivos.
00:02:53Pode usar voz e importar o que quiser.
00:02:55Ele já começa a nos fazer algumas perguntas,
00:02:57o que eu gosto muito.
00:02:58Isso é quase igual ao modo de planejamento no Claude Code.
00:03:02Que tipo de cultura estamos pensando?
00:03:04Vamos escolher um estilo de globo misto.
00:03:07Vamos escolher este caminho de fluxo.
00:03:13Parece legal.
00:03:14O que queremos para a paleta de cores?
00:03:16Vamos de multi-tons.
00:03:18E, imediatamente, adoro o fato
00:03:20de que agora estamos recebendo esses prompts.
00:03:21Se eu for no Stitch, não terei muito isso.
00:03:24Em outras ferramentas, também não.
00:03:26Uma das coisas mais poderosas no Claude Code,
00:03:29e já falamos disso em outras lições de web design,
00:03:31é ter essa interação de ida e volta
00:03:33para identificar pontos cegos no nosso plano.
00:03:37E o fato de me fazer todas essas perguntas é enorme.
00:03:39Está fazendo várias.
00:03:40Até o modo plano normal do Claude Code só faz umas três.
00:03:43Vamos definir arrastar para girar.
00:03:45Quais cidades devemos destacar?
00:03:47Vamos colocar as 10 principais.
00:03:49Quanto de UI?
00:03:50Vamos de dashboard completo.
00:03:53Vibe geral.
00:03:54Vamos de estilo editorial.
00:03:58Manteremos o editorial.
00:04:00O que deve ser ajustável?
00:04:02Vou escolher a paleta de cores do fluxo.
00:04:07Vou pedir para fazer três coisas.
00:04:08Vamos continuar.
00:04:09E então, à esquerda, após respondermos as perguntas,
00:04:11ele configura o progresso.
00:04:12Novamente, similar ao que veríamos no Claude Code
00:04:15se estivesse no modo plano executando tarefas.
00:04:17E, a propósito, isso é obviamente algo
00:04:19que você precisa estar no web app para fazer.
00:04:22Isso não está disponível no terminal
00:04:24por razões óbvias, devido à natureza gráfica.
00:04:27E pelo que estou lendo,
00:04:29não acho que isso será implementado
00:04:30no app de desktop, ou talvez seja em algum momento.
00:04:33Mas, por enquanto, tem que ser via Claude.ai.
00:04:35Enquanto ele constrói,
00:04:36vamos falar de algumas dúvidas que você possa ter,
00:04:38como: qual a diferença entre
00:04:39eu dar este prompt diretamente
00:04:41na janela de chat ou abrir o Claude Code
00:04:43e apenas dizer, ei, eu quero
00:04:45que você construa esta coisa interativa.
00:04:47E deixá-lo, sabe,
00:04:48criar algum tipo de web app a partir disso.
00:04:50A resposta é: sendo bem reducionista, nenhuma.
00:04:54Tipo, certo, ele está apenas escrevendo código.
00:04:55Será a mesma coisa.
00:04:56A diferença é — e novamente,
00:04:58se você já fez qualquer design de front-end,
00:05:00mesmo que seja uma simples landing page —
00:05:02você entende o poder de poder
00:05:04ver essas coisas visualmente e compará-las.
00:05:05É por isso que o Google Stitch é tão legal,
00:05:08porque o incrível sobre o Stitch
00:05:09não é necessariamente a filosofia de design,
00:05:11embora eu a ache muito boa.
00:05:12É o fato de eu ter uma interface
00:05:13onde posso ver visualmente várias opções
00:05:15e editá-las dessa maneira.
00:05:17E quando gostar, passar para o código.
00:05:18Quando faço tudo focado primeiro no código
00:05:20do ponto de vista de design, é difícil.
00:05:22Fica meio estranho.
00:05:23É difícil pegar um meio visual
00:05:26e colocar isso em linguagem natural,
00:05:28que vira código,
00:05:29que vira um visual, e realmente acertar em cheio,
00:05:32especialmente no começo.
00:05:33Eu preciso ver as coisas visualmente.
00:05:34Pelo menos eu, preciso ver opções.
00:05:36Então, ter isso é incrível.
00:05:38É um grande passo para a Anthropic e o Claude Code
00:05:41porque esse era um ponto bem fraco.
00:05:42É por isso que apps como o Pencil
00:05:45e outros estão se tornando tão populares,
00:05:46porque dão esse meio visual
00:05:48para lidar com esse tipo de coisa.
00:05:49E um lembrete rápido: como podem ver aqui embaixo,
00:05:51estes são aplicativos completos.
00:05:53É essencialmente prototipagem.
00:05:55Então você pode ter essas coisas chamadas APIs.
00:05:58Você deve pensar nisso mais,
00:06:00não apenas como um design visual tipo Canva.
00:06:03Pense nisso mais
00:06:04como um Google Studio,
00:06:05tipo o Google AI Studio.
00:06:07Aqui está o que ele gerou.
00:06:08Seguiu o estilo editorial.
00:06:10Podemos ver o globo bem aqui.
00:06:12Posso arrastá-lo com o mouse.
00:06:14Podemos alterar a velocidade de rotação, o brilho,
00:06:18mudar a paleta.
00:06:19Isso é bem legal.
00:06:21E ele tem esses pequenos textos explicativos aqui.
00:06:25Agora, vamos falar sobre editar essa coisa.
00:06:27Primeiro, temos essa seção de ajustes aqui em cima.
00:06:30Os ajustes são para a velocidade de rotação
00:06:33e tudo mais.
00:06:34Posso deixar comentários, editar ou desenhar.
00:06:37E também podemos colocar em tela cheia
00:06:39para ver como ficaria de verdade.
00:06:41Fica interessante em tela cheia.
00:06:42Na verdade, fica muito, muito melhor.
00:06:44Mas digamos que eu queira editar algo.
00:06:46Obviamente, poderíamos voltar na janela
00:06:49e dar um novo prompt.
00:06:50Mas se eu for em editar, posso ser muito mais granular.
00:06:55Isso me lembra o editor do Cursor
00:06:58ou até algo como o Lovable.
00:06:59Posso selecionar cada cidade individualmente.
00:07:04Se eu selecionar o globo como um todo, ele aparece aqui.
00:07:07E posso mudar coisas como a cor.
00:07:11Ficou horrível... a altura e tudo mais.
00:07:14Então, tenho a capacidade de ser muito específico
00:07:16com o que quero mudar, o que é ótimo.
00:07:18Melhor do que eu dizer em texto:
00:07:19"Ei, quero mudar o tamanho disso".
00:07:21Bem, posso apenas selecionar e editar aqui.
00:07:24Também podemos fazer comentários.
00:07:25Posso clicar em qualquer item específico.
00:07:27Igual ao editar, mas em vez de mudar
00:07:29"estes números específicos",
00:07:31posso clicar no globo, deixar um comentário e dizer:
00:07:34"Podemos aumentar o globo?"
00:07:37Enviar para o Claude.
00:07:40E ele cria uma fila de comentários.
00:07:41Caso você não queira enviar para o Claude na hora,
00:07:43mas a qualquer momento você pode enviar
00:07:45e ele começará a trabalhar.
00:07:46Além disso, também podemos desenhar.
00:07:48Eu posso dizer: "Tudo bem, bem,
00:07:50eu quero tipo uma lua por aqui".
00:07:52Vamos colocar uma lua.
00:07:53Quero ver a Artemis 2 voando por aqui.
00:07:56Coisas do tipo.
00:07:56E aqui, temos também o arquivo de design.
00:07:58Assim, você pode dar uma olhada
00:08:00no código por trás de tudo.
00:08:02E, por último, temos a capacidade de exportar
00:08:04e compartilhar este projeto.
00:08:05Se eu clicar em exportar, posso baixar como zip.
00:08:07Posso exportar como PDF, PowerPoint, enviar para o Canva.
00:08:11Ou, o que também é super legal, posso passar isso
00:08:13para o Claude Code.
00:08:14Ele me dá o comando para levar isso
00:08:15para dentro do Claude Code, o que é ótimo.
00:08:17Vou parar por aqui hoje.
00:08:18Sei que foi rápido e direto ao ponto,
00:08:19mas só queria mostrar para vocês
00:08:21como navegar nisso e o que é possível.
00:08:23Com certeza esperem um mergulho profundo logo mais,
00:08:26mostrando como tirar o máximo proveito disso.
00:08:29Como sempre, me digam o que acharam.
00:08:31Se quiserem a Masterclass de IA do Chase,
00:08:33está nos comentários fixados. Vejo vocês por aí.