Make a one-page website with Claude and put it online tonight

The problem

Somebody asked for your website after a class on Saturday and you said "it's coming, I'll send it," and that was three Saturdays ago.
Right now your whole business lives in an Instagram bio and a DM thread you keep scrolling back to.
You don't need a ten-page site. You need one page with what you do, what it costs and how to book, at a link you can actually say out loud.

What you need

  • A Claude account. The free plan works for this, because artifacts (the thing Claude builds beside your chat) are on every plan.
  • Your words: who you help, what you offer with prices, how people book, one or two lines about you.
  • A free Netlify account, made during step 6. Netlify is the place that puts your page on the internet.
  • About 45 minutes, most of it reading your own page and fixing the words.

What's new

  • Sep 16, 2026 On Pro and up, Claude Design works inside any chat, so you can ask for the page right where you're talking. The new Claude also changed sharing: see step 4. (Anthropic)

Steps

1. Write your words before you open Claude. Five short lines in your notes app: who you help, what you sell and the price of each thing, how someone books or pays, one line about you, and how to reach you. This is the part nobody can do for you, and it's the part that makes the page yours instead of a page that sounds like everybody's.

2. Open a new chat and paste the prompt below. Fill in the [BRACKETS] with your five lines. Claude builds the page as an artifact, which opens next to the conversation so you see the page while you talk about it. Anthropic's help center lists "single-page websites" as one of the things an artifact can be.

3. Read every line out loud. Prices, dates, your email, the booking link. If Claude added anything you didn't give it, like a quote from a "happy client" or a number of people you've helped, tell it to take that out. Then ask for changes in plain words: "make the prices bigger," "move the booking button to the top," "less purple." You don't have to know any code to do this part, you just keep talking to it.

4. Want a link right now? Check which button you have. If your artifact shows Publish, click it and copy the link: anyone can open a published page without a Claude account, so you can text it to that person from Saturday tonight. (Heads-up from Anthropic's help page: if you Unpublish later, you can't publish that same artifact again.) If it shows Share instead, you're on the new Claude that started rolling out September 16, 2026, and people need a Claude account to open a shared link. In that case skip to step 5. Netlify is the link anyone can open.

5. Download the page and name it index.html. If you see a download control at the top of the artifact panel, use it. If you don't, ask Claude: "Give me this page as a single index.html file I can download." Make a new folder on your computer, something like my-website, put the file inside, and rename the file to exactly index.html. Netlify's docs say you must have an index.html at the top of your folder, and a missing one is the most common reason for a "page not found."

6. Drag the folder to Netlify Drop. Go to app.netlify.com/drop and drag your whole folder into the drop zone. Your page goes live at a web address ending in netlify.app. If you dropped it without being signed in, Netlify puts a temporary password on it until you claim it, so sign up or log in right then and claim it.

7. Make it public. This is the step that trips people up. Netlify teams created on or after July 28, 2026 start with new projects set to private, which means your visitors would see a Netlify page telling them they don't have access. Click Make public, or go to Project configuration > General > Visitor access > Project visibility and set it there. Then open your link on your phone, logged out, and make sure you see your page.

8. Give it a real name. On your project's overview page click Customize, then Manage project name and cover image. The name you pick becomes your address, so primer-paso-coaching becomes primer-paso-coaching.netlify.app. Connecting your own domain (yourbusiness.com) is a later step; Netlify's free plan lists custom domains as included.

9. When something changes, repeat steps 3, 5 and the drag. Ask Claude for the change, download, rename to index.html again, and in your Netlify project drag the updated folder onto the Production deploys area. Same address, new page.

If you pay for Claude Pro or higher: Claude Design (in beta) is built for exactly this kind of piece. Anthropic lists landing pages among what it makes, it exports standalone HTML, and Netlify is on its list of export integrations. It's not on the free plan, and Pro is $20 a month. The steps above work either way.

The prompt

Fill in the [BRACKETS], then paste it into Claude
Build me a one-page website for my business as a single HTML file, with all the styling inside the file, that looks good on a phone first.

My business: [BUSINESS NAME]
Who I help: [WHO YOU HELP, IN ONE SENTENCE]
What I offer and what it costs:
[EACH OFFER WITH ITS EXACT PRICE]
How people book or pay: [YOUR BOOKING LINK OR EMAIL]
About me: [ONE OR TWO LINES]
How to reach me: [EMAIL OR PHONE]
The feeling I want: [THREE WORDS, LIKE "warm, calm, clear"]
Colors, if I have them: [YOUR COLORS OR "you choose, keep it simple"]

Rules:
- Use only the facts I gave you. No testimonials, no client counts, no results, no stock quotes. If something's missing, leave a clear [PLACEHOLDER] instead of inventing it.
- One main button, and it goes to my booking link.
- Prices exactly as I wrote them.
- Sections in this order: what I do and for who, what I offer, about me, how to book.

Before you build it, ask me up to three questions if anything important is missing.

What it looks like filled in

Primer Paso Coaching is our example business (fictional), a coach who helps women price their first offer.

You

Build me a one-page website for my business as a single HTML file, with all the styling inside the file, that looks good on a phone first.

My business: Primer Paso Coaching
Who I help: Women starting a service business who don't know what to charge yet.
What I offer and what it costs:
- Single session: $150
- 5-session package: $600, or a payment plan of 2 payments of $300
- No discounts
How people book or pay: [BOOKING LINK]
About me: I help you put a real price on your first offer and say it without apologizing.
How to reach me: hola@primerpaso.example
The feeling I want: warm, clear, steady
Colors, if I have them: deep green and cream

Rules: (same as above)

What came back to read through: a phone-first page with "Primer Paso Coaching" and the who-I-help line at the top, one Book a session button, a two-card offer section (Single session $150; 5-session package $600 or 2 × $300), a short about line, and the email at the bottom. Claude asked one question first: "Do you want 'No discounts' shown on the page, or is that just for me?" Good question, because that line reads different to a stranger. She kept it off the page and kept the price exactly as written.

She clicked Publish to text the link to the woman from Saturday that same night, then downloaded the file, renamed it index.html, dropped the folder on Netlify, clicked Make public, and renamed the project to primer-paso-coaching. Her bio link now says primer-paso-coaching.netlify.app.

Takeaway

The hard part of a one-page website was never the code. It's the five lines about what you sell and what it costs, and once those are written, Claude builds the page and Netlify puts it up, and you're the one who checks every price before anybody else sees it.

Reply and tell me: what's the one sentence at the top of your page, the "I help ___ do ___" line? Read it to someone who doesn't know your business first, and if they can repeat it back, that's your line.

The next step

New to Claude? Start Here in the free classroom. The free plan works.

Sources

All checked 2026-10-01.

  • Claude Help Center, What are artifacts and how do I use them? https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them
  • Claude Help Center, Publish and share artifacts: https://support.claude.com/en/articles/9547008-publish-and-share-artifacts
  • Claude Help Center, Get started with Claude Design: https://support.claude.com/en/articles/14604416-get-started-with-claude-design
  • Claude plans and pricing: https://claude.com/pricing
  • Netlify Docs, Netlify Drop quickstart: https://docs.netlify.com/start/quickstarts/netlify-drop-quickstart/
  • Netlify Docs, Error reference (index.html requirement): https://docs.netlify.com/resources/troubleshooting/error-reference/
  • Netlify Docs, Project visibility: https://docs.netlify.com/manage/security/secure-access-to-sites/project-visibility/
  • Netlify Docs, Customize project name and cover image: https://docs.netlify.com/manage/projects/customize-project-name-and-cover-image/
  • Netlify pricing: https://www.netlify.com/pricing/
  • Claude: Cowork and chat are one Claude, with Docs and Slides (Sep 16, 2026), checked Oct 2, 2026
  • Claude Help Center: publish and share artifacts, checked Oct 2, 2026

← All guides