My Vibe Coding Workflow: How I Ship Side Projects Fast

Vibe coding isn’t about replacing engineering judgment — it’s about compressing the gap between idea and working software. Over the past year I’ve shipped several side projects using AI-assisted development as my primary workflow. Here’s what I’ve learned.

What “Vibe Coding” Actually Means

The term has become a bit of a meme, but the underlying practice is real and genuinely useful. Vibe coding means staying in a high-level creative flow — describing what you want in natural language, iterating fast, and deferring the tedious scaffolding to an AI assistant.

The key distinction: you’re still the architect. You make the calls on structure, trade-offs, and quality. The AI handles the implementation details that would otherwise break your flow.

The Stack That Works for Me

I’ve converged on a tight toolkit:

• Cursor — my primary IDE for AI-assisted coding. The tab completion and inline edits are genuinely superb.
• Claude — for thinking through architecture, debugging subtle issues, and generating longer blocks of code that need context.
• Astro — for content-heavy sites. The island architecture maps well to AI-assisted development because each component is small and self-contained.
• Vercel — zero-config deployment means I can ship a working URL within minutes.
• Neon — serverless Postgres that starts free and scales without ops overhead.

The Workflow: Rough to Refined

1. Start with a design brief, not a spec

Before writing a single line of code, I spend 10 minutes writing a plain-English description of what I’m building and why it should feel a certain way. I include the aesthetic direction (quiet luxury, brutalist, playful), the key interactions, and who the audience is.

This brief goes into CLAUDE.md or similar context files that live in the repo. Every AI conversation gets this context automatically, which means I spend less time re-explaining the vision.

2. Scaffold with one big prompt

For a new feature I write a detailed prompt — sometimes 200–400 words — describing the full shape of what I want. Component structure, data flow, edge cases, styling constraints. The AI generates a rough scaffold. It won’t be perfect, but it gets me 60–70% there in seconds.

Resist the temptation to iterate on bad scaffolding. If the first output is structurally wrong, start over with a better prompt.

3. Iterate in small loops

Once the scaffold is right, I switch to tight feedback loops:

1. Run the dev server
2. See what looks or works wrong
3. Select the specific area in Cursor and describe the fix
4. Verify in browser

The mistake I made early was asking for too many changes at once. Small, focused requests get much better results. One visual bug at a time. One API behavior at a time.

4. Build verification gates

The AI will sometimes introduce subtle bugs — unused imports that cause TypeScript errors, or logic that works in the happy path but breaks on edge cases. I protect against this with a simple pre-commit checklist:

# Before every commit:
npm run build   # catches TypeScript errors
npx astro check # Astro-specific type checking

Make this a habit. The 30 seconds it takes has saved me hours of debugging deployed errors.

5. Context windows are your friend

Long context is genuinely powerful. When debugging a hard issue I paste in the full component, the types it depends on, the error message, and the relevant API response shape. The AI can reason across all of this simultaneously in a way that’s hard to replicate by asking narrow questions.

What to Watch Out For

Hallucinated APIs. The AI will sometimes reference methods or props that don’t exist. Always check against the actual docs for libraries you’re less familiar with.

Dependency drift. AI-assisted code can introduce libraries you didn’t ask for, or use older API patterns from libraries you’re already using. A quick npm ls after a large generation is worth doing.

Losing the architecture. When moving fast it’s easy to let the component structure drift into something messy. Every few sessions, step back and ask whether the file structure still makes sense. Refactoring is cheap; shipping a mess is not.

Security blind spots. AI assistants generally write safe code, but they can miss subtle issues around input validation, rate limiting, or auth token handling. Any API endpoint touching user data gets a manual review pass.

The Mindset Shift

The biggest change is treating iteration speed as a first-class metric. With a good vibe coding setup, the cost of trying something is very low. So I try things I’d normally sketch on paper first. Some fail immediately; that’s fine. The ones that work get refined. The result is a much tighter feedback loop between idea and outcome.

You’re not writing less carefully. You’re writing faster, which means you can afford to be more experimental and then converge quickly on what works.

Tools I Recommend Trying

• Read Later — my own side project, built entirely vibe-coded. Saves articles for offline reading with a clean interface.
• Cursor — cursor.sh. The AI-native IDE. Start here.
• v0 by Vercel — great for quickly generating UI components that you then refine.
• Shadcn/ui — component library designed to be copy-pasted and modified, which pairs perfectly with AI-assisted workflows.

The tools matter, but the workflow matters more. Once you’ve developed a feel for writing effective prompts and maintaining good project context, the specific tools become interchangeable. The flow is the thing.