Build Your First Website With AI
Learn to actively direct AI to plan, build, review, and publish a real one-page website — not just ask for one.
What You're Building
By the end of this guide you'll have a real, live one-page website — a simple business or project landing page with a clear headline, a value proposition, three highlights, and a way to reach you. But the page itself isn't really the point. Anyone can type "build me a website." This guide teaches something more useful: how to plan a page on purpose, brief AI clearly, judge its first attempt honestly, and improve it with precise instructions instead of vague ones — a skill that works on far more than websites.
What This Guide Is — And Isn't
What this guide covers
This guide uses Claude to build a webpage, and publishes it as a Claude Artifact — a public, Claude-hosted link. It needs no coding, no hosting setup, no domain, no GitHub account, and no deployment knowledge. It focuses entirely on planning, briefing, reviewing, iterating, and publishing.
What this guide doesn't cover
You won't be connecting your own domain, setting up hosting, managing project files yourself, learning HTML/CSS/JavaScript directly, learning Git or GitHub, configuring DNS, deploying through Vercel or Netlify, or learning to maintain a traditional live website. That's a different, more technical skill — covered in a future guide.
What you'll actually walk away with
I did not learn web development yet. I learned how to use AI intentionally to design and build a simple webpage. That's the honest, and genuinely useful, takeaway from this guide.
Get Your Account Ready
One account, free to set up.
Create your Claude.ai account
Go to claude.ai and sign up for a free account — signing up with Google is the quickest way.
Claude is who you'll direct to build your website. The free plan is enough for this entire guide.
You're signed in and see a chat box, ready to type a message.
Stuck?
If you're asked to verify your email, do that first — you won't be able to send messages until it's confirmed.
A quick note on Claude's free plan
Claude's free plan doesn't use a hard daily cap — it gives you a rolling allowance of messages that refills over a few hours. Planning, building, and refining a page like this one comfortably fits inside that allowance in one sitting.
The Model: Plan → Prompt → Build → Review → Improve → Publish
Before opening Claude, it helps to see the full loop you'll practice — six stages, not one.
Plan: decide before you ask
Before writing a single prompt, you decide who the page is for, what it should say, and what it needs — the same way a designer would, just without code.
Prompt: turn your plan into a brief
A good prompt isn't clever wording — it's your plan, written clearly enough that Claude doesn't have to guess.
Build: Claude writes the real code
Claude turns your brief into an actual working page — real HTML, CSS, and a little JavaScript — shown in a live preview called an Artifact.
Review: judge the first draft honestly
The first result is a draft, not a finished page. You check it against a short list of what actually makes a page work.
Improve: give precise instructions
Instead of "make it better," you name exactly what's weak and what it should say or do instead — one change at a time.
Publish: make it real
Once you're satisfied, you publish it — turning your Artifact into a real, public webpage anyone can open.
Plan Your Page
This is the chapter that makes the difference between a generic AI page and one that actually works. Answer these before you open Claude.
Choose your page's subject
Pick one real or semi-real idea: yourself, a small business, or a project you're working on.
A specific real subject gives you real answers in the next step — a vague or fictional subject makes the whole exercise harder, not easier.
You can say in one sentence what this page is for.
Answer five planning questions
Write down short answers to these five questions — a few words or one sentence each is enough:
These five answers are the entire foundation of your brief in the next chapter — Claude can only be as specific as your answers are.
You have a short, written answer to all five questions.
Stuck?
If an answer feels vague (e.g. "everyone" for who it's for), get more specific — a page "for everyone" tends to produce a page that means nothing to anyone. Try naming one specific type of person instead.
1. Who is this page for? 2. What should that visitor understand immediately? 3. What is the single action you want them to take? 4. What are the three most important benefits, services, features, or proof points? 5. What tone should the page have?
Decide which sections you actually need
From this list, choose the sections your page needs, and put them in order: Hero, value proposition, 3 highlights, About, testimonial/social proof (optional), call to action, contact.
Not every page needs every section — deciding this yourself, instead of accepting whatever Claude defaults to, is part of directing the result instead of just requesting one.
You have an ordered list of sections, with the optional testimonial included only if it genuinely fits your subject.
Write Your Brief
Now your plan becomes a message Claude can act on.
Turn your answers into a brief
Paste this into Claude, replacing each bracket with your answers from the previous chapter, then send it:
This brief is specific because your planning was specific — notice it doesn't ask Claude to guess anything you already decided.
Claude replies and asks you one or two quick questions before it starts building — that's expected, not an error.
Stuck?
If you're typing this instead of pasting it, press Shift+Enter for line breaks. Pressing Enter alone sends the message immediately, before you've finished typing — this can cut your brief short.
Build me a clean, simple one-page website. Who it's for: [your answer to question 1] What visitors should understand immediately: [your answer to question 2] The main action I want visitors to take: [your answer to question 3] Three key benefits/services/features to highlight: [your answer to question 4] Tone: [your answer to question 5] Sections, in this order: [your chosen section list] Use a simple, modern design with clear visual hierarchy — the headline and main action should be the most prominent things on the page.
Build Your First Draft
This is where your brief becomes a real, working page.
Answer Claude's quick questions
Claude will show a small card with a question and a few clickable options, plus an "Or reply directly..." field. Click the option closest to what's in your brief, or type your own answer.
These are quick clarifying questions, not a new form — a preset option and typing your own answer both work equally well.
After answering, Claude shows a short design plan (colors, fonts, layout) and says it's starting to build.
Wait for your first draft
Wait while Claude plans and builds — usually under a minute, in visible stages (researching, planning, writing the code).
The Artifact preview appears after Claude finishes planning and writing the code, not the instant you send your brief. That's normal.
An Artifact panel opens on the right side of the screen, showing a live, real webpage.
Stuck?
If the plan Claude describes mentions a name or detail you never gave it, your brief likely didn't fully come through. Don't restart — tell Claude your real details now and ask it to update. It's built to expect this.
Look at what Claude actually built
Scroll through the whole page in the preview panel before judging it.
You're about to critique this in the next chapter — read the whole thing first, not just the top.
You've seen every section of the page at least once.
Review It Like a Critic
This is the step most people skip — and exactly the one that makes the difference.
Check the headline and value proposition
Read just the headline. Does it say what this is in 5 words or less, with no jargon? Then read the line below it — does it say who this is for and why they should care, in one sentence?
A headline's job is instant clarity, not cleverness. A value proposition's job is making the right visitor think "this is for me."
You can say, out loud, whether the headline and value proposition pass or fail — and if they fail, exactly why.
Check the call to action
Find the main button. Is its label a specific action ("Book a call", "Get the guide") rather than something generic ("Submit", "Click here")? Is it visually the most noticeable thing on the page?
A vague or buried CTA is one of the most common reasons a page fails to do its one job.
You know whether the CTA passes both tests.
Check structure and visual hierarchy
Look at the page and notice what your eye goes to first, second, third. Compare that to the section order you planned in Chapter 5.
Visual hierarchy is what tells a visitor what matters most — if everything looks equally important, nothing does.
You can name what draws the eye first, and whether that matches what should matter most.
Check color, style, and mobile layout
Does the color and style match the tone you asked for? Then shrink your browser window narrower (or open the page on your phone) and look for text that overlaps, buttons too small to tap, or sections that look cramped.
A page that only works at full desktop width isn't finished — most real visitors will see it on a phone first.
You have a short list of anything that looks off — in style or at a narrow width.
Stuck?
If you don't have a second device handy, resizing your actual browser window narrower works just as well — the page should still look clean.
Improve It With Precise Instructions
Now turn what you found into instructions Claude can act on — one at a time.
Fix the headline or value proposition, if needed
If either failed your check, say exactly what's wrong and what it should say instead.
"Make it better" gives Claude nothing to act on. Naming the problem and the fix does.
The preview updates, and the new headline/value proposition passes the same test from the previous chapter.
The headline is too generic. Rewrite it to lead with [specific benefit], instead of describing [generic feature].
Fix the CTA, if needed
If it failed, name the current text and what it should say, and ask for it to stand out more if needed.
A specific instruction gets a specific fix — same principle as the headline.
The CTA now uses a specific action verb and is visually prominent.
Change the main button text from "[current text]" to "[specific action]", and make it visually the most prominent element in the hero section.
Fix structure, hierarchy, or mobile issues, if needed
Address anything else from your review list, one instruction at a time — for example, reordering a section, resizing an element, or fixing a mobile layout problem.
One instruction at a time is easier for you to verify and for Claude to get right than a bundled list.
Each issue from your review has either been fixed, or you've decided it's not actually a problem.
Show me how this looks at a narrow, phone-sized width, and point out anything that breaks, overlaps, or looks cramped.
Publish When It's Ready
Before you publish, make the call: is this good enough?
Decide if it's ready
Look back at your review checklist one more time. If the headline, value proposition, CTA, structure, and mobile layout all pass, you're ready. If not, go back for one more round of improvements.
"Good enough to publish" doesn't mean perfect — it means every item on your checklist genuinely passes, not "close enough."
You can say yes to every item on your review checklist.
Open the publish menu
In the Artifact panel, click the small chevron (▾) next to the "Copy" button in the top-right corner.
This opens a small menu with two options: downloading the page as a file, or publishing it.
A menu appears showing "Download as HTML" and "Publish artifact."
Click Publish artifact
Click "Publish artifact."
This doesn't publish anything yet — it opens a confirmation screen first, since publishing makes your page public.
A "Publish artifact" dialog opens, showing a filename field and a short notice about what publishing means.
Read the confirmation, then publish
The dialog explains that publishing makes the page accessible to anyone on the internet (and possibly visible in search engines), while your chat itself stays private. Leave the filename as it is, or rename it, then click "Publish & copy link."
Publishing takes a snapshot of your page exactly as it looks right now and gives it a public address — separate from your private conversation with Claude.
The dialog updates to show "Published (Public)", your real public link, and a "Copy link" button.
Save your link
Click "Copy link" (or use the link already copied when you published), and save it somewhere outside Claude — a notes app or an email to yourself.
This link is your website's real address now. Worth knowing: "Share", elsewhere in Claude, shares your conversation — "Publish artifact" is the only action that makes the actual webpage public.
You have the link saved somewhere outside of Claude.
What publishing actually does
Publishing creates a public snapshot of your page exactly as it was the moment you clicked "Publish & copy link." If you edit the page afterward, those changes will not appear at the link you just saved — the published version stays frozen. To make edits live, you'd need to publish again, which creates a brand-new link, not an update to the old one. And once you unpublish, that old link is gone permanently — it can't be turned back on, only replaced with a new one. This is exactly why the checklist in this chapter came before publishing, not after.
Test It For Real
Open it like a stranger would
Open a new incognito/private browser window (or use your phone), and paste your published link in.
This proves the page works for anyone, not just you while logged into Claude.
Your page loads fully, with your real content, and you were not asked to log in.
Stuck?
If it asks you to log in or shows an error, go back to Claude and confirm you clicked "Publish artifact" (not just "Share"), then copy the link again. If you edited the page after publishing, remember the old link won't reflect it — publish again to get a link with your latest version.
Send it to someone
Send the link to a friend, or open it on another device, and ask them to confirm they can see it.
This is the real-world proof: a working website only counts once someone besides you can actually see it.
They confirm they can open the link and see your real name/content — the actual page loading somewhere else, not just a message from Claude saying it worked.
What You Learned + Where to Go Next
The skill you actually practiced
You didn't just ask AI to build a website — you planned its purpose and audience, briefed it precisely, judged its first attempt against real criteria, and improved it with specific instructions instead of vague ones. That loop — plan, brief, review, iterate, know when to stop — transfers to directing AI on almost anything, not just webpages.
What you built, and what you didn't
You built and published a real webpage as a Claude Artifact — a genuine, public, working result. You didn't set up hosting, connect a domain, touch Git, or edit any code directly. That's a different, more technical skill, not a missing piece of this one.
The next technical level: Build and Launch a Real Website With AI
A follow-up Level185 guide goes further: Plan → generate and write real code with an AI coding agent → understand the project files → work from the terminal → Git and GitHub → deploy a real, live website with GitHub Pages. It's a bigger technical skill because you gain real ownership and control over the actual website project, instead of publishing a snapshot through Claude each time. This guide was intentionally not that — it was about learning to direct AI well, which is worth knowing before taking on the technical side.
Open your published link in an incognito window or on another device right now — you should see your real, planned, reviewed, and improved page, live, with no Claude account needed to view it.
- The page opened without logging into Claude
- The headline, value proposition, and CTA still pass the checks from your review
- The page looks clean at a narrow/mobile width, not just on desktop
- Someone else was able to open the same link and see the same page
Recommended next