Vibe coding a website with Claude is one straight play: pick your business type, grab a long tested prompt, paste it into Claude, fix the boring 10 percent by hand, drop the folder onto a free host, and point your domain at the result. You can do it in a single afternoon, and the code will be the fastest part; deployment and DNS are where the hours actually go. Cash outlay if you do the whole thing yourself: about ten dollars for the domain. Everything else has a free tier.
Claude is one of three routes here; to weigh it against the platforms and the AI-builder hosts first, see how to vibe code a website, all three ways.
In late 2025, Collins named “vibe coding” its 2025 Word of the Year. The term went mainstream. The how-to mostly didn’t. So this is the full walkthrough, the same road we take when clients pay us to walk it for them, with honest time budgets and the two spots where almost everybody stalls.
What you need before you vibe code a website with Claude
Not much, honestly. A Claude account, your real business details (services, prices, hours, address, phone), and eight to twelve decent photos. That last item deserves a head start, because hunting for photos mid-build is how a four-hour project becomes a three-week project.
On the account: the free plan runs Sonnet 4.5 as of this writing, and it builds a static site just fine. Claude Pro is $20 a month and buys you several times the usage per session plus access to Opus 4.5, the current top model. Doing this in one determined sitting? Pro is worth one month’s twenty. Patient? Free works; you’ll just bump a session limit once or twice and wait it out.
No code editor. No terminal. No bootcamp. A browser and a folder on your desktop cover the tooling. The one skill you genuinely need is the willingness to finish the last boring 10 percent, and no model can do that part for you yet.
Grab a prompt that’s already been beaten up
Short prompts make pretty demos. “Make me a website for my bakery” gets you a generic hero, three fake testimonials from women named Sarah, and a color palette borrowed from every SaaS landing page since 2021. The fix isn’t prompting harder across twelve follow-ups. The fix is front-loading the spec.
We keep 40 free website prompts on this site, 20 for static HTML builds and 20 for WordPress, each around 12,000 characters. They read like a design brief because that’s what they are: page list, section order, typography rules, spacing system, mobile behavior, accessibility requirements, the works. Every one is tested on ChatGPT, Claude, and Gemini. Claude gets the walkthrough here because its artifact panel previews the page live while it builds, which keeps beginners oriented. The long version of why size matters is in our post on 12,000-character prompts; the short version fits on one line. A giant prompt isn’t overkill, it’s the spec sheet the model never gets.
Pick the prompt closest to your business type, then spend fifteen minutes replacing its placeholder business facts with yours before you paste anything. Every real detail you feed in now is one less fake detail you have to chase down later.
Run it in Claude and let the thing build
Paste the full prompt into a fresh Claude chat and send it. Claude thinks for a moment, then starts writing your files into an artifact, a side panel with a live preview you can click around. Watching your homepage assemble itself is the moment this stops feeling like a stunt and starts feeling like a tool.
Ask for the site as separate files (index.html, styles.css, script.js, one HTML file per page) so the download drops straight onto a host later. When a section comes out wrong, don’t start over. Tell Claude exactly what’s off, the way you’d tell a contractor: “services section, three cards across on desktop, stacked on mobile, lose the icons.” Specific complaints get specific fixes. Vague complaints get redesigns you didn’t ask for.
Two warnings from doing this a lot. First, Claude occasionally links to a page or an image that doesn’t exist yet; before you download, ask it to list every file the site expects and reconcile the list. Second, keep the entire build in one chat. That conversation is your project history, and a new chat starts with amnesia.
Time on the clock so far: 15 to 30 minutes of generation and small corrections. Enjoy it. This is the part of vibe coding that used to cost thousands.
Fix the boring 10 percent
Claude hands you a site that’s 90 percent done, and the remaining 10 percent is entirely stuff only you can do. The headline. The photos. The phone number, the hours, the prices. The one weird thing that makes your shop yours. A Claude website build nails structure and flubs specifics, because your specifics aren’t on the internet yet.
Work it as a checklist: swap every placeholder image for a real photo, compressed to something sane; rewrite the hero headline in words a customer would actually say out loud; check that the phone number is tappable on a phone; read every service description and delete whatever you don’t really sell. Then the invisible layer: page titles, meta descriptions, a favicon, and a social-preview image so the link doesn’t look naked when somebody texts it. The learning roundup cover each of those in plain English if any sound like a foreign language.
Budget one to two hours, more if writing about yourself makes your skin crawl. It does for everyone. This step is also the great filter of vibe coding. The pattern we keep seeing in rescue work is a generated site that looks terrific and sits 85 percent finished in a folder for six months, because the last chores were boring. Don’t be the folder.
How to host a vibe coded website: Netlify or Vercel, no terminal
Deployment scares people because it sounds like servers. For a static site in 2026 it’s a drag and a drop. Netlify’s free plan lets you drag your site folder onto its dashboard and hands back a live URL in about a minute, HTTPS included. Vercel does the same job and is happiest when you import the site from a GitHub repository.
One piece of fine print that matters for business sites: Vercel’s free Hobby plan is restricted to personal, non-commercial use, so a commercial site there belongs on the $20-a-month Pro plan. Netlify’s free tier carries no such clause as of this writing, which makes it our default answer for a small business. Either way, hosting a static site is genuinely free or close to it: no server bill, nothing to patch at 2 a.m.
Do the GitHub step even though it’s optional. Create a free account, upload your files as a repository, connect it to the host, and from then on every update is: change file, site rebuilds itself. Better still, your code now lives somewhere that isn’t your Downloads folder. Ownership is the quiet win of this whole approach, and it’s why every site we build for clients lands in the client’s GitHub, not ours.
Budget 20 to 40 minutes, most of it account signups. If a deploy fails, paste the error into the same Claude chat. Deployment errors are the single easiest thing Claude fixes.
Point your domain and survive the DNS wait
Your site is now live at something like quiet-otter-4f2a.netlify.app. Time for the finish line: a real domain. Buy it from a registrar that sells near cost; 2025 registrar comparisons put a .com at roughly $9 to $11 a year at Cloudflare or Porkbun, with renewals closer to $14 at the big-name shops. Skip every upsell in the cart. You need the domain and the free WHOIS privacy, nothing else.
Connecting it takes one of two forms, and your host shows you exactly which: either you add an A record and a CNAME at your registrar, or you switch the domain’s nameservers to the host’s. Follow the screen, copy the values, save. The actual work is fifteen minutes, and half of that is finding the DNS settings page.
Then comes the wait, and the myth. Everyone repeats that DNS takes 24 to 48 hours. In practice most DNS changes are visible within an hour or two; the 48-hour number is a worst case for stale caches, not the expectation. DNS doesn’t really propagate, old cached answers just expire on a timer called TTL. So when the domain isn’t working after 20 minutes, that’s not failure, that’s caching. Make coffee. Check again in an hour before touching anything, because “fixing” records that were already correct is how a one-hour wait turns into a real problem.
HTTPS handles itself. Both hosts issue a certificate automatically once the domain connects. When the padlock shows up, you shipped.
The realistic time budget when you vibe code a website with Claude
Numbers first, pep talk after. This is an honest afternoon-plus for a first-timer, not a stopwatch run by somebody who does it weekly.
| Step | Realistic time | Where it goes sideways |
|---|---|---|
| Prep: prompt, business facts, photos | 30 to 45 min | Photo hunting turns into archaeology |
| Claude generates and revises | 15 to 30 min | Free-plan session limits mid-build |
| The boring 10 percent | 1 to 2 hours | Rewriting the headline eleven times |
| Deploy to Netlify or Vercel | 20 to 40 min | GitHub signup, wrong-folder confusion |
| Domain and DNS | 15 min of work, up to a day of waiting | Panic-editing records that were right |
Call it four to six focused hours, spread across a day because of the DNS tail. Notice what’s missing from that table: learning HTML. The code is the step that got easy. Shipping is still a stack of small unfamiliar chores, which is exactly why so many generated sites die in folders.
Where beginners actually get stuck (hint: not the code)
Nobody emails us stuck on CSS anymore. The vibe coding part goes fine; the stuck points cluster in three places, and all three are logistics.
Accounts and plumbing come first: GitHub, Netlify, connecting one to the other, figuring out which folder is “the site.” Second is DNS, covered above, which is 90 percent patience dressed up as a technical problem. Third is the contact form, the one part of a static site that genuinely needs a service behind it, since HTML alone can’t send email. Netlify’s free plan includes basic form handling, and standalone form backends cover every other host; either way it’s an attribute on your form tag, not a rewrite.
And one worry that isn’t logistics: trust. “Can I rely on code an AI wrote?” is a fair question with a longer answer, so we gave it a whole post on whether vibe coding is safe. For a static brochure site the short answer is comforting: no database, no login, no plugins to attack. The risk profile sits closer to a PDF than to a neglected WordPress install.
When DIY stops being fun
Plenty of readers finish this walkthrough solo. That’s the point of the free prompt library, and we like the emails with the live links. Go build it.
Some of you read that table differently: four to six hours you don’t have, spread across skills you don’t want. Also fair, and it’s exactly who our vibe-coded static website service exists for. Up to 8 pages for $2,800 flat, delivered in 3 to 5 days, hosted free on Vercel or Netlify, with the code in your GitHub from day one. We drop a 2-minute video every night showing what got built, one round of changes is baked in, and you get 30 days of free fixes after launch. No discovery-call funnel either; tell us about the business and you’ll hear back within a day. It’s the same road as this post. We’ve just walked it enough times to skip the potholes.
The rest of the DIY path
This tutorial is written for beginners — one prompt, one afternoon, no terminal. When you want to go deeper: the vibe coding tools rundown covers Claude Code, the terminal version of this exact workflow, and what each tool costs. Not sure about the platform? Static vs WordPress and do you even need WordPress settle it in ten minutes. And before anything touches real customers, run the security check. Prefer structured learning? The 12 best vibe coding courses roundup sorts free from paid.
Questions we get about Claude website builds
Do I need Claude Pro, or does the free plan cut it?
Free cuts it for a one-sitting build if you’re a little patient. The free plan runs Sonnet 4.5, which handles a 12,000-character prompt and a multi-page static site fine; the catch is session usage limits, which you can hit mid-build and then wait a few hours. Pro at $20 a month removes most of that friction and adds Opus 4.5. Our take: start free, and buy one month of Pro the first time a limit interrupts you mid-thought.
Can’t Claude just publish the website for me?
Not in a way you’d want to keep. Claude can share an artifact link, which is great for showing a friend but isn’t a real website: no custom domain, no analytics, no ownership. A real launch is the download, deploy, domain sequence in this post, and that sequence is also what makes you the owner of the code instead of a tenant on somebody’s platform.
What if I’d rather build a website with AI using ChatGPT or Gemini?
The prompts work on all three; we test every prompt on ChatGPT, Claude, and Gemini before it goes into the library. Claude earned this walkthrough because the live artifact preview tightens the feedback loop and it follows long structural specs with fewer reminders. If your ChatGPT subscription is already paid for, use it. The process in this post is identical from the neck down.
How much does the DIY route cost in total?
Roughly $10 to $30 for year one. The domain runs $9 to $14 depending on registrar, static hosting is free on Netlify’s tier (Vercel’s free plan is non-commercial, so business sites there pay $20 a month), and Claude costs nothing or $20 for the month you build. Against $2,800 for our done-for-you version, the trade is honest: DIY costs almost no money and one full afternoon of your undivided attention.