CASE STUDY: Vibe Coding and Cursor


What is vibe coding?

Vibe coding is essentially integrating artificial intelligence into the process of software development/programming. When vibe coding, programmers provide an AI with a prompt and vision of what they want, then the AI will transform those ideas into executing code. The AI becomes your coding assistant, in which it will spit out a foundation of code for whatever idea you may have. From there you can choose to further refine the code yourself to better fit your initial idea.

What did I create in cursor?

In cursor, I made a website that catalogues and displays travel postcards from all over the world. Taking influence from retro and vintage designs, the website serves to organize different postcards you would find from different places throughout the world. Acting as both a catalogue and checklist, “Postcardy” is a website for travelers and collectors to not only keep track of where they have traveled to, but to make it fun by providing an incentive to collect postcards from these regions. Postcardy also has a fun social feature, where users have the option to curate custom profiles of their favorite postcards, travel wish lists, and their full collections. There is also an evolving badge feature for every 5 postcards collected.

My DESIGN process

My design process wasn’t anything too complex. I first started off by prompting the AI with semi-specific instructions of what features I wanted the website to have and what images/aesthetics I wanted it to reference when creating a visual identity. From there, I noted aspects of the website that didn’t fit my vision and used more specific prompt lines to correct those issues. For example, my initial prompt failed to address the name of the website, in which the AI took the creative liberty of naming the website “Postcard Paradise” for me. I didn’t like this name so I prompted the AI to change the name to something specific, “Postcardy”. I would continue to feed the AI prompt lines like this to further whittle the website into something that I was satisfied with.

How did Cursor accelerate my design process?

Cursor helped accelerate my design process tremendously by helping me create a visual foundation that I could build upon. Since I don’t know how to program, cursor assisted with the coding aspect of the project (which was a huge time saver) and I was able to focus a lot more on how the website looked.

How did Cursor slow down MY design process?

Although cursor was extremely helpful in areas I had no expertise in (such as programming and website creation), it was difficult to work with when trying to specify certain things. AI’s can’t read our minds so it was a hassle trying to constantly tweak a prompt just so it could add a simple feature, be it visual or functional. I had a lot of trouble trying to get cursor to add certain functions and visual elements to the website and this led to another problem of me not knowing how to debug these issues.

What would I do differently if I had more time?

If I had more time, I would try and debug a lot of the issues I was having with the website and fix some of the consistencies. Parts of the website worked, but the inconsistencies in the programming logic made it a nightmare to try and work with.

Steven “Eiou” Nguyen is an aspiring Graphic Designer and Creative Director. He looks to change the the world through art and to give a new found perspective on what it means to live by design and to view the world through a creative lens.