Tuneiverse
UX Research
Interaction Design
UX/UI
Vibe Coding
Timeline: 6 Weeks, Fall 2025
Tools: Gemini, Claude, Visual Studio Code, Figma, After Effects
The Project
Tuneiverse is an AI powered song visualizer that takes your Spotify data to the next level. You can see what songs you listen to, how they relate to others you like, and filter by year and genre.
The Process
People have a strong emotional attachment to music, and they like to share it with others. Tuneiverse was inspired by Instagram story trends like Receiptify where users connect their Spotify account and see what their top songs are in some kind of unique way.
Research & Planning
After deciding what I wanted to focus on - music - I took to Google Labs to look at different data visualization projects that have been made in the past to get inspiration. Google Labs had many examples that I could use as a jumping off point, and I took notes about what I liked about them and what I would have done differently.
Designing
I created a style guide which I had to manually implement. Gemini and Claude created many different text styles and colors, sometimes overlapping and changing each other, and I needed to change them myself in order to unify everything.
Iterating
I landed on a concept early on, so I spent a lot of my time working on making my code work. In the last week of the project, my project took a drastic turn as I decided to try to connect my own Spotify data, which led to many bugs and forced me to reconsider my UI multiple times. The process of iterating was different from other projects. Instead of creating components and variables, I spent a majority of my time waiting for Gemini or Claude to generate an answer to my prompt. However, there were multiple points throughout where I stopped and went into Figma to consider different directions that I wanted to explore, rather than depending on the AI's design.
What Gemini initially created
Overlaying my own styles in Figma
Bringing it into Claude
Connecting to my own Spotify data in real time
Final Design
Efficiency and Ethics in AI
I had an idea of how I wanted the project to work starting out, but when I used AI, it allowed me to try out new ideas and possibilities that I didn’t understand how to do myself. I was excited to see the project work just the way I had pictured it in my head, but I couldn’t help but feel like my lack of knowledge about the code the AI created was diminishing the project’s overall quality. I like to have complete control over my projects, and much of the time while generating code it felt more like I was wrangling the AI to try to make it produce the right code instead of working on what really mattered, which was the design. Of course, I put a substantial amount of effort into the design, but I spent so much time waiting for code to generate or working through code errors that I felt like my role as a designer started to take a back seat.
At the end of the day, I’m a designer, not a developer. The design industry is going in an interesting direction where designers get to cosplay as developers without any of the knowledge. I spent about 90 hours on this project, yet I spent probably 10 of those hours waiting for prompts to finish. I'm conflicted on the time that AI is purportedly going to save us when I spent so much time just throwing things at the wall hoping they would stick. For every prompt that gave me a working code solution, there were 10 that didn't and led me in a wrong direction.
I’m incredibly excited about the project’s outcome, and I think it’s one of my strongest yet. However, I don’t see it as feasible to create projects where the surface underneath the great design is code I don’t understand. If I create projects with code in the future, I want to understand how to code the same way I know how to design instead of relying on AI. That way, if I was to use AI in some way or to fix a bug, I would know how to prompt it instead of blindly taking shots in the dark to fix issues.