Can I Really Just Describe a Website?
First attempt at "Vibe Coding"
We’re now three months into the “Vibe Coding” era and a whole new crop of tools are capable of doing great things. The term was first coined by Andrej Karpathy in February of this year and by mid March every tech bro on YouTube and Medium was talking about it. The tools aren’t perfect yet, but if you are a seasoned software developer, you can turns a few weeks of work into a few hours. If you understand best practices and can find and fix your errors, you can really just describe the app that you want to build, or at least an early phase prototype. I teach web design in Seattle, and I’ve been talking about Vibe Coding with my students for the last several weeks. I’m going to present these demos in my final lecture tomorrow and tell them that the world of web design is changing at an unprecedented pace.
Vibe Designing
I’m attempting something simpler and trying to produce a responsive website from a text prompt. Let’s call it “Vibe Designing”. For the record, I’ll be testing four tools: Mocha App, Lovable, Manus AI, and Google’s Gemini. There are many other tools out there, but these four keep popping up in my reading and viewing feeds. To keep things consistent, I’m using the same prompt with each tool and while I know that design is subjective, I’ll try and pick a winner. Here’s the first paragraph of my prompt:
Create a website for d2c ecommerce brand Chado. The word chado translates to “Way of Tea”. It’s more than just drinking tea; it’s a spiritual and aesthetic practice that emphasizes harmony, respect, purity, and tranquility.The brand is a direct to consumer luxury brand, based in the UK, that sells high-quality Japanese green tea in monthly subscriptions in very high quality rice paper packaging. The company also pairs this with a mobile phone app that guides you through a traditional tea ceremony
You can view the entire prompt here (Google Doc)
I also generated a few images over on Reve.art (which you should really check out, because it’s awesome and still free).
Criterion for Success
All of these tools promise a ‘conversational interface’ where you can continue to modify the results and I asked for 2 or 3 revisions with each one. I also uploaded one or two of the images and asked for them to be placed into a specific region of the page. I wanted the design to look elegant on both desktop and mobile layouts. Most of these tools are aimed at developers and create React Apps composed of several distributed files. I wanted to see if the tool could convert these to static HTML/CSS files that I could easily download and modify.
#1 Mocha App
This is a new product that’s been getting a ton of buzz lately, and I’m very impressed. After entering my prompt, I waited for two or three minutes while watching a sort of ‘progress meter’ that described the files being generated. This is now sort of expected as all the major LLM tools are doing it and I would be disappointed if didn’t happen. The finished website quickly appeared, it was very easy to request changes, and I could toggle back and forth between design and code view and make edits in real time.
I quickly converted the whole package to static files, downloaded them, and continued to modify them on my local machine. I ran an accessibility checker, found a few minor errors in the code, and quickly cleaned them up. The design followed pretty familiar patterns and was clumsy in a few places, but converted nicely to a single column layout for mobile. Mobile responsive navigation didn’t work. Total time spent, ten minutes. I think that if I had an hour, I could easily polish it into something presentable. Check it out. Grade: A-
# 2 Manus AI
Manus isn’t a “Vibe Coding” tool per se, but more of a giant multi-tool omnibus trying to compete with ChatGPT. I still haven’t figured out everything that they offer. I just pasted in my prompt, crossed my fingers, and waited…and waited. Okay, it only took ten minutes, but in comparison, that felt like a long time. I was not able to find a live file that I could preview or toggle into code view, but I was able to make additional requests. When I downloaded the files and modified them, I was very impressed with the design, but I’m giving it a lower score for low ease of use and no live link.
Grade: B+
#3 Google Gemini
Gemini isn’t really billed as a “Vibe Coding” tool either, but it’s my ‘Daily Driver’ as I’m paying for their plus plan, so I thought I’d put it to the test. This is probably biased because I use Gemini I every day, but I was impressed with the ease of use and the speed…it generated the code in under a minute. Unfortunately, Gemini failed to add the image I uploaded, apologized, and failed again. I was impressed that the responsive navigation worked on mobile. You can see the result here. However, it was really easy to convert the code to static files, download them, and add images on my local machine. Grade: B
#4 Lovable
My first attempt with Lovable failed, but I’m glad I tried again because I was very impressed with the result. It was fast, easy to navigate, easy to edit, and took additional requests quickly. It was very easy to convert to static files, but it did not offer an easy download option. I had to copy and paste the actual files, but once I did the code was easy to work with. Overall, I think that Lovable did the best with visual design, and was closest to the result I had in mind. The responsive navigation worked on a mobile and bonus points for this elegant logo. See the live preview Grade: A-
Final Thoughts
Both Lovable and Mocha offer the option to add a custom domain to your ‘finished’ project, but you would need to upgrade to a paid plan first. I put the word finished in quotes because I don’t think they’re producing finished work…yet. I wouldn’t show these to a client, but I could easily get them to that point with a few hours work. Overall, I am blown away by the quality of visual design and code that these tools produced in a very short time span and how quickly the are evolving. All of these tools promise the ability to generate code from an uploaded .png file from a design you might generate in Figma or Photoshop, but I’ll review that feature in my next article.
To be clear, these tools are not a good choice if you are working solo or are purely a visual designer. You would need to both understand and enjoy working with the code to finish a project. Also, you would need to be producing a lot of websites to justify the expense of at $30/month for a paid plan. And that brings me to my main critique of all these tools. Do we really need another SAAS product for everything we do just so we can do it poorly, but faster? Just like our AI image generators that make imperfect results, but we can re-roll 100 times until we get what we want. Somewhere along the way we’ve lost a sense of craft in the pursuit of productivity. However, if you’re working with a larger team, you have technical people who can wrangle the code, and you see this output as an early phase prototype it’s pretty close to incredible.
Thanks for reading, I hope your summer id off to a great start!
~Erik