For weeks, my feed has been flooded with people making these incredible, high-fidelity dashboards using AI. I’d look at them, then look at my own travel itinerary for my upcoming Taiwan dive and hike trip. I have a lovely Google Sheet with everything I need, but let’s be honest: it’s messy.
Suddenly, the thought of pinching-to-zoom on a spreadsheet or scrolling through a dozen screenshots while standing at a trailhead was the last thing I wanted to do. I wanted something easy on the eyes. Big cards, clear times, one-tap links, and most importantly: something that works perfectly in Airplane Mode.
So, I decided to “Vibe Code” it.
In this post
- Claude Code vs. Gemini
- The secret isn’t the code; it’s the Vibe.
- Turning on “PM Mode” (The EARS Framework)
- The “Vibe Coding” Setup
- The Iteration Loop
- Requirements are the code
- What about Claude Code’s result?
Claude Code vs. Gemini
I actually started this project last night using Claude Code. At my company, we’re investing heavily in AI – not just tools, but time, workshops, and internal communities where we push AI beyond “search and summarize.”
Claude Code is a beast – a professional CLI tool that feels like it’s doing the heavy lifting for you. It worked great, but I woke up this morning with a different thought. (I know, that sounds like a #LinkedInLunatic post, but back in Uni, I’d actually wake up thinking about how to reduce lines in my code. It was that same feeling!)
The thought was: Does this have to be a ‘Pro’ thing? Can I do this for free?
Not everyone has a paid LLM subscription, but Gemini is free. I wanted to see if I could get the same “luxury” result using the Gemini Free Tier.
The secret isn’t the code; it’s the Vibe.
That’s a bit cringe but…I started by talking to Gemini exactly how I’d talk to a ux/ui designer and dev.
Me: i have a i 10day itinerary that i want to carry with me
as-is: it’s a list, boring, font too small
to-be: i want it to be a fun, web page, when i open it, tell me what to do based on the time i visit the page, a bit brainless but also has a place for tranporstation and schedule i need to take, activities to do in the area & food to eat within 1km.
let me give you first my itinerary (link to google spreadsheet) and search for the right buses, ferry, train and schedules. the key starting point is i should arrive at KHH Airport by 1PM to pickup G.
Gemini extracted the list and asked: “Should we start by finalizing the transport schedules for the later days, or would you like to see a draft of the full interactive page first?”
Turning on “PM Mode” (The EARS Framework)
Once we locked in the “transportation bible” for the mountain legs, I shifted into PM mode. I used the EARS (Easy Approach to Requirements Syntax) framework to build the PRD right inside the chat.
Using EARS ensured the logic was crisp. We further defined:
- Event-driven triggers: (e.g., “When the user opens the app, show the current day’s ‘Mission’.”)
- Unwanted Behavior: “If there is no signal, the app must show static information from the predefined list.”
- The Vibe System: I wanted the colors to change based on the location – Rural for Kaohsiung, Island for Xiao Liu Qiu, Swiss Farm for Qingjing, and Snowy Mountain for Hehuanshan.
- “Test Mode”: A hidden time-travel slider so I could control which day the app was showing to verify themes and schedules before the trip.
- Remove PII…security and stuff
The “Vibe Coding” Setup
These are the instructions from Gemini, reformatted for you, dear reader.
Gemini: To keep your “brainless navigator” running smooth and offline-ready on your Mac and Android, you don’t need a fancy hosting service. Since we are vibing with a single-file solution, we can keep it lightweight.
- Code Editor: Download Visual Studio Code (VS Code). It’s the industry standard for a reason.
- Open VS Code.
- Go to File > New Text File.
- Go to File > Save As….
- Name the file index.html (or trip.html) and save it to a folder on your Desktop (e.g., “Taiwan_Trip”).
- Paste the long block of code I will give you into that empty file.
- Press Cmd + S to save.
- The “Go Live” Button: Inside VS Code, install the “Live Server” extension (by Ritwick Dey). This creates a local web server with one click.
- Click the Extensions icon on the left sidebar of VS Code (it looks like four squares).
- Search for “Live Server”.
- Click Install.
- Once installed, look at the very bottom right of your VS Code window. You should see a button that says “Go Live”.
- Click “Go Live”. Your default browser (Safari/Chrome) will automatically open and show your app.
- Local Network Access: * Open System Settings > Network > Wi-Fi.
- Double-click the trip.html file. It will open in your browser just like a normal website.
I followed it religiously, copied the entire HTML block in VS Code, saved, clicked Go Live, which opened the page, and Voilà! It’s up and running!
The Iteration Loop
We went back and forth. I tested every page, took screenshots of the UI, and provided feedback to Gemini with notes like: “Wait, you’re losing memory. Day 4 is missing the ferry back.”
In about 40 minutes, I went from a spreadsheet to a native-feeling app on my Android.
It has everything I need, no more pinching and zooming. It has emergency contacts for the local police in every county I’m visiting, 1-tap links to live bus tracking, and it works 100% offline!
Requirements are the code
In the old world, my custom travel itinerary app would have been a game of “logistical telephone.” I’d write a requirement, hand it to a researcher to validate the “why,” wait for a designer to turn that into a mock-up, and finally hope an engineer had the time to build it. By the time it reached my phone, the original “vibe” was often buried under layers of handoffs and technical trade-offs.
Now, the distance between my idea and the actual app is zero.
By using Gemini and VS Code, I didn’t just bypass the roles of a designer or an engineer – I invited them into a single, instant conversation. I wasn’t just a “Requirement Writer”; I was the Orchestrator.
I acted as the researcher defining the hiker’s pain points, the designer choosing the big, high-contrast buttons for 3,000m altitudes, and the engineer reviewing the code.
The experts aren’t gone – we still need them for the complex, high-stakes stuff. But for the 0-to-1 build? The PM now has the power to make the vision come to life without waiting for a single meeting.
What about Claude Code’s result?
Claude Code was thorough with the EARS framework, and so I thought it did more. It also took longer to build and troubleshoot.
For a fast, “good-enough,” and highly accessible prototype, the free-tier conversation in Gemini held its own surprisingly well.
—
Next Post: This is my first live project – a scam conversation simulator where you can waste scammer’s time https://dont-be-the-phool.netlify.app/ (I’ll write about it some other time!)
Previous Post: I Started Midjourney Excited. I Left Uncomfortable. Here’s Why
—
About the author:
Product Manager. Customer Service veteran. Currently using Gemini to prove that “Vibe Coding” isn’t just for people with $20/month to spare.
Leave a comment