Last week, I wrote about the toxic social media environment and its deleterious effects on our mental health. I think we can all agree that no one loves the Internet right now, because most of it is social media, part of it is dead, part of it is filled with ads, and much of it is misinformation. But will this change? And will vibe coding be the thing that changes it?
After visiting and exploring Rick Rubin’s vibe code project, The Way of the Code: the Timeless Art of Vibe Coding, based on Lao Tzu and adapted by Rick Rubin, an interactive book Rubin made in a super-short time, using AI, and inspired by seeing a meme of himself used by the vibe coding community, I decided to try my own vibe coding project.
My primary objective was to see if I could make something functional and cool as a 43-year-old woman with zero coding knowledge. Or did vibe coding actually require either coding skills or access to developers, like Rubin, who partnered with Anthropic AI for his vibe code project?
Did vibe coding even work? Is this something everyone can do? Or is this just tech bro hype? How much tech savvy does vibe coding take?
I also wanted to know if vibe coding could return us to the glory days of weird websites and no social media. If everyone could create unique websites, without needing to know HTML, or python, or xyz, would the Internet stop looking like Facebook, pop-up ads, and Squarespace generic soup?
What is Vibe Coding?
But let’s back up a bit. First, what do I mean by vibe coding? Vibe coding is using “natural language” + (sometimes) pictures + AI to code websites, games, and apps. By “natural language,” I mean conversational English.
My partner, Agah, had already tried several vibe coding projects, but he’d also taken an online workshop, and he’s pretty technically minded. He knew some coding, so he wasn’t the best example for my newbie vibe code test, but he was a good source of advice on where to begin.
One of Agah’s vibe code projects: a phase music simulator.
Agah helped me make my first vibe coding project, and I do NOT think I could have done it without his help. However, my first idea was a bit complicated; it was a talking website for my beloved dog, Gunter.
Vibe Code Project 1: Website for my dog
I started the Website for My Dog project by making a mockup of how I wanted the website to look in Canva, on a website template, and I added notes in the presentation on the functionality of the site.
The site would have one line of text: “I love you. I love you so much.” Which was the main message to my dog Gunter. Then when you clicked on the text, it would play an audio recording of me telling Gunter I loved him so much over and over again on an infinite loop.
This was my mockup, which I sent to Agah along with a recording I made on my phone saying “I love you. I love you so much,” a bunch of times.
My partner helped me make the site using a program called Replit. It took him XXX Minutes. Then the site was done, and IT WAS EXACTLY WHAT I’D WANTED. Amazing!
Visit my “I love you so much” website here.
Now, I was hooked and wanted to make more sites and do all the vibe coding myself. Agah knew about a free weekend on another vibe coding app called Lovable, which is normally around $25 a month + whatever AI credits you use, but with the free weekend, I got to do everything for free.
Vibe Coding Project 2: Send me trash
For my next vibe code site, I didn’t make any mockup. Instead, I took a screenshot of a cool site my daughter had found on Neocities.org and used that as my starting place. I hopped onto Lovable.dev, made a free account, opened the chat window, and uploaded the screenshot, then described in a few additional sentences what I wanted the site to do.
Here is the screenshot and my instructions:
I later changed the name of the site as I got into the project. But in about 30 minutes, I had a fully functional website with a free URL and a button at the bottom to “collect trash,” inviting visitors to send memes or whatever to my Gmail.
Here is the site: Trashley Grahamcracker: the Hungry Raccoon
The AI coded all the animations and images per my typed instructions. It no longer looks like the inspo screenshot, but that was because I made many changes so it became my vision.
Pretty cool! It even coded me a fun Doritos and popcorn raccoon cursor.
Now I was hooked and wanted to make something more useful.
Vibe Coding Project 3: 365 Days to X, a minimalist habit tracker
Using Lovable.dev again, I began a new project, this time using a photo of an art piece/calendar that I have in my home. I ordered this calendar after listening to Simone Gertz, the inventor of the Everyday Calendar habit tracker, speak about the project on Lex Fridman’s podcast. (Btw, since I bought it years ago, the price has gone WAY UP.)
I love this calendar and display it prominently in my living room. It’s one of the first things people see when they walk into my house, and almost everyone asks about it. I use it to track my creative flow state days.
However, I can’t have multiples of this EXPENSIVE electric art piece hanging all over my place, so I wanted to make a digital version that could also replicate itself and be used to track more than one thing.
To begin, I uploaded a photo of the calendar that I took on my phone along with the following instructions:
Create a website inspired by the calendar in the picture attached. The title of the site should be “You have 365 Days to X. And users should be able to type a word into the blinking X spot because this site will be used as a habit trackers. So we need to be able to have a login, users, and save their progress. The background is black and then there is the calendar like the photo. When they click to fill in a day, it glows yellow.
The AI then talked me out of creating user logins, as this required a third-party database setup and would have added a cost to the site.
However, multiple users, like you, can still use the site, which I was able to complete in about 45 minutes, but your data and tracking will only be saved to one browser/one device.
My digital version, which I called 365 Days to X, is also an improvement on the original design because it not only replicates, but lets you title each tracker and calculates the total days you mark at the bottom of each tracker.
Feel free to bookmark the site and use it. I can’t see your data as it’s only saved locally to your browser.
You type in whatever you want to track at the top. For example:
Enjoy!
And that concludes my vibe coding experiment.
Final Thoughts
It wasn’t that hard to vibe code. Turns out a non-technical, non-coder could do it! I hope the ability to make unique sites more easily will make the Internet cool again, but who knows…
My daughter helped me with the raccoon site, and after, she decided she wasn’t going to use AI to make websites again, but rather would teach herself to code, and she went into her room and returned two days later with a super-funky website she’d coded herself from scratch! Love the GenZs for this type of behavior. She’s “still perfecting it,” or else I’d show you all here.
However, she put together a mood board of unique sites she visited that inspired her. You can check it out:
Here’s to having fun again on the Internet!
Now You
Have you tried vibe coding?
Did you know about Neocities? I’d never heard of it until my daughter mentioned it, and I think it’s awesome!
Let me know if you decide to use my habit tracker.
Ciao for now. Hope you’re staying cool too in this crazy heat!
XXXOOO
Charlotte Dune
P.S. The thumbnail image is ChatGPT’s interpretation of me vibe coding!