Vibe coding a CJM with Claude Code

I've been exploring how far I can take a vibe-coded project with the help of Claude Code, an agentic coding CLI by Anthropic. For this experiment, I set myself an interesting constraint: I wouldn't write a single line of code myself.

The resulting project, called Bumpy Road, can be accessed here, with the code available on GitHub.

This project riffs off my old master's thesis where an interactive customer journey map was created as one of our deliverables. I've thought about building a tool to create such maps for years, and this seemed like the perfect opportunity to test what's possible with AI assistance.

I think on the surface it's amazing what can be achieved with the help of an AI agent, at the same time I'm left feeling a bit uneasy about what it creates behind the scenes, and the discrepancy between what I want to create and what it actually creates.

Starting Point

Before giving Claude the initial prompt, I set up the project folder using the getting started command from the Open Next website:

npm create cloudflare@latest -- my-next-app --framework=next --platform=workers

After the project was set up with TypeScript, Tailwind, and Cloudflare Workers as the deployment target, it was time to get started.

Initial Prompt

This was my initial prompt to Claude:

I want to build a tool for creating interactive customer journey maps. An example can be seen here:
https://olofbjerke.com/cjm/
The page should be an interactive SVG where a path goes from left to right, to symbolize a journey. By double clicking on the line a new point in time of interest should be added to the journey model. By single clicking on a point, the page should scroll down to the text description laid out below the SVG.

The UI should be modern and inspired by the aesthetic of 37signals and Basecamp, and preferably be mobile friendly.

The project is based on the Open Next project https://opennext.js.org/cloudflare and is meant to be published to Cloudflare. It uses React server components and should use Tailwind for styling and Drizzle as an ORM for the Cloudflare D1 database.

I think the initial output was really impressive. It had a working customer journey map after the first attempt. The styling wasn't exactly what I set out to create, but it managed to reach a good enough state.

What I've Learned

Here are some thoughts I've collected so far:

The Beaten Path Effect
It constantly nudges you back toward well-trodden solutions. Picking a well-known path eases the process greatly, but I consistently felt the agent pushing me toward conventional approaches. The ease of working with it drastically decreases when trying something more novel or intricate.

Decision Fatigue Relief
I think one major reason you get so far so quickly is because there are so many decisions made for you along the way. Getting stuck in nitty-gritty details can truly slow you down during a project. I'm a bit concerned about the anchoring effects these decisions will have when you haven't formed your own thoughts before the agent produces a result.

Incredible Power, Surprising Limitations
The speed and capabilities are incredible, yet certain things are completely impossible. I've been banging my head trying to get the agent to adapt the SVG and its contents to fit the full width of the screen with relative units. I just could not get it to break out of a loop of either shrinking the SVG to a fixed size or skewing it.

Capability Ceiling
Extremely capable up to Norris 1 numbers, but struggles beyond that threshold.

Common Issues

  • Duplication happens frequently
  • Reintroduction of bugs is common. As of this writing, the undo stack is no longer working
  • Expensive! Claude Code burns through tokens and credits at a high rate. It's easy to spend $20 in a longer session—a steep price for a non-commercial project

A New Era
It's a new era to adapt to, being able to sit here and write this while the agent builds the application in the background.