How I vibe coded this website (and why it was easier than I thought)

The site you're reading this on didn't exist a two days ago. No application, no design, not even the bigger idea. It started with the need to have a place for showcasing my AI learning roadmap and a domain I'd bought at some point. With Claude Code and the motivation to expirment (learning by doing, right?), here's how it came together. And honestly, it was easier than I expected.

Step 1: Brainstorming before building

The most valuable part happened before I wrote a single line of code, or better, let Claude Code write it.

I opened a chat with the LLM and just talked through what this site should be. Not "build me a website", but with a goal in mind really thinking about what to have and what not. Who is this for? What's the one thing a visitor should understand in ten seconds? What sections earn their place, and what's just clutter?

A few things came out of that conversation, that I scratched from the start:

• I cut the podcast section. I don't have a podcast. An empty "coming soon" section signals abandoned ambition.
• The blog became "Notes". Which has the same meaning but represents lower pressure. A blog with one stale post looks worse than no blog.
• We landed on a positioning line. "AI product manager and founder, building from the heart of Asia." That sentence represented what I'm doing right now.
• We even did the visual direction in chat. Claude mocked up style tiles. I looked at the first one, didn't like it, gave it more context and other color palettes, and got it revised in an instant.

The output of all this was a single file: CLAUDE.md. A project brief with the sitemap, design tokens, tone of voice, and most importantly a list of non-goals. That file became the main context for the build in VS Code.

This is the part I'd tell every new PM about: the brainstorming phase at the beginning is the most influential product work. The coding afterwards will fall in place.

Step 2: The setup

The stack, in plain terms:

• Next.js + Tailwind — the framework and styling. Created with one command: npx create-next-app@latest
• VS Code + Claude Code — where the building happens
• GitHub — where the code lives
• Vercel — hosting, free tier, connects to GitHub
• Namecheap — where my domain was already sitting, waiting for a purpose

Total cost: 12USD domain costs per year. Everything else is free at this scale, excluding Anthropic Pro.

Step 3: Prompt coding with Claude Code, I don't like the term Vibe Coding

I dropped the CLAUDE.md brief into the project folder, opened Claude Code in VS Code, and my first prompt was just: "Read CLAUDE.md. Follow the direction and start with Milestone 1. Stop after M1."

Then the loop:

1. Claude Code writes or changes files
2. npm run dev runs in the terminal — the browser preview updates on every save
3. I look at it, react, ask for changes
4. Repeat

That's it. That's prompt coding. I reviewed and directed; Claude Code typed. My job looked a lot like being a PM with an extremely fast engineering team of one.

Going page by page was important. Asking for "the whole site" at once produces mush, things I might not want, and reworking costs a lot of tokens. Asking for the layout, reviewing it, then the homepage, reviewing it, that's how it stays efficient and on point.

Step 4: Shipping it

The deployment pipeline sounds scary at first, but absolutely isn't:

1. Push to GitHub. git init, commit, push. (Reminder, if forgotten: git commit -a doesn't include brand-new files. git add . first.)
2. Import into Vercel. Connect the GitHub repo, Vercel detects Next.js, click deploy. I hit one error — "No Next.js version detected", because my project sat in a subfolder of the repo. One Root Directory setting later, fixed.
3. Connect the domain. In Vercel: add tobiastaulien.com. In Namecheap: delete the default parking records, add one A record and one CNAME exactly as Vercel displays them. Wait a few minutes. HTTPS certificate appears automatically.

From then on, every git push deploys the site. Push is the publish button.

What was suprising to me

How little of this was coding knowledge. The skills that mattered were product skills: scoping ruthlessly, writing a clear brief, giving specific feedback, knowing when something is good enough to ship and a good design sense. Knowing a bit of IDEs and git is enough. The rest was Claude Code's problem.

How much the brief mattered. The CLAUDE.md file, with the PRD, did more lifting than any individual prompt. If the PRD is garbage, you get garbage. If the brief is clear, the AI just builds the right thing. Same as in real life with real developers.

The hiccups were small and Googleable. A nested folder here, a small git error there. It was all resolved in minutes.

If you're a PM who's been reading about AI tools instead of using them: this whole thing is a two day weekend. The barrier isn't a technical hurdle anymore, it's you not starting.

More notes on what I'm building next, including the demos section, coming soon.