Criando um portfólio 3D interativo em estilo de jogo com agentes de IA

Para este pipeline, é usada a plataforma agêntica Verdent. Embora esteja disponível para VS Code e JetBrains, o aplicativo desktop é recomendado por sua interface simplificada, tornando-o acessível para quem foca na arquitetura geral em vez da sintaxe de baixo nível.

O motor principal deste fluxo de trabalho é o Claude 4.5 Opus. Este modelo é particularmente eficaz para aplicações web 3D devido à sua alta capacidade de raciocínio e eficiência na geração de estruturas de código complexas.

• Conexão com o GitHub: Vincule sua conta do GitHub ao Verdent para permitir que o agente gerencie o controle de versão e a criação de branches automaticamente.
• Gerenciamento de workspaces: Um dos recursos mais poderosos dessa configuração é a capacidade de executar múltiplos workspaces em paralelo. Isso permite desenvolver ferramentas auxiliares (como otimizadores de assets) em uma branch enquanto cria o portfólio principal em outra, evitando os conflitos de código comuns em editores de código com IA convencionais.

Abra um novo workspace e peça ao agente para criar uma aplicação web local em Next.js que utilize a biblioteca glTF-transform. O objetivo é uma interface simples de "arrastar e soltar" que automatize o seguinte:

• Conversão de texturas para o formato WebP.
• Otimização da malha para reduzir a contagem de vértices.
• Redimensionamento de texturas para uma resolução máxima de 1k ou 2k.

Execute o agente e deixe-o criar a estrutura de arquivos. Quando terminar, você pode iniciar o servidor local e soltar um modelo GLB pesado na interface.

Melhor prática: Use texturas de 2k ou 4k quando precisar de alta fidelidade, mas garanta que o otimizador as comprima no build final para a web, para que o site continue responsivo em dispositivos móveis.

Em vez de ir direto para o código, mude o agente para o Plan Mode. Isso força o agente a analisar os requisitos, revisar sua própria lógica e apresentar um roadmap.

• Revisando o diagrama: O agente vai gerar um diagrama técnico da arquitetura do site.
• Reduzindo a complexidade: Agentes de IA costumam sugerir layouts de várias páginas por padrão. Para manter uma estética moderna de jogo, instrua o agente a reunir a experiência em uma única tela inicial de alto impacto e um visualizador principal.

Comunique sua visão usando uma combinação de texto e imagens de referência. Uma estrutura de prompt altamente eficiente para este portfólio inclui:

• Tela inicial: Uma landing page com uma miniatura e um botão "Enter Portfolio".
• Layout do visualizador de personagens: Uma abordagem em tela dividida em que o personagem 3D ocupa 60% do lado esquerdo e um card de informações ocupa o lado direito.
• Navegação: Botões para alternar entre os personagens (Left/Right) e um sistema que ajusta automaticamente o personagem à altura da tela.
• Estilo visual: Um fundo preto puro, um piso em grade infinita que desaparece ao longe e partículas flutuantes, como brilhos ou pontos de luz que lembram estrelas, para dar profundidade.

Quando solicitado pelo agente, especifique as seguintes configurações:

• Estilo da grade: Escolha uma grade infinita que desaparece gradualmente no fundo preto. Para manter a consistência da marca, você pode solicitar mais tarde que a cor da grade seja alterada (por exemplo, para laranja).
• Estilo das partículas: Selecione "floating sparkles" para criar uma sensação sutil de movimento no fundo.
• Interação do usuário: Desative a rotação automática. O personagem deve girar apenas com base na interação do usuário para proporcionar uma sensação mais tátil, de "menu de jogo".

Certifique-se de que seus modelos de personagem (GLB) incluam animações de corrida ou idle. O agente deve ser instruído a acionar essas animações automaticamente assim que o personagem carregar.

Navegue até a pasta do projeto no explorador de arquivos e coloque seus assets da seguinte forma:

• Modelos: Coloque os arquivos .glb otimizados no diretório public/models.
• Imagens da UI: Coloque miniaturas ou fotos de perfil na pasta public/images.

Forneça ao agente uma lista de dados dos seus personagens, incluindo: nomes e descrições, ferramentas usadas para criá-los e links para arquivos de origem ou conteúdo de vídeo externo. O agente não apenas preencherá as estruturas de dados, mas também corrigirá automaticamente os caminhos dos arquivos. Por exemplo, se você fornecer um .jpg, mas o código esperava um .png, o agente detectará o arquivo na sua pasta e atualizará o código de acordo, sem intervenção manual.

Carregue o projeto no seu navegador. Se o modelo 3D parecer muito pequeno ou o card de informações estiver desalinhado, tire uma captura de tela da janela do navegador.

O prompt com a captura de tela: Envie a captura de tela de volta para o agente e forneça críticas específicas. Por exemplo: "O card da direita está atualmente sobre um fundo preto; mova-o para que fique sobreposto ao viewer 3D. Além disso, faça o modelo ocupar toda a altura da tela e dê zoom normalmente."

Para fugir de um visual genérico, aplique uma identidade visual personalizada:

• Branding: Peça um tema com "estilo laranja" para combinar com as cores específicas da marca.
• Upgrades de componentes: Em vez de links de texto simples para vídeos externos, peça ao agente para criar "cards com miniaturas do YouTube" que ofereçam uma prévia visual do conteúdo.