I Vibe Coded an App With 3 Popular Chatbots. The Real Winner Is a Good Prompt

I Vibe Coded an App With 3 Popular Chatbots. The Real Winner Is a Good Prompt

If you can type or talk, you can probably vibe code. It's really that easy. You simply communicate your idea to the AI chatbot of your choice with natural language, and it will get to work. While all projects may not end up being a pearly gem or even entirely functional, the effort involved to create a web app by just chatting is minimal.

I've played around with vibe coding quite a bit, creating random projects here and there. I've mostly tried it out for proof of concept or just chatbot testing purposes, but rarely in an attempt to make something crucial or functional to the point where I'd see myself using it daily. Then I began looking for an e-reader device and walked away frustrated by how incredibly "dumb" most of them are, especially Kindles. More on that later.

AI Atlas

Regardless of the motivation (but mostly in defiance of Amazon), it prompted me to try to vibe code a fix, but with a twist. I wanted to see if I could vibe code a functional e-reading application with all of the features I wanted. Knowing that even if I got this thing up and running, I likely wouldn't use this daily, but I wanted to add some flair.

The question became what AI chatbot to use. I didn't bother trying to choose. I used  Gemini, Claude and ChatGPT to create what I wanted and then see if one produced better results.

The prompt

Comparing chatbots is hard to do, especially when trying to mimic the same conversation or vibe coding project. Believe me, I've tried. I wanted to make sure all of the tools I tested were using the same prompt, but first, I wanted to refine that prompt to get the best results, so I came up with a strategy to get me there.

First, I built the entire project at its most basic level with Gemini. Once I liked where the project was (successful and functional proof of concept), I asked it to create a prompt so that I could add it to any other chatbot. Gemini generated the prompt, I saved it as a file, and I uploaded it to Claude. I went through this process again, allowing Claude to catch and fix things I hadn't thought about when building the project and Gemini. Once that process was complete, I asked it to create another prompt so I could add it to ChatGPT.

The idea was to have all three chatbots have some input on the actual creation of the project and, in turn, the final prompt. Once the prompt was created, I uploaded it to all three chatbots in a separate chat to see how consistently they performed.

The project: The Tome Reader

This project was born out of my frustration with Amazon's Kindle devices. Anyone who likes to read and listen to their books can do so with real-time highlighting in the app for iOS or Android, but after all this time -- nearly 20 years -- you can't do this on a Kindle. In fact, it wasn't long ago that users gained the ability to achieve real-time text highlighting with the assistive reader playing, which is so close to the app's functionality. As of right now, you can only read or listen to an audiobook on Kindle, not both, which is laughable, and so was the idea of Amazon owning all my books. I got to thinking that I could just vibe code a solution. I call it the Tome Reader.

I wanted to create an immersive e-reader web application that would read your books aloud to you (with real-time text highlighting, of course) whether the text was pasted or your own PDF or EPUB file was uploaded. In addition to reading the text aloud, the web app would create background music depending on the content of the text in a subset of categories (neutral, gothic horror, sci-fi, nature, fantasy, underwater, western, mystery), and generate additional sound and visual effects when certain trigger words were spoken in real-time. The entire project was created in a single HTML file so it could run within a web browser without additional dependencies.

Building with the chatbots: The first round

Gemini

Vibe Coding Project - Tome Reader - Gemini

Gemini made all the features I wanted from the Tomb Reader with relative ease.

Google/Screenshot by Blake Stimac

Gemini allowed me to figure out how far I could stretch the function of this web app, and thus a majority of its functionality comes from Google's chatbot. It allowed me to hash out some small issues in the beginning, which prevented the TTS voices from loading. Instead, it created an initialization screen that would force the voices to load after clicking on an "open" screen to the application. Without this type of know-how, the project wouldn't have gotten off the ground.

Slowly but surely, the functionality of the project began to grow. Because live sound effects for certain words could be distracting, I made sure to add the option to turn those sound effects and the background music off. After I got a base of the application working, I asked Gemini to create a prompt I could share with other chatbots so I could build it elsewhere if I wanted, and that's what it did.

Claude

Vibe Coding Project - Tome Reader - Claude

Claude's project gave me the most success in some areas and more trouble in others, but is my personal favorite of the three test projects.

Anthropic/Screenshot by Blake Stimac

Claude made fantastic refinements to the underlying function of the trigger words in this project. Claude extended the vocabulary and increased the visualization when a trigger word was spoken aloud. That said, Claude made a call that I didn't ask it to, though the logic indeed made sense.
Initially, I thought the project wasn't working because when I went to test its functionality, just the first trigger word would create the desired effect in a string of nearly 10. It took some time for Claude to finally reveal it had decided to only allow the sound and visual effects trigger once per sentence so as not to "spam" the user. This made a lot of sense, but the project was more proof-of-concept than functional reader, and Gemini and ChatGPT generated sound effects for every keyword, which was the expected functionality.

All that said, there was no specific instruction within the prompt for the number of times the sound and visual effects played. While it wasn't necessarily what I wanted, I did appreciate the consideration of the overall user experience to make such a call. Then after all of those refinements were coded in, Claude then updated the prompt, and I took it with me to ChatGPT.

ChatGPT

Vibe Coding Project - Tome Reader - ChatGPT

ChatGPT failed to create additional features when I asked it to at times, but still managed to recreate the project perfectly when I gave it the final prompt. 

OpenAI/Screenshot by Blake Stimac

By the time I had created the updated prompt with Claude, there wasn't much else I could think to do when I uploaded it to ChatGPT. Luckily, OpenAI's chatbot created the project with ease, despite being the slowest at generating the code. The one function I did ask ChatGPT to add to the project -- to create a dedicated volume slider for the background music so it could be turned off completely if one just wanted a dedicated e-reading experience -- failed consistently. Eventually, I went back to Claude to ask for this functionality and recreate the prompt.

Round 2: Recreating the same project

Despite using Gemini 3 Pro to initially build the project and the free versions of ChatGPT and Claude, all three created the project, but not without issues. I had spent most of my time within Claude refining the project, and it was responsible for creating the final version. So it was incredibly surprising to find out that when uploading that prompt into a new chat, the project wouldn't load past the first "initialization" page. Despite having no issues at all with previous iterations, it took 11 (yes, really) additional full rebuilds to figure out what was going on.

Recreating the project with both Gemini and ChatGPT worked flawlessly. All functions, basic and advanced, worked as they should, including file uploading, test highlighting, text-to-speech output, and both audio and visual effects when trigger words were spoken aloud. Going back to the models, I saw very little difference in function or performance when giving the same prompt to each of the chatbots.

Chatbot inconsistencies

Acquiring the file to test was always easy with Claude. Not only did it offer a preview of the project so you never needed to download the HTML file at all, but if you wanted to (which I often did for testing), it was made available to download directly. This option was only sometimes offered with ChatGPT, while at other times I could only copy the HTML and save it on my own.

Despite having the fewest errors and overall qualms with Gemini, it always required you to take the long route and do it this way. All that aside, the fact that ChatGPT would only sometimes offer to allow me to download the file as HTML directly was peculiar and a little frustrating.

The winner: It depends

Defining a winner for this type of test is tricky, as all chatbots have pros and cons to them. In a sense, they all win. Each was able to create a functional version of the project at some point, but it often took repeated efforts.

Ultimately, the winner is the user. It goes to show that, regardless of the model being used, a solid set of instructions can get you far. I was unable to distinguish differences in performance or function between the app created by Gemini 3 Pro versus the free versions of ChatGPT or Claude.

This actually goes directly against what I found when having a similar conversation with both the Gemini pro and free models. While that was another day, another project, and another model, it goes to show that a solid prompt can get you incredibly far in the world of vibe coding.

Sponsorluk
Sponsorluk
Upgrade to Pro
Choose the Plan That's Right for You
Sponsorluk
Sponsorluk
Reklam
Read More
Download the Telestraw App!
Download on the App Store Get it on Google Play
×