Vibe Coding: Building a Personal Blog from Scratch

"Vibe coding" is essentially describing a requirement in plain English and watching an AI ship the app. Most of my AI experience has been in systems-level C++, where I review every generated line with extreme scrutiny. I wanted to see if this "describe, review, steer" workflow actually holds up for a full frontend project, so I decided to build my personal blog.

My Approach to Vibe Coding

There is a misconception that vibe coding replaces the need to understand software. In my experience, it's more about treating the AI as a literal, high-speed collaborator. The AI can spin up structure instantly, but it has no concept of what "good" means for a specific project and frequently misses its own bugs.

My actual AI workflow looked like this:

• Intent over Implementation: I described what the blog should do, not which specific components to use.
• PR-Style Review: I treated every generation as a pull request that needed approval before being merged.
• Architectural Ownership: I made the final calls on page routing and content structure.
• Manual Intervention: If a feature "looked" right in the preview but was logically flawed, I stepped in to rewrite the code.

The real skill here isn't writing less code; it's prompt engineering and knowing exactly when to stop trusting the preview and start reading the source.

The Tech Stack and Execution

I used Google AI Studio's Build mode to generate a React application. For those unfamiliar, this isn't a black box; it provides a chat panel alongside a live code editor and a preview pane. One specific feature that actually saves time is the annotation mode, which lets you click an element in the preview to request a change rather than trying to describe the UI location in text.

To keep the project stable, I avoided a custom backend. A blog is the perfect test case for this because the content is the priority, not the underlying platform.

Here is the general structure of the prompt I used to kick off the build:

Build a minimal, modern personal blog in React. 
Home page: list of posts with title, date, short excerpt. 
Post page: full article content, clean typography, no sidebar.

The result was a fast, readable site deployed to a .ai.studio subdomain. By keeping the scope narrow and the requirements explicit, I avoided the "hallucination loop" that often happens with larger, more complex AI-generated apps.