Vibe Coding: How We Built This Site with Claude (and You Can Too)

An inside look at how tab accept was built using vibe coding with Claude, showing the power of AI pair programming and creative flow.

In 48 hours and with about $24 worth of AI tokens, this entire website came to life. Welcome to vibe coding, where the constraints of software development give way to creative flow and rapid iteration.

The Vibe Coding Movement Begins

It all started with a tweet from Andrej Karpathy that resonated with developers everywhere:

This tongue-in-cheek yet insightful observation captures a new reality: AI is transforming how we build software, creating a development approach that’s less about meticulously crafting each line of code and more about creative direction and iteration.

What Is Vibe Coding?

Vibe coding is a development approach that prioritizes creative momentum over rigid structure. It’s about tapping into your natural intuition as a builder, getting into a flow state, and making tangible progress without getting bogged down in endless planning.

While traditional software development emphasizes:

  • Meticulous upfront planning
  • Detailed specifications
  • Perfect architecture
  • Following best practices at every step

Vibe coding thrives on:

  • Rapid iteration
  • Creative experimentation
  • Building to discover requirements
  • The joy of seeing your creation evolve

This doesn’t mean writing sloppy code or ignoring good practices. Instead, it’s about finding the sweet spot where productivity meets craftsmanship—using tools that accelerate your workflow without sacrificing quality.

How We Built TabAccept: A Case Study in Vibes

When we set out to build TabAccept, we didn’t start with a comprehensive requirements document. We had a vision: a site that would help others discover the joy of vibe coding and provide resources for this approach.

Rather than mapping out every component and feature in advance, we chose to pair program with Claude, letting the site evolve organically through our collaboration. Here’s how that process unfolded:

1. Choosing the Tech Stack

Our first conversation wasn’t about detailed requirements—it was a high-level discussion about what technology would best suit our goals. I wanted something lightweight, fast, and with minimal ceremony:

Me: "I need a simple but modern framework for a content-focused site. What would you recommend?"

Claude: “For a content-focused site with modern features but minimal complexity, Astro would be an excellent choice. It excels at static site generation while allowing component-based development and minimal JavaScript sent to the browser.”

After a brief discussion of alternatives (Next.js, Remix, plain HTML/CSS), we settled on Astro for its focus on content and performance—a decision that took minutes, not days.

2. Starting with a Template

Rather than building from scratch, we leveraged an Astro blog template to get started quickly. This gave us a foundation to build upon:

  • Basic blog structure already in place
  • Markdown processing ready to go
  • Responsive layouts pre-configured

This approach embodies vibe coding’s pragmatism: why reinvent what already exists? We could focus our creative energy on what makes TabAccept unique.

3. Iterative Design Evolution

The site’s design wasn’t crafted upfront in Figma and then meticulously implemented. Instead, it evolved through rapid experimentation and iteration:

  • We started with the template’s minimal design
  • Modified the color scheme to align with the NASA-inspired aesthetic
  • Adjusted typography for better readability
  • Added a hero section with the vintage keyboard image
  • Evolved the layout section by section

Each change was implemented, viewed in the browser, and refined in real-time. This tight feedback loop kept the creative energy flowing without getting bogged down in pixel-perfect mockups.

4. Content and Structure Co-evolution

The content and structure of the site evolved together, each informing the other:

  • Initial sections were generic placeholders
  • As content clarity improved, the section structure became more defined
  • Section headers and copy were refined as the overall message crystallized
  • The navigation naturally emerged from the content organization

This organic approach allowed the site’s purpose to become clearer through the act of building it—a perfect example of vibe coding’s “discover by doing” philosophy.

5. Mobile Optimization

As with any real-world project, we encountered challenges along the way. Mobile responsiveness wasn’t an afterthought, but it did require targeted attention:

// Example of responsive handling we added
const adjustForMobileViewports = () => {
  const isMobile = window.innerWidth < 768;
  
  if (isMobile) {
    // Mobile-specific adjustments
    document.querySelector('.hero-content').classList.add('mobile-layout');
  } else {
    document.querySelector('.hero-content').classList.remove('mobile-layout');
  }
};

// Listen for viewport changes
window.addEventListener('resize', adjustForMobileViewports);
// Initial check
adjustForMobileViewports();

Rather than getting frustrated with cross-device compatibility issues, we embraced them as part of the process, making incremental improvements as needed.

6. Component Refactoring

As our codebase grew, we noticed opportunities to improve its structure. The initial monolithic page gradually evolved into a more maintainable component architecture:

  1. Created dedicated components for major page sections
  2. Extracted reusable UI elements into their own components
  3. Organized styles more systematically
  4. Improved code readability and maintainability

This refactoring wasn’t done because some external process demanded it—it emerged naturally when the complexity reached a point where reorganization made sense.

The Claude Collaboration Experience

Working with Claude as a pair programming partner brought several unique advantages:

  1. Reduced decision fatigue: Rather than getting stuck on implementation details, Claude could suggest multiple approaches while I focused on the creative direction.

  2. Documentation as you go: Claude could document code as it was being written, making future maintenance easier.

  3. Infinite patience: We could iterate on ideas repeatedly without the social friction that might arise with a human pair.

  4. Knowledge complement: Claude filled knowledge gaps about Astro-specific patterns and best practices I wasn’t familiar with.

Our workflow typically followed this pattern:

  1. I’d propose a high-level feature or change
  2. Claude would explore implementation options and suggest an approach
  3. We’d implement and test the solution
  4. Based on results, we’d either move forward or iterate until satisfied

This back-and-forth created a momentum that traditional development often lacks. With each successful integration, we built confidence to tackle the next challenge.

Lessons for Your Own Vibe Coding

Ready to try vibe coding yourself? Here are some key takeaways from our experience:

1. Start Before You’re Ready

Don’t wait until you have everything figured out. Begin with a minimal implementation and iterate. The act of building will reveal what you actually need.

2. Embrace Imperfection

Your first implementation doesn’t need to be perfect. Get something working, then improve it. This approach builds momentum and prevents analysis paralysis.

3. Let Structure Emerge Naturally

Rather than forcing rigid architecture from the beginning, allow the structure to evolve based on actual needs. Refactor when complexity demands it, not before.

4. Leverage AI Collaboration

Modern AI assistants can serve as invaluable coding partners. They reduce friction in the development process and help maintain creative flow.

5. Prioritize Joy and Discovery

Remember why you’re building in the first place. When development becomes playful and exploratory, both the process and the results improve.

Join the Vibe Coding Movement

tab accept is more than just a website—it’s a demonstration of what’s possible when you embrace vibe coding. In just 48 hours with Claude’s help, we created not just a functional site, but one with delightful features and a solid technical foundation.

And this is just the beginning! Vibe coding isn’t about cutting corners or producing quick-and-dirty solutions—it’s about finding a sustainable approach to development that preserves creative energy and produces results you’re proud of.

Whether you’re building your first project or your hundredth, I invite you to try vibe coding. Start small, build quickly, and see where your creativity takes you.

After all, the best code isn’t just technically sound—it builds on harmony between humans and computers to produce something wonderful.