How to Build a Landing Page With Claude, Step by Step
Settle the offer and the copy first, then ask Claude for a single self-contained HTML file, check it on your phone, and drag that file onto Netlify. That is the whole build, and it takes under an hour once the thinking is done. The reason most attempts drag on for a weekend is that people ask for the page before they have decided what the page says, so the model invents an offer, writes copy for the offer it invented, and designs around copy nobody meant. Below is the sequence I use, the prompt that produces a file you can actually host, and the three places this reliably goes sideways.
The order that works
Open a chat, type "build me a landing page for my coaching business," and you get something back in under a minute. It looks fine. It also says nothing, because you gave the model no material, so it produced the average of every coaching page it has ever read: a hero with a gradient, three cards under it, a quote from a person who does not exist.
What happens next is the expensive part. You start asking for changes. The headline gets fixed, which shifts the layout. The layout gets fixed, which breaks the form. Forty messages later you have a page you no longer trust and no copy of the version you liked two hours ago.
None of that is a prompting failure. It is a sequencing failure. Design decisions depend on copy decisions, and copy decisions depend on knowing what you sell and to whom. Make them in that order and the page falls out at the end almost for free.
Step 1: write the offer down in five lines
Before the chat opens, answer five things in a text file. Who the page is for, specifically enough that it excludes somebody. What they get. What it costs. What happens in the thirty seconds after they click the button. And the one objection that stops people who otherwise want it.
Here is ShipWolf's, so you can see the shape of it rather than a template with blanks:
Who: someone who wants a real site live this weekend and has no interest in becoming a developer. What: a defined kit, 60+ Claude prompts, two starter codebases, an action path with screenshots. Price: $97, one payment. After the click: checkout, then the files. Objection: "I am not technical enough for this."
Five lines. Ten minutes. Every later decision points back to them: the headline answers "what," the button label answers "after the click," and the section nobody thinks to include answers the objection. Skip this and you will write those five lines anyway, badly, in the middle of arguing with a model about font sizes.
Step 2: settle the copy as plain text
Ask for words before you ask for a page. Paste the five lines and request plain text: one headline under ten words, one subhead that says who it is for and what it costs, three proof points that are facts rather than adjectives, one button label written as the visitor's action, and four questions a buyer would actually ask with honest answers.
Plain text matters because it strips away everything you cannot judge yet. In a rendered page, a weak headline looks acceptable at 48px in the middle of a nice hero. In a bare list, it looks like what it is. You will cut half of what comes back on the first pass, which is the point.
Two rules while you edit. Delete any claim you cannot back, including every number the model offers you unprompted and every testimonial it writes from a customer who does not exist. And read each proof point asking whether a competitor could paste it onto their own page unchanged. If they could, it is not a proof point, it is filler. I wrote about the sentence-level version of this in how to write website copy that converts.
Step 3: ask for one file, not a project
Now the page. The request that works is boring and specific, and it hands over the copy rather than describing it. Something close to this:
"Build one self-contained HTML file. All CSS in a single style block, no build step, no frameworks, no external scripts or fonts, no images. Sections in this order: hero, what you get, who it is for, objection, FAQ, footer. Use this copy verbatim, do not rewrite it: [paste the text from step 2]. Background #0B0D10, text #E8EAED, one accent color #E2574C used only on the button. Max content width 720px. No gradient hero, no row of three cards, no icon next to every heading."
Three things are doing the work there. "Verbatim" stops the model from improving copy you already decided on. "One self-contained file" means what you download runs anywhere, with no toolchain and nothing to install. And the exact hex codes and the do-not list replace the adjectives it would otherwise have to guess at, which is the whole argument in giving Claude a design system to work from.
When it renders, download the file. In the Claude app that is the download button on the artifact. Save it as index.html in a new folder and keep a dated copy every time you are happy with a version, because the chat is not a backup and you will want to go back at some point.
Step 4: review it as a visitor, not a proofreader
Open the file on your phone first. Not because mobile traffic is larger, though it usually is, but because the small screen removes your ability to be generous. Look only at the first screen and ask two questions: do I know what this is, and do I know what it costs. If either answer is no, the problem is the headline or the subhead, and no amount of layout work will cover it.
Then run four mechanical checks. Tap the button with a thumb, not a cursor. Read the button label on its own and see if it still makes sense. Scroll once and confirm something useful arrives instead of a wall of padding. And look at the page in daylight, where low-contrast grey on dark stops being moody and starts being unreadable.
The failure that is hardest to see yourself is the generic one. A page can pass every check above and still read as machine-made, usually through stock phrasing and identical section rhythm. The specific tells and the fix for each are in making a website that does not look AI generated.
Step 5: put it on a real URL
A file on your laptop is not a landing page. Netlify's free tier will host a single HTML file without a repository, a build command or a credit card. Put index.html alone in a folder, go to the drop page in your browser, and drag the folder in. You get a live URL in about ten seconds. Netlify documents the same flow for pages built in Claude in its own knowledge base.
That URL ends in netlify.app, which is fine for showing a friend and wrong for taking money. Buy the domain, add it in the site's domain settings, and update the nameservers at your registrar. Propagation is usually minutes, occasionally hours. Then redeploy by dragging the folder again, which replaces the whole site. There is no git, no CLI, and nothing to learn, which is the same reason I use this stack for everything in building a website without coding.
Set up the form before you announce anything. A button that goes nowhere costs you the only visitors you will get from your launch, and they do not come back for version two.
Step 6: edit one thing at a time
The first week is where most pages get worse. You will want to change six things at once, and the model will happily rewrite the file to do it, quietly altering the two things you liked along the way.
Work the other way. Paste the current file back into the chat, describe one change, and ask for the complete file again rather than a snippet to splice in. Save the result as a new dated copy. Compare the new top screen against the old one on your phone. If the change did not clearly help, go back to the previous file, which you still have because you kept it.
Keep a short list of what you changed and why. Three weeks in, you will not remember whether the shorter headline was a decision or an accident, and the list is the difference between editing and guessing.
Where this reliably goes wrong
Asking for a site when you need a page. A single page with one action converts better than five pages with a nav bar, and it is a tenth of the work. Build the second page when something on the first one tells you to.
Letting the model supply the proof. It will offer testimonials, round numbers and case studies without being asked, and they read as credible because they are written to. Everything on the page has to be something you can stand behind in an email to a buyer.
Expecting it to debug what it cannot see. The model has no access to your live site, your form submissions or your DNS. When something breaks after deploy, paste the actual error text and the actual file, not a description of what you think happened. Guesswork in, guesswork out.
One more, less obvious. People stop at the page. A landing page is a destination, and a destination with no traffic is a document. The build is the easy half.
The version of this that works is dull on purpose: five lines of offer, copy as plain text, one file, a phone check, a drag and drop deploy, then one change at a time. Nothing in that list is technical. The part people skip is always the first step, and skipping it is what turns a one hour job into a weekend.
Build the ugly honest version today and put it on a URL. A live page with a clear offer beats a beautiful page that is still in a chat window, and it starts telling you things a draft never will.
Common questions
Can I build a landing page with Claude if I have never written code?
Yes. You never need to read the code, only download the HTML file it produces and drag that file onto a host. The part that needs your judgment is the offer and the copy, which is writing, not programming. Expect to spend more time deciding what the page says than getting it built.
Should I use Claude Code or the regular Claude app for a landing page?
For one landing page, the normal chat app is enough: it renders the page as you go and lets you download the file directly. Claude Code earns its place once you have several pages, a blog or a repository to keep in order, because it edits files on your machine instead of handing you a new copy each time.
Why does my Claude landing page look generic?
Because the prompt described a mood instead of making decisions. Adjectives like clean or modern get resolved by averaging everything the model has seen, which produces the gradient hero and the row of three cards. Give it exact hex codes, a fixed max width, a section order and a short list of things never to do, and the sameness mostly disappears.
Can I host a page built with Claude for free?
Netlify's free tier hosts a single HTML file with no repository and no build step, so hosting costs nothing until you need a custom domain. The domain itself is the only real expense, usually somewhere around ten to fifteen dollars a year depending on the extension you pick.
How long does it take to get a landing page live?
Under an hour of building if the offer and copy are already settled, including the deploy. Settling the offer and copy is the part that takes real time, and it is worth a couple of focused hours because every later decision on the page depends on it.
Want the prompts instead of writing them yourself?
ShipWolf is the kit version of this process: 60+ Claude prompts, two starter codebases, and the action path with screenshots for getting a page live on your own domain. $97, one payment. Get ShipWolf.
See what's inside · $97
Built by