00:00:00Como saber quais ferramentas de design realmente valem a pena quando surge uma nova toda semana?
00:00:04O problema é que novas ferramentas são lançadas todos os dias, todas prometendo qualidade, mas a maioria é só empolgação passageira.
00:00:09Durante nossos testes, encontramos algumas que realmente entregam o que prometem e se encaixam bem no nosso fluxo de trabalho.
00:00:15Um dos membros da nossa equipe estava trabalhando na página de um produto para um carro com uma animação 3D na seção principal.
00:00:21O código-fonte deste site e todos os recursos utilizados estão disponíveis no AI Labs Pro.
00:00:25Para quem não sabe, é nossa comunidade recém-lançada onde você encontra templates prontos, prompts, comandos e habilidades para usar direto nos seus projetos.
00:00:36Se você vê valor no que fazemos e quer apoiar o canal, esta é a melhor forma. Links na descrição.
00:00:42O primeiro passo para construir um site assim é ter um bom recurso, e para isso usei o Tripo3D, o gerador de objetos 3D por IA.
00:00:50Ao fazer login, ganhei cerca de 300 créditos, o que foi mais que suficiente para umas 10 gerações.
00:00:54Agora, eu precisava de uma imagem para converter em 3D.
00:00:57Eu tinha a imagem do carro, mas o fundo atrapalhava a geração, pois identificar fundo e primeiro plano é difícil para essas ferramentas, e eu não queria gastar créditos à toa.
00:01:08Então, removi o fundo usando a ferramenta do Canva, mas você também pode usar o Remove BG, que é uma alternativa gratuita.
00:01:16Com o fundo removido, fui ao Tripo3D e usei essa imagem como referência.
00:01:21Levou cerca de 1 minuto para gerar o modelo, e ele ficou muito parecido com a imagem.
00:01:25Pude conferir todos os ângulos, e o modelo manteve a semelhança com o objeto de todos os lados de forma consistente.
00:01:31Assim que o modelo 3D ficou pronto, eu o exportei.
00:01:34No Tripo3D, você só tem 15 exportações no plano gratuito, então me certifiquei de estar satisfeito e, após duas tentativas, baixei a melhor.
00:01:43Defini a resolução em 4K e fiz a exportação.
00:01:45Após baixar o arquivo GLB, adicionei-o ao diretório público de um app Next.js recém-inicializado para facilitar o acesso.
00:01:52Exportei como GLB porque ele contém texturas e materiais em um único arquivo, além de ser um formato nativo da web, facilitando a integração com bibliotecas.
00:02:04Com o arquivo GLB pronto, era hora de implementá-lo no web app.
00:02:08Para criar a landing page, escolhi o app Codex, que foi lançado recentemente e está disponível apenas para macOS.
00:02:14Você deve estar pensando: por que usar o Codex se já temos o Claude Code?
00:02:19Com o lançamento do novo produto, eles estão oferecendo limites estendidos e uma cota generosa até nos planos gratuitos, então agora é a melhor hora para aproveitar.
00:02:29Mas você pode usar o mesmo processo em qualquer agente de sua preferência.
00:02:32Baixei o Codex e abri a pasta do projeto nele.
00:02:34A interface lembra bastante o gerenciador de agentes da AntiGravity, mas é mais focada em agentes do que em código puro.
00:02:40O recurso de “skills” (habilidades) foi a parte que mais gostamos.
00:02:43Em outros agentes, quando você precisa criar sua própria habilidade, tem que usar um criador de código aberto e montar do zero.
00:02:49Mas o Codex já vem com um criador de habilidades embutido e várias habilidades prontas, o que não vimos em outros agentes.
00:02:56Para simplificar a animação 3D, usei o criador de habilidades e descrevi detalhadamente como a animação deveria ser feita e quais bibliotecas usar.
00:03:06Ele fez algumas perguntas e, após respondidas, rodou os scripts, criou a habilidade e a deixou pronta para o uso.
00:03:13Houve apenas um detalhe diferente.
00:03:14Normalmente, os agentes instalam habilidades nas pastas .agent ou .claude, mas o Codex instalou na raiz, então movi manualmente para a .agent.
00:03:24Mas ele seguiu o mesmo padrão do framework de agentes do Claude, contendo scripts, referências e todos os recursos para dar capacidades à habilidade.
00:03:33Também incluiu um arquivo yaml com o prompt genérico que serve de referência para o agente saber quais comandos ativam a habilidade.
00:03:40Dei ao Codex a tarefa de configurar as animações usando a habilidade recém-criada, incluindo todos os detalhes necessários no prompt.
00:03:47Ele iniciou a implementação e executou os comandos de instalação.
00:03:49Após um tempo, terminou a tarefa, mas disse que não pôde instalar as dependências por causa de um timeout; pedi então que as escrevesse no package.json.
00:04:01Ao rodar a instalação manualmente, tive erros de conflito de versões de bibliotecas no projeto.
00:04:08Precisei depurar com o Codex várias vezes até que a animação da seção principal funcionasse exatamente como eu queria.
00:04:14Como o Codex estava demorando muito em recursos individuais, dividi o trabalho em quatro subtarefas.
00:04:21Cada tarefa continha um recurso da landing page isolado, com seus próprios objetivos, requisitos e restrições.
00:04:28Usei o recurso multi-agente do Codex e coloquei cada agente para trabalhar em uma das tarefas.
00:04:32Como todos mexiam na mesma página, usei branches separadas para evitar conflitos, já que agentes trabalhando na mesma seção costumam causar problemas no código.
00:04:43Quase todos os agentes terminaram suas tarefas em um tempo similar.
00:04:46Mesclei os resultados e tive todos os recursos implementados sem conflitos, e muito mais rápido do que se o Codex fizesse tudo sozinho.
00:04:55Com o site pronto e os componentes no lugar, tudo parecia estático, exceto a seção principal, então usei a gsap para resolver isso.
00:05:03A gsap é a biblioteca de animação javascript usada por muitos profissionais e entrega um desempenho consistente.
00:05:09Devido aos conflitos anteriores e ao erro de timeout, fui ao terminal e instalei a gsap antecipadamente usando o comando npm install.
00:05:18Passei ao Codex um prompt detalhado para adicionar animações, instruindo-o especificamente a não mexer na seção principal, que já estava boa.
00:05:27Adicionei instruções específicas de como e onde animar. Ele levou um bom tempo para realizar essa tarefa.
00:05:33Surgiram alguns erros menores, que corrigi enviando as mensagens de erro de volta para o Codex.
00:05:37Depois disso, as animações foram implementadas e a seção principal permaneceu intacta.
00:05:42Mas animações ativadas pelo scroll foram adicionadas ao resto do site, o que mudou completamente a sensação ao navegar.
00:05:48Mesmo com animações, os componentes ainda pareciam simples comparados à seção de destaque.
00:05:54Então, fui ao Aceternity UI e escolhi componentes de lá, pois eles já vêm com microinterações e animações integradas prontas para uso.
00:06:04Pedi ao Codex para substituir os componentes existentes pelos da Aceternity, mantendo as mesmas animações.
00:06:10Após a implementação, notei que ele adicionou gradientes que não combinavam com o tema do app.
00:06:14Enviei um print e apontei que os gradientes estavam fora do tema; ele então os alterou para cores que combinavam.
00:06:21Porém, ao observar as animações, os componentes estavam estáticos e sem as microinterações típicas da Aceternity.
00:06:30Expliquei ao Codex que existem componentes da Aceternity com efeitos de inclinação ao passar o mouse e pedi para usar esses em vez dos simples.
00:06:38Depois disso, os componentes ganharam os efeitos de interação e o site ficou visivelmente mais interativo.
00:06:44Para melhorar o visual ainda mais, usei um repositório público chamado post-processing, disponível via NPM.
00:06:51É uma camada de animação de pós-processamento aplicada após os efeitos ao usar o React 3 Fiber.
00:06:56Com isso, podemos usar recursos de processamento de imagem como correção de gama para resultados de alta performance.
00:07:01Pedi ao Codex para usar essa biblioteca para criar efeitos sutis de iluminação e me guiar no processo.
00:07:07Ele não acertou de primeira e não houve diferença visível no resultado.
00:07:11Tive que depurar várias vezes até que ele finalmente acertou o efeito, adicionando um brilho sutil ao modelo 3D e uma iluminação quente na seção principal.
00:07:23Isso nos traz ao final deste vídeo.
00:07:25Se você quiser apoiar o canal e nos ajudar a continuar fazendo vídeos como este, pode usar o botão “Valeu demais” abaixo.
00:07:31Como sempre, obrigado por assistir e vejo você no próximo vídeo.