A Antropic deve estar com algum tipo de hack ou supera para est conseguindo lançar tantas novidades numa só semana. Só essa semana foram quatro novidades e agora chegou o Cloud Design que já fez ações do Figma cair, ações da ADAB cair. E o que sobra pra gente é fazer o que nós estamos fazendo aqui já há 3 anos, aproveitar essa corrida da A.
E hoje eu vou te mostrar como eu tô utilizando o Cloud Design, que foi lançado ontem, mas eu já fiz muita coisa com ele e vou te mostrar como isso pode transformar as suas criações no dia a dia. E se você já usa o cloud ou vai começar a usar, eu criei um grupo gratuito onde eu tô compartilhando as coisas que eu venho fazendo com o cloud, como que eu tô usando, é gratuito. Só clicar no primeiro link da descrição e entrar no grupo.
Para acessar é só entrar em cloud/design. Por enquanto tá numa página separada, né? Um sistema separado, mas é muito simples de acessar.
Aqui já tem alguns préets, né? Se a gente vai construir um protótipo, se nós vamos construir um slide ou se nós vamos utilizar algum template, alguma referência, ou se vai criar um projeto do zero. No fim, o que muda?
Eu vou clicar aqui no template, vou colocar aqui, ó, nome template 2, clicar aqui e criar um template. No fim, o que muda é basicamente essa configuração aqui que tem das skills e os design systems, né? Então, como eu selecionei aquele template, já vem esses dois aqui selecionados.
Mas é só vir aqui skill design, por exemplo, eu vou utilizar aqui um front end design. Ele adiciona aqui o front end design. É meio que uma configuração que vai facilitar a gente chegar no resultado.
Não vai demorar tanto a gente chegar no resultado que a gente quer se a gente já tiver alguma pré-configuração disso. E a gente consegue subir imagem aqui, subir código, pegar um arquivo do Figm e jogar aqui também. Isso é muito bom, essa conexão entre ferramentas, porque é justamente o que o cloud busca, ser uma ferramenta para quem trabalha.
E quem trabalha não trabalha só com uma ferramenta. E a primeira coisa que eu vou fazer é criar um slide. Então vou vir aqui em orte skills e vou colocar aqui, ó, exportar pptx e editável.
E eu vou subir o arquivo desse relatório aqui, que tem várias informações sobre uma loja que vende pneus. Todos os arquivos importados vem para essa aba de files aqui, né? né?
Então ele cria a pasta de organização. Cada uma das tarefas que nós vamos criar dentro do cloud design é feito em uma pasta diferente justamente para ter essa organização e depois quando a gente for exportar a gente consegue exportar, né, tudo separado e organizado, porque aqui nós conseguimos criar protótipos e enviar esses protótipos pro cloud code transformar em realidade, transformar em algo usual, precisa est bem organizado. Então aqui eu subi também uma logo para ele colocar dentro dessa apresentação e fiz um comando como o de alguém que vai utilizar no dia a dia.
Cria um slide de apresentação do relatório da loja. Eu vou apresentar para os CEOs. Logo, os slides devem ser profissionais e modernos.
Siga com a paleta de cor verde, limão e preto, que é a identidade visual da loja, e coloque em cada página a logo e enviar. Esse é o resultado do slide. Ele colocou a logo nessa página, seguiu esse estilo de fonte, né, que é uma fonte mais profissional.
colocou, vamos ver se ele colocou algum gráfico. Trajetória ascendente em todos os trimestres. Muito legal isso aqui, né?
Gráficos, eu gosto muito de gráficos para representar. Coloquei um gráfico de pizza seguindo sempre a mesma a mesma cor. A organização tá legal.
Aumentaria algumas fontes, faria alguns ajustes, mas no geral muito. Olha que legal isso aqui. Marca mais eficiente, base mais engajada.
colocou um velocímetro aqui, né? Algumas barras. Ó, ficou um slide bem bacana, um slide bem bonito pra apresentação.
Só que tem um detalhe, eu fiz aquele prompt e depois do primeiro resultado, eu pedi para ele adicione mais gráficos para ficar mais visual. Então ele não adicionou esses gráficos aqui sozinhos. Eu pedi para ele adicionar depois, né, justamente esse esses gráficos.
E para exportar é só clicar aqui em exportar. Dá para exportar direto em PPTX ou PDF ou enviar pro Canva para fazer mais edições. Mas a gente consegue fazer todas as edições aqui.
Isso é algo impressionante, tá? Porque humanamente para você fazer um slide depois, uma coisa é você fazer um slide, outra coisa é você fazer um slide editável, porque quem trabalha com designer gráfico sabe o que que eu tô falando. Você fazer um slide editável dá muito mais trabalho, porque você tem que montar elemento por elemento.
Você não pode montar conjuntos de elementos, né? Então, cada [roncando] elemento tá separado aqui. A gente consegue editar página a página.
Consegui editar todos os textos, é só clicar aqui no texto e colocar o que eu quero alterar. conseguir editar posição do texto, opacidade. Então, tá tudo editado, é só clicar em edit e fazer edição.
E ele já salva aqui em tempo real tudo que tá acontecendo. Agora vamos criar um carrossel, que é algo que o pessoal tá usando muito e tá tendo bastante retorno, automatizando a criação de carrosséis dentro do Instagram. Carrossel é algo que tem dado muito certo, tá?
No Instagram, se você cria conteúdo lá, vale a pena testar. E que que eu vou fazer? Vou mandar uma referência, né?
uma referência já bem assim, eh, bem direcionada, que é uma referência para divulgar livros. Eu gosto de utilizar muito Pinterest para pegar, né, referências de design, referências de elementos, enfim. O cloud, pessoal, ele não vai fazer edição de imagem, tá?
Então tem que ser algumas referências que sejam mais simples, né? Que ele consiga fazer sem que tenha que recortar a imagem, sem que ele tenha que fazer edições que o Photoshop faria, um Nano Banana faria, porque ele não é um modelo de imagem, ele é um modelo, né, mais vir voltado para código. Contudo, é um modelo muito avançado.
Então eu vou subir aqui a imagem junto com cinco capas de livros diferentes e vou falar. Então, crie um carrossel inspirado na imagem anexada e use as capas de livros anexadas. Crie os textos e toda a organização.
E eu coloquei aqui em skills a skill para enviar pro Canva. Então, esse foi o resultado dos carrosséis. Ficou muito bonito.
Isso aqui tá um pouco distorcido. É por conta que eu abri aqui o full screen pra gente ver, mas ele não fica distorcido assim no final. Tá bacana, mas ele não seguiu 100% o design que eu queria.
tinha um design e uma linha específica ali que o livro ficava no centro. Vejo que eu precisaria de um prompt bem mais específico para direcionar isso a ele. Por que que eu não coloquei esse prompt tão específico?
Porque Antropic falou que esse modelo 4. 7 do Opus, que é o que tá rodando aqui, ele tem uma percepção visual muito mais avançada do que o anterior. Então eu falei: "Não, vamos ver, será que ele vai entender exatamente seguir a referência 100%.
" e não seguiu. Mas assim, eu gosto muito desse tipo de design minimalista que o Cloud faz, né? Em todas as criações que a gente faz com ele, ele traz um design minimalista com uma um ajuste de texto, uma leitura muito fluida.
Então, fica muito bacana. E mais uma vez para exportar, só vir aqui, ó, exportar em zip, PDF. No caso aqui teria que mandar pro Canva e de lá exportar em imagem.
Aqui eu pedi para ele criar uma página estilo Lick Trick, que vai ser o link da minha build do Instagram. Então, ao clicar, a pessoa vai cair nessa página e terão três banners de três produtos que eu anexei todas as logos aqui e também coloquei fotos para ele utilizar. Agora é só enviar.
E esse é o resultado do Link Tree. Olha, ficou bem legal, tá? As imagens ficaram bem bonitas.
Ele posicionou a logo, o texto e a imagem no fundo. E o layout ficou muito legal também do Mestres da IA. teria que só diminuir aqui, né, a fonte.
Mas como a gente consegue editar? Olha isso que é legal. A gente consegue chegar aqui, clicar aqui no mestres e reduzir aqui o tamanho.
Por exemplo, tava 22, consigo colocar 15. Aqui no texto também eu consigo editar todos os textos, a posição do botão. E ficou bem bonito, tá?
ficou bem bonito. Ou seja, você não precisa mais utilizar o Link Tree. Agora é só utilizar o cloud, fazer o deploy num vell da vida e tá feito o seu Lick Tree.
Eu só pedi para ele fazer uma alteração para o banner ficar vertical, né? Porque no celular fica melhor de ver. E bacana, ficou legal.
Uma questão que eu tinha era como ele ia fazer essa transição, né, de uma imagem pro texto, que eu pedi os textos na esquerda. Meu prompt foi basicamente esse aqui. Ajuste os banners pra horizontal com os textos à esquerda e imagem à direita.
E eu gostei muito desses resultados. Agora, e para colocar isso aqui no A, você teria que exportar o HTML ou exportar direto pro seu Cloud Code e pedir pro Cloud Code subir numa página no Versel. Isso te daria um link e esse link você pode usar algum encortador de link e colocar ali no seu Instagram.
Mas olha aí, mais um caso de uso excelente. Inclusive isso aqui é um serviço, tá? Tem pessoas que cobram uma grana para fazer isso aqui.
Agora vamos testar as habilidades dele em clonar sites, né, em em pegar referências e aplicar em protótipos. Peguei aqui o site da Web Motors e pedi para ele criar só essa página. Enviei o link da página e também pedi para que ele crie, né, o protótipo justamente disso.
Protótipo interativo e design system. O protótipo da Web Motors tá pronto. Inclusive eu consigo desativar aqui os anúncios.
Posso deixar a densidade confortável default. Posso mudar as cores de destaque. Não tá funcionando essa mudança de cor de destaque.
Agora é só clicar aqui, ó, em preset, colocar no máximo. Tem aqui os filtros aqui do lado, alguns botões. Dá para selecionar, né, os botões.
Ele não tem todas as informações do site, mas tá pronto o protótipo e sendo bem honesto, e ficou bastante parecido com a Web Motors, essa clonagem aqui. Eu fiz um teste também com 3D nele e subi a imagem de um rótulo, um rótulo plano e pedi para que ele colocasse em uma lata. Ele não acertou de colocar, né, até a ponta da lata.
Talvez eu precisasse de alguns promptes a mais para isso. Contudo, ele fez aqui o 3D e eu achei impressionante, tá? Eu achei impressionante ele colocar aqui o negócio num cilindro 3D.
Claro que eu tive que pedir para ele fazer isso num cilindro. Antes ele tinha feito só a imagem plana girando em 3D, né? Basicamente ele não tinha colocado o rótulo.
Então precisa ainda de promptes eh mais específicos. Esse é um ponto que Antropic falou, né, sobre o Cloud Opus 4. 7.
Ele é mais literal. Eu não fiz o teste no 4. 6 se ele faria direto, enfim, mas a Antropic falou que ele é mais literal.
E teve até uma discussão no Twitter sobre isso, se a Antropic não tá agora querendo ter um pouquinho mais de lucro, porque a gente sabe, a maioria das pessoas faz os promptes como a gente fez aqui na aula, mais simples e espera que a IA melhore o nosso prompt, nos traga logo um resultado muito melhor do que a gente tá pedindo. Só que esse 4. 7 ele precisa de promptes até sete vezes melhores para chegar num resultado.
Então, existe o ônus dele ser mais literal. Ele vai seguir exatamente o que você tá falando e tem o bônus dele fazer exatamente o que você tá pedindo, que não é necessariamente o melhor comando. Contudo, isso é reclamar de barriga cheia.
O modelo melhorou em vários aspectos. E isso aqui, qual que é o bacana disso aqui? Pô, Thaago, para que que isso aí é útil?
Eu posso simplesmente pegar aqui em exportar isso como HTML e colocar no meu site. Então, se eu tenho um site que vende energético, agora eu posso colocar latinha lá em 3D girando e não vai pesar no site. E antes para fazer algo como isso não era tão simples.
Ficou pronta a animação. Vamos ver como é que ficou. Qualquer coisa eu vou acelerar o vídeo porque é 2 minutos e 32 de animação.
Mas é que ele tá explicando o que são, né? O que acontece dentro de uma IA. vai trazer aqui os modelos chattima eu gostei entre os textos ele rabisca os textos e muda a cor da caixa e os textos se mexem.
Muito poderoso isso aqui. Muito poderoso. Olha, entre os modelos Chat, GPT, Cloue e Gemney.
Isso aqui, só isso aqui é perfeito para colocar numa página, né? Exportar essas animações em HTML. E essa foi a apresentação final.
Muito bacana. Muito bacana o resultado final aqui da animação. Nesse vídeo era isso que eu queria te apresentar.
Não esquece, eu deixei aqui na descrição o link da comunidade gratuita onde eu tô compartilhando o que que eu tô fazendo com cloud, skills, aulas. Inclusive algumas pessoas vieram para esse vídeo porque estão lá dentro do grupo. Então confere lá, não esquece de se inscrever no canal, deixar o seu like e até a próxima.
Yeah.
