How I Built a Beautiful Landing Page with Claude (and What AI Couldn’t Do)

You've got a new offer to promote, the Google Ads budget is signed off, and your web designer can't fit the landing page in for three weeks. Sound familiar? That gap is why I built a one-page landing page with Claude, Anthropic's AI assistant, for our own AI Voice Agents service at Online Marketing Help. Here's my process, the prompts that gave the page a polished, on-brand look, what Claude can't do for you, and the UK rules to check before paid traffic arrives.

What does it mean to build a landing page with Claude?

Building a landing page with Claude means describing the page in plain English while Claude plans the sections, drafts the copy and writes the code. Claude is a large language model (LLM) made by Anthropic. You get a working HTML page to preview, refine in conversation, then download or hand to a developer.

A Claude landing page (also called an AI-built landing page or AI one-pager) is a single web page, focused on one action, that Claude builds from your brief. You can work in an artifact (a preview window beside the chat), Claude's design workspace, or Claude Code. Artifacts and the design workspace are on the free plan; Claude Code starts with Pro, which costs $20 a month (about £18 with VAT at October 2026 exchange rates), according to Claude's pricing page (2026).

Large language models are now the most widely used AI technology among UK businesses with 10 or more employees (18% in June 2026), according to the ONS (2026).

How do you build a landing page with Claude, step by step?

Write a brief, give Claude your brand assets and real proof, and agree a section plan before any design. Then refine one section at a time, test the page on mobile for speed and accessibility, and move it to your own domain with tracking in place before traffic arrives.

Let's break it down. These are the seven steps I followed.

1. Write the brief. Note the audience, the one action you want, the offer, common objections and your proof.
2. Give Claude real material. Upload your logo, brand hex codes, fonts, genuine reviews and photos. Reference screenshots help with style, but ask for an original design.
3. Agree the structure first. Ask for a section plan (hero, problem, how it works, proof, offer, FAQs, call to action) before any design.
4. Build version one. Ask for a single, responsive HTML page. No preview? Switch on code execution and file creation under Settings > Capabilities.
5. Refine one section at a time. "Cut the hero headline to eight words" works far better than "make it pop".
6. Test it. Use a real phone, submit the form, check page speed and image compression, and test contrast and keyboard use against WCAG 2.2 level AA.
7. Go live on your own domain. Rebuild it in your CMS or upload the HTML, add GA4 via Google Tag Manager behind a cookie banner, and track conversions so your Google Ads management services report real calls and form fills.

A sample prompt you can copy

Here's a full prompt for an example business, a roofer running Google Ads for flat roof repairs. Swap in your own details.

Why this prompt works

• One goal. Every section points to the survey booking, so Claude doesn't spread the page across several offers.
• Real worries. Naming what the reader fears gives Claude something specific to answer in the headline and FAQs.
• A fixed order. Claude builds the page you planned instead of guessing a generic layout.
• Proof it can't invent. Supplying the facts and reviews, and banning extras, keeps made-up testimonials off the page.
• Exact brand rules. Hex codes, one font and "no gradients" keep the design on-brand and away from the templated AI look.
• Technical limits. One responsive, accessible HTML file is easy to test and move to your own domain.
• Questions first. Inviting questions brings gaps to the surface before Claude builds, which saves rounds of fixes.

How do you make a Claude landing page look beautiful?

Give Claude firm design rules. Supply exact brand colours, one or two fonts, real photography and a couple of reference sites, then ask for generous white space and one accent colour for buttons. Vague briefs produce generic layouts, so the tighter your constraints, the more polished the result.

Here's the thing: a beautiful page nobody acts on is still a poor page. Test two or three hero options, keep motion subtle and repeat your main button after the reviews. If visits arrive but enquiries don't, improve your website conversion rate first.

Claude, page builder or web designer: which should you use?

Use Claude for a quick, low-cost first version or a simple campaign page to test. Use a page builder such as Elementor when your team edits pages often. Bring in a web designer or agency when the page carries serious ad spend, needs integrations or must match a wider website.

On WordPress, WordPress development services can turn a Claude draft into a template your team can edit.

What are the limitations of building a landing page with Claude?

Claude is quick at layout, code and first-draft copy, but it can't supply your proof, judge your market or look after the page once it's live. Forms, hosting, tracking, cookie consent and edits still need a person, and a vague brief produces a page like everyone else's.

• Invented details. Claude may add placeholder stats or testimonials. Delete anything you can't prove.
• Share links aren't hosting. Some shared Claude artifacts need viewers to have a Claude account (Claude help centre, 2026).
• Limited SEO. One page can rank for a narrow phrase but won't replace a well-structured website.
• Not right for every job. For ecommerce, bookings or many pages, use a web design company for UK businesses.

What did Claude do, and what did our team do?

Claude handled the fast, repeatable work: the layout, the code and a first draft of the copy. The decisions that make a page convert stayed with our team at Online Marketing Help: the offer, the proof, the compliance checks, the tracking and the testing after launch.

AI speeds up the build, but strategy, testing and tracking are what turn a page into enquiries.

What UK rules apply to a landing page built with AI?

The same rules as any landing page, because using AI doesn't change your legal duties. You need a privacy notice for forms under UK GDPR, consent before non-essential cookies or ad pixels fire under PECR, evidence for claims under the CAP Code, and genuine reviews only.

• Cookies and tracking. The ICO finalised its guidance on storage and access technologies on 29 April 2026, after the Data (Use and Access) Act 2025. Its exceptions to the cookie consent rules allow aggregate analytics if visitors can easily object, but advertising pixels still need consent.
• Reviews. The Digital Markets, Competition and Consumers Act 2024 has banned fake reviews since 6 April 2025, and the CMA enforces it. Never let AI write testimonials.
• Claims. The ASA's CAP Code expects evidence for claims such as prices or results.
• Accessibility. The Equality Act 2010 requires reasonable adjustments, so aim for WCAG 2.2 level AA.

This is general information, not legal advice. Before your form goes live, check the ICO's guidance on what privacy information you must give people.

Frequently asked questions

Can I build a landing page with Claude for free?

Yes. On the free plan, ask Claude for a single HTML page and it will build one in an artifact you can preview and download. The design workspace is on the free plan too. Heavier use needs Pro at $20 a month (about £18 with VAT), and you'll pay for a domain and hosting to go live.

Do I need to know how to code?

No, not for the first version. You describe what you want and Claude writes the HTML, CSS and JavaScript. Some technical help is still useful for connecting forms, adding tracking, setting up cookie consent and publishing the page on your own domain.

Can I use a Claude landing page on WordPress?

Yes. You can upload the HTML as a custom page template, host it on a subdomain, or rebuild Claude's design in Elementor or the block editor. Rebuilding usually works best, because your team can then make changes without touching code.

Will a landing page built with Claude rank on Google?

It can, if it's useful, fast and indexable. Google Search Central (2023) has said it rewards helpful content however it's produced. Most one-page landing pages are built for paid and direct traffic, though, so a single page won't replace a full SEO strategy.

Can I send Google Ads traffic to a Claude artifact link?

It's better not to. Host the page on your own domain so the ad points to your business, you control the tracking and visitors never hit a sign-in screen. Then set up conversion tracking in Google Ads before the campaign goes live.

Final thoughts

Building a landing page with Claude is a quick route from idea to a polished first draft. AI speeds up the build, but a sharp brief, real proof, proper tracking and steady testing are what turn that draft into enquiries. If you'd like a second pair of eyes before launch, or help building and running the page, book a Growth Consultation and we'll give you an honest view of the next step.