How I Vibe Coded My Vibe Coding Platform

Introduction

I used AI to build the platform where people use AI to build things.

In February 2026, I shipped 40+ commits to BigDevSoon. On the landing page side — a complete rewrite from Gatsby to Astro 5, a blog and knowledge pills content system, new pricing pages. On the app side — an AI assistant called Merlin with streaming code generation, seven framework modes in the browser editor, file uploads, email provider migration, and a full onboarding redesign. One developer.

This post isn’t really about BigDevSoon. It’s about the workflow, tools, and mindset that made all of it possible — and how you can apply the same approach to whatever you’re building. Want to see the result? Try the demo — no signup needed.

None of this was magic. It was a specific process, repeated over and over. Here’s everything.

The One-Shot Mindset

Every feature should be one-shottable. If you can’t one-shot it, you haven’t broken it down enough.

This is the single most important thing I learned. When I say “one-shot,” I mean: you write a prompt, Claude Code executes it, and the result is correct on the first try. No back-and-forth. No “actually, I meant this other thing.” No three rounds of corrections.

The anti-pattern is easy to spot. If the model responds with “You’re absolutely right, I apologize for the confusion” — that’s not the model’s fault. You gave a bad prompt. Your scope was unclear, your constraints were missing, or you didn’t define what “done” looks like. That’s on you.

Watch for two specific failure modes. Hallucination — the model invents APIs that don’t exist, references files that aren’t there, or generates plausible-looking code that does the wrong thing. Laziness — the model writes // TODO: implement this later comments instead of actual code, or skips edge cases, or gives you 80% of the solution and hopes you’ll fill in the rest.

Both are symptoms of the same problem: insufficient context.

This connects directly to traditional engineering. A well-scoped Jira ticket with clear acceptance criteria is easy to implement. A vague “make it better” ticket is a disaster. Same principle, different medium. The ticket is your prompt. The acceptance criteria are your constraints.

For BDS 2.0, instead of prompting “build me an AI assistant,” I had separate scoped documents. PRD-01 covered editor stability. PRD-03 handled the assets drawer. PRD-04 was Merlin AI itself. Each one was focused enough to one-shot with proper context.

The Deadly Trio — Gemini PRD, Plan Mode, Then Code

The workflow that consistently produces the best results has three steps. Not two. Not one. Three.

Step 1: Gemini drafts the PRD. Gemini has a massive context window, it’s excellent at structured document generation, and it’s free. You feed it your idea, your constraints, your existing architecture, and it produces a detailed product requirements document. Use each model for what it does best.

Step 2: Feed the PRD to Claude Code in Plan mode. Plan mode is critical. It blocks all write tools — the model literally cannot modify files. This forces it to think through the implementation before touching code. It’s like forcing yourself to write pseudo-code before coding. You go back and forth. You challenge the plan. You ask “what about this edge case?” You refine until the plan is solid.

Step 3: Switch to “Edit automatically” and let it execute. Once the plan is good, you flip the switch. Claude Code follows the plan it just agreed to, and because the plan was thorough, the execution is usually clean.

Boris Cherny, who built Claude Code, describes a similar approach — most sessions start in Plan mode. When the goal is a PR, he goes back and forth until the plan is right, then switches to auto-accept and Claude usually one-shots the execution.

The Gemini + Claude combo isn’t about loyalty to one model. It’s about using each tool where it’s strongest. Gemini plans. Claude builds.

Your AI’s Memory — CLAUDE.md, AGENTS.md, and MEMORY.md

These three files are the difference between an AI that knows your project and an AI that hallucinates about it.

CLAUDE.md lives at the root of your project. Think of it as your project’s constitution. Tech stack, naming conventions, commands to run (and commands to never run), environment variables, gotchas. Every new Claude Code session reads it first. My CLAUDE.md specifies things like “NEVER run build or lint commands — they’re slow and block iteration,” “use yarn not npm,” and lists every critical architectural decision. The model doesn’t have to rediscover your project structure every session.

AGENTS.md contains specialized instructions for subagents. When you spawn a subagent (more on this below), it inherits its own agent configuration. BigDevSoon has an SEO specialist agent with instructions covering keyword research methodology, technical audit procedures, and structured data implementation. The subagent operates within its specialty without polluting the main context.

MEMORY.md is the persistent, evolving knowledge base. This is where architecture decisions, completed PRDs, security audit findings, and hard-won gotchas accumulate over time. My MEMORY.md tracks everything from the DevSandbox iframe architecture to the exact Supabase project IDs for each environment. It’s what makes session 100 as informed as session 1.

You’re reading a post written by a human who maintains a MEMORY.md that tells an AI how to write code for a platform that teaches humans to write code with AI. We’re through the looking glass.

Skills, MCPs, Agents, and Subagents

The Claude Code ecosystem has grown fast. Knowing what’s available saves you from reinventing things that already exist.

Skills

Skills are reusable instruction sets — role-specific playbooks you can install and invoke. BigDevSoon’s landing page uses a frontend-design skill that forces Claude to commit to a bold aesthetic direction before writing any code — it picks a tone (brutalist, editorial, minimalist), chooses distinctive typography instead of defaulting to Inter or Roboto, and adds real motion and spatial composition. Without it, every AI-generated UI looks the same. With it, the output has an actual point of view.

Where to find them:

SkillsMP — a marketplace with 87,000+ community-built skills
awesome-claude-skills — curated GitHub list
Official Anthropic skills — the official repo

MCPs (Model Context Protocol)

MCPs let Claude Code talk to external services directly from your terminal. These are the ones I actually use.

Supabase MCP — manage your database, run migrations, query data without leaving the terminal. I used this constantly during BDS 2.0 for checking table schemas and running RPCs.
Playwright MCP — Claude can literally open your app in a browser, click buttons, fill forms, and verify UI behavior. Useful for testing flows you’d otherwise check manually.
Remotion MCP — generate videos programmatically. Niche but powerful if you’re doing content creation.
Vercel MCP — manage deployments, check build logs, access project metadata.

Agents and Subagents

Claude Code can spawn specialized subagents that run in parallel with the main session. Each subagent gets its own context and instructions. The SEO specialist agent in BigDevSoon’s .claude/agents/ directory is a real example — it runs keyword analysis and technical audits independently.

Community repos with pre-built agent configurations:

awesome-claude-code-subagents — 100+ specialized subagent configs
everything-claude-code — complete configuration collection from an Anthropic hackathon winner
awesome-claude-agents — community-curated collection

Don’t build everything from scratch. Someone has probably already made an agent for your use case.

The Extension and the Terminal

Boris Cherny, who built Claude Code, uses a “surprisingly vanilla” setup — just Claude Code in raw terminal tabs. No IDE wrappers. And that approach absolutely works.

I went a different route. I use the Claude Code extension inside Cursor, and I love it.

The extension lets you visualize what Claude is doing in real time — file diffs, terminal commands, the whole flow. You can drag files and images directly into the chat. You can follow along as it edits your code, jump to changed files instantly, and run UI commands without switching windows. It’s genuinely fun to watch it work. Multiple tabs of Claude Code running side by side in your editor, each one tackling a different part of the codebase — that’s my daily setup.

Both approaches are valid. Boris proves the raw terminal works. I’m proof the extension works. Pick whichever matches how your brain operates. The important thing isn’t where Claude Code runs — it’s how you use it.

The philosophy is the same either way: let Claude Code cook. Give it a clear plan (see the Deadly Trio above), switch to auto-accept, and let it work. Intervene when it goes off track, not preemptively. Trust the plan. If the plan was good, the execution will be good. If the execution goes sideways, the problem was the plan, not the model.

Multiple Tabs, Maximum Velocity

Running 3-5 Claude Code instances simultaneously is how you get real throughput. Not from a single session doing more — from parallelization.

During BDS 2.0, a typical afternoon looked like this: Tab 1 is implementing the Merlin AI streaming backend. Tab 2 is writing tests for the file upload system. Tab 3 is refactoring the DevSandbox iframe preview. Tab 4 is updating landing page content. Four independent workstreams, all progressing at the same time.

The key rule: each tab must work on an independent piece. If Tab 1’s work depends on Tab 2’s output, don’t parallelize them. This is just concurrent programming principles applied to AI workflows. No shared state. No race conditions. Independent tasks.

System notifications alert you when any tab needs input, so you context-switch efficiently instead of polling all tabs constantly. You’re not babysitting four sessions — you’re managing four autonomous workers and stepping in only when they raise a hand.

The insight is counterintuitive: Claude Code’s power comes from parallelization, not complexity. Multiple simple sessions beat one overloaded session every time.

The Iterative Agent Loop

There’s a pattern that’s been circulating in the AI dev community, and it’s popular because it works. The loop looks like this:

Review the plan — make sure the scope is clear
Ask clarifying questions — before writing a single line
Implement — let the model execute
Review with agents — run specialized review agents against the output
Write tests — the model writes tests for what it just built
Iterate — if tests fail or review catches issues, go back to step 3

The loop has a natural termination condition. When the tests pass, the linter is clean, and the review agent signs off — you’re done. No ambiguity about when to stop.

This is not “vibe coding” in the derogatory sense — the one where you type “make app” and pray. This is structured iteration with clear exit criteria. The AI does the heavy lifting, but the process has guardrails.

For BDS, the testing setup reinforced this. A Husky pre-push hook runs both frontend tests (Jest + RTL) and backend tests (Deno) on every push. The AI writes tests, runs them, fixes failures, and iterates until everything is green. The human reviews the final diff.

Tools that formalize this pattern:

agentic-loop — a framework for structured agent iteration
Ralph — spec-driven development with autonomous iteration until all PRD items are complete (GitHub)

Prompt Chunks That Actually Work

You don’t need elaborate multi-paragraph prompts for every interaction. Short, punchy phrases steer the model’s behavior more effectively than walls of text. I call them “chunks.”

Chunk	What it does
”Ultra think”	Forces deeper reasoning before the model starts writing
”Lazor focus”	Narrows scope to the exact problem, prevents tangents
”Lock in”	Signals high importance — the model brings more effort
”Use all your knowledge”	Prevents safe generic answers, pushes for depth
”No glazing, brutally honest”	Kills AI sycophancy — stops the model from agreeing with everything
”Read before writing”	Forces exploring existing code before modifying anything
”Leave code better than you found it”	Sets a quality bar for every single change
”Psychopath next door rule”	Shorthand for the quote below

That last one references a famous line:

“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.” — John F. Woods

In 2026, that psychopath is an AI model with perfect recall and zero tolerance for your // TODO: fix this later comments. It reads your entire codebase in 3 seconds. It finds every nested ternary, every magic number, every function named handleStuff. And it refactors them — silently, without asking, in a commit titled “clean up technical debt.”

Code clean. The AI is always watching.

These chunks work because they’re specific behavioral instructions, not vague encouragement. “Ultra think” is more useful than “please be careful.” “No glazing” is more useful than “give me honest feedback.” Precision beats verbosity.

Files, Screenshots, and Drag-and-Drop

Claude Code is multimodal, and this is underutilized by most developers.

If you’re trying to explain a UI bug, don’t describe it in text. Drag a screenshot into the prompt. If you have a Figma design and want matching code, screenshot the component and drop it in. The model generates code from visual references surprisingly well.

This is where the extension really shines. In VS Code or Cursor, you can Shift+drag files and directories straight from the sidebar into your Claude Code chat. It inserts the file path and Claude reads the contents immediately. No typing paths manually. No copy-pasting. You see a component that needs work, Shift+drag it in, describe what you want, done.

Be specific in general. Don’t say “update the component.” Say “update /src/components/DevSandbox/Preview.tsx lines 45-80.” The more precise your reference, the less room for hallucination.

When building the BigDevSoon landing page, I dragged Figma screenshots directly into Claude Code. The model saw the design and generated matching Tailwind CSS 4 classes from the visual reference. Faster than describing the layout in words, and more accurate.

Images, file paths, directory structures — use everything the model can see. The best prompt is one where the model has to guess nothing.

What I Actually Built

Everything below was built in February 2026 using the workflow described above. Forty-plus commits. One developer with AI tools.

Landing page:

Complete rewrite — Gatsby to Astro 5 with Tailwind CSS 4
Blog and Knowledge Pills — the content system you’re reading right now
New pricing and comparison pages — with structured data and SEO optimization
10 free developer tools — JSON formatter, Base64 encoder, color converter, CSS gradient generator, meta tag generator, and more — all running client-side, no signup

App:

Merlin AI — unified AI assistant with 5 commands (vibe code, review, feedback, explain, roast), SSE streaming, and a two-pool token system with atomic deduction
7 framework modes — React, Vue, TypeScript, Angular, Svelte, ES Modules, and Vanilla JS, all running in a browser-based editor
4 CSS modes — CSS, SCSS, PostCSS, CSS Modules
npm packages via CDN + importmap — install packages in the browser without a local build step
File uploads — user asset storage with per-plan quotas
Email provider migration — Brevo to Resend with templated emails
Onboarding redesign — interactive missions, first-time tour, plan upsells

This is not a flex. This is what’s possible when you combine a clear plan with the right tools. Two years ago, this would have been a three-month roadmap for a small team.

Closing Notes

The workflow comes down to eight principles:

One-shot everything — if you can’t one-shot it, break it down further
Plan before you code — Gemini for PRDs, Claude Code Plan mode for implementation plans
Give your AI memory — CLAUDE.md, AGENTS.md, and MEMORY.md are not optional
Use the ecosystem — MCPs, skills, agents, subagents. Don’t reinvent what already exists.
Keep it raw — the vanilla terminal approach works. Don’t over-engineer your AI setup.
Parallelize — multiple tabs, independent tasks, system notifications
Iterate with discipline — the agent loop has a natural exit condition. Tests pass, review clean, ship it.
Communicate clearly — prompt chunks, file references, screenshots. Precision beats verbosity.

The best time to learn this workflow was six months ago. The second best time is right now. Pick one project, write one PRD, open Claude Code in plan mode, and ship it.

If you want a playground to practice vibe coding with all of this — 7 frameworks, AI assistant, npm packages, the whole stack — try the BigDevSoon demo.