Stefan VaskevichFerramentas usadas neste artigo
Você provavelmente já viu que a IA consegue transformar uma imagem em um personagem 3D. É impressionante — mas, sinceramente, qual é o sentido de um único objeto estático? Não é assim que as coisas funcionam nos jogos. Em um jogo você não tem um personagem; você tem um personagem mais um guarda-roupa — chapéus, óculos, roupas, sapatos que você pode trocar quando quiser.
Então a ideia é a seguinte: vou mostrar a você que é igualmente fácil criar um personagem personalizável completo com seu próprio guarda-roupa de assets e depois colocá-lo em um web app onde qualquer um pode vesti-lo. Este é o fluxo de trabalho completo, do início ao fim — concepção, geração do modelo 3D, texturização com IA, montagem, rigging, uma rápida passada pela Unreal Engine e, finalmente, um web app jogável criado com um agente de programação com IA. Fiz tudo isso em cerca de um dia, e o resultado ficou genuinamente divertido.
1. Planeje o guarda-roupa antes de gerar qualquer coisa
A tentação é ir direto para a geração de modelos. Não faça isso. A qualidade de um personagem personalizável depende da sua lista de assets, então começo em um quadro branco e fecho a lista primeiro. Meu tema foi uma recapitulação bem-humorada dos últimos cinco anos superintensos da cultura da internet, o que fez com que os assets praticamente se escolhessem sozinhos: um certo boné vermelho, um Apple Vision Pro, um fidget spinner, um vape, o inescapável copo da Starbucks, uma máscara N95, um gorro da Supreme, alguns moletons de memes e assim por diante.
Organizo tudo nas categorias que o app final vai exibir — Hat, Eyewear, Face wear, Costume, Skin, Boots, Animation — e marco cada ideia em vermelho assim que ela é confirmada. Esse quadro é a especificação: ele me diz exatamente quantas malhas preciso gerar e como elas se agrupam depois.
2. Gere o personagem base com o Tripo Smart Mesh
Com a lista fechada, levo o conceito para o Tripo e gero com o Smart Mesh. Para um visual limpo e estilizado como esse, ele é a melhor opção — e o truque subestimado é que você escolhe a contagem de polígonos por asset, aumentando os detalhes apenas onde realmente importa. Para a cabeça, escolhi a configuração 7, o que deu um resultado quase perfeito por si só.
3. O truque da troca de cabeça no Blender
As duas partes vão para o Blender. Corto a cabeça do corpo e uno no lugar dela a cabeça de melhor qualidade, gerada separadamente. Juntar duas malhas de forma limpa é bem mais fácil do que parece:
Conecte os dois edge loops
Selecione o loop inferior da cabeça e o loop superior do pescoço, clique com o botão direito e use Loop Tools → Bridge. Isso costura as duas aberturas em um único clique. Adicione alguns segmentos extras no pescoço para uma transição mais suave.
Corrija o sombreamento e suavize à mão
De volta ao Object Mode, recalcule o sombreamento, passe para o Sculpt Mode e use o pincel Smooth sobre a emenda, além do Elastic Deform para ajustar a forma geral. Isso dá a você um controle enorme com muito pouco esforço — é exatamente nesse tipo de ajuste que vale a pena gastar tempo quando a IA já cuidou da parte difícil de construir a malha.
4. Texturize no Tripo, repare no Modddif
Como a malha está limpa, faço uma UV rápida no Blender — apenas algumas costuras para manter a textura intacta (o add-on gratuito UV Packer deixa isso ainda melhor). Depois, volto ao Tripo: mantenho a UV original, envio exatamente a mesma imagem com a qual comecei e clico em Generate Texture. O resultado fica ótimo logo de cara; adiciono PBR nas configurações do material e sigo em frente.
Alguns assets voltam com texto ilegível — o logo box da “Supreme” não ficou muito bom e a parte de trás do copo da Starbucks estava completamente distorcida. Isso não é um problema. Entro no Modddif (uma ferramenta gratuita), pinto sobre a área com defeito, gero uma correção e projeto de volta com o texto correto. A mesma abordagem conserta qualquer textura num instante.
5. Monte o guarda-roupa no Blender
Agora vem a parte divertida. Cada asset volta para o Blender e eu posiciono um por um no corpo no Sculpt Mode, usando o mesmo pequeno kit de ferramentas — move, scale, rotate e os pincéis Elastic Deform e Smooth para dar um bom caimento às roupas e fazer com que se sobreponham bem. Itens para segurar (um café, um vape) recebem um tratamento um pouco diferente, mas, fora isso, o fluxo de trabalho é idêntico para chapéus, óculos, partes de cima e sapatos. No total, montar e alinhar o guarda-roupa completo me levou cerca de 30 minutos.
6. Faça o rig uma só vez com o AccuRig
Eu exporto para FBX e levo para o AccuRig. Duas dicas de exportação que evitam muita dor de cabeça: você não precisa exportar itens para segurar duplicados (troque os materiais e faça o rig de apenas um depois), e você não precisa unir os objetos — exporte-os separados e mantenha-os assim para poder reatribuir os materiais sem complicações depois.
Posicione os marcadores e calibre
O AccuRig guia você no posicionamento de alguns marcadores de articulação. O Pepe tem quatro dedos, então escolha o rig de mão de quatro dedos — não pule essa etapa. Clique em calibrate e o resultado fica bom. Os pontos problemáticos de sempre são as axilas e proporções fora do padrão; para personagens estilizados, há uma opção de pose offset que resolve isso.
Pegue algumas animações gratuitas
O AccuRig é gratuito e inclui animações gratuitas. Eu exporto duas: um idle simples e um idle segurando algo — porque o personagem tem um estado em que está segurando um café ou um vape.
- Acessórios rígidos (Vision Pro, chapéus, óculos) devem seguir apenas o osso da cabeça. Em vez de pintar, trave o osso da cabeça em Vertex Groups e depois delete todos os grupos destravados — isso deixa 100% do peso na cabeça em um único movimento.
- Separe as pernas do corpo em um objeto próprio para poder ocultar o que a roupa cobre. Em jogos, você não renderiza o corpo sob a calça — mostre as pernas ou a calça, nunca as duas ao mesmo tempo, e você evita o clipping.
7. Desvio opcional: jogue na Unreal Engine
O mesmíssimo personagem pode ir direto para uma game engine. A única mudança é escolher o esqueleto da Unreal Engine 5 ao exportar do AccuRig. Traga o personagem e todos os seus assets para a UE5, faça o retarget das animações no template padrão de blueprint Third Person e crie uma blueprint simples para trocar os objetos. A partir daí, os próximos passos dependem da lógica do seu jogo.
8. Crie o web app com Claude Code + Google Stitch
Aqui está a parte com a qual mais me diverti. Eu exporto os assets preparados e com rig como GLB, dou um nome intuitivo para cada objeto no Blender e deixo um agente de programação com IA criar o configurador. O contexto principal que passo para o agente: todos os assets já estão em uma única armature com os nomes corretos, então ele só precisa exibir e ocultar cada um.
Eu comando o Claude Code com dois pacotes de skills — Designer Skills da comunidade e Google Stitch Skills — além do Stitch MCP, em uma pasta de projeto nova:
# In an empty project folder, add the skills to Claude Code:
npx -y skills@latest add julianoczkowski/designer-skills -y -a claude-code
npx -y skills@latest add google-labs-code/stitch-skills -y -a claude-code
# Then connect the Stitch MCP (stitch.withgoogle.com -> Settings -> Setup MCP),
# and restart Claude so the new skills + MCP load.A partir daí, o pipeline do design ao app é uma sequência de skills:
/grill-me → a brief
Comece com o /grill-me, diga logo de início que você quer focar no design (para ele não se perder em escolhas de stack) e deixe que ele interrogue você. O resultado é um design brief. O /design-brief transforma isso em documentação de design de verdade. No meu caso, eu queria uma UI simples para escolher os assets — e em algum momento percebi que estávamos medindo estilo, também conhecido como drip. Esse virou o nome: Some Serious Drip, com direito a um medidor de drip.
/stitch design system → /stitch-loop
Use o /enhance-prompt para aprimorar o prompt do Stitch, crie uma base com o /stitch manage-design-system e depois execute o /stitch-loop — a skill principal — para criar o design de cada tela (desktop + mobile). Você pode até explorar vários design systems diferentes aqui.
/design-tokens → plan → build
Gere variáveis de verdade a partir do design com o /design-tokens e depois construa com o /frontend-design. Minha principal dica geral sobre o Claude Code: planeje primeiro. Execute o /brief-to-tasks para dividir a criação em uma lista de tarefas organizada antes da implementação — isso torna o resultado muito mais estável. Depois, acompanhe o trabalho dele e revise o resultado.
/design-review → fixes
Por fim, o /design-review faz o agente criticar sua própria criação em relação ao brief, ao documento de design e às telas conceituais do Stitch, para então corrigir o que encontrar. Algumas checagens manuais em diferentes tamanhos de tela e pronto.
9. O resultado: Some Serious Drip
Depois de um tempo, o app ficou pronto. Você escolhe um preset — touch grass, btc gold, chrome, wet slime — estiliza o cara, e o medidor de drip reavalia o Drip, Chaos, Cringe e Aura dele em tempo real. Você pode trocar skins que substituem o corpo inteiro, tirar itens (“por que precisamos de calças?”) e exportar um card compartilhável — o meu saiu como “The Quiet Flex”. Depois, compartilhe com um amigo. Muito legal, né?
A demo deste guia está no ar no TOP 3D AI. Vista o sapo, sorteie um visual e exporte seu próprio card.
Iniciar Some Serious DripO que você realmente recebe
Esse é o pipeline completo: do conceito a um personagem personalizável com rigging até um web app no ar, em um único dia, usando IA para o trabalho pesado e o seu próprio bom gosto para a parte que importa. Novas ferramentas para montar personagens como esse surgem constantemente — e, sempre que isso acontece, elas vão direto para a Arena para que você possa compará-las antes de escolher uma.
