Build a real product with Claude Code: a UK beginner's guide

Claude Code is different from every AI coding tool that came before it.

Most AI coding tools suggest code. Claude Code takes action. It writes files, runs commands, installs packages, reads error messages, and fixes them — all without you having to copy-paste anything. It operates as an agent inside your terminal, working on your actual project.

If you've been curious about building a product with AI but put off by the complexity, this guide is for you. We're going to build a SaaS landing page — complete with headline, benefits, waitlist form, and SEO meta tags — and deploy it live. From zero to a real URL in one session.

Cost: approximately £18/month (Claude Pro). Technical prerequisite: none beyond knowing how to open a terminal.

---

What is Claude Code?

Claude Code is Anthropic's agentic coding tool. You install it as a CLI (command line interface) on your machine, open a project directory, and describe what you want to build. Claude Code reads your codebase, writes code, runs it, reads the output, and iterates — like having a developer working alongside you in real time.

The key difference from Copilot or Cursor: Claude Code doesn't wait for you to approve each line. It works autonomously on multi-step tasks. You describe the outcome; it figures out the steps.

How much does it cost in the UK? Claude Pro is approximately £18/month at current exchange rates (check anthropic.com for current GBP pricing). Claude Code is included in the Pro plan. There's also usage-based API pricing for heavier use.

Claude Code vs Lovable vs Cursor:

• Claude Code: terminal-based, highest control, best for developers or builders comfortable in a command line
• Lovable: browser-based visual builder, better for design-heavy projects or non-technical founders
• Cursor: IDE extension, best for existing developers who want AI within their code editor

See our full comparison of Claude Code, Lovable, and Bolt if you want to pick the right tool first.

---

What we're building

A UK-focused SaaS landing page with:

• A clear headline and value proposition
• Three benefit points
• An email waitlist form (via Tally, free)
• SEO meta title and description
• Deployed to Vercel free tier

Stack: Next.js (Claude Code handles the setup), deployed to Vercel. Domain optional (we'll use a Vercel subdomain for now).

---

Step 1: Install Claude Code

You'll need:

• Node.js installed (download from nodejs.org — free)
• A Claude Pro account (anthropic.com)

Install Claude Code:

npm install -g @anthropic-ai/claude-code

Then authenticate:

claude

Follow the authentication prompts. Once connected, you'll see the Claude Code prompt in your terminal.

Create a new project directory:

mkdir my-saas-landing && cd my-saas-landing
claude

You're ready to build.

---

Step 2: Write a good brief

This is the most important skill in AI-assisted development. Claude Code is only as good as the brief you give it.

A weak brief: "make me a website"

A strong brief:

Create a Next.js landing page for a UK SaaS product called [ProductName]. 

The product helps [target audience] [solve specific problem].

Build:
1. Homepage with a hero section - headline: "[Your headline]", subheadline: "[Your subheadline]"
2. Three benefits section with icons
3. Email waitlist form using this Tally embed code: [paste your Tally embed]
4. Footer with company name and copyright

Technical requirements:
- Tailwind CSS for styling
- SEO meta title: "[title under 60 chars]"
- SEO meta description: "[description under 160 chars]"
- EN-UK spelling throughout
- Mobile responsive
- Deploy-ready for Vercel

The more specific you are, the less back-and-forth you need. Invest 10 minutes in the brief and save an hour of iteration.

Setting up Tally (free email capture): Go to tally.so, create a free account, build a one-field form asking for an email address, and copy the embed code. Paste it into your brief where indicated.

---

Step 3: Iterate, don't rewrite

After Claude Code produces the first version, resist the urge to start over if something doesn't look right. Iterate from what exists.

Good iteration prompts:

• "Change the hero headline to: [new headline]"
• "Make the benefits section use card layout with a shadow"
• "Add a FAQ section with these 3 questions: [Q1], [Q2], [Q3]"
• "The mobile layout is broken — fix the hero section for screens under 768px"
• "Add a sticky navigation bar at the top with the logo and a Get Early Access button"

Bad iteration prompt: "Start again and make it better."

Each prompt builds on the previous state. Claude Code maintains context across the conversation, so it knows what's already been built.

---

Step 4: Deploy to Vercel

Once you're happy with the page:

Install the Vercel CLI:

npm install -g vercel

In your project directory:

vercel

Follow the prompts:

• Link to your Vercel account (create one at vercel.com — free)
• Choose your project name
• Select the framework (Next.js — Vercel auto-detects this)
• Deploy

First deploy takes about 60 seconds. Vercel gives you a URL immediately: https://your-project-name.vercel.app

UK note: When setting up your Vercel project settings, choose the EU region (Frankfurt or London). This is important for GDPR compliance — your users' data stays in Europe.

Adding a custom domain: Namecheap sells .co.uk domains from around £8/year. In your Vercel dashboard, go to Domains, add your domain, and follow the DNS setup instructions. Takes about 10 minutes.

---

Step 5: Common mistakes and how to avoid them

Mistake 1: Vague briefs "Make it look professional" means nothing to Claude Code. Describe layout, colours, copy, and components specifically. If you want a dark background, say "dark background, white text". If you want a specific colour, say the hex code.

Fix: Spend 10 minutes writing the brief before starting. Include the actual headline copy, not placeholder text.

---

Mistake 2: Not testing on mobile Most of your visitors will be on mobile. Claude Code produces desktop-first layouts by default.

Fix: After every major change, ask: "Make sure this is fully responsive and looks good on a 375px wide screen."

---

Mistake 3: Forgetting meta tags A landing page without a proper meta title and description looks broken in Google results and when shared on social media.

Fix: Include SEO requirements in your original brief. If you forgot, ask: "Add a meta title '[under 60 chars]' and meta description '[under 160 chars]' to the homepage."

---

Mistake 4: Accepting broken code without asking for a fix Sometimes Claude Code produces code with errors. It often fixes these itself if you let it continue — but if it doesn't, just tell it: "There's an error: [paste the error message]. Fix it."

Fix: Don't manually edit the code to fix things unless you know exactly what you're doing. Ask Claude Code to fix its own output.

---

Mistake 5: Not adding analytics Without analytics, you don't know if anyone visited your page or how long they stayed.

Fix: Ask Claude Code: "Add Vercel Analytics to this project." Vercel Analytics is free, cookieless (GDPR-friendly for UK users), and shows you pageviews, unique visitors, and time on page. Takes 2 minutes to set up.

---

Where to go next

Once your page is live:

1. Drive your first 100 visitors — post in relevant UK subreddits, share on LinkedIn, message people in your network. Free.
2. Watch your signups — check Tally daily. If nobody signs up after 100 visitors, the headline or problem statement needs work.
3. Talk to 5 signups — DM everyone who signs up and ask for a 30-minute call. Validation is more important than building the product.
4. Build the product only after validation — once you have 10 signups and 2+ conversations confirming willingness to pay, use Claude Code to build the actual product.

Building the landing page is the start, not the end. The page's job is to generate evidence that someone will pay for your idea before you spend months building it.

---

Frequently Asked Questions

Do I need to know how to code to use Claude Code?

Basic familiarity helps but is not essential. You need to understand what you're asking for, not how to write it. Claude Code handles the implementation. The most important skill is writing clear, specific briefs.

How much does Claude Code cost in the UK?

Claude Pro is approximately £18/month at current exchange rates. This includes access to Claude Code. Check anthropic.com for current UK pricing as it may change.

What can Claude Code not do?

It struggles with highly complex architecture decisions, bespoke design work (use Lovable for design-heavy projects), and anything requiring specialised domain knowledge without context. It is excellent for building functional products from clear briefs, not enterprise system design.

Is Vercel free for UK users?

Yes. Vercel's free Hobby tier covers landing pages, personal projects, and most small SaaS MVPs. The EU region (Frankfurt or London) is available on all tiers. No credit card required for the Hobby tier.

Claude Code vs Lovable -- which should I use?

Claude Code: terminal-based, highest control, best for builders comfortable in a command line environment. Lovable: browser-based, visual, no terminal required, better for design-heavy projects and non-technical founders. See our full comparison for a detailed breakdown.

---

Key Takeaways

• Claude Code writes, runs, and debugs code - it does not just suggest it
• A clear and specific brief is the most important skill in AI-assisted development
• Iterate from the first output - never ask Claude Code to start over
• Vercel free tier is enough to deploy and run a UK SaaS landing page
• Build the landing page first, validate demand, then build the product

---

[!tip] Discover data-backed UK business ideas IdeaStack publishes one deeply researched UK business opportunity every Thursday -- with real keyword volumes, competitor analysis, and builder prompts. Get this week's free report at ideastack.co