Fable 5 e GPT 5.6: Crie um site de $10.000 de uma só vez com esta habilidade
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00Este site inteiro foi feito de uma só vez pelo Claude Fable 5, em uma única habilidade.
00:00:05Não é apenas uma animação de rolagem, são várias animações de rolagem que foram clipadas juntas
00:00:10para te proporcionar uma experiência fluida, de alta qualidade e coerente.
00:00:15Isso é absolutamente incrível.
00:00:16Este é um produto extremamente premium e vou mostrar a habilidade que permite fazer tudo isso.
00:00:22Além disso, vou mostrar como não só fiz isso dentro do Claude Code,
00:00:25mas também faremos uma demonstração da mesma coisa dentro do novíssimo GPT 5.6 Sol
00:00:31porque por que parar com apenas uma ferramenta de IA hoje em dia?
00:00:35E essa coisa é muito legal.
00:00:37Como eu disse, se você tentar fazer isso manualmente sem esse tipo de habilidade de animação de rolagem que encontrei e melhorei,
00:00:42você sabe o quão difícil é.
00:00:43Você faz vários vídeos, obtém os quadros iniciais, tenta fazer uma correspondência,
00:00:47você retira todos os quadros um por um, é uma dor de cabeça
00:00:50e isso torna todo o processo extremamente fácil de executar.
00:00:53Agora, o verdadeiro crédito por essa habilidade vai para Peter Wang.
00:00:55Ele é quem criou a versão original.
00:00:57Eu encontrei no Twitter e ele foi gentil o suficiente para abrir o código disso.
00:01:00Então, o “scroll world” dele estará linkado abaixo para que você possa dar uma olhada.
00:01:03O que eu fiz foi bifurcar essa coisa e fiz algumas melhorias,
00:01:07nomeadamente a introdução de níveis de orçamento para que você possa fazer isso sem gastar tanto.
00:01:10Não precisamos necessariamente de seis cenas diferentes para o nosso site
00:01:14e incluí muitas melhorias na versão mobile disso e algumas coisas relacionadas a SEO.
00:01:19Agora, a maneira como essas animações de rolagem funcionam no panorama geral é que começamos com uma única imagem.
00:01:23É isso que você vê bem aqui.
00:01:24Nós então pegamos essa imagem e a transformamos em um vídeo.
00:01:27Essa animação de rolagem em um ponto era um vídeo, mas então extraímos todos os quadros individuais do vídeo usando FFmpeg
00:01:34e então associamos isso a uma posição em que você, o usuário, está no site.
00:01:40Agora, há muito mais acontecendo nos bastidores para tornar a experiência fluida e para que não fique completamente travada.
00:01:46E, além disso, garantimos que todas as nossas cenas façam referência umas às outras quando as construímos.
00:01:50Dessa forma, todas parecem coerentes.
00:01:52Como se tudo parecesse vir de uma história singular.
00:01:55Quanto a como estamos gerando as imagens e vídeos, estamos fazendo isso através do Higgsfield MCP.
00:02:00E podemos fazer isso tanto com Cloud Code quanto com Codecs.
00:02:02Nunca precisamos sair do terminal.
00:02:04Ele chama todos esses modelos de imagem, nomeadamente GPT Image 2, e todos os modelos de vídeo, nomeadamente Seedance, através desse MCP ou da CLI.
00:02:12Agora, para conectar essas ferramentas ao seu agente de IA de escolha, basta ir ao Higgsfield, acessar MCP e CLI, e seguir estes passos.
00:02:20Você só precisa copiar a URL para o MCP e depois fazer o processo de autenticação.
00:02:25A única coisa que você precisa depois disso é a própria habilidade.
00:02:27E eu terei minha versão linkada abaixo também.
00:02:30Você pode simplesmente copiar a URL, dar para o Cloud Code ou Codecs, ou pode fazer como um plugin.
00:02:35Qualquer um dos dois funciona.
00:02:36Agora, como eu disse na introdução, vou fazer a demonstração disso dentro do Codecs com o novíssimo Sol 5.6, mas é assim que parecia dentro do Cloud Code.
00:02:44É exatamente o mesmo processo.
00:02:46Você passa por uma entrevista, diz que tipo de site está tentando construir, o que quer que cada cena seja, e ele vai te orientar passo a passo.
00:02:53E vai garantir, tipo, ei, você gosta desta imagem antes que ele realmente vá e crie todos os vídeos.
00:02:57Você não simplesmente executa a habilidade e todos os vídeos aparecem e você não teve nenhum tipo de opinião no processo.
00:03:01Então, ele realmente te guia durante toda a coisa.
00:03:04Então, dentro do Codecs, eu chamei a habilidade “scroll world”.
00:03:07Então eu apenas disse “/scroll world”.
00:03:08E eu disse: “Estou tentando criar um site para uma marca boutique de viagens ao Japão”.
00:03:14E a direção de arte geral que eu quero é que vamos com um estilo de origami.
00:03:18Agora, se você não sabe qual estilo quer, pode simplesmente ter uma conversa com a IA e ela fará várias perguntas.
00:03:25Eu já sabia de antemão o que eu queria.
00:03:27Então, não se preocupe se você não tiver uma ideia exata quando aparecer; agora, depois de dar alguma direção criativa, ele vai perguntar: “O que você quer fazer em termos de orçamento?”
00:03:36E o que você quer fazer em termos de orçamento para celular?
00:03:38Está dizendo: “Quantas cenas você quer como referência?”
00:03:41Isso foi seis cenas.
00:03:43Essa é uma quantidade significativa de vídeo, e é, na verdade, uma jornada muito longa do início ao fim.
00:03:48Isso é provavelmente um exagero para a maioria das pessoas.
00:03:50Além disso, isso vai custar muitos créditos do Higgsfield; custou-me cerca de 800 no final do dia.
00:03:56Então, se você não estiver em um dos planos mais caros, provavelmente vai querer ficar com quatro cenas; acho que é um ótimo ponto ideal.
00:04:03O próximo é o que você quer fazer com o celular.
00:04:04Então, você pode fazer de tudo, desde apenas cortá-lo com segurança até uma cadeia de retrato completa, onde ele criará vídeos extras especificamente para celular.
00:04:12Então você tem algum espaço para trabalhar, tipo, quão fundo você quer ir nessa frente.
00:04:15Mas para este vídeo, vamos apenas fazer “lean” e “crop safe”.
00:04:20Então, tipo, as opções mais baratas e entenda que você poderia fazer menos cenas também.
00:04:24Você poderia chegar a três, isso é apenas o que ele oferece como padrão.
00:04:28Mas então ele vai te levar pela proposta da jornada e dizer: “Ei, é assim que cada cena vai ser”.
00:04:32E é tipo, este é o número de gerações que vai levar.
00:04:35Então, vai levar um total de quatro gerações de imagem, quatro vídeos de mergulho de cena.
00:04:40Precisa haver um conector entre alguns dos vídeos e alguns crossfades.
00:04:43Então, no total, ele está dizendo nove gerações e te dá um tempo de geração esperado, que geralmente é bem conservador.
00:04:49Não costuma levar tanto tempo, mesmo que estejamos falando de vídeo por IA.
00:04:52E então, uma vez que você aprova isso, a próxima coisa que ele vai fazer é gerar a âncora.
00:04:56A âncora vai ser aquele quadro inicial.
00:05:00E falamos sobre esse quadro inicial.
00:05:01Estamos falando de algo semelhante a isso no fundo.
00:05:03Vai ser apenas uma imagem estática.
00:05:04E agora cabe a você dizer: “Ok, eu gosto disso”.
00:05:06Esta é a direção de arte que vai dominar o tempo todo.
00:05:09Ou “não, vamos mudar algumas peças”.
00:05:11Esta é a parte que você realmente tem que acertar, porque se você não gostar e disser sim, tudo vai ser baseado nisso.
00:05:17Então, aqui está uma olhada na imagem que ele criou.
00:05:19E eu gosto dela agora.
00:05:20Você provavelmente já percebeu isso.
00:05:21Se você está fazendo tudo isso através do Codecs e do Sol, bem, ele tem geração de imagem.
00:05:26Não precisamos enviar nenhuma solicitação ao Higgsfield para criar imagens com o GPT Image 2
00:05:31quando temos nativamente essa habilidade dentro do Codecs.
00:05:34Então, você vai fazer com que o Codecs faça isso nativamente, mas ainda terá que enviar para o Higgsfield para a geração de vídeo.
00:05:41Por outro lado, se você estiver fazendo isso no Cloud Code, obviamente ele não tem geração de imagem.
00:05:44Então, o Higgsfield tem que carregar o fardo durante todo o caminho.
00:05:48Mas aqui está a imagem.
00:05:50Eu gosto dela.
00:05:51Então, o que vamos fazer?
00:05:52Vamos dizer: “Ei, isso é ótimo”.
00:05:55Não consigo digitar.
00:05:57Avance.
00:05:59Então, após 32 minutos, ele completou nosso site.
00:06:01Temos quatro cenas diferentes.
00:06:02Levou 10 gerações.
00:06:04E agora está no nosso host local pronto para uso.
00:06:06Então, vamos dar uma olhada.
00:06:07Então, aqui está nosso site de turismo japonês.
00:06:08O que vamos fazer é apenas rolar por ele e dar uma olhada geral.
00:06:12Então, pessoas viajando, tem o metrô.
00:06:15Movemo-nos aqui para a casa.
00:06:17Ela abre.
00:06:19Então eles vão para o hotel.
00:06:20Ele se desdobra.
00:06:22Meio legal.
00:06:23E então temos o pássaro aqui, que começa a voar.
00:06:28Então, no geral, o que eu gosto?
00:06:30O que eu não gosto?
00:06:31Eu gosto do visual.
00:06:32Eu acho que isso parece super legal.
00:06:34Sabe, eu acho que individualmente dentro de cada cena, eu gosto de como cada cena individual progrediu.
00:06:38Como essa parte onde o metrô entra.
00:06:41Incrível.
00:06:41Meu problema aqui é a transição onde vamos da cena um para a cena dois.
00:06:46Corte bem seco.
00:06:47Talvez você queira um corte seco.
00:06:48Tipo, suponho que haja, há alguma direção criativa aí.
00:06:51Mas isso é algo que poderíamos mudar.
00:06:52A mesma coisa aqui.
00:06:53Enquanto vamos da cena dois, detalhe incrível, para ser honesto.
00:06:57Mas enquanto vamos da cena dois para a três, de novo, outro corte seco.
00:07:01Em comparação da cena três para a quatro, acho que essa é uma transição incrível.
00:07:04Então isso se abre.
00:07:06Boom.
00:07:06Eles estão no hotel.
00:07:07Mas se você assistir no fundo, observe a cena número quatro, entrando no quadro.
00:07:12Tipo, no início está borrado, aparece, dá muito tipo esse efeito 3D.
00:07:17E dá profundidade ao site.
00:07:19E então ele transita perfeitamente para a cena quatro.
00:07:22Tipo, isso é ótimo.
00:07:23Se tivesse isso indo da cena um para a dois e da dois para a três, eu ficaria super feliz.
00:07:28Essa é minha reclamação principal com isso.
00:07:31Mas todo o resto parece bom.
00:07:32E ser capaz de adicionar esse tipo de transição de cena e suavizar, não acho que
00:07:35seria muito difícil.
00:07:36Porque se você comparar aquela geração, que novamente foi Sol GPT 5.6, com o que criamos
00:07:41no Claude Code, as transições de cena são definitivamente um pouco mais elegantes aqui.
00:07:45Então, esta é a cena um, certo?
00:07:46Então, tipo, essas coisas empurram para fora do topo e é tipo uma transição perfeita para essas
00:07:52sendo, bem, o mais próximo possível de perfeito, para essas sendo tipo fios aqui.
00:07:56A mesma coisa bem aqui.
00:07:57Nós entramos.
00:07:58Oh, boom.
00:07:58Ela se abre.
00:07:59E então apenas passamos por cima para a próxima cena.
00:08:01Então, cena a cena com as transições do Fable 5, acho que estamos melhores.
00:08:06A mesma coisa aqui.
00:08:06Boom.
00:08:07Estamos aqui.
00:08:07Zoom para fora.
00:08:08Próxima cena.
00:08:09Então essa é minha queixa principal.
00:08:11Eu definitivamente daria a vantagem ao Fable 5 em relação ao Sol 5.6 aqui.
00:08:15Mas tipo, isso é um tiro único, certo?
00:08:18Tipo, com uma única habilidade.
00:08:19Estou muito impressionado em geral com o quão bem a habilidade foi, sabe, criada.
00:08:25Isso é incrível.
00:08:26Agora, a próxima pergunta se torna, ok, isso é um espetáculo visual.
00:08:29Podemos transformar isso em um site que seja mais funcional, dependendo do que você está tentando
00:08:33fazer?
00:08:33E não acho que isso seja um problema de forma alguma.
00:08:34Acho que os problemas técnicos de criar um site de rolagem animado como este que
00:08:38parece coerente e não parece travado e não parece de baixa qualidade é bem difícil.
00:08:43Sabe, se eu pedisse para você apenas fazer isso sozinho, acho que você teria muitos problemas
00:08:46e levaria muito tempo para chegar lá.
00:08:47Com esse tipo de base, acho que é realmente fácil então, tipo, ok, tipo, o que estamos fazendo
00:08:51com o texto?
00:08:52O que estamos fazendo com o CTA?
00:08:53Como estamos realmente puxando o usuário do herói até o fim?
00:08:56É tipo preencher algum tipo de formulário.
00:08:57Não acho que seja muito difícil.
00:08:58Não acho que estamos, sabe, tendo que reinventar a roda lá.
00:09:01Isso é o que todo site faz.
00:09:02E ser capaz de colocar isso em cima do que temos aqui, novamente, com o Fable 5 e com
00:09:065.6 não é um desafio de forma alguma.
00:09:09E o fato de que isso é apenas uma habilidade em um tiro único é meio alucinante.
00:09:13Novamente, se você quiser fazer isso por conta própria, três meses atrás, seis meses atrás, nove meses
00:09:16atrás, é meio uma dor de cabeça.
00:09:18Então, novamente, um salve para Peter Wang pela versão original da habilidade.
00:09:21Ambas as versões, tanto a minha quanto a dele, estarão linkadas no final desta descrição.
00:09:24E como você viu, isso é tipo super direto.
00:09:26Você realmente não precisa fazer nada.
00:09:27Você só precisa aparecer.
00:09:28Você precisa invocar a habilidade.
00:09:29Você precisa dar a ele algum tipo de direção criativa, e ele simplesmente vai trabalhar.
00:09:32Então é aí que vou realmente deixar vocês hoje.
00:09:37Deixe-me saber, como sempre, o que vocês pensaram disso nos comentários.
00:09:40Certifique-se de conferir o Chase AI Plus se você quiser colocar as mãos no meu Master
00:09:43Class de Claude Code e tipo mais lições de IA exatamente como esta.
00:09:46E além disso, vejo vocês por aí.