I rebuilt this entire site without writing a single line of code. Here's what $41 and 65 million tokens bought.

Two weeks. Nine batches. One Vercel deploy that immediately broke. The front end is done.

The plan Claude.ai wrote

I had three HTML mockups. A designer friend was supposed to review them first. I got impatient.

I uploaded the mockups to Claude.ai and asked it to plan the implementation. What came back was 31 steps, 9 batches, Playwright visual checkpoints between each one, and a commit strategy. It read like a senior engineer's pre-flight checklist before a large refactor.

Claude.ai didn't just list tasks. It reasoned about dependencies, identified which components needed to exist before others could be built, flagged TypeScript risks upfront, and planned the verification steps. That's the part that surprised me most. The thinking, not just the doing.

The Contentful moment I finally felt instead of just explained

Here's what happened to my content during a complete front end rebuild: nothing.

All 9 Field Notes stayed exactly where they were. I redesigned the typography, layout, dark mode, navigation, article page, tools page. Never opened Contentful to touch a single piece of content.

I work at Contentful. I explain this to clients migrating from WordPress constantly. Your content and your presentation layer are separate concerns. Rebuild the front end, nothing important moves.

This is the first time I personally felt it instead of just saying it. Different experience entirely.

The WordPress clients who ask "but won't we lose all our content?" are really asking whether their content is trapped inside their theme. With Contentful, it isn't. The front end is just a view. You can throw it away and rebuild it. The content stays put. With AI generating front ends in hours, that separation is becoming the most important architectural decision you can make.

Field Note #011 goes deeper on this. The headless CMS vs page-centric platforms conversation is too good to squeeze in here.

What 9 batches actually looks like

Each batch ended with a Playwright screenshot, a build check, and a commit. Then the next batch.

Batch 1: TypeScript, Contentful client, build config. Batches 2 to 4: Design tokens, dark mode, home page. Batches 5 to 6: Article page, tools page, rich text renderers. Batch 7: Contentful schema updates via MCP. No manual UI clicks. Batch 8: SEO. JSON-LD BlogPosting, sitemap fix, word count utility. Batch 9: Cleanup. Deprecated components deleted, unused packages removed.

One giant PR with 65 files changed is impossible to debug. Nine focused commits with clear scope is something you can reason about. Claude.ai planned the order of the work. That is where most projects fall apart.

Claude Code is worth calling out specifically here. It runs in the terminal, reads your actual codebase, executes commands, writes files, runs builds, and checks its own output. It is not autocomplete. It is an agent that works through a problem the same way a developer would, just faster and without complaining about the ticket descriptions.

The UI review I have had before

At one point I typed: "the spacing looks off and the footer is weird."

Claude Code responded: this looks correct to me. Can you describe exactly what is wrong?

I had a flashback. I have worked with brilliant developers who genuinely could not see UI issues. Not because they were not smart. They were focused on functionality. The code works, what exactly is the problem?

The funny part: I am also like this. Front end and design are not my strongest skills.

So there I was, a non-designer explaining UI problems to an AI that was asking me to be more specific, having the exact same conversation I used to have from the other side of the table.

What saved us: screenshots with red circles and arrows. "The left edge of VOL. I does not align with the FieldNotesAI logo above it" is more actionable than "it looks weird." Lesson learned. Be specific. Bring receipts. This applies to developers, AI, and apparently also me when talking to designers.

The deploy that immediately broke

First Vercel deploy after merging: build failed.

ERR_PNPM_OUTDATED_LOCKFILE — next-themes and sonner were removed from package.json but pnpm-lock.yaml still references them.

Two minutes to fix. Zero minutes to understand if you know what a lockfile is.

All those years of Linux administration, SSH deployments, package managers paid off in a way they had not for a while. I did not write the fix. But I knew immediately what the error meant and why it happened. That combination is exactly what human in the loop actually means in practice.

What Vercel and Next.js actually do

In 2010 I was SSHing into servers. Pull the repo. Restart the process. Watch the logs. Pray. Every deploy was a small ceremony with real consequences.

Today with Vercel: merge to main. That is it. Vercel detects the push, runs the build, deploys to the edge globally, provisions SSL, sets up the CDN, and gives you a preview URL for every single branch automatically. Rollback is one click. The whole thing takes about 90 seconds.

Next.js App Router with React Server Components is what makes the architecture actually work. Server components fetch data at build time or request time with zero client JavaScript. The HTML arrives fully rendered. Contentful data, SEO metadata, JSON-LD structured data, all of it in the initial response. No loading spinners, no layout shift, no client-side fetching waterfalls.

The combination of Next.js for the framework, Contentful for the content layer, and Vercel for deployment is genuinely the best stack I have worked with. Each one does one thing extremely well and gets out of the way of the others.

The numbers

98.2 million tokens. $64.03. 17 days. The headline figures reflect the single heaviest session. The totals above cover the full 17-day build.

Heaviest day: March 16 at $26.53. That was Batches 1 through 6 back to back. Lightest day: March 14 at $0.06. Just checking something.

One hour of a mid-level frontend developer in Toronto costs more than this entire project.

The bottom line

I spent years managing developers and understanding the big picture: APIs, infrastructure, content architecture. Never quite enough time to ship my own things. Classic developer manager problem.

I can read code. I can review a PR. I understand why things work. I just do not have to type most of it anymore.

The front end is done. Automation and integrations are next.

If you have been waiting to try this: stop waiting.