Try the experience | Watch my design process
This project is the result of my first attempt at Vibe Coding in late 2025, sparked by a mutual learning pact with a friend. The project brief itself was shaped through dialogue with AI: I proposed several directions I found interesting and asked the AI to evaluate them based on criteria like learning curve and ease of onboarding. Eventually, we landed on a "Y2K-style photo booth"—a direction that allows me to fully leverage my strengths in interaction and visual design. The tech stack choice also came from AI's advice. I was torn between web and native iOS at the time, and the AI strongly recommended React + Vite—"fast feedback loop, WYSIWYG, ideal for human-machine collaboration."
I quickly realized during development that current AI still has its limits when it comes to UI visual polish. Drawing on my past experience, I used Rive to decouple the visual presentation and motion effects from the program logic. The design process was likewise a collaboration between human and machine, which I've also shared in detail on a video platform.
Design Phase 1 - Sketching & Ideation
Done independently. By drawing machine sketches and low-fidelity prototypes, I worked out an interaction flow that is minimal yet charming. As one viewer later put it perfectly: "A few seconds, top to bottom, and you get a tiny result."
Design Phase 2 - Realistic Rendering
Using AI image generation models, I created a basic realistic render based on the machine form defined in the sketches. By specifying a "modern industrial design style," I ensured the generated machine had a clear structure, laying the groundwork for the next step: style transfer.
Design Phase 3 - Style Transfer
Continuing with AI tools, I incorporated additional references and directional prompts to explore multiple stylistic dimensions centered around "retro" and "Y2K" themes.
Design Phase 4 - Selection & Decision
Returning to my role as the designer. I picked the three results I was most satisfied with and placed them into the low-fidelity flow from Phase 1 for comparison, ultimately deciding on the best visual direction.
Redrawing & Production
Once the skeuomorphic machine form was finalized, I redrew the virtual machine in Rive and created the interactive animations for its physical buttons.
