AI

When, Why and How to move from pure vibes to Claude Code

(or how I learned to stop spending Lovable credits and love the terminal.)

When, Why and How to move from pure vibes to Claude Code

(Note: for most of this article, I'll name Lovable but these tools are more or less interchangeable for the purposes of this process.)

The spark of enthusiasm for building that has been lit by Lovable/ Bole/ v0/ Replit and co is phenomenal.

However.

Almost without exception, anyone who continues working on a product with these tools starts to hit a ceiling. It gets harder to keep the work coherent, to stop it rewriting work that was fine before, to ensure consistency. You end up in frustrating loops of bug-fixing that never get to the root of the problem.

That's because ultimately, by hiding complexity, these tools are also hiding a level of control from you. You don't know what model they are using when, you don't know the overall app structure, you can't direct it to use MCP connectors in the same way – the list goes on.

When you reach this point, these tools have done their job. They got you started, they made it feel easy and exciting. But you have outgrown them.

That's when it's time for Claude Code.

Why move to Claude Code?

Flat rate costs, no more credits

Some of the most frustrating moments are when you watch Lovable spank away dozens of your credits undoing work that IT has got wrong. And still failing to solve it.

Claude Code comes with a few hours capacity in the $20/ month Claude subscription – but really shines when you upgrade to the $100/ month sub. You rarely hit the ceiling, and you can use tools like Serena to get more bang for your buck too.

It's the same thing.

Lovable is:

  • A chat box
  • Preview pane
  • Cloud hosting
  • Easy database integration

Using Claude Code, this becomes:

  • A chat box --> Terminal (built into your OS)
  • Preview pane --> A browser window
  • Cloud hosting --> One off move to Cloudflare, GitHub setup by Lovable
  • Easy database integration --> already set up by Lovable

Extra power + features

  • Claude Code is generally rated as a much better tool at planning and writing code. I believe the Claude team knows more about how to get the most from its models than anyone outside the business.
  • MCP Servers: connect Claude Code to tools like Supabase and GitHub so it can review your actual database or code when making changes. Or connect to tools like Playwright, which it can use to test the app in its own little Chrome browser, and read any errors etc.
  • Claude.md files: you can write custom instructions for how you want Claude to behave. Or, even better, you can take a claude.md file from experienced developers who have tweaked them to get the most effective behaviour. I copied and modified this one.
  • Claude.md files (again): you can include a detailed product spec document at the top level which lays out your product, structure, problems it solves, key technologies and more. You can also include a claude.md in feature folders that describe it in more detail for Claude to factor in.

How to move to Claude Code

So here's how you get started.

First of all, try Anthropic's guide. If you get stuck, here's my own instructions:

  1. Prerequisites: Make sure your project is connected to GitHub inside Lovable
  2. Open terminal and copy and paste the below to install Node.js to your system via Node Package Manager. Do not worry what this means, it literally couldn't matter less.
# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.16.0".
nvm current # Should print "v22.16.0".

# Verify npm version:
npm -v # Should print "10.9.2".
  1. Install node in your project

Navigate to the folder on your machine where you want to work and right click on it. Scroll down to services and you'll see an option: "New Terminal in Folder."

This will open a terminal window like the one below. This is where your chat with Claude Code will live!

Now, type or copy and paste the below. You'll see some text whoosh by as it installs all the files for node. This is like a library of tools it will use to run various things that make Claude Code work.

npm install
  1. Install Claude Code:

Copy and paste this into terminal and press return:

npm install -g @anthropic-ai/claude-code
  1. Now, just type:
claude

You're now running Claude Code! It will ask you to log in with your Claude account.

Ask it to use GitHub and clone your project locally. You might have to log in with git in the command line.

Read more