Vibes Coder
cd ..

Hello World: Coding with Claude in a Cabana

//4 min read
metaaicodernext-jsbuilding-in-public

From a Cabana in Cabo

I'm writing this from a lounge chair in Cabo San Lucas. No laptop. Just my iPhone, a Coder workspace, and Claude as my development partner.

About 90 minutes ago I opened a chat and said "we're going to create a personal website." Ninety minutes later — between sips of something cold — I had a fully functional blog with a custom design, an AI-powered content pipeline, and admin tools for managing everything. Every line of code was written by Claude, directed by me, from a phone screen in a cabana.

This is what building software looks like in 2025. Here's what happened.

What Got Built

The Blog

Started from zero. Scaffolded a Next.js 16 project with the App Router, deployed to Vercel, and wired up:

  • MDX content layer — Blog posts are .mdx files with YAML frontmatter. No database, no CMS — just files in git. Simple, portable, and version-controlled.
  • Tailwind CSS v4 — The initial design was clean but generic. We restyled everything based on a "Medium meets VS Code" aesthetic: dark-first palette, cyber lime accent, monospace metadata, and subtle glow effects on hover.
  • Syntax highlighting — rehype-pretty-code with Shiki for beautiful code blocks. This is a dev blog, after all.
  • Animations — Framer Motion entrance effects. Elements fade in and slide up on page load, staggered across the feed.
  • Reading progress — A thin accent-colored bar at the top of article pages, styled like a terminal loading indicator.
  • Tag system — Every post can have tags with index and filter pages.
  • Dark mode by default — The soul of the site.

The branding went through a quick evolution: "The Vibe Coder" → "Vibes Coder" once we landed on the vibescoder.dev domain. Every reference updated in one pass.

The Content Pipeline

This is the part I'm most excited about. Behind the scenes, the site has a full content management system with a voice-to-blog workflow:

  • Voice recording — I can dictate my thoughts directly in the browser. The Web Speech API handles real-time transcription — words appear as I speak. Continuous, uninterrupted recording for 10+ minutes.
  • Artifact uploads — Drag-and-drop images, PDFs, text files, and code files as context. Claude ingests everything alongside the transcript.
  • AI generation — Claude Sonnet transforms the raw transcript and artifacts into a polished MDX blog post with frontmatter, headings, code blocks — the whole thing. The style prompt is configurable.
  • One-click publishing — Hit publish and the post is committed to GitHub, which triggers a Vercel deploy. Live in seconds.
  • Inline editing — I can edit or delete any post directly from the site. Changes commit to the repo and auto-deploy.

The entire authoring flow is: talk → review → generate → publish. No context switching, no manual git commands, no deploy scripts.

Security Pass

Before shipping, we ran a full security review. Fixed timing-safe password comparison, closed a path traversal vector in file uploads, added security headers, locked down the API surface, and scrubbed any sensitive details from public content. The kind of thing you do before you let the internet see your work.

The Tech Stack

| Layer | Choice | Why | |-------|--------|-----| | Framework | Next.js 16 (App Router) | Vercel-native, React Server Components | | Styling | Tailwind CSS v4 | Utility-first, fast iteration | | Content | MDX + gray-matter | Git-based, no vendor lock-in | | Syntax | rehype-pretty-code + Shiki | Beautiful code blocks | | Animation | Framer Motion | Smooth entrance effects | | AI | Claude Sonnet (Anthropic SDK) | Blog generation from transcripts | | Transcription | Web Speech API | Free, real-time, browser-native | | Hosting | Vercel | Auto-deploy on push to main | | Dev Environment | Coder | Cloud workspace, accessible from anywhere |

By the Numbers

  • ~90 minutes from first prompt to published summary
  • 43 source files created
  • ~2,500 lines of code
  • 0 lines written by hand — every line authored by Claude, directed by me
  • 1 iPhone — no laptop touched

What's Next

This is Day One. The foundation is solid — a git-based blog with an AI-powered authoring pipeline. Future sessions will add:

  • Custom style prompt tuning
  • Analytics dashboard
  • RSS feed
  • OG image generation
  • Video content support
  • Search

The whole thing was built in a Coder workspace with Claude as the coding agent — from a phone, poolside, in Mexico. If that's not the future of software development, I don't know what is.

Welcome to Vibes Coder.