Hey hey hey! I’m pumped right now.
I’ve been playing around with diverse AI tools in the past years, but tonight for the first time, I went from text to webapp, and it was such a fun and easy experience that I feel compelled to come and shout it to the world, haha.
Two days ago, I came across this Instagram account of a young designer and developer who creates cute webapps for the most whimsical things. For example, she has a video where she explains that her crush overcooked his eggs, so she immediately rushed to build a website with different timers based on egg types. I found it so adorable, I wished she had a crush on me too.
Fast forward to tonight, when I was talking with a friend who traveled across the globe and whom I was missing. I decided to make a simple webapp to count the days until they come back home.
From the idea to the first version of the website, it took me less than an hour.
I first started by doing the design of the website.
I knew that I needed a countdown, so I went on dribble to find inspiration of nice countdown. I found one simple and clean enough, so I took a screenshot of it.
I opened my dusty figma account, and with a mix of copy/paste, I had an visual idea of what I wanted to build (1).
With my design ready, I asked Claude to help me write a prompt for Replit AI to create this screen, minus the signup button and with different text. Claude, being helpful as always, happily assisted, and I got my prompt.
That was almost it.
The first version worked well but had a few missing elements, like the divider above the dropdown and the headline being at the top of the counter instead of the bottom. After several back-and-forth adjustments that took about 10 minutes, I had a webpage that closely matched my screenshot. From initial idea to this result took roughly 1 hour.
However, I spent nearly 2 more hours completing the project for one simple reason: I wanted the emoji to float smoothly from bottom to top in the background. Getting Replit and I to understand each other on this took quite a while.
I tried recording how the page looked and uploading it to Claude to help me explain to Replit that this wasn’t what we wanted (spoiler alert: you can’t upload videos or GIFs in Claude) (spoiler alert #2: yes, I love using one LLM to help me talk to another LLM, it’s a nice trick). I tried explaining it to Replit several times in different ways, but we weren’t achieving the desired result. And this is at this exact moment that the most interesting part of this process happened.
After multiple tries, I stopped attempting to improve my prompt because I honestly didn’t know how best to explain what I wanted. Instead, I simply started telling Replit that what it did wasn’t right. After each iteration, Replit asks if the result matches what you want, so I started saying no (see picture below). It turns out that if you say no multiple times, this smart system will “think deeply” and try different programming approaches. After 3 to 5 nos, Replit managed to fix the issue on its own.
I got the animation I wanted, and the cute and totally silly website for my friend!
Dear readers, tonight marks the debut of a long list of silly and often totally useless — but funny — websites for my own use or just to get a laugh from my people. I love it for us.
But on a more serious note, this also helped me better understand Marty’s POV on the future of product management. I think he’s probably right.
— — — — — —
(1) The design shared in this post differs slightly from the original, as my initial design used emojis and text that are inside jokes between my friend and me. I prefer not to share those on the internet. But, the overall process remains the same.
