How to build a SaaS landing page in under an hour with Lovable

You have a SaaS idea. You need a landing page. And you need it today -- not after three weeks of learning a design tool, hiring a freelancer, or fiddling with templates that never quite look right.

Lovable can get you from idea to a live, deployed landing page in under an hour. Not a wireframe. Not a mockup. A real page on a real URL that you can share with potential customers, post on social media, and start collecting email sign-ups from.

This is a step-by-step tutorial using a concrete example: we are going to build a landing page for TaxBot, a hypothetical AI-powered tax assistant for UK freelancers. By the end, you will have a deployed page with a hero section, feature breakdown, pricing, social proof, and an email waitlist -- plus the exact prompts used at every step.

If you have never used Lovable before, this is your starting point. If you have used it but your results have been mediocre, the prompting techniques here will fix that.

---

Key takeaways

• A specific, detailed first prompt produces a dramatically better result than a vague one -- spend 10 minutes writing the brief before you touch Lovable
• Iterate in focused rounds: layout first, then copy, then mobile, then polish -- do not try to fix everything at once
• Deploy to Lovable's free subdomain first, then connect a custom domain once you have validated the page works
• Always check mobile layout before sharing -- roughly 60% of UK web traffic is mobile
• The whole process takes 45-60 minutes once you know the workflow, including deployment

---

What you need before you start

A Lovable account. Free tier works for this tutorial, but you will want the paid plan (~GBP17/month) if you intend to connect a custom domain and keep iterating. Sign up at lovable.dev.

Your SaaS idea, briefly described. You do not need a business plan. You need one sentence: "TaxBot is an AI tax assistant that helps UK freelancers calculate and file their self-assessment returns." That is enough.

A rough idea of your target customer. "UK freelancers who earn GBP20,000-80,000 and currently use a spreadsheet or shove receipts in a drawer." The more specific you are here, the better Lovable's output will be.

Optional but helpful: a competitor's landing page you like the look of. You will not copy it, but referencing a visual style saves iteration time.

---

Step 1: Write the brief (10 minutes)

This is the most important step and the one most people skip. A vague prompt ("build me a landing page for a tax app") produces a vague result. A specific prompt produces something you can actually use.

Here is the exact prompt we are going to use for TaxBot:

Build a SaaS landing page for TaxBot -- an AI-powered tax assistant for UK freelancers.

Target audience: UK freelancers earning GBP20,000-80,000 who currently handle their own self-assessment tax returns using spreadsheets or accountants.

Sections (in this order):
1. Hero section with headline, subheadline, and a "Join the waitlist" email capture form
2. "How it works" section with 3 steps: Connect your bank, AI categorises expenses, File with one click
3. Feature grid (4 features): Automatic expense categorisation, HMRC-compliant calculations, Receipt scanning via phone camera, Year-round tax estimates
4. Pricing section with 2 tiers: Free (basic estimates) and Pro at GBP12/month (full filing, receipt scanning, accountant export)
5. Social proof section with 3 testimonial cards (use placeholder names and quotes for now)
6. FAQ section with 4 questions about security, HMRC compliance, pricing, and supported banks
7. Footer with links and a secondary CTA

Design style: Clean, modern, professional. Use a blue-green colour palette. White background with coloured accents. Sans-serif typography. Mobile-responsive.

The overall tone should be reassuring and straightforward -- freelancers dealing with tax are anxious, not excited. The page should make them feel "this is handled" rather than "this is amazing."

Why this prompt works

Notice what we specified:

• Who the customer is (UK freelancers, income range, current behaviour)
• Exact section order (Lovable follows this precisely)
• Specific content for each section (not "add some features" but the actual features)
• Pricing in GBP with specific tiers
• Visual style with colour direction
• Emotional tone (reassuring, not hype-driven)

Compare this to "build a landing page for a tax app." The specific prompt gives Lovable enough information to make intelligent design decisions. The vague prompt forces it to guess -- and AI guesses tend toward generic.

---

Step 2: Generate the first version (2 minutes)

Paste the prompt into Lovable and hit generate. Lovable will produce a complete, working page in roughly 30-90 seconds.

The first version will be 70-80% right. It will have the correct structure, reasonable styling, and most of the content you asked for. It will also have issues -- odd spacing, a colour that does not quite work, placeholder text that needs refining, or a mobile layout that breaks.

Do not panic. This is exactly how the process works. The first generation is your foundation, not your finished product.

Before you start making changes, scroll through the entire page and make notes (mentally or in a text file) of everything you want to fix. Group your notes into categories:

• Layout issues (section order, spacing, component alignment)
• Copy issues (headlines, body text, CTA wording)
• Visual issues (colours, fonts, image placeholders)
• Mobile issues (save these for step 5)

---

Step 3: Iterate on layout and structure (10 minutes)

Fix layout issues first. Changing copy and visuals on top of a broken layout wastes iterations.

Here is a typical follow-up prompt:

Good start. Make these layout changes:
1. Make the hero section taller -- the headline and form feel cramped. Add more vertical padding.
2. Move the pricing section above the testimonials -- people want to know the cost before reading social proof.
3. In the feature grid, use icons instead of plain text. Use simple, clean icons that match the blue-green palette.
4. The FAQ section should use an accordion format -- show the question, click to expand the answer.

Lovable will apply these changes and regenerate the page. Review again.

A second layout prompt might address spacing:

The spacing between sections is inconsistent. Add 80px of vertical padding between each major section. Also, the "How it works" step numbers should be larger and bolder -- make them stand out more as a visual element.

Rule of thumb: two to three layout iteration rounds is normal. If you are on your fifth layout prompt, your original brief was probably too vague. Consider starting over with a more specific initial prompt rather than patching endlessly.

---

Step 4: Refine the copy (10 minutes)

With the layout solid, now sharpen the words. Lovable generates reasonable placeholder copy, but it will not match your voice or your customer's specific pain points.

Update the copy throughout:

Hero headline: "Stop dreading January. TaxBot handles your self-assessment so you don't have to."
Hero subheadline: "AI-powered tax filing for UK freelancers. Connect your bank, snap your receipts, file in minutes."

How it works step descriptions:
- Step 1: "Link your business bank account. TaxBot reads transactions securely -- we never store your banking credentials."
- Step 2: "Our AI categorises every expense automatically. You just confirm or adjust. 95% accuracy from day one."
- Step 3: "When January rolls around, hit one button. TaxBot generates your SA100 and files directly with HMRC."

Change all CTA buttons to say "Join the waitlist -- it's free" instead of just "Sign up."

The copy prompt is where you turn Lovable's generic output into something that speaks directly to your customer. Spend time here. The design can be beautiful, but the words are what convince someone to hand over their email address.

For deeper guidance on positioning and pricing your SaaS, see our guide to pricing SaaS products in the UK.

---

Step 5: Fix the mobile layout (5 minutes)

This is the step most builders skip, and it is the step that costs them sign-ups. Roughly 60% of UK web traffic is mobile. If someone finds your page via Twitter, LinkedIn, or a WhatsApp link, they are almost certainly on their phone.

Click the mobile preview toggle in Lovable and scroll through the entire page. Common issues:

• Hero text too large for mobile screens, causing awkward line breaks
• Feature grids that do not reflow properly into a single column
• CTA buttons that are too small to tap comfortably
• Pricing tables that require horizontal scrolling
• Footer links that are too close together

A typical mobile fix prompt:

Mobile layout fixes:
1. Reduce the hero headline font size on mobile to avoid line breaks mid-word
2. Stack the feature grid into a single column on screens under 768px
3. Make the CTA buttons full-width on mobile with at least 48px height
4. The pricing cards should stack vertically on mobile, not sit side by side
5. Increase padding on the FAQ accordion items so they are easy to tap

One round of mobile fixes is usually sufficient. Check the preview again after Lovable regenerates.

---

Step 6: Connect the email capture (10 minutes)

Lovable generates a functional form UI, but you need to connect it to something that actually captures and stores the email addresses.

Option A: Tally (free, recommended)

Tally is a free form builder that works well with Lovable. Create a one-field form on tally.so, copy the embed code, and paste it into Lovable with a prompt like:

Replace the current email form in the hero section with this Tally embed: [paste embed code]. Style it to match the existing page design -- same font, same colours, same button style.

Option B: Supabase (free tier, more control)

If you want the emails in a database you control:

Connect the waitlist form to Supabase. Create a table called "waitlist" with columns: email (text), signed_up_at (timestamp), source (text, default "landing_page"). On form submission, insert a row and show a success message: "You're on the list. We'll email you when TaxBot launches."

Lovable handles Supabase integration natively. You will need a Supabase account (free tier is fine for waitlists).

Option C: Simple mailto fallback

If you just want to get the page live quickly and deal with form infrastructure later, Lovable can create a form that sends submissions to your email via a serverless function. Not scalable, but functional for the first 50 sign-ups.

---

Step 7: Deploy (5 minutes)

Lovable provides one-click deployment to a free subdomain (yourproject.lovable.app). This is the fastest path to a live URL.

Click the deploy button in Lovable. Your page will be live within 60 seconds. Test it:

• Load it on your phone
• Fill in the email form and confirm the submission arrives
• Check that all links work
• Run the URL through Google's PageSpeed Insights to check load time

Connecting a custom domain

If you have a domain (e.g. taxbot.co.uk), Lovable supports custom domain connections on paid plans. The process:

1. Go to your project settings in Lovable
2. Add your custom domain
3. Update your DNS records (Lovable provides the exact values)
4. Wait for DNS propagation (typically 15-30 minutes, occasionally up to 24 hours)

A .co.uk domain costs roughly GBP5-10/year through providers like Namecheap or Cloudflare Registrar.

---

Step 8: Add analytics (5 minutes)

A landing page without analytics is a landing page you cannot improve. You need to know how many people visit, how many scroll past the hero, and how many submit the form.

Add Plausible Analytics to the page. Here is my script tag: [paste your Plausible script tag]. Add it to the head of the page. Also add a custom event that fires when someone submits the waitlist form -- call the event "waitlist_signup".

Why Plausible over Google Analytics? Plausible is privacy-focused and GDPR-compliant without a cookie banner. It costs GBP7/month for up to 10k page views. Google Analytics is free but requires a cookie consent banner under UK GDPR, which adds friction and reduces your data accuracy. For a landing page, Plausible is the pragmatic choice.

If you prefer a free option, Lovable's built-in analytics (on paid plans) cover basic page views and can get you started.

---

Common mistakes (and how to avoid them)

Mistake 1: Being too vague in the initial prompt

What happens: Lovable produces a generic page that looks like every other SaaS landing page. You spend 30 minutes iterating to fix problems that a better first prompt would have prevented.

Fix: Spend 10 minutes on the brief. Specify your customer, your tone, your sections, and your content. The prompt template in step 1 is your template.

Mistake 2: Trying to iterate on everything at once

What happens: You send a prompt that says "fix the layout, change the copy, update the colours, and make it mobile-friendly." Lovable tries to do everything and does nothing well.

Fix: Iterate in focused rounds. Layout first, then copy, then mobile, then polish. Each prompt should address one category of changes.

Mistake 3: Ignoring mobile

What happens: Your page looks brilliant on desktop. You share the link. 60% of visitors see a broken mess on their phone, bounce immediately, and never come back.

Fix: Check mobile after every major change. Make it a habit, not an afterthought.

Mistake 4: No email capture connected

What happens: You have a beautiful form on the page that submits to nowhere. Visitors type their email, hit submit, and their sign-up vanishes into the void.

Fix: Test the form yourself before sharing the link. Submit a test email and verify it arrives in Tally, Supabase, or wherever you are collecting them.

Mistake 5: Skipping analytics

What happens: You share your page, get some traffic, but have no idea how much, from where, or whether anyone scrolled past the hero.

Fix: Add analytics before you share the link, not after. You cannot retroactively capture data from visitors who already left.

---

What happens after the landing page

A landing page is a validation tool, not a product. Once it is live, you need to drive traffic to it and see whether anyone signs up.

Immediate next steps:

1. Share on social media. Post the link on Twitter/X, LinkedIn, and relevant Reddit communities (r/UKPersonalFinance and r/SideHustleUK are good for a UK tax tool). See our guide to finding your first SaaS customers.
2. Track sign-ups daily. Set a target: 50 email sign-ups in 2 weeks is a strong signal. Fewer than 10 means your positioning or traffic strategy needs work.
3. Talk to people who sign up. Email every person on your waitlist. Ask what they currently use, what frustrates them, and what they would pay. This is the most valuable data you will collect.
4. Iterate the page based on data. If people are visiting but not signing up, the problem is your copy or your offer. If people are not visiting, the problem is distribution. Plausible will tell you which.

For a structured approach to validation, see our guide to validating a SaaS idea with AI tools.

If you are building the actual product after validation, Claude Code is the natural next step -- it handles the full-stack development that Lovable's landing page set the stage for.

---

Frequently asked questions

Do I need to know how to code to use Lovable?

No. Lovable is designed for non-coders and works entirely through natural language prompts. You describe what you want, and Lovable generates the code and deploys it. That said, understanding basic web concepts (what a hero section is, how forms work, what responsive design means) will help you write better prompts and iterate faster. Our Replit vs Lovable comparison covers both tools for non-technical builders.

How much does Lovable cost in the UK?

Lovable has a free tier with limited generations. The paid plan starts at approximately GBP17/month at current exchange rates, which includes more generations, custom domain support, and additional features. For building a landing page, you can start with the free tier and upgrade when you need a custom domain or heavier usage.

Can I export my Lovable page and host it elsewhere?

Yes. Lovable generates standard React/Next.js code that you can export and host on Vercel, Netlify, or any other hosting platform. On paid plans, you can push directly to a GitHub repository. This means you are never locked into Lovable -- if you outgrow it, export and move.

Is Lovable better than building a landing page with Claude Code?

They serve different workflows. Lovable is faster for visual pages -- you see the result instantly and iterate visually. Claude Code gives you more control and is better when you need custom functionality, complex integrations, or a non-standard design. For a straightforward landing page, Lovable is faster. For a landing page with custom backend logic, Claude Code is more capable. See our Claude Code vs Lovable vs Bolt comparison.

How long will my Lovable landing page stay live?

Pages deployed on Lovable's free subdomain stay live as long as your account is active. There is no expiry. Custom domain connections require a paid plan, and the page remains live as long as your subscription is active. If you cancel, you can export the code and host it elsewhere before your subscription ends.

---

Ready to find your next build?

Every Thursday, IdeaStack publishes a deeply researched UK business opportunity -- complete with keyword data, competitor analysis, and copy-paste builder prompts. Read this week's free report.