TutorialStefan VaskevichStefan Vaskevich

Customizable 3D Character in a Day: AI Pipeline to a Live Web App

I built a fully customizable 3D Pepe — swappable hats, glasses, hoodies, shoes — then a web app to dress it, in a single day. The full AI pipeline: Tripo Smart Mesh generation, a Blender head-swap trick, Modddif texture repair, AccuRig rigging, an Unreal Engine drop-in, and a Claude Code + Google Stitch configurator. Live demo included.

You have probably seen by now that AI can turn one image into a 3D character. It is impressive — but honestly, what is the point of one static object? That is not how things work in games. In a game you do not have a character; you have a character plus a wardrobe — hats, glasses, outfits, shoes you can swap on a whim.

So here is the idea: I am going to show you that it is just as easy to build a whole customizable character with its own closet of assets, and then wrap it in a web app where anyone can dress it up. This is the entire workflow, start to finish — concepting, generating the 3D model, AI texturing, assembly, rigging, a quick detour into Unreal Engine, and finally a playable web app built with an AI coding agent. I did the whole thing in about a day, and it ended up genuinely fun.

The finished thing is live — go play with it first
Everything below builds up to “Some Serious Drip”: a 3D Pepe you can dress in cursed-but-wholesome fits, roll the dice on, and export as a shareable card. Open it, then come back and see how each piece was made. Launch the Some Serious Drip demo →
A fun, non-commercial parody
The character is a Pepe, made with full respect and all rights kept to the original author. This is a parody fan project to show a workflow — not a product, and not for profit.

Watch the full build

The whole thing, start to finish, on YouTube.

Open in YouTube

1. Plan the wardrobe before you generate anything

The temptation is to jump straight into generating models. Do not. A customizable character is only as good as its asset list, so I start on a whiteboard and lock the list first. My theme was a tongue-in-cheek recap of the last five very intense years of internet culture, which made the assets pick themselves: a certain red cap, an Apple Vision Pro, a fidget spinner, a vape, the inescapable Starbucks cup, an N95 mask, a Supreme beanie, a couple of meme hoodies, and so on.

I sort everything into the categories the final app will expose — Hat, Eyewear, Face wear, Costume, Skin, Boots, Animation — and mark each idea red once it is confirmed. This board is the spec: it tells me exactly how many meshes I need to generate and how they group together later.

Whiteboard with the Pepe character and a grid of accessory ideas grouped by category
The concept board doubles as the spec — assets grouped by Hat / Eyewear / Face wear / Costume, marked red once confirmed.

2. Generate the base character with Tripo Smart Mesh

With the list locked, I bring the concept into Tripo and generate with Smart Mesh. For a clean, stylized look like this it is the best option — and the under-rated trick is that you choose the poly count per asset, dialing detail up only where it matters. For the head I picked a setting of 7, which was a near-perfect result on its own.

Generate the body *with* a head — even though you'll replace it
Generating a headless body leaves the AI guessing where the neck and shoulders sit, and proportions drift. So I generate body and head together for a correct overall reference, then generate the head a second time on its own for a more accurate version. Best of both: right proportions, sharp head.
Tripo 3D Workspace generating the Pepe head with Smart Mesh and the FBX export dialog open
Tripo Smart Mesh on the head. Poly count is chosen per asset, then exported as FBX for Blender.

3. The head-swap trick in Blender

Both parts go into Blender. I cut the head off the body and merge the better, separately-generated head in its place. Joining two meshes cleanly is much easier than it sounds:

1

Bridge the two edge loops

Select the bottom loop of the head and the top loop of the neck, right-click, and use Loop Tools → Bridge. That stitches the two openings together in one click. Add a couple of extra segments on the neck for a smoother transition.

2

Fix shading, then smooth by hand

Back in Object Mode, recalculate shading, then hop into Sculpt Mode and use the Smooth brush over the seam, plus Elastic Deform to nudge the overall shape. This gives you a huge amount of control for very little effort — exactly where you want to spend your time when the AI has already handled the hard part of building the mesh.

The grey Pepe base mesh in Blender after merging a cleaner head onto the generated body
Body generated with a head for proportion, then the head swapped for a sharper one and bridged at the neck.
These are five-minute Blender skills
Bridging loops, fixing shading, smoothing — none of this is advanced modeling. It is the small handful of Blender basics that pay off enormously when you work with AI-generated meshes. If you want the longer version, I have free walkthroughs of each on my channel.

4. Texture in Tripo, repair in Modddif

Because the mesh is clean, I do a quick UV in Blender — just a few seams to keep the texture safe and sound (the free UV Packer add-on makes this even better). Then it is back to Tripo: keep the original UV, upload the very same image I started with, and hit Generate Texture. The result is great out of the box; I add PBR in the material settings and move on.

Textured green Pepe body inside the Tripo texture generator
Same starting image + original UVs = a clean base texture in Tripo, then PBR on top.
Pepe eyes in two brush strokes
For the eyes I make a blank texture in Blender, fill it white, then lay down a single black brush stroke — that is the whole eye. Adjust roughness to taste. Want realistic eyes instead? Drop a sphere, generate an eye texture with Nano Banana / Gemini, and project it on.

Some assets come back with garbled text — the “Supreme” box logo was not quite right, and the back of the Starbucks cup was completely scrambled. That is not a problem. I jump into Modddif (a free tool), paint over the broken area, generate a fix, and project it back with the correct text. The same approach repairs any texture in no time.

Repairing the scrambled Starbucks cup texture inside Modddif
Modddif repairing the corrupted Starbucks texture — paint the broken area, regenerate, project back.
Why I texture in Tripo and only fix on demand
Base-texturing everything in Tripo and only repairing problem spots saves an enormous amount of time, and simple objects come out perfect on the first try. Tripo recently made its part segmentation genuinely usable (v2), added 8K textures and PBR upscaling, and it is what my team reaches for. You can see how the generators stack up on our Arena leaderboard, and there is a full walkthrough of the repair tool in my Modddif guide.

5. Assemble the wardrobe in Blender

Now the fun part. Every asset comes back into Blender and I position each one onto the body in Sculpt Mode, using the same small toolkit — move, scale, rotate, and the Elastic Deform and Smooth brushes to make garments drape and overlay nicely. Hold-able items (a coffee, a vape) get handled slightly differently, but the workflow is otherwise identical across hats, glasses, tops, and shoes. In total, assembling and aligning the full wardrobe took me about 30 minutes.

Blender scene with the Pepe body and the full set of accessory meshes organized in collections
Every asset aligned to the body and sorted into collections — hats, tops, bottoms, shoes, accessories.
Assembly is the real skill now
AI already solves the hardest part — building the mesh. What is left, and what I think becomes the biggest skill from here, is putting things together: taste and judgment about proportion, fit, and what reads well. That is where your time should go.

6. Rig once with AccuRig

I export to FBX and bring it into AccuRig. Two export tips that save real headaches: you do not need to export duplicate hold-ables (swap materials and rig a single one later), and you do not need to join the objects — export them separated and keep them that way so you can reassign materials cleanly afterward.

1

Set markers and calibrate

AccuRig walks you through placing a handful of joint markers. Pepe has four fingers, so pick the four-finger hand rig — do not skip that. Hit calibrate and the result is good. The usual trouble spots are armpits and non-standard proportions; for stylized characters there is a pose offset option that handles it.

2

Grab a couple of free animations

AccuRig is free and ships free animations. I export two: a plain idle, and an idle that holds something — because the character has a state where he is holding a coffee or a vape.

The dressed Pepe in AccuRig with rig markers placed, ready to calibrate
AccuRig: place markers, choose the four-finger hand rig, calibrate. Free, fast, and it ships idle animations.
Two weight-painting shortcuts for a swappable avatar
  • Rigid accessories (Vision Pro, hats, glasses) should follow only the head bone. Instead of painting, lock the head bone in Vertex Groups, then delete all unlocked groups — that leaves 100% head weight in one move.
  • Separate legs from the body into their own object so you can hide whatever a garment covers. In games you do not render the body under the pants — show legs or pants, never both, and you avoid clipping.

7. Optional detour: drop it into Unreal Engine

The exact same character can go straight into a game engine. The only change is choosing the Unreal Engine 5 skeleton when exporting from AccuRig. Bring the character and all its assets into UE5, retarget the animations onto the default Third Person blueprint template, and build a simple blueprint to swap objects. From there, what you do next is your game logic.

The Pepe third-person character set up in an Unreal Engine 5 blueprint
Same rig, UE5 skeleton: retarget onto the Third Person template and swap assets with a small blueprint.

8. Build the web app with Claude Code + Google Stitch

Here is the part I had the most fun with. I export the prepared, rigged assets as GLB, give every object a sensible name in Blender, and then let an AI coding agent build the configurator. The key context I hand the agent: all the assets already sit on one armature with correct names, so it just needs to show and hide them.

I drive Claude Code with two skill packs — community Designer Skills and Google Stitch Skills — plus the Stitch MCP, in a fresh project folder:

# 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.

From there the design-to-app pipeline is a sequence of skills:

1

/grill-me → a brief

Start with /grill-me, say up front that you want to focus on design (so it does not rabbit-hole into stack choices), and let it interrogate you. Out comes a design brief. /design-brief turns that into real design documentation. In my case I wanted a simple UI to pick assets — and somewhere in here it hit me that we were measuring style, a.k.a. drip. That became the name: Some Serious Drip, complete with a drip meter.

2

/stitch design system → /stitch-loop

Use /enhance-prompt to polish the Stitch prompt, establish a foundation with /stitch manage-design-system, then run /stitch-loop — the main skill — to design every screen (desktop + mobile). You can even explore several different design systems here.

3

/design-tokens → plan → build

Generate real variables from the design with /design-tokens, then build with /frontend-design. My strongest general Claude Code tip: plan first. Run /brief-to-tasks to slice the build into a clean task list before implementation — it makes the result far more stable. Then watch it work, and review.

4

/design-review → fixes

Finally, /design-review has the agent critique its own build against the brief, the design doc, and the Stitch concept screens, then fix what it finds. A few manual checks across screen sizes and you are done.

The web app build flow: install commands for Designer and Google Stitch skills and the ordered skill pipeline
The web-app flow: install the Designer + Stitch skills, then run grill-me → design-brief → stitch-loop → design-tokens → brief-to-tasks → frontend-design → design-review.
The agent fixes its own paths
Because the GLBs were exported on one armature with clear object names, the agent wires the show/hide logic itself. Give it the data — names, categories, which items are skins vs. garments — and it handles the plumbing.

9. The result: Some Serious Drip

After a while, out came the app. You pick a preset — touch grass, btc gold, chrome, wet slime — style the guy, and the drip meter re-evaluates his Drip, Chaos, Cringe, and Aura on the fly. You can swap skins that replace the whole body, strip items off (“why do we need pants?”), and export a shareable card — mine came out as “The Quiet Flex.” Then share it with a friend. How cool is that?

The finished Some Serious Drip web app with a styled Pepe, a drip meter, and a preset picker
The finished configurator — presets, a live drip meter, skins that replace the body, and a one-click shareable card.

The demo from this guide is live on TOP 3D AI. Dress the frog, roll for a fit, and export your own card.

Launch Some Serious Drip

What you actually get

A reusable character + closet
One rigged base mesh and a library of swappable AI-generated assets.
Game-ready optimization
Separated body parts and head-bone-only accessories — no clipping, no waste.
Engine + web, same source
The identical rig drops into Unreal Engine 5 or a browser configurator.
A shippable app in a day
Built and reviewed by an AI agent from your GLBs and a design brief.

That is the whole pipeline: concept to a customizable, rigged character to a live web app, in a single day, using AI for the heavy lifting and your own taste for the part that matters. New tools to assemble characters like this land constantly — whenever they do, they go straight into the Arena so you can compare them before you commit.

Want to compare these tools yourself?

Customizable 3D Character in a Day: AI Pipeline to a Live Web App | Top 3D AI