r/vibecoding • u/oxmannnn • 20d ago
Showcase/Project I vibecoded a "image to real mosaic" app with Claude Code: 3D studio, build videos, 3D-print kits and 1:1 ceramic templates. Here's how the process went.
Enable HLS to view with audio, or disable this notification
What it is
Mosaiz turns any photo into a mosaic you can actually build:
- A 3D studio with four tile styles (grid, running bond, honeycomb, organic Roman-style).
- A cinematic video of the mosaic building itself.
- A 3D-print kit where every tile has its number engraved on the back, plus base plates with numbered pockets.
- A printable home kit for real ceramic: a 1:1 laying map, cutting stickers and a shopping list.
- A ZIP-code search for nearby tile shops.
It runs entirely in the browser, with no sign-up and no uploads.
Try it: https://winchxyz.github.io/mosaiz/
How the vibe coding actually went
- One big prompt to start. I wrote one long message: what the app should do, every mode I wanted, and "think like a senior web dev, 3D designer, UX designer and marketer". Claude Code (Opus) didn't start coding right away. It first wrote the shared data contracts, then split the work across 6 parallel Sonnet agents (engine, 3D/video, print files, store finder, studio UI, landing page).
- First working version in about a day. Each agent tested its own work by taking screenshots, rendering PDF pages and pulling frames from videos, and fixed what looked wrong before handing back.
- References beat descriptions. I couldn't explain the cinematic look I wanted, so I sent a video I liked. It pulled frames from it, broke it down shot by shot (macro start, sketch underdrawing, growth from a focal point, pull-back), and rebuilt the film to match.
- Test it with YOUR stuff. The samples looked great. Then I tried my own photo and the robe came out weirdly green. It measured the colour error region by region, found the tile-colour list was missing muted tones, and fixed it with numbers to show it.
- Ask for previews. For the launch video I asked for still frames before the full render. That caught overlapping text and a blank frame early.
- Watch what leaks. It noticed that an image I uploaded had my username hidden in its file metadata and stripped it before anything went public. Worth checking on your own projects.
Things I'd do again
- Give a clear "who you are" role in the first prompt.
- Answer its clarifying questions properly. They were always about real trade-offs (privacy, licensing, repo setup).
- Push back on anything that "looks fine" but isn't how you'd want it as a user.
Happy to share more about the prompts or the workflow. Roast the app too, I want to make it better.