Building a website for a boutique travel agency—especially one as nuanced as greenforest.com.np—usually takes weeks of design handoffs, plugin bloat, and CMS configuration. But what if you treated your website development like a conversation?
1. The Pre-Flight: Structure Before Sentiment
Vibe coding isn’t about throwing prompts at an AI and hoping for a miracle. It’s about contextual dominance. Before we generated a single line of CSS, we established the “Source of Truth” using core inputs:
- The Brand Questionnaire: A CSV file defining the why (women-led, Japan-returnee founders, Pokhara-local).
- The Design Spec: We utilized Google Stitch for the visual architecture. Stitch is an AI-powered design tool that transforms descriptive requirements into high-fidelity UI components. Its benefit lies in its ability to bridge the gap between creative vision and functional code, providing a structured, responsive foundation without the need for manual design-to-code translation. We fed it our
mddesign spec, downloaded the generated folder into our workspace, and instructed Cursor to reference it as a primary instruction set within ourdevelopment.mdfile. - The Expedition Catalog: Structured data for 24 distinct trekking itineraries.
2. The “Catalog-as-Code” Pattern
Most people build travel sites by manually creating 24 different pages in the WordPress admin. We stopped that immediately. Instead, we built a Catalog-as-Code system:
- The Logic: We housed all expedition data—itinerary days, altitude, difficulty—in a PHP array (
treks-catalog.php). - The Sync: We created an
inc/setup.phpfile that hooks into the theme activation process. When we bump theGF_TREK_CATALOG_VERSIONconstant, the site automatically updates, cleans, and syncs all 24 expedition posts without a single manual click in the WordPress dashboard.
3. The Expedition Builder: Rethinking Lead Gen
Generic “Contact Us” forms are where conversions go to die. We built an Expedition Builder that functions like an e-commerce shopping cart. Users browse, click “[+ Add to Journey],” and the site uses localStorage to track their “basket.” The resulting inquiry is a structured JSON payload, allowing for a highly personalized sales response.
4. Vibe Coding: The Iteration Loop
Our sprint board wasn’t a Jira ticket; it was a Cursor workflow chat thread. We encountered the “cascade wars” (where global link colors overrode button styles) and email delivery issues. Because we were building a custom theme, we could surgically fix these issues without fighting a bloated page-builder plugin.
“The conversation was the sprint board.”
Final Thoughts
Vibe coding is the bridge between “no-code” (which limits you) and “hand-coding” (which slows you down). By creating a system that treats content as code, we built a premium, high-performance site that feels handcrafted but scales like software.
