How to build a website with AI: a step-by-step tutorial

Yes, in 2026 you can build a working website with AI, and not out of website-builder blocks but as a full custom layout based on your own design. The AI takes care of the code: you show it the mockup and explain what you need, and it writes the HTML, CSS and scripts. Below is the full path I went through myself, from finding a design to publishing it online.

No rose-tinted glasses, though. AI will build you a site skeleton in an evening, but getting it to the point where it actually sells takes hands-on work: copy, funnel, analytics, code tweaks. Where exactly the line between "built it myself" and "need a specialist" runs, we'll cover at the end. For now, step by step.

Reference site

a design you like

html.to.design

→

import into Figma

mockup in your brand

Dev Mode MCP

→

mockup to the agent

writes code from the mockup

site files

→

upload

published, site is live

What you'll need

A minimal toolset. None of it requires programming skills, but you will have to touch the terminal.

Figma. The free plan is enough. This is where I prepare the design mockup of the future site.

Claude Code. It's an AI agent from Anthropic that runs right in your computer's terminal, sees your project files and writes the code itself. It needs a paid subscription; we'll cover prices and limits in detail below.

Hosting. The place where your site lives on the internet. I use hoster.kz, a Kazakhstan hosting provider: for a business in Kazakhstan it matters that the site and data physically stay in the country.

A browser and a bit of patience. Some steps happen in the command line, but it all comes down to copying ready-made commands.

Step 1. Find a design reference and pull it into Figma

Starting a design from a blank page is slow and hard. It's easier to start from a site you like and rework it for yourself.

Find a reference site whose design you like. It can be a site from your niche or just a good-looking landing page. Then you need to bring it into Figma so you have something to edit.

That's what the html.to.design plugin is for. It imports a live website into Figma as editable layers, so you get not a picture but a working mockup you can change. Install the html.to.design plugin in Figma (via the Actions menu, search by name) and its Chrome browser extension. Open the site you want, click the extension icon, let it capture the page and send the result to Figma.

Understand the direction here: html.to.design pulls a site FROM the internet INTO Figma, not the other way around. It's an entry tool to get a base for your design, not a way to export a finished mockup to code.

Step 2. Make the mockup your own

Someone else's design as a reference is the start, not the finish. Now you make it yours.

Repaint it in your brand: swap the colors for your brand colors, change the fonts, add your logo. Remove blocks you don't need, add the sections you do, rebuild the structure around your services or products. The goal of this step is a mockup that looks like your site, not a copy of the reference.

If you have no design at all, you can take a ready-made template from Figma Community and rework it the same way.

Step 3. Install Claude Code

Claude Code runs in the terminal. Sounds scary, but installing it is one command.

On macOS, Linux or WSL, open the terminal and paste:

curl -fsSL https://claude.ai/install.sh | bash

On Windows, open PowerShell and paste:

irm https://claude.ai/install.ps1 | iex

After installing, open a new terminal (this matters, otherwise the system won't see the command) and check that everything is in place:

claude --version

If you see a version, you're good. If the command isn't found, usually you just need to close and reopen the terminal. For a full check, run claude doctor: it shows the state of the installation.

Now launch Claude Code with the claude command. On first launch, a browser opens so you can sign in. Important: Claude Code requires a paid subscription (at least the Pro plan); a free account doesn't give you access. We'll cover money in a separate section below so you know the costs upfront.

Step 4. Connect Figma to Claude Code

For the AI to build the site exactly from your mockup, it has to see it. Figma and Claude Code connect directly.

Figma has an official Dev Mode MCP server. MCP is the protocol an AI agent uses to connect to external tools and read data from them. When Figma is connected to Claude Code via MCP, the agent sees your mockup directly: colors, fonts, spacing, structure. No need to export the design into an intermediate HTML file, which usually produces messy code you then have to fix. The agent reads the source mockup and writes the layout straight from it.

You set it up once: enable the Dev Mode MCP server in Figma's settings and add it to Claude Code. After that, the agent gets access to the selected frame.

Step 5. Build the site with Claude Code

Now the fun part. The mockup is connected, the AI can see it, all that's left is to ask it to build the site. How you phrase the request matters a lot, so here's a working prompt example to adapt to your case:

Context: I'm building a landing page from a Figma mockup. Figma is connected to you via
the official Dev Mode MCP. Design mockup: [LINK TO FIGMA FRAME].
Style and animation reference: [LINK TO REFERENCE SITE].

Task: build a static page (HTML + CSS + minimal JS) that matches the mockup exactly.

Requirements:
- Build strictly from the Figma frame: take colors, fonts, spacing and grid
  from the mockup, don't invent your own.
- Responsive: desktop and mobile, clean breakpoints.
- Semantic HTML, clean CSS, no heavy libraries.
- All text on the page is placeholder (lorem ipsum) for now. This is a draft, I'll replace
  it with final copy by hand later. Mark the blocks with comments so I can find them easily.
- Keep placeholder images as placeholders, put asset paths in a separate place.
- Lay out the contact form visually, but don't wire it to a backend yet,
  leave a TODO in the code.

First show me the plan: which sections and files you'll create. Don't write code until I
confirm the plan.

Note the last line. Asking for a plan first instead of code right away saves your money and nerves: you get to correct the direction before the agent writes a mountain of code in the wrong direction. This matters especially given the usage costs covered below.

Then you work in iterations. You look at the result and say what to fix: "make the spacing between sections bigger", "the header should stick to the top". The AI rewrites it. This is a normal process; it almost never comes out perfect the first time.

Step 6. Fill the site with content

Here's the first important point many people skip, and then wonder why the site doesn't work.

The AI built you a skeleton, but it's full of placeholder text instead of real content. A site without proper content doesn't sell or bring in clients, however good it looks. You'll have to write the copy.

Yes, you can ask the same Claude or ChatGPT for a draft. But be ready: AI copy comes out raw. It's generic phrasing that doesn't know your specifics, your clients or your advantages. You must rework it by hand: add specifics, numbers, your real case studies, natural language. Raw AI text is obvious right away and doesn't build trust. Treat it as a draft, not a finished result.

Same with images: replace the placeholders with real photos, logos and visuals.

Step 7. Wire up the form and plan the funnel

The second important point. A nice form on the site is useless if the leads from it don't go anywhere.

In the previous step I only laid out the contact form visually. Now it has to be connected to something that receives leads: for example, sending the data to a Telegram bot or to email. This is separate technical work, and the AI will help with the code here too, but setting up lead delivery and checking that leads actually arrive needs care. A site that collects leads into nowhere is worse than no site at all.

And more broadly: think about the funnel before you build. Where each button leads, what happens after a request, whether there's a "thank you" page, whether analytics is connected so you can see where your clients come from. A site isn't a picture, it's the user's path from the first screen to a request. If that path isn't thought through, even a good-looking site won't bring leads.

Step 8. Publish the site

The site is built on your computer, but it's not on the internet yet. You need hosting: a place where the site files live and where visitors see them from.

I publish on hoster.kz. For a business in Kazakhstan it's a deliberate choice: the site and client data are physically stored in the country. You sign up for hosting, get access to the server and upload the site files. After that, the site opens on your domain.

What you end up with is a set of files (HTML, CSS, images, scripts) that is your site. You can upload them to the hosting manually or set up automatic deployment, but that's the next level.

What it costs and the pitfalls

Now about money and limits, straight up.

Claude Code is paid. You can't build a site this way for free: you need a subscription, at least the Pro plan (around $20 a month), and there are pricier Max plans for those who work a lot. A free account doesn't give access to Claude Code.

There are usage limits. Every request to the AI spends tokens, and the subscription has a ceiling. Limits reset every few hours, plus there's a monthly cap. If you run the agent through endless iterations, you'll hit the limit and have to wait for the reset or move to a pricier plan. Inside Claude Code, the /context command shows current usage, and the habit of planning tasks (like in the prompt above: plan first, then code) really saves your limit.

Costs are unavoidable in principle. Besides the AI subscription, there's hosting and a domain. A full site with proper lead handling can't be done completely for free, so better budget for it from the start.

Paying for the subscription from your region. The Claude Code subscription is paid with an international card, and from some countries that can be a quest of its own. Check the current payment options at the time of purchase.

Where "DIY" ends and the agency begins

Now the main conversation, the one worth reading to the end for.

Building a site skeleton with AI is doable, and for simple tasks it's enough: a business card site, a landing page for a single promo, a personal page. If you need a site "just to have one", you'll manage on your own with the steps above.

But there's a ceiling you'll hit, and hit fast. AI writes code, but it won't build a selling structure for your niche, set up end-to-end analytics and a funnel, create a design system that holds the brand across all pages, optimize speed and SEO, set up ads or take over support when something breaks. All of that is separate work, and it's exactly what turns a set of pages into a tool that makes money.

Roughly, the line is this: if the task is a page for one evening, do it yourself; that's fine and useful, if only to understand how it all works. If the site is part of a business that leads and revenue depend on, saving on the build usually turns into losses from a site that doesn't sell. Then it's cheaper and faster to hand it to people who build funnels and sites for results.

The 4U team designs a site as a sales funnel, not a pretty shop window, and is accountable for leads, not for the process. If after this tutorial you see the scale of the work and want a site that actually brings in clients, let's discuss your project.

What about website builders

Briefly, since everyone already knows about them. AI website builders (where the site is assembled from ready-made blocks based on a description) are the simplest path, with no terminal or code at all. They work if you need something fast and without any technical details. The downside is that you're limited to what the builder can do: less control over design, code, speed and portability. The approach in this tutorial (your own design plus an AI coder) gives far more freedom but needs a bit more involvement. Your call.

Takeaway

Building a website with AI in 2026 is doable, and it's a useful skill. The AI handles the code; you're responsible for design, content and meaning. The path: a reference in Figma via html.to.design, reworking the mockup for yourself, building with Claude Code via MCP, filling in content, wiring up the form and publishing on hosting.

But keep two rules in mind. First: the AI won't think through the copy, form and funnel for you; that's manual work, and without it the site doesn't sell. Second: for a simple site you'll manage on your own, but for a site your business depends on, there's a DIY ceiling beyond which working with specialists is cheaper.

FAQ

Sources

• Official Claude Code documentation (Anthropic): installation, requirements, limits (2026).
• Figma: official Dev Mode MCP server.
• html.to.design (divRIOTS): importing websites into Figma, Chrome extension.