What is vibe coding?
Vibe coding is the process of inputting prompts into an AI tool to generate a product design. You can create apps, websites, and more by providing prompts for the AI to follow. For example, you might ask the AI to make a film review website, and it will output a simple website design focused on film reviews.
What did you create with Cursor?
I created a website for films where users can see upcoming movies, get theatre recommendations, post their own reviews, view critic reviews, create a list of films they’ve seen, and make community posts. I wanted to use black, white, and yellow as the main colors, with the photo below as a reference.
Reference Photos
What was your design process?
My design process started with thinking about all the different pages I wanted for a film review website. Then I thought about how I wanted the website to look, so I chose colors that I felt represented the theme of “film” well: yellow, black, and white. The reference photo helped me see if Cursor could replicate a specific website layout and aesthetic. Overall, I kept my initial idea simple to see how it would affect the outcome of the page. Once I saw how Cursor built the foundation of the site, I began tweaking finer details like the font, page layout, and more to test how specific and complex I could get with my prompts to influence the final design.
How did Cursor accelerate your design process?
Cursor made building the foundation of the website much easier. For example, creating individual pages and setting up basic layouts would have taken me hours, but Cursor was able to do it in just a few minutes. It also helped maintain consistency in font choices and visual style across all pages.
How did Cursor slow down your design process?
The main issue I had with Cursor was needing to fix many things that didn’t align with my vision. For example, I wanted placeholder photos that matched a film theme, but some of the images it provided were completely unrelated—one was even a toaster instead of something community-related. Cursor also had bugs at times, like non-clickable links. Overall, it slowed me down when trying to create a website that matched my exact vision.
Narrated Demo of Website
What would you do differently if you had more time?
If I had more time, I would have planned my website design more thoroughly—from layout and font to colors and functionality. Then, I would input that plan into Cursor to see how accurately it could generate the design I envisioned. This approach would help me understand Cursor’s limitations and its strengths for future projects.