Being a great engineer isn't just about writing code, rather it’s about velocity, production readiness, and continuous learning. I’m constantly experimenting with how to keep up with the latest technologies to achieve results faster and smarter, without sacrificing the standards of a production level environment.
Last weekend, I rode the Vibe Coding train and decided to try it out with my travel website, Scenic Stamps.
🦉 What is Vibe Coding?
A workflow where your primary role shifts from a Coder to a Creative Director.
Think of it like conducting an orchestra. You don’t need to play the violin, the cello, and the drums yourself. You just need to know exactly how the symphony should "vibe."
While I’ve integrated several AI workflows into my daily engineering at Google, this was the first time I decided to apply this process end to end for a personal project. My goal was to leverage my engineering expertise to up level my hobby and set up a professional, production ready website quickly.
Every project has a different North Star. For Scenic Stamps, my North Star wasn't just to build a site quickly but it was to minimize the time between a trip being taken and a story being shared.
🦉 North Star
Just as sailors once used North Star to guide their ships across oceans in the right direction, engineering teams use a metric (referred to as North Star) that represents the ultimate value the product delivers to its customers.
Building Websites in the Agentic Era
In the AI era, we constantly hear that we are moving from "Traditional Workflow" to "Agentic Workflow."
Traditional Workflow: A fancy way of saying we spend 80% of our time setting up the bare bones i.e. writing boilerplate setup, and wrestling with CSS layouts before we even touch the core logic.
Agentic Workflow: A fancy way of saying we provide a high level objective, and AI agents independently plan, reason, and execute the multi-step workflows which includes writing type-safe code to running terminal commands and auto fixing deployment errors. All we do is provide strategic oversight.
In the Traditional workflow era, building a professional personal site was a multi-day project. With Agentic era, we compress weeks into minutes.
| Feature | Traditional Workflow (Hours) | Agentic Workflow (Hours) | Time Saved |
|---|---|---|---|
| UI/UX Design | 8-12h (Figma/Sketch) | 0.1h (Prompting) | ~98% |
| Frontend Skeleton | 4-6h (Setup/Auth) | 0.2h (Auto-gen) | ~95% |
| Component Dev | 20-30h (Tailwind) | 0.5h (Chat-iteration) | ~97% |
| Responsive Debug | 4-8h (Media queries) | Included (Native) | 100% |
| Deployment & DNS | 2-4h (CI/CD) | 0.2h (One-click) | ~90% |
| TOTAL | 38 - 60 Hours | ~1 Hour | 50x Faster |
The 50x speed-up isn't just about laziness, it's about reducing the cost of iteration.
⚠️ Warning: Don't Lose the Engineer in the Vibe
While Vibe Coding is 50x faster, the Agent can sometimes hallucinate. As a professional, your job is verification. Use the 80-20 Rule: Let the AI build the 80%, but use your expertise to audit the 20% — specifically security, accessibility, and performance.
🛠️ Choosing Your Agent
The AI landscape in 2026 is crowded with powerful options. I chose Vercel and v0 because I recently attended a developer event where I earned some credits and wanted to test its reputation for high speed agentic web deployment.
Vercel is the cloud infrastructure where the website actually lives and v0 is an AI tool built by Vercel specifically to generate UI and full stack code using natural language.
🦉 Avoid "Analysis Paralysis"
While Vercel/v0 is fantastic for React heavy frontends, it's not the only player in the game. In a field moving this fast, the biggest risk isn't picking the "wrong" tool; it's not picking one at all. Don't over-optimize before you've started. My suggestion? Pick one agent : whether it’s v0, Cursor, or AI Studio and start building. You can only truly evaluate a workflow once you’ve felt the friction and the wins of a live project.
Build first, benchmark later.
🏗️ Getting Setup: The Infrastructure
Before you can "vibe," you need a foundation. Here is how I went from a blank slate to a production-ready environment in under 5 minutes.
The most critical step in building a production ready setup is Version Control. You want to experiment with things, revert in case something goes wrong and have a history - all things that version control does.
- Initialize the Project: Start a "New Project" in v0.
- You can choose "Create new repository" when prompted.
- The Gear Icon: Click the Settings button (gear icon) in the top right corner.
- Authenticate: Under the "Settings" tab, click "Connect to GitHub".
- Name Your Repo: A name suitable for your repo, for example scenic-stamps-v0
Note: You can also connect to an existing GitHub repository.
Step-by-Step Implementation
🧠 Engineering Your Intent
The secret to a great AI-generated site isn't just asking for a "portfolio." It’s about Technical Specificity. In the industry, we call this Prompt Engineering, or Architectural Intent.
⚠️ The Golden Rule: Garbage In, Garbage Out.
If you give a vague prompt, you get a generic result. To get a production ready site, you must provide the AI with a Technical Anchor.
When I prompted v0 for the 2026 version of Scenic Stamps, I didn't just ask for "a blog." I provided a structured intent that balanced high-performance code with a professional editorial feel.
The Prompt: "Build a professional, media-heavy travel platform using Next.js and Tailwind CSS. The layout should feature a hero section with a full-bleed cinematic image and a sleek overlay for the title. Include a 'Our Story' section for Harshita & Antriksh. Add an interactive, configurable Map component for travel tracking. Aesthetic: Minimalist UI with high-end typography."
Notice I didn't just say "Make it look good." I specified the libraries, the layout patterns, and the UX feel. By providing these in the prompt, I reduced the AI's hallucination.
🦉 What is AI Hallucination?
In a coding context, hallucination is when the agent generates non-existent code, broken CSS classes, or ghost API endpoints. By defining the libraries (Tailwind/Next.js) and the specific sections upfront, I forced the agent to stay within a known reality.
🛠️ From Iteration to Production
Once v0 generates the initial UI, use the new code editor directly in the browser to tweak the logic. The site didn’t have my specific photos from the Kilimanjaro hike or the Japan trip yet.
- The Workflow: Let the AI generate the "Containers" and the "Lazy Loading" logic first.
- The Manual 20%: Once the scaffold is ready, I manually swapped the placeholder paths for my optimized photography assets stored in my Photos.
Once you are set, you can hit deploy in the top right. Vercel automatically creates a preview deployment. Since we synced this to a GitHub repo we also have a clean version history.
A professional brand needs a professional URL. If you, like me, manage your domains via Squarespace, it is a simple setup. In Vercel you can Go to Settings > Domains and add your custom domain.
Closing Thoughts
By using v0, my site was up in a few minutes. Adding blog content was all that I had to focus on and rest was all taken care of. I didn't treat v0 as a no code tool rather used it as a pair programmer. It handled the visual boilerplate, then I spent my brain on the unique features, such as pulling live data from instagram or optimizing image loading for high res photography.
My travel website is live, you can check it out here. I’d love to hear your thoughts!
What’s your current AI augmented workflow? Are you still writing every by hand?
Let’s discuss in the comments!
Top comments (0)