How to Build Beautiful Listing Pages with AI - Day 11 of Learning in Public
I'm sitting here in Bali, coffee in hand, and honestly? I can't believe how much progress we made today on the travel directory. Day 11 of this 60-day challenge, and things are finally starting to look like a real website.
Quick summary
Today I tackled one of the biggest challenges in web development - creating those complex listing pages that actually work. You know, the kind you see on Airbnb where everything just flows perfectly? Turns out, with the right AI prompting and a clear plan, you can build something surprisingly good in just a few hours.
Why I'm sharing this whole process
Look, I could just show you the finished product, but that's not how learning works. The messy middle parts - where I got frustrated with file structures and had to backtrack on design decisions - that's where the real lessons are.
Plus, my partner keeps getting invited to amazing places around Bali, and friends keep asking for recommendations. So this isn't just a coding exercise - we're building something we'll actually use.
The challenge I was facing
Here's the thing about listing pages - they look simple, but they're actually incredibly complex. You need:
A hero section that doesn't suck
Filters that actually work
Cards that display the right information
Mobile responsiveness (because everyone's on their phones)
A single page view for each listing
Proper navigation between everything
Oh, and it all needs to look professional, not like something I threw together in 2005.
What I tried first (spoiler: it didn't work perfectly)
I started by asking Cursor AI to analyze our project execution plan. Smart move, right? Well, sort of. The AI understood what I wanted, but it kept creating files in the wrong directories.
This is actually the second time this happened, and I'm starting to think I need to be more specific with my prompts. It's like when you ask someone for directions and they assume you know which street they're talking about.
The breakthrough moment
You know what's funny? The breakthrough came when I stopped trying to be too clever and just started describing exactly what I wanted, like I was talking to a friend.
Instead of saying "implement listing functionality," I said something like: "I want a hero section like Airbnb, then category cards for hotels, resorts, villas, and glamping, then a filter sidebar, then the actual listings."
Suddenly, everything started working.
Here's how I actually built it
Step 1: Getting the naming right
First thing - we decided on "The Bali Handbook" as our name. I know, I know, we're not 100% sure yet, but sometimes you just have to pick something and move forward.
I prompted Cursor to update everything from "Bali Directory" to "The Bali Handbook" across the entire project. Pretty cool how it automatically updated the metadata, hero sections, menus, footers - everything.
Step 2: Planning the page structure
Before jumping into code, I spent time thinking about user flow. Here's what I mapped out:
Hero section with search capabilities
Category navigation (hotels, resorts, villas, glamping)
Filter sidebar (location, price, property type)
Listing grid with pagination
Maybe some popular areas for SEO
This is where studying Airbnb really paid off. They've spent millions on UX research - why not learn from that?
Step 3: Building the components
I asked Cursor to create all the UI components we'd need:
Card components for listings
Filter components with proper styling
Navigation elements
Form inputs and buttons
The AI actually did a pretty good job here, though I had to fix some styling issues later.
Step 4: Creating the stays archive page
This is where things got interesting. I wanted:
A clean hero section with gradient background
Horizontal scrolling category cards on mobile
A filter button that actually works
Proper active states for navigation
The first version looked okay, but the mobile experience was terrible. Those category cards were stacked vertically, making navigation clunky.
The stuff that went wrong
Oh boy, where do I start?
The biggest issue was file organization. Cursor kept creating new folders instead of using existing ones. I spent probably 30 minutes just moving files around.
Then there was the disappearing filter button. I asked for a black button, and somehow the AI interpreted that as "remove the button entirely." Classic AI moment right there.
The mobile navigation was another headache. What looks good on desktop often breaks completely on mobile, and you don't realize it until you actually test it.
How I fixed the problems
For the file organization, I just had to be more explicit in my prompts. Instead of letting the AI assume where files should go, I started specifying exact paths.
The missing filter button? I literally had to ask for it back. "Please add the filter button back" - sometimes the simplest approach works best.
For mobile optimization, I described exactly what I wanted: "On mobile, make the category cards horizontal with scroll instead of stacked cards."
What it looks like now
I'm actually pretty happy with where we landed:
Clean hero section with proper gradient
Category cards that work on both desktop and mobile
Filter sidebar with location, price, and property type options
Listing grid with placeholder images
Proper pagination controls
Active states for navigation
The single listing page is coming together too. We've got:
Hero section with title and key info
Image gallery (clickable for more photos)
Our personal experience section (this is key for our brand)
Property amenities displayed nicely
Location information
Booking CTA buttons for affiliate links
Lessons I'm taking from this
Be specific with AI prompts: "Make it look good" doesn't work. "Add a gradient background with these exact colors" does.
Test mobile early: What works on desktop often breaks on mobile in unexpected ways.
Study successful sites: Airbnb didn't become huge by accident. Their UX patterns work.
Iterate quickly: Don't try to make everything perfect in one go. Build, test, fix, repeat.
The most surprising thing? How much faster development becomes when you have a clear vision of what you want. Those 30 minutes I spent studying Airbnb's interface saved me hours of trial and error.
What I'm working on next
Tomorrow I'm diving into the database connection. Right now everything is placeholder content, but we need to build the admin dashboard so we can actually manage listings.
I'm also thinking about SEO strategy. We need proper breadcrumbs, schema markup, and content sections that help with search rankings.
Oh, and I need to figure out Google Maps integration. Apparently it's not cheap, so I might need to find alternatives.
Final thoughts
You know what's wild about this whole process? Six months ago, building something like this would have taken weeks. Now, with the right AI tools and clear communication, you can create professional-looking interfaces in hours.
But here's the thing - the AI is only as good as your ability to communicate what you want. It's not magic. It's a really powerful tool that amplifies your existing knowledge and vision.
If you're thinking about building something similar, my advice is simple: start with a clear plan, study sites you admire, and don't be afraid to iterate. The first version doesn't have to be perfect - it just has to exist.
Following along with my 60-day challenge? I'm documenting everything as I build this travel directory from scratch. Subscribe to see how this whole experiment turns out - and feel free to steal any ideas that work for your own projects.