O Melhor Fluxo de Trabalho de Design com Gemini 3

O vídeo começa discutindo como a IA generativa se tornou poderosa, destacando que o Google elevou o nível com o lançamento do Gemini 3. O apresentador revela que pessoas no X (Twitter) estão mentindo ao afirmar que criam landing pages incríveis instantaneamente, pois na verdade precisam usar múltiplas ferramentas. O Google lançou várias ferramentas experimentais alimentadas pelo Gemini 3 e Nano Banana, mas não oferece uma maneira integrada de usá-las em conjunto. Esta seção estabelece a necessidade de um fluxo de trabalho completo que combine todas essas ferramentas de forma eficiente.

O apresentador explica que animações em sites são séries de frames, mas ferramentas de IA tradicionais não geram resultados consistentes. O Google resolve isso com WISC, uma ferramenta experimental projetada especificamente para geração de recursos, alimentada pelo Nano Banana. WISC usa uma estrutura de assunto, cena e estilo, permitindo criar sequências de imagens com continuidade estrutural. A grande vantagem do WISC é usar o Gemini 3 como camada intermediária que converte palavras simples em prompts detalhados, gerando visuais sólidos sem necessidade de descrições longas. O apresentador demonstra como gerou frames de uma câmera com detalhes específicos sobre tipo de câmera, reflexos de lente e profundidade.

Esta seção demonstra o processo de criação do primeiro e último frame para uma animação de câmera. O apresentador escolheu WISC porque, ao contrário do Nano Banana que requer prompts extensos e do Mix Board que é otimizado para mood boards, o WISC permite remixagem rápida e controlada de imagens. Para o último frame, foi solicitada uma vista técnica explodida mostrando a câmera de ângulo lateral com lentes desmontadas. O processo não acertou na primeira tentativa, mostrando também circuitos internos indesejados. O apresentador enfatiza que basta mencionar mudanças necessárias com palavras simples para obter ajustes precisos, conseguindo finalmente a imagem desejada mostrando apenas as camadas de lentes.

O apresentador explica que, embora WISC suporte animações com o modelo VIO, ele foca em animar uma única imagem em vez de conectar múltiplos keyframes. Por isso, introduz o Google Flow, que usa Gemini para planejamento, modelos de imagem do Google para personagens consistentes e VIO para criar vídeos. Usando a opção frame-para-vídeo, o apresentador forneceu os frames inicial e final da câmera. O prompt deve incluir como o quadro inicial transita para o final, a direção do movimento e o estilo de animação para garantir fluidez. Na primeira tentativa, o modelo errou a direção de rotação e o quadro final, mas após refazer o prompt com ajustes específicos, produziu a animação desejada. O vídeo menciona que a geração tem limites: 180 créditos mensais, com cada vídeo VIO 3.1 custando 20 créditos, totalizando até 9 vídeos por mês no plano gratuito.

Os vídeos gerados pelo Flow estão em formato MP4, que é difícil de mapear em animações de rolagem em seções Hero. A solução é converter para WebP usando um conversor online gratuito, ajustando configurações para produzir WebP animado de melhor qualidade. Escolher WebP é crucial porque na web ele é tratado como imagem, não requerendo wrapper de reprodutor de mídia como outros formatos, facilitando o mapeamento de interações de rolagem. Além disso, arquivos WebP são mais compactos e oferecem desempenho aprimorado, tornando-os ideais para conteúdo animado curto. O apresentador então adicionou o arquivo WebP convertido ao diretório público do projeto Next.js recém-inicializado, onde todos os recursos do projeto residem.

Com a animação pronta, o apresentador queria adicioná-la à seção Hero da landing page usando o Claude. Ele explica que faz prompts em formato XML porque os modelos do Claude são otimizados para entender XML, permitindo análise mais confiável da intenção estruturada e raciocínio independente sobre cada seção. O prompt incluiu contexto sobre o objetivo, localização dos recursos, comportamento da animação de rolagem nas tags apropriadas (contexto, requisitos, comportamento de animação). Também especificou detalhes de implementação, restrições e saída necessária dentro de suas respectivas tags XML. Quando esse prompt estruturado foi dado ao Claude, ele implementou automaticamente a animação exatamente como desejado, demonstrando a eficácia da estruturação XML para comunicação com IA.

Embora a seção Hero estivesse boa, os demais componentes pareciam sites genéricos típicos de IA porque estavam usando CSS puro em vez de bibliotecas de componentes existentes. O apresentador explica que existem várias bibliotecas de UI, cada uma com estilo e temas próprios, mas é preciso escolher a que melhor se adapta ao projeto. Para a landing page de câmera, ele buscava uma UI estilo Apple e escolheu Hero UI. Esta biblioteca é construída sobre Tailwind CSS e depende do Framer Motion para animações. Hero UI suporta frameworks comuns como Next.js, Vite e Laravel, facilitando a integração. O apresentador pediu ao Claude para substituir componentes existentes por componentes Hero UI, melhorando significativamente a aparência do site e dando uma sensação muito mais profissional.

O apresentador argumenta que usuários decidem permanecer em uma landing page em segundos, observando quão envolvente é a interface. Movimento ajuda a guiar a atenção para recursos importantes, garantindo maior retenção. Implementar animações do zero com JavaScript puro é desafiador, então ele confia em bibliotecas existentes. Para este projeto, usou Motion.dev, biblioteca gratuita e de código aberto com ampla variedade de animações prontas. Normalmente animações exigiriam sincronizar manualmente atualizações do DOM com tempos de animação, mas Motion.dev abstrai essa lógica, atualizando componentes automaticamente conforme o usuário rola. A biblioteca usa componentes de movimento com estados inicial e final definidos em propriedades, lidando automaticamente com transições. O Claude implementou animações de paralaxe e rolagem usando a biblioteca, melhorando a experiência ao guiar atenção para seções principais.

O apresentador explica que descrever como seções de uma página devem parecer é tedioso, sendo melhor buscar inspiração em galerias onde pessoas publicam criações. Ele usou 21st.dev, uma plataforma com inspiração para componentes de interface construídos por diversos designers, baseados em bibliotecas populares como Aceternity UI, Prism UI, Coconut UI e Magic UI. A parte favorita do apresentador é que para qualquer componente, pode-se copiar um prompt especificamente adaptado para agentes de codificação de IA. O prompt é extensamente estruturado, incluindo requisitos do projeto, código com instruções, dependências, caminhos, pacotes NPM necessários e guia de implementação completo. Ele copiou prompts para uma seção de chamada para ação e um rodapé, e o Claude integrou ambos perfeitamente, até adicionando movimento da biblioteca Motion.dev sem menção explícita e personalizando o rodapé para incluir apenas ícones relevantes ao projeto de câmera.

O apresentador encerra o vídeo convidando os espectadores a apoiarem o canal usando o botão 'super obrigado' para ajudar a continuar produzindo vídeos similares. Ele agradece pela audiência e se despede, marcando o fim do tutorial sobre o fluxo de trabalho de design com Gemini 3. Esta seção serve como conclusão padrão do conteúdo, incentivando engajamento da comunidade e apoio financeiro ao criador de conteúdo.