Nesse vídeo eu quero testar com vocês a impecable, que é uma skill para front end, que o pessoal tá falando aí que tá revolucionando, porque ela faz animações, ela cria designs mais personalizados, sem cara de inteligência artificial. Então aqui eu quero testar com você criar tanto na prática um projeto utilizando essa skill, como também ver se a gente consegue melhorar um projeto já criado que tem uma carinha meio de tema. Olha só o vocabulário de design que estava faltando para os agentes.
Vamos ver se aí se é isso tudo mesmo. Curte o vídeo aí, se inscreve no canal e ative o sininho para que você não perca os nossos novos conteúdos. A gente tá com uma meta aí de bater 100.
000 inscritos esse ano. Então nos ajude, se inscreva no canal. Qualquer dúvida, como eu falei, você pode comentar.
Meu nome é Gustavo Campilo. Se você não me conhece, aqui a gente fala sobre design e programação. A gente pode clicar aqui, ó, em get started.
Você pode acessar, então só você escrever no Google, impecable. Você vai acessar esse site aqui. A gente pode visualizar aqui a documentação também.
Vamos clicar aqui em get started. Nugget hub tem mais de 40 43. 000 estrelas.
Então a gente pode visualizar aqui também. Nugget hub é legal você dá uma olhada. Por quê?
Porque aqui tem os comandos, ó. Só que bacana. Deixa eu dar um zoom aqui, ó, para que a gente possa ver melhor.
Tá vendo? Aqui tem os comandos impecable craft, que seria pra gente criar a nossa página. Ó lá, ó.
Fluxo completo de modelagem, construção com iteração visual. Então, tem vários comandos aqui que você pode dar de forma mais específica, mas você não precisa também conversar apenas por comando, você pode ir falando as coisas, a própria IA, ela vai ver qual comando se encaixa melhor. E Gustavo, aonde eu posso utilizar essa skill?
Cara, você pode usar no cursor, no Codex, no Cloud Code, o Antigravity, qual inteligência artificial você achar melhor. Aqui eu vou utilizar no Cloud Code, mas você pode usar em qualquer um. Então, olha só, primeira coisa para começar, a gente vai dar o nosso comandinho aqui, ó, para instalar esse skill.
Vamos lá. Para isso, eu quero muito que a gente personalize esse projeto aqui. Um projeto feito com IA 100%, eu passei só o comando, faça, ih, calma aí, deixa eu abrir aqui com vocês.
Eu dei o seguinte comando para o Antigravity: faça uma landing page para uma nutricionista. Faça um design moderno, siga regras de experiência de usuário, design visual, aquele promptezinho padrão que todo mundo manda, né? Faça algo bonito, não erre.
E aí gerou isso daqui. É um layout bonito, é um layout maneiro, só que não é algo personalizado. Então vamos ver se a impecable consegue nos ajudar.
Eu vou abrir isso daqui. Então, ó, esse projeto normal aqui com V Code. Na verdade, eu vou duplicá-lo aqui.
Vou colocar projeto normal alterado. Vamos abrir com o VS Code. Ó, que bonitinho aqui.
E agora eu vou rodar aqui, ó, no nosso terminal. Ou então você pode pedir pra própria cloud instale para mim o Impecable. O Cloud Code ele vai ter essa inteligência, o antigravit cursor de instalar pr você também.
A gente nem precisa mais rodar comandos no terminal, é só você pedir para ir a ela já faz. Mas aqui acho que mais fácil seria copiar isso aqui e rodar no terminal. Vamos ver aí, ó.
É, vamos instalar tals os seguintes pacotes. Impecable 3. 2.
0. Vou dar um Y aqui para prosseguir. Então aqui a gente pode tanto instalar de uma forma customizada, como a gente pode pedir para ele detectar, tá?
Vou colocar detect aqui, ó. E a gente dá um confirm. Aqui a gente vai fazer uma instalação global ou apenas nesse projeto aqui.
Eu vou colocar apenas nesse projeto, tá? Eu não quero essa skill de forma global em todos os projetos que a gente for utilizar. Aqui tá falando que vai criar um hook de design para esse nosso projeto.
Depois a gente pode alterar isso daqui sem problema, né? Vamos colocar aqui. Vou dar um yes.
Olha só, ele já instalou aqui, tá vendo? A pastinha impecable. Show de bola.
Então, ele instalou algumas coisinhas aqui, ó. Pode ver que ele instalou tanto pasta como se a gente fosse utilizar o cloud code como cursor, como Gemini. Se você tiver certeza, por exemplo, que você só vai utilizar o cursor, você pode apagar aqui a pasta do cloud e do Gemini.
Eu vou utilizar apenas o cloud code. Eu poderia apagar o cursor aqui, ó, dentro da pastinha do cloud code. A gente pode fechar o terminal também, porque agora a gente vai mandar os comandinhos.
Fable 5 is back. O Fable 5 voltou, rapaz. Eu não sabia disso aqui não, hein.
Ó, vamos fazer um videozinho sobre aí, então. Fable 5, o Fable 5 é um monstro, tá? Aí, voltando pro conteúdo aqui.
Aqui, ó, tem a pastinha skills e aqui vai estar a nossa skill do impecable. Ele instala a própria pastinha dele também, que tem algumas configurações aqui, ó. Então, eu vou apagar aqui, ó, tanto a pastinha Gemini como também a Cursor.
Beleza? Como nós vamos começar? Então, tô aqui com o sitezinho pronto.
Estamos aqui com VS Code. Vamos começar aqui. Então, o primeiro comando que é recomendado pela documentação, a gente dá é o impecable init.
Então, a gente pode colocar aqui, ó, impecable init. E quando a gente rodar isso daqui, quem falou que ele não reconheceu, acredito que é porque eu digitei errado, tá? Em pé acabou com dois CS e um B.
Empowit. Vamos ver se vai funcionar aqui agora. Hum, agora tá indo aqui.
Ele tá pedindo autorização para dar um comando. O que que ele vai fazer? Quando a gente dá o impecable buení, ele vai criar dois arquivos importantes.
Um arquivo, ele vai guardar o contexto desse projeto aqui, o contexto de informações e tudo mais. E um outro arquivo, ele vai guardar a identidade visual, o design. E ele vai fazer algumas perguntas aqui pra gente.
Olha só, pelo código, isto é uma landing page de marketing? Sim, é um brand marketing. Landing page para atrair e converter clientes.
Foco em identidade visual. Beleza? Isso mesmo.
Então, vai fazendo algumas perguntas aí, você vai respondendo também conforme o projeto que você tiver criando. Aqui tá perguntando qual que é o público alvo. Olha só que legal.
Mulheres cansadas de dietas, saúde melhor. Vou colocar saúde melhor. Aí, ó, temos aqui o product MD que guarda as informações estratégicas do nosso projeto.
Aqui ele falou que ele ainda não criou o design MD. Falei para vocês que ele criaria dois, o product, que são as informações estratégicas e o design, que seria a parte visual da identidade de design do nosso projeto. Aqui acredito que ele não criou porque talvez se a gente vai mexer no projeto, talvez ele crie depois, não sei, mas eu já posso pedir para que ele crie também, para que a gente possa manter uma constância com base nessa identidade visual.
Se, por exemplo, você for criar novas sessões, novas páginas, aqui, ó, ele já me dá também alguns próximos passos recomendados. Olha só que bacana. Por isso que é bom você utilizar uma boa LLM também.
Não basta utilizar uma boa skill e também você tem que ter ciência do prompt que você vai passar, senão você nunca vai ter um resultado bom, independente da IA que você tá usando, da skill. A gente tem o impecable Critic, que funciona da seguinte forma. Ele vai fazer uma revisão de toda a nossa página com base na experiência de usuário e ele vai realmente criticar o nosso projeto.
Antes eu já vou pedir então para que ele crie o design MD. Também você pode ver que a gente não precisa sempre conversar através de comandos. Você pode mandar comandos, que ela vai entender de forma mais específica, mas você pode conversar de uma forma normal.
E a inteligência artificial, ela vai entender o que você tá pedindo e ela vai tentar acessar alguma skill para que te dê uma resposta como você espera, por exemplo. Então falei, crie o design MD. Aí o que que ele tá fazendo?
Ele tá lendo a pastinha de skills ali do Cloud e agora vai me fazer algumas perguntas também sobre a parte mais de design do projeto. Ó, aqui ele tá falando se eu quero bordas de canto reto ou então bordas arredondadas. Vou colocar arredondadas.
Isso é bom. Por quê, né? Por que que a gente vai ter um layout melhor?
Talvez por conta da série de perguntas que ele faz. Na maioria das vezes, quando a gente manda um prompt, a gente é bem genérico. Mesmo que a gente fale para que ele crie um design incrível, parecido com um site premiado, a gente ainda assim tá sendo bem genérico.
A gente não dá informações de, por exemplo, utilize a tipografia tal, eu quero um tom assim assado, utilize bordas arredondadas, por exemplo. Quando ele tava fazendo isso daqui, ó, tava dando uma lida nos comandos, alguns comandos interessantes que a gente pode mandar, a gente pode colocar o impecable critic, só que aí a gente vai ter uma análise com base na experiência de usuário. talvez não vai ser não vai ajudar tanto no nosso design visual, que é o que a gente tá precisando aqui nesse stando, né?
Eu posso, por exemplo, dar um impecable boulder amplie design sem graça. Então você pode tanto utilizar esse comando e aí você especifica melhor depois você pode escrever em português. Então se você quiser, por exemplo, melhorar o design sem graça da sua sessão inicial ou então da sua página por inteiro.
Aí ó, já tá criando o nosso design MD. Você pode ver que ele pega várias referências, as tipografias, as cores que a gente tá utilizando no projeto. Por isso que, como eu falei, poderia criar depois também isso daqui.
Você poderia passar mais informações para que ele criasse uma identidade visual da forma como realmente você quer. Beleza, acabou aqui. Vamos ver algo prático.
Então eu vou colocar esse impecable boulder aqui. Vamos ver como é que funciona isso aqui, ó. Impecable boulder.
Melhore a sessão inicial do projeto, o design da sessão inicial. Vamos ver. O usuário invocou o boulder para a sessão inicial e aí ele vai sempre pegar referências no product md para qualquer alteração que ele fizer, para que ele sempre mantenha essa referência estratégica aqui do projeto, tendo sempre ciência qual que é o público alvo.
E também ele pega informações aqui do design MD, que é a nossa identidade visual, para que ele não fuja muito do nosso padrão. Vamos lá. Mandou uma resposta gigantesca aqui.
O que mudou na sução inicial? Composição, grid assimétrico, moldura, hierarquia. Vamos.
Nossa, vamos ver isso aqui, o resultado. Tchanã. Calma aí, acho que deixa eu entrar na no live server aqui para ver.
Ué, mudou alguma coisa? Ah, mudou. Pouca coisa, né?
Antes era dessa forma e depois ele deixou dessa forma aqui. Alterou um pouquinho a tipografia, tal. Aqui ele colocou uma moldura nessa imagem, assim, fez algumas alterações sutis, né?
Colocou um iconezinho aqui para dar um charmezinho melhor, ó. Fez sentido. É.
Não acredito que fez sentido. Achei que ele ia fazer um negócio >> incrível que chegou a um impacto profundo. >> Underground aqui, uma mudança radical, animações interativas e tudo mais.
Vou te falar, viu? É, eu não sei não. É que eu tava também numa expectativa, achei que ele ia gerar um negócio melhor.
Vamos fazer um teste. A gente poderia dar esse comando aqui em toda a página. Assim, eu acho que realmente ficou melhor.
Aqui, ó. Eis a diferença que ele criou. Não é muito diferente, mas eu acho que ficou melhor, significativamente melhor.
Vamos tentar fazer um teste aqui agora. Eu vou criar um novo projeto utilizando essa skill para ver se a gente tem um resultado bem diferente desse daqui. Vou usar mais ou menos o mesmo pront crie um projeto para uma nutricionista com HTML, CSS, só que agora utilizando essa skill aqui do impecable.
Então, vou até criar uma nova pastinha aqui, ó, projeto skill, fechar esse daqui. Lembrando, tem vários outros comandos que daria para você utilizar para que ele analisasse a experiência de usuário desse projeto. Só você entrar no GitHub aqui e ver, ó, tem um monte de coisa maneira aqui.
Então, o que que a gente precisaria fazer nesse novo projeto aqui? A gente precisaria instalar novamente o nosso impecable, porque o novo projeto a gente não instalou de forma global, então ele não está. Preciso instalar novamente.
Deixa eu só ver se eu colocar no customiz como é que Ah, aqui, ó, no customiz. Então eu consigo baixar apenas para o Cloud Code. Melhor, né?
Vou baixar só para Cloud Code, colocar nesse projeto e vamos embora. É, falei só para Cloud Code, mas ele baixou o cursor e o Gemini aqui também. Hum, acho que eu tinha que tirar aqui, ó.
É que tava ativo o cursor e o Gemini. Devia ter desativado aqui nessa partezinha. Acho que ia funcionar.
Beleza, já instalou. Que que eu vou fazer agora? Vamos novamente dar o nosso init.
Agora o Cloud Code já até identificou esses comandos aqui do impecable. antes não tava identificando porque eu acho que a gente precisaria fechar e abrir de novo o nosso cloud code para que ele identificasse os comandos, né? Impecable init.
Se você quiser pegar aquele comando ali, continuar escrevendo, você dá um tab aí no seu teclado. Vamos ver agora. Nesse caso, como a gente deu o nosso impecable em um projeto vazio, ele não tem nenhuma informação já pronta para ele pegar.
Então ele vai começar a fazer perguntas pra gente, qual que é o nome do projeto, qual que é o tipo e tudo mais. Ó lá, o que você está criando. Então a gente precisa passar essas informações para ele.
Quero uma land page para uma nutricionista chamada Ana Silva. Crei o nome fictício aqui. Faça com HTML CSS JavaScript.
Quero uma página com design incrível, animações de entrada, algo bem moderno, minimalista. E toma. Agora começou as perguntas aqui.
Vamos supor que é nutrição clínica. Vou respondendo. Profissional confiável.
Vai lar no Zap. Mas olha só, se você quiser realmente criar um projeto incrível com apenas um prompt, com inteligência artificial, recomendo que você assista o nosso último vídeo aqui. Não sei se vai ser o último, porque eu não sei quando que esse vídeo aqui vai sair, mas é um vídeo de criei um projeto incrível animado com o prompt.
Cara, aí sim você vai entender como que você estrutura um bom prompt, você cria um projeto incrível. Pô, a gente fez algo animado, interativo, com design bem personalizado de primeira. Assiste o vídeo aí que tá maneiro.
Olha só, ele pegou algumas informações aqui de cor da tipografia. Ele já acetou uma tipografia que ele acha que seria interessante e já começou a criar. Eu achei que a gente teria que dar o comandinho do impecable craft para que ele, né, crie um fluxo completo de moderagem com iterações na página, né, com algumas animaçõezinhas interativas, mas ele já começou criando aqui, então vamos ver o que que ele vai trazer.
Pô, espero que seja algo bom, né? Pelo amor de Deus. Pessoal tava falando tão bem da skill.
Espero que a gente tenha um bom resultado também. Mas eu vou mostrar algo realista na prática aí com vocês. Se a gente achar ruim, a gente achou ruim, pronto, né?
Pode ser erro meu, pode ser que eu não esteja sabendo utilizar corretamente, pode ser, é até provável. Finalizamos aqui, vejamos como é que ficou essa página. Ele, em um certo momento, ele criou um servidor com node aqui.
Acredito que era para poder acessar esse projeto, tirar prints da tela, ver como é que tá o design. Vamos ver como é que ficou esse resultado aqui. Você pode ver que ele já criou também o design MD, ou seja, a partir desse design que ele criou, ele já pegou as informações pra nossa identidade visual.
Vamos clicar em go live. E temos aqui o nosso projeto. Vamos atualizar novamente aqui.
É legal, né? Legal. Mas assim, meus nobres, na boa, nada demais.
Ainda tem bastante cara de inteligência artificial, tá? Não achei nada demais. Como era algo em alta, né?
trouxe aqui pra gente testar na prática isso aí de skills. Mas como a gente enfatiza tanto aqui no YouTube como pros nossos alunos, cara, se você quiser criar algo realmente incrível com a inteligência artificial, você precisa utilizar ela de forma sábia. Olha esse projeto que a gente criou aqui na boa.
Ah, Gustavo, o que que seria utilizar de forma sábia? Você guiar aá, você guiar o seu prompt não só com palavras, mas com realmente referências. Ó, esse projeto aqui foi o que a gente fez nesse tutorial do YouTube que eu falei para vocês assistirem depois, ó.
Com um promptou isso aqui, cara. Só que antes de fazer esse prompt, a gente estudou direitinho, a gente passou todas as informações do que a gente queria que acontecesse. E aí a gente teve esse resultado aqui, ó, todo feito por.
Isso sim é um bom uso da IA. Isso é um bom resultado com a IA. Cara, você usar skills, eh, você pode usar o que for, tá?
Tudo que for padrão que você utilizar. E a skill é algo padrão. Ela vai criar um layout maneiro, vai criar, ó.
Tá vendo, ó? que ela criou essas moldurazinhas aqui até. Só que qualquer projeto que ela for criar, ela vai seguir esse mesmo padrão aqui.
Pode criar até algumas interações e tudo mais, mas ainda assim será genérico. Se você não quer algo genérico, você precisa colocar sua mão. É que a verdade é que atualmente nessa era da inteligência artificial as pessoas estão muito preguiçosas.
Sempre foram, mas agora facilitou mais você ser preguiçoso, porque você tem um funcionário ali, muitas vezes gratuito, que faz as coisas para você. Mas é isso, meu nobre. Se esse vídeo foi útil de certa forma, né, mesmo que a utilidade desse vídeo foi para que você entenda que a skill ou a inteligência artificial não vai salvar você, não vai fazer que você tenha um projeto incrível e diferenciado.
Você precisa colocar sua mão na massa, mas cara, a gente traz vídeos aqui testando ferramentas na prática, porque tem muitas pessoas falando bem de certas coisas que na prática não é isso tudo, tá? E aqui a gente mostra para vocês, tá? Então peço que você não deixe de se inscrever no canal, que você comente aqui o que que você achou, ideias de conteúdo.
