00:00:00Hoje você vai aprender como combinar o poder do novíssimo Claude Design e do Seed Dance 2.0
00:00:06para criar sites animados como este. Vou guiar você por todo o meu fluxo de trabalho, passo
00:00:12a passo, para que você possa recriar isso mesmo que nunca tenha feito algo assim antes. E ao
00:00:17longo do caminho, vou mostrar como tirar o máximo proveito da nova ferramenta da Anthropic com algumas dicas e
00:00:22truques. Agora, quando se trata de criar uma página da web como esta, o primeiro lugar por onde precisamos começar é este
00:00:28vídeo de fundo, e para obter o vídeo de fundo, primeiro precisamos de uma imagem inicial. Agora, vamos
00:00:32criar essa imagem inicial usando o Nano Banana Pro e, em seguida, pegaremos essa imagem inicial
00:00:37e a transformaremos em um vídeo usando o Seed Dance 2.0, e tudo isso ocorrerá aqui no Higgsfield, que
00:00:44é meu balcão único para todas as ferramentas de criação de conteúdo com IA. Então, para começar, vamos apenas
00:00:49ir para a imagem e seguir para o Nano Banana Pro, e imediatamente você verá algumas das imagens em que tenho trabalhado
00:00:55e elas devem parecer muito familiares à nossa página da web, especialmente estas. Agora, o prompt exato
00:01:01que uso pode ser encontrado na minha escola gratuita, e haverá um link para isso na descrição,
00:01:05mas o que quero focar aqui quando falamos sobre a imagem é menos sobre o prompt específico
00:01:11em si, porque a imagem que você vai querer criar será diferente da minha,
00:01:15mas mais sobre a composição. Por que esta imagem está configurada da maneira que está? Bem, quando olhamos para o
00:01:21produto final aqui, é meio óbvio, certo? Temos essa grande imagem principal ocupando o lado direito
00:01:26da tela, mas ainda precisávamos de um espaço vazio à esquerda para o nosso texto. E quando pedi ao Nano Banana
00:01:31Pro para criar esta imagem, eu tinha esse tipo de composição em mente. Eu pensei: "Ok, teremos uma imagem
00:01:38onde ela é meio que dividida ao meio, no lado direito teremos nossa imagem chamativa, e então no
00:01:44lado esquerdo é onde o texto principal ficará". Então, este é como se fosse o slogan aqui.
00:01:51Vamos ter algum tipo de banner no topo com a barra de navegação, onde as pessoas podem acessar
00:01:55a página inicial ou as diferentes páginas, teremos alguns botões aqui que dizem "inscreva-se"
00:02:00ou "saiba mais", e talvez tenhamos algum tipo de marcador na parte inferior. Eu já sabia disso ao entrar
00:02:04e isso é algo que você precisa saber ao pedir ao Nano Banana Pro para criar a imagem
00:02:10para você, porque qualquer que seja a composição a partir desse tipo de configuração, isso vai ditar
00:02:17o seu prompt. E agora, sua pergunta provavelmente é: "Bem, Chase, eu não faço ideia de quais são as minhas opções, eu
00:02:22nem sei qual deveria ser a composição em primeiro lugar, como descubro isso?". Bem, a
00:02:25maneira mais fácil de fazer isso é apenas encontrar alguns sites que você gosta e começar a analisar a composição da hero e
00:02:30da landing page deles dessa maneira. E um ótimo lugar para ver exemplos disso é o Dribbble. Então, esse é
00:02:35Dribbble com três B's. Se eu for lá e pesquisar "landing page SaaS", você pode pesquisar "landing page"
00:02:40qualquer coisa, você verá do que estou falando. Então, o que vemos aqui, certo? Este bem aqui,
00:02:47eles meio que têm a imagem na parte inferior e o texto no topo. Poderíamos fazer algo semelhante com
00:02:52isso, certo? Poderíamos movê-lo para baixo, para o centro, talvez tenhamos as nuvens nos lados
00:02:56em vez disso, e então o texto vai aqui. Novamente, muda a composição inteiramente. Ou queremos algo
00:03:02como isso, onde a imagem é o centro das atenções e o texto fica ao redor, e adicionamos alguns outros elementos
00:03:07você sabe, conforme você percorre e rola para baixo, você vê que existem um milhão de maneiras diferentes de
00:03:11fazer isso, mas você precisa saber com antecedência, ou pelo menos precisa ter duas ou três ideias na
00:03:16manga, e então quando for ao Nano Banana Pro, você pode dar prompts que reflitam esse
00:03:22estilo. Então, para recapitular, quando estamos criando nossa imagem, a coisa número um que precisamos descobrir é a
00:03:26composição. E por composição, onde o espaço vazio vai ficar? Onde aquele texto vai ficar?
00:03:32Vai ser na esquerda, centro, direita, topo? Não importa, você só precisa escolher e fazer com que
00:03:37seu prompt reflita isso. E também, quando se trata do prompt, apoie-se em coisas como o Claude para ajudar
00:03:42a escrevê-lo para você. Agora, para nossa demonstração de hoje, usaremos esta imagem, e eu também terei uma cópia
00:03:47dela dentro da comunidade se você quiser apenas me copiar passo a passo. E com nossa imagem estática em
00:03:51mãos, agora vamos seguir para o Claude Design. O fluxo geral será: imagem criada no
00:03:56Nano Banana Pro, vamos montar nosso site aqui no Design, e uma vez que tenhamos um site de que gostamos,
00:04:01sabe, um design de que gostamos, uma landing page e tudo isso, então pegaremos essa imagem e a transformaremos
00:04:05em um vídeo, porque é muito simples fazer isso como etapa final. Então, se você é novo no Claude Design,
00:04:10não se preocupe, vamos abordar as grandes coisas com as quais você precisa se preocupar neste vídeo, mas eu também tenho um mergulho
00:04:14profundo que entra um pouco nos detalhes, que você também deve assistir, e colocarei o link acima. Mas para
00:04:18nossos propósitos, o que queremos fazer é ir até aqui à esquerda, ir para "prototype", e nós
00:04:24apenas daremos algum tipo de nome de projeto. Vou chamar o meu de "sd2". Para "design system", você provavelmente não terá
00:04:30um sistema de design, você não precisa de um neste caso. Por enquanto, novamente, se quiser aprender mais sobre sistemas
00:04:35de design, confira aquele vídeo de mergulho profundo. Vamos fazer em alta fidelidade e depois vamos criar.
00:04:40Isso levará você a esta página, e a primeira coisa que queremos fazer é adicionar um pouco de contexto,
00:04:45e o contexto que vamos adicionar é a imagem que baixamos, então você pode ver aqui embaixo à esquerda,
00:04:49eu carreguei minha captura de tela. Em seguida, queremos dar um prompt. Agora, você pode continuar a adicionar mais
00:04:55capturas de tela aqui, e eu aconselho totalmente que você faça isso se tiver bons exemplos de alguém como o Dribbble. Então,
00:04:59se você encontrou algo no Dribbble de que gostou em termos da composição geral, adicione isso também.
00:05:04Agora, quando se trata do prompt em si, eu sugiro fortemente que você se apoie em algo como o Claude
00:05:09Code para escrevê-lo para você, e aqui está uma olhada no prompt que o Claude Code criou, que vou
00:05:13colar no Claude Design. Isso é para nossa empresa fictícia de SaaS, Olympus, que é uma plataforma de inteligência
00:05:19de mercado. Então, ele entra no que a empresa faz, fica bem detalhado com a hero, fala sobre
00:05:25quais seções ele quer na landing page, e então adiciona algumas coisas como movimento. Agora,
00:05:30muito importante, temos esta linha no final que diz: "faça-me qualquer pergunta antes de começar". A coisa legal
00:05:36sobre o Claude Design é que ele pode agir mais ou menos como o Claude Code, no sentido de que criará um modo
00:05:42de planejamento. Então, vou dar a ele um prompt, este exato que você vê aqui, e então ele vai me fazer várias
00:05:46perguntas para melhor detalhar o que estou tentando construir. E a ótima coisa sobre esse
00:05:50recurso de modo de planejamento, onde ele nos faz perguntas, é o fato de que, se você aparecer com um prompt ruim
00:05:54que nem seja metade tão detalhado quanto este, você pode entrar no Claude Design e obter uma primeira
00:06:01versão bastante robusta, porque você passou por todo esse "Q&A" com o Claude. Então, colei tudo lá, e vamos
00:06:06apenas clicar em enviar. Agora, uma rápida observação aqui sobre o uso com o Claude Design: o Claude Design opera com
00:06:11seus próprios limites de uso, é separado dos seus limites do Pro ou dos seus limites do Max 5 ou Max 20 com
00:06:18o Claude. É uma coisa à parte, e pode ser um pouco devorador de recursos, então fique sempre de olho. No meu caso,
00:06:23eu já estourou, porque tenho usado isso bastante, então estou no meu uso extra.
00:06:28Para referência, quando executei tudo isso que você está vendo hoje sozinho, em termos de uso
00:06:33extra, custou-me cerca de cinco dólares para criar a landing page, e eu poderia ter conseguido isso ainda
00:06:38mais barato, mas só para você ter uma ideia de onde estamos. E então, aqui estão as perguntas que ele está voltando
00:06:43com. Então, perguntas: seção de tipografia, o que queremos fazer? Vamos fazer "modern mythic", paleta de cores,
00:06:52vamos fazer invertido, e, em última análise, teremos mais opções quando ele realmente criar isso usando "tweaks"
00:06:58como você verá mais tarde. Voz da cópia, vamos fazer "mythic" salpicado, porque, caso você não tenha percebido,
00:07:06estamos tipo... Olympus é o nome da empresa, é como um aplicativo de inteligência, então toda esta imagem
00:07:11com a qual lidamos deve ser como essa analogia do fogo prometeu. Então, composição da hero,
00:07:17imagem "full bleed", vamos fazer imagem full bleed, ordem das seções, bum bum bum bum, e você
00:07:26pode sempre decidir por mim se você simplesmente não sabe. Hum, prova social: decida por mim, decida por mim.
00:07:32E aqui está uma coisa legal: "tweaks". Então, os "tweaks" farão mais sentido aqui em um segundo, mas eu sempre
00:07:39sugiro usar o maior número possível de "tweaks", e sempre podemos adicionar mais depois. Então, vamos clicar em continuar
00:07:45e agora ele vai em frente e criar isso para nós. Agora, um rápido panorama
00:07:50do Claude Design enquanto ele constrói isso. Aqui no topo à direita, onde diz "share", se eu clicar nisso,
00:07:56não estamos presos dentro do Claude Design para sempre. O que é muito legal sobre isso, e o que mostrarei mais tarde,
00:08:01é que podemos exportar isso para o Claude Code e então, tipo, uma vez que temos uma solução 80/90, terminamos
00:08:07de ser esmagados em termos de uso, podemos levar para o Claude Code e trabalhar nisso o quanto
00:08:12quisermos. Também podemos exportar como HTML, enviar para o Canva, exportar como PowerPoint ou PDF para
00:08:17baixar coisas, então também podemos trazer colegas de equipe, para que isso possa ser algo colaborativo. Então,
00:08:22há muitas opções, e o Claude Design como um todo é muito versátil. E aqui está o que o Claude Design
00:08:27trouxe de volta, e eu estarei movendo isso para todos os lugares durante este vídeo. Agora, a primeira coisa para chamar
00:08:33sua atenção: "tweaks" aqui na direita. Então, os "tweaks" são um menu nesta página que nos permite
00:08:40mudar muito rapidamente diferentes microelementos da nossa página. Então, posso mudar os acentos, posso mudar
00:08:48o tema de claro para escuro, o que é mais óbvio aqui embaixo, você pode mudar o logotipo da manchete,
00:08:54nomes de preços, qualquer tipo de movimento. Então, torna muito, muito fácil iterar entre diferentes versões do
00:09:03nosso site. Além disso, tenho a capacidade de editar coisas em um nível granular. Se eu vier aqui no
00:09:07topo à direita e clicar em editar, posso clicar em diferentes coisas, como este botão aqui em cima, e eu poderia mudar
00:09:13a cor diretamente, posso mudar a fonte, você sabe, o preenchimento, a opacidade, tudo. E eu também tenho
00:09:19a capacidade de comentar, então posso clicar naquele mesmo botão e, em vez de realmente alterar os
00:09:25valores específicos, eu poderia deixar um comentário como "aumente", "diminua", ou posso desenhar nele. Então eu
00:09:30posso desenhar nesta coisa, você sabe, selecionar tudo isso e dizer: "ei, mova para a esquerda", e então enviar isso para
00:09:39o Claude aqui embaixo, e ele basicamente tirará uma captura de tela do que acabei de escrever
00:09:44e ficará tipo: "ah, ok, vamos mover um pouco para a esquerda". E podemos ver agora, ele moveu para a esquerda,
00:09:49e tem essa coisa horrível acontecendo lá que também podemos remover. Mas o que você deve fazer neste
00:09:55ponto é, primeiro de tudo, você sabe, dê uma olhada rápida: "ok, o que acho do design geral?
00:10:02A primeira versão parece boa". Mais importante, em termos da nossa imagem, precisamos voltar para dentro
00:10:09do Nano Banana Pro e editar esta imagem? Precisamos torná-la menor, maior, o que for? Se isso parece
00:10:14bom, minha sugestão quando estamos no Claude Design é que usemos um processo de duas etapas. Uma, o que eu quero
00:10:21fazer é ver diferentes variantes da minha página da web, e não estou falando de pequenos "tweaks",
00:10:26quero ver pelo menos mais dois layouts completamente diferentes para ter uma ideia de qual caminho eu
00:10:32quero seguir. E uma vez que encontramos uma variante de que gostamos em um nível macro, bem, então nos concentramos nela e
00:10:37obtemos mais "tweaks" mostrados para nós, não apenas cinco "tweaks", estou falando de uns 15 "tweaks", para que possamos realmente obter
00:10:43algo de que gostamos. Porque o objetivo é chegar a uma solução 90 antes de trazermos o vídeo e
00:10:48antes de trazermos para o Claude Code para torná-la nossa. E para fazer isso é muito fácil, tudo o que temos que
00:10:53fazer é pedir ao Claude Design. Então, vou dizer: "você pode criar duas variantes de layout adicionais para nossa
00:10:58página da web que eu possa clicar, além desta atual?". Então, apenas alguns novos designs que poderíamos
00:11:03incluir. E essa ideia de criar macrovariantes e, uma vez que decidimos uma variante, criar uma tonelada
00:11:09de "tweaks", isso é o que realmente separa o Claude Design do Claude Code. Agora, prompt direto
00:11:16após prompt em um vácuo, acho que o Design é um pouco melhor que o Claude Code no front-end, mas essa
00:11:20espécie de variação e iteração visual que podemos fazer muito, muito rapidamente, acho que esse é o grande
00:11:27destravamento com o Claude Design, e é onde reside o valor. Porque se tentarmos fazer a mesma coisa dentro
00:11:32do Claude Code, é um pouco trabalhoso. E então, aqui está o que estou falando: no topo temos a versão cinematográfica,
00:11:37que era a original, e agora ele nos deu uma versão "archive" e uma "terminal". E você pode
00:11:45ver que todas são bastante únicas. E isso também se aplica ao resto da página, não apenas à seção hero,
00:11:53mas a tudo. E, honestamente, olhando para isso, acho que a "terminal" realmente parece muito legal. Teríamos
00:12:01que mudar a imagem aqui e definitivamente teríamos que nos afastar do vídeo, mas imediatamente
00:12:09você vê isso, e eu... acho que isso parece muito legal e definitivamente parece diferente da sua
00:12:13página da web padrão criada por IA do dia a dia. Então, é sobre isso que estou falando quando se trata
00:12:20de realmente aproveitar o poder do Claude Design: é ver essas variações. Porque eu
00:12:24nunca teria pensado em fazer algo assim, ou mesmo saberia como pedir para me dar isso. Eu realmente
00:12:29gosto disso, mas para realmente manter este vídeo no caminho certo, o que vamos fazer é ficar com a
00:12:35cinematográfica, mas eu queria mostrar isso a você porque a ideia é que você faça isso, escolha a que você gosta e então
00:12:40você passa para a etapa dois do processo do Claude Design, que é "tweaks", "tweaks", "tweaks". E então, temos todos
00:12:46esses "tweaks" aqui, mas assim como quando pedi ao Claude Design anteriormente para me dar mais variações, agora
00:12:51vou pedir para ele ser muito agressivo com os "tweaks" que ele me dá. Não preciso saber quais "tweaks"
00:12:56eu quero, não preciso saber se, oh, quero ser capaz de mudar o tema ou a manchete ou o logo, eu
00:13:00não sei, apenas me dê um monte e nós descobriremos. Então, escrevi aqui embaixo: "vamos continuar com a
00:13:04cinematográfica, você pode remover as outras duas e também aumentar agressivamente o número de "tweaks" disponíveis".
00:13:11E veremos o que ele apresenta. Agora podemos ver todos os "tweaks" adicionais que ele adicionou. Então, nós
00:13:15fomos de cerca de cinco "tweaks" para cerca de 15 ou mais, o que é ótimo. Então, temos esses originais
00:13:22com os acentos, o tema, o logo, esse parece bom, fontes, fonte de corpo, fonte mono, escala de tipo...
00:13:36o ponto é que agora posso percorrer todos eles repetidamente. Posso até
00:13:42mudar a escuridão da sobreposição da CTA, o brilho das brasas, tipo, não para, não para. Então, eu percorri
00:13:51todos os "tweaks" do meu lado, me livrei das brasas, e foi isso que eventualmente conseguimos. Agora eu tenho
00:13:56a capacidade de olhar em tela cheia se eu for em "present" no topo, tela cheia, para que possamos ter uma ideia melhor de
00:14:02como será. E, por enquanto, para mim, isso parece muito bom. Lembre-se, não precisamos de uma solução 100
00:14:08dentro do Claude Design, queremos chegar o mais perto possível. Queremos tomar todas as decisões de design
00:14:14que pudermos e, então, o que queremos fazer eventualmente é trazer de volta ao Claude Code e fazer os pequenos
00:14:18ajustes, porque lembre-se, o Claude Design é um devorador de recursos, você só recebe uma certa quantidade de uso, então queremos fazer
00:14:23valer a pena. Então, agora podemos transicionar para a seção de vídeo, onde pegamos este fundo e realmente
00:14:29o animamos. Agora, nota lateral, é importante que tenhamos feito tudo isso com o fundo estático, porque
00:14:35quando falamos sobre usuários móveis, não queremos que nossos usuários móveis sejam atingidos por algum vídeo gigante que
00:14:39pode deixá-los lentos. Então, se alguém está no celular e vai ao nosso site que configuramos aqui, eles
00:14:43apenas verão a imagem estática. Então, vamos usar o CDance para isso. Então, novamente, estou de volta aqui dentro
00:14:47do Higgsfield, vou para o CDance 2.0. Você não precisa usar o CDance, o CDance é apenas o melhor que existe
00:14:52no momento. Outras opções incluem o Kling 3.0, você também pode usar algo como o Veo 3.1, e a configuração de vídeo
00:14:58é muito fácil. Literalmente, você só vai pegar sua imagem e vai soltá-la aqui,
00:15:04então você literalmente apenas arrasta e solta aqui em cima como o frame inicial, e então apenas damos
00:15:08um prompt. Agora, o prompt é muito básico, tudo o que escrevi foi: "mantenha o movimento extremamente lento, nuvens mal
00:15:15se movendo, brasas do fogo em suas mãos derivando lentamente". E conseguimos algo como isto. Queremos
00:15:21algo sutil, não queremos algo maluco, você não quer que pareça um videogame selvagem, você quer que quase
00:15:26apenas pareça um gif animado de baixo perfil. E isso é porque a imagem da hero está apenas nos dando um pouco de
00:15:32estilo ao nosso site, você não quer que ela assuma o controle de tudo. E em segundo lugar, como você verá aqui, é
00:15:37vai ser um "flip", porque no máximo você vai conseguir 15 segundos disso. Idealmente, você pode criar
00:15:43um loop perfeito, mas isso pode ser meio difícil. Então, a melhor aposta é fazer o que fizemos aqui e apenas ter um
00:15:48vídeo de 15 segundos, o que parece muito no início, mas não é muito pesado. E a
00:15:54outra coisa, quando vamos para 15 segundos, as chances são de que alguém entre no seu site e eles
00:15:59apenas fiquem lá na sua página hero lendo por 15 segundos e depois sejam, tipo, assustados pelo
00:16:04corte quando ele reverte no loop é improvável. O que é mais provável que aconteça é que eles vão para
00:16:10sua hero, "uau, parece legal", 10 segundos depois eles estão rolando o resto da landing page para ver do que você
00:16:15é feito. Então, mantenha o prompt simples, mantenha-o sutil. Se você quiser enlouquecer, vá em frente, faça-o
00:16:20o mais longo possível. Por 15 segundos, você quer que seja 16 por 9 e você quer que seja pelo menos
00:16:261080p. Alguns modelos darão a opção de melhorar o prompt, onde é, basicamente,
00:16:30dizendo: "ei, você colocou seu prompt ruim e nós o melhoramos". Não faça isso, você sempre quer controle total
00:16:34do seu prompt e espere que você tenha que fazer algumas variações disso até acertar,
00:16:40então, provavelmente para conseguir um que realmente funcione, você terá que fazer isso quatro ou cinco vezes
00:16:45até finalmente obter o resultado que está procurando. Mas uma vez que obtivermos esse resultado, tudo o que precisamos fazer é
00:16:50baixá-lo e então voltamos para o Claude Design e vamos apenas soltar aquele arquivo MP4 na
00:16:57janela de prompt. Então, acabei de carregá-lo aqui embaixo à esquerda e então escrevi: "você pode trocar a imagem estática
00:17:01pelo vídeo que acabei de carregar para o fundo da hero?". E então ele lhe dará algo como
00:17:05isto. E é literalmente tão simples assim. E é neste ponto que estamos praticamente terminados dentro
00:17:12do Claude Design. Quero dizer, se você quiser fazer mais alterações, faça mais "tweaks", totalmente com você. Mas se
00:17:17você está neste lugar, eu diria que está pronto para realmente sair do Claude Design e agora trazer
00:17:22isso para algo como o Claude Code, como conversamos anteriormente. Muito fácil de fazer, vamos para
00:17:26share e vamos para "hand off to Claude Code". Agora, porque isso inclui um vídeo em MP4,
00:17:34se você tentar apenas fazer o comando copiar, ele pode ter alguns problemas para realmente baixá-lo. Então o que
00:17:38você vai querer fazer em vez disso, é apenas baixar o arquivo ZIP, então ele vai pegar
00:17:44todos os arquivos, todo aquele vídeo ao vivo, todas as coisas de codificação sob o capô e apenas colocá-los em um arquivo
00:17:49ZIP. E então você pode fazer "download zip". Você então vai querer extrair tudo isso e então você apenas
00:17:56vai pegar aquela pasta extraída, soltá-la no Claude Code e dizer: "baixe tudo, agora vamos
00:18:03criar um site usando todo esse código". E você está praticamente terminado nesse ponto. Então, soltei lá
00:18:10e disse: "extraia todos esses arquivos para a página da web que estamos construindo" e então suba um servidor de desenvolvimento. E
00:18:14aqui está a página da web no servidor de desenvolvimento, ele subiu. E com isso, a transferência para o Claude Code está completa.
00:18:19Você configurou a seção hero animada, ela tem o vídeo, tem a imagem estática, tudo está pronto para
00:18:25você fazer pequenas alterações e então enviá-lo para o GitHub antes de enviá-lo para a Vercel e realmente
00:18:29hospedá-lo online. Então é onde vou deixar vocês hoje. Espero que isso tenha conseguido lançar
00:18:33alguma luz sobre como combinar o poder do Claude Design e o Seed Dance 2.0 para criar esses tipos de
00:18:39sites animados. Como sempre, deixe-me saber o que você achou, certifique-se de conferir o Chase AI se
00:18:44você quiser colocar as mãos em todos esses recursos, e vejo você por aí.