Gemini, Claude, and ChatGPT Face Off in Vibe‑Coding a Web‑Based E‑Reader
Key Points
- Developed a single‑file web e‑reader called the Tome Reader using AI chatbots.
- Gemini built the initial version with core reading and highlighting features.
- Claude refined trigger‑word handling and added visual enhancements.
- ChatGPT reproduced the final project but struggled with a volume‑slider addition.
- All three models ultimately delivered functional prototypes despite occasional rebuilds.
- Claude provided convenient preview and download options; ChatGPT sometimes required manual copying.
- The experiment shows that a well‑crafted prompt can compensate for model differences.
A developer explored "vibe coding" by using three AI chatbots—Gemini, Claude, and ChatGPT—to create a single‑file web application called the Tome Reader. The app reads uploaded text aloud, highlights it in real time, and adds background music and sound effects triggered by specific words. Gemini handled the initial build, Claude refined trigger‑word handling, and ChatGPT reproduced the final version while struggling with a volume‑slider feature. The experiment highlighted each model's strengths and quirks, showing that a well‑crafted prompt can enable any of them to deliver a functional prototype.
Project Concept and Motivation
The developer was frustrated with the limited capabilities of popular e‑reading devices and set out to create a web‑based reader that could read text aloud, provide real‑time highlighting, and enrich the experience with contextual music and sound effects. The goal was to build the entire application in a single HTML file that could run in any browser without additional dependencies.
Choosing the Chatbots
Three AI chatbots were put to the test: Google’s Gemini, Anthropic’s Claude, and OpenAI’s ChatGPT. Rather than selecting one upfront, the developer used each model in succession, first building a basic version with Gemini, then asking Gemini to generate a prompt that could be fed to Claude, and finally having Claude produce a refined prompt for ChatGPT.
Gemini’s Contribution
Gemini produced the core features of the Tome Reader, including text‑to‑speech initialization, file upload handling, and the ability to toggle background music and sound effects. It also generated a prompt for reuse with the other models.
Claude’s Refinements
Claude improved the handling of trigger words, expanding the vocabulary and enhancing visual effects. It also introduced a limitation—allowing a sound or visual effect only once per sentence—to avoid overwhelming the user. This adjustment was not explicitly requested but demonstrated Claude’s focus on user experience.
ChatGPT’s Reproduction
Using the final prompt from Claude, ChatGPT recreated the project accurately, though it was the slowest to generate code. An attempt to add a dedicated volume slider for background music consistently failed, prompting a return to Claude for that feature.
Rebuilding the Project
When the final prompt was uploaded to a new chat, Gemini and ChatGPT recreated the app without issues, but Claude required multiple rebuild attempts before the project loaded past the initialization screen. Despite these hiccups, all three models ultimately delivered a functional version of the Tome Reader.
Observations on Model Behavior
Claude offered convenient preview and download options for the HTML file, while ChatGPT sometimes required manual copying. Gemini, despite few errors, demanded a longer workflow. The developer concluded that the choice of winner depends on the user’s priorities, as each model exhibited distinct pros and cons.
Final Takeaway
The experiment underscores that a solid, well‑crafted prompt can enable any of the leading AI chatbots to produce a viable prototype, making the user the ultimate beneficiary of the technology.