How to Build a Website with Claude (2026 Guide)

Adrian Yumul
Adrian Yumul• Published Aug 10, 2026
How to Build a Website with Claude (2026 Guide)

How to Build a Website with Claude (2026 Guide)

If you pay for Claude, you already have most of what you need to build a website. Claude can design pages, write the copy, generate the code, and, with the right setup, publish the finished site at a real URL, all from a chat.

The catch is that "build a website with Claude" can mean three very different things, and most guides only cover one of them. In this guide we'll walk through all three ways to do it, from a quick mockup to a fully published site with a database and sign-ups, and help you pick the right one for what you're building.

What you need before you start

The good news: the list is short. You need a Claude account. Any paid Claude plan works, and you'll be doing everything through the normal Claude chat you already use. You need an idea of what the site is for: a portfolio, a landing page for your product, a booking site, a blog. Claude works best when you can describe the goal in a sentence or two. And optionally, you'll want a builder connected to Claude. If you want the result to be a real, live website rather than code you have to host yourself, you'll connect an app platform like Floot to Claude. More on that in method three.

No code editor, no hosting account, and no design tool are required for the beginner path.

Method 1: Claude Artifacts, for fast mockups and single pages

Ask Claude to "build me a landing page for a dog-walking service" in a normal chat, and it will generate one as an Artifact: a live preview that renders right next to the conversation. You can iterate on it in plain English: change the colors, rewrite the headline, add a pricing section.

Artifacts are great for mocking up a design before you commit to it, for single-page sites like a personal page or an event page, and for testing copy and layout ideas in minutes.

Here's where they stop: an Artifact isn't a hosted website. There's no custom domain out of the box, no database, no user accounts, and no backend, which means no contact forms that actually send, no sign-ups, no payments. To put an Artifact on the real internet you have to export the code and deploy it somewhere yourself.

Think of Artifacts as the sketchpad. If a sketch is all you need, you're done in ten minutes. If you need a real site, keep reading.

Method 2: Claude Code, for developers who want full control

Claude Code is Anthropic's agentic coding tool. You point it at a project folder, describe what you want, and it writes and edits the code directly. The result is a real codebase you own, in whatever framework you like.

It's the right choice for developers who want full control over the stack, for existing codebases that need a new site or major changes, and for complex custom functionality that no builder template covers.

The trade-off: you're now running a software project. You pick the framework, set up hosting and deployment, wire up the database, and maintain all of it. Claude Code does the heavy lifting on the code, but the infrastructure decisions (and the DevOps) are yours.

If words like "deployment pipeline" sound like a fun weekend, this is your method. If they don't, method three exists for you.

Method 3: Floot MCP, for a real published website straight from the Claude chat

This is the newest option, and for most people it's the sweet spot: connect Floot to Claude, and your Claude chat becomes a full app platform. You describe the website, and Claude builds it on Floot, with a live preview link from the first edit, a real backend, and one-click publishing to a live URL when you're happy.

Unlike Artifacts, the result is an actual hosted website. Unlike Claude Code, there's nothing to set up or maintain: hosting, database, and publishing are all part of the platform.

Step 1: Connect Floot to Claude

In Claude's settings, add Floot as a connector. The Floot docs have the current walkthrough. It takes about a minute, and it also works in ChatGPT and Cursor if you build there.

Step 2: Describe your website

Start a chat: "Build me a website for my photography studio with a portfolio grid, an about page, and a contact form that emails me." Plain English is the whole interface.

Step 3: Watch the live preview

Floot gives you a preview link right away, and it updates live as Claude works. You're not waiting for a big reveal. You can watch the site take shape and redirect as you go.

Step 4: Iterate in the same chat

"Make the header darker." "Add a testimonials section." "Let visitors book a session and pay a deposit." Because Floot includes a real backend, a database with a visual editor, and user authentication, requests like bookings, sign-ups, and Stripe payments are all in-bounds, not just cosmetic changes.

Step 5: Publish

When it looks right, say so, and your site goes live at its own URL with one click. Hosting scales automatically, and Floot sites ship with pre-rendering and sitemaps, so Google can actually find your pages.

That last point matters more than it sounds: many AI-generated sites render everything in the browser, which search engines handle poorly. If SEO is part of why you're building the site, check that whatever you build is server-rendered or pre-rendered. With Floot it's built in.

Which method should you pick?

The short version: Artifacts if you want a mockup or a single page and don't need it hosted. Claude Code if you're a developer who wants to own the stack and doesn't mind handling hosting and deployment yourself. Floot MCP if you want a real, published website, backend, database, logins and all, without writing or hosting any code.

All three run on the Claude plan you already pay for. The difference is what you get at the end: a preview, a codebase, or a live site.

What it actually costs

This is where building through Claude differs most from typical AI website builders. Most of them, Lovable and Replit included, sell their own AI credits on top of whatever you already pay for an AI assistant. Run out of credits mid-build, and you're buying a top-up before you can finish your header.

Building through Claude flips that. With Artifacts and Claude Code, the AI cost is simply your Claude plan. And with Floot MCP specifically, the same is true even though you're using a full app platform: the AI runs on the Claude plan you already have, and building over MCP uses zero AI credits. Floot MCP doesn't meter your tokens. Floot itself is a flat subscription for the platform (hosting, database, publishing), so the total comes to two flat plans, with no credit packs in between and no surprise usage bill at the end of the month.

Five prompting tips for better websites

However you build, how you talk to Claude makes a real difference.

Lead with the goal, not the layout: "a site that gets dog owners to book a first walk" beats "a site with three sections." Name real references, since "clean like a Stripe landing page" gives Claude a much clearer target than "modern and professional." Ask for one change at a time when polishing, because big vague requests like "make it better" produce big vague changes. Bring your real content early, because actual product names, photos, and prices surface layout problems that placeholder text hides. And ask Claude what's missing. "What would make this landing page convert better?" turns Claude from a builder into a consultant, and it's good at both.

FAQ

Can Claude really build a full website by itself?

Yes, with the right setup. On its own, Claude generates excellent single pages as Artifacts. Connected to a platform like Floot over MCP, it can build and publish complete multi-page websites with databases, user accounts, forms, and payments, entirely from chat.

Do I need to know how to code?

No. Artifacts and Floot MCP both work in plain English. Claude Code is the one method aimed at people who want to work with the code directly.

Is building a website with Claude free?

Building happens on your existing paid Claude plan, and with Floot MCP there are no AI credits on top of it. The platform itself is a flat Floot subscription that covers hosting, the database, and publishing. So: two flat plans, no per-token metering, no credit packs.

Can I use my own domain?

With a hosted platform, yes. Floot sites publish to a live URL and support connecting a custom domain. Artifacts would need to be exported and hosted elsewhere first.

Will a Claude-built website rank on Google?

It can, if it's built for it. Look for server-side rendering or pre-rendering, sitemaps, and proper meta tags. Floot includes pre-rendering and sitemaps by default, which many purely AI-generated sites lack.

Start with the plan you already pay for

The best way to build a website with Claude depends on what you need: Artifacts for a quick page, Claude Code if you want to own the stack, and Floot MCP if you want a real, published website without touching code, with the AI running on the Claude plan you already have and no credits in between.

Ready to try it? Connect Floot to Claude and describe your website. You'll have a live preview link before you finish your coffee.

Adrian Yumul

Adrian Yumul

How to Build a Website with Claude (2026 Guide) - Floot