How to build a website with AI yourself: tools, a step-by-step process and pitfalls
An honest guide from a web designer: which AI tools you can use to build a website, how to work with Claude Code screen by screen so the result isn’t generic, and what you need to know for AI to really help.

Contents
Just a few years ago, building a website meant learning to code or paying a developer. Today, AI writes the code and copy and even publishes the website online. It seems a website can now be built in an evening. That’s partly true. But there’s a catch that AI tool ads rarely mention.
I build websites with AI every day, so in this article I’ll share my real workflow: which tools to use, where they shine and where they fall short, and a step-by-step process with ready-made prompts you can follow to build a website yourself.
What’s changed: the car exists, but you still need a licence
AI tools really have learned to write good code, adapt a website for smartphones, connect forms and publish the website to hosting. What used to take weeks can now be done in days.
The time has come when you can build a website yourself. But it’s also the time when you need to know how to drive the car.
A car can drive itself on a motorway too, but the driver decides where to go, how to avoid a pothole and where to turn. It’s the same with AI: it will carry out any command, but the quality of the result is determined by the person giving the commands.
Which AI tools can you use to build a website
In this article, I’ll cover the approach with Claude Code: it’s what I use in my work, and it gives the most freedom — the website isn’t tied to a builder, the code belongs to you, and you can change anything.
Pros and cons of the approach
The main trap: AI builds an “average” website
A language model is trained on millions of websites. When you ask it to “make a website for a dental clinic”, it assembles the most typical solution: a blue gradient, a photo of a smiling patient, three advantage cards. Technically everything works, but the website looks like dozens of competitors’ — and the client has no reason to choose you.
- No positioning. AI doesn’t know why you’re better unless you’ve put it into words.
- No visual idea. Without references, AI picks the safest — that is, the most boring — option.
- No sales logic. The blocks are arranged “like everyone else’s”, not in the order in which a client makes a decision.
Step-by-step: a website with Claude Code
The most important principle is to build the website screen by screen rather than asking it to “make the whole website at once”. I’ll explain why this works after the steps.
Step 1. Structure and copy — in a regular AI chat
Start not with code but with what will be on the website. Ask the AI to interview you about your business and put together the page structure. More on prompts for copy in the article “AI for website copy”.
You’re a marketer and copywriter preparing a one-page website for a business. My business: [what you do, city, who it’s for] The visitor’s main action: [send a request / book / call] 1. Ask me 7–10 questions about the business, clients, advantages, prices and objections — one at a time. 2. After my answers, put together the website structure: a list of screens (blocks) and the purpose of each. 3. Write copy for each screen: headline, subheadline, body text, button text. Write in English, briefly and specifically, without clichés like “high-quality” or “individual approach”. Don’t make up numbers — if facts are missing, write [NEEDS CLARIFICATION].
Step 2. References for each screen
For each block in the structure, find 1–2 examples you like: the first screen, the services block, reviews, the request form. Look on Awwwards, Dribbble, Pinterest or the websites of strong companies in your niche. Take screenshots and put them in one folder, named in the order of the blocks.
Step 3. Create a project in Claude Code
Install Claude Code (it works in the terminal, in code editors and in the Claude desktop app) and create an empty folder for the website. You’ll need a Claude subscription or API access. The first message is about the technology and the project’s general rules:
Create a new website in this folder using Next.js with TypeScript and Tailwind CSS. General project rules: - website language: English; - responsiveness: mobile first, then tablet and desktop; - colours: [main colour], [accent colour], background [colour]; - font: [font name from Google Fonts]; - each block is a separate component so it can be reused on other pages. For now, make only an empty home page with a header and footer, and run the website locally so I can preview it.
Step 4. Build the website screen by screen: reference + copy
Now, for each block, send Claude Code a reference screenshot and the finished copy. One screen — one message. Review the result, fix it and move on to the next one.
Build the “[block name, e.g. First screen]” block on the home page. The reference is in the attached screenshot: take its composition, hierarchy and feel, but don’t copy it one to one. Use our project’s colours and font. Copy for the block: """ [paste the headline, subheadline, text and button text from step 1] """ Requirements: - on a phone, the block must look neat, with no horizontal scrolling; - the “[button text]” button opens the request form; - after the changes, show what exactly you did and run the website for preview.
Not happy with the result? Be specific: “the headline is too big on mobile”, “increase the gap between cards to 24px”. The more precise the feedback, the faster the result.
Why screen by screen matters
- Bugs are fixed once. If a block has a bug — say, text overflows on mobile — you fix it in one component, not on every page.
- Blocks become templates. A finished, polished screen (service cards, reviews, FAQ) is then reused on other pages without rework.
- You save limits. Short, precise tasks use far less of your subscription than asking it to “redo the whole website”.
- You control quality. Each screen passes your review rather than appearing alongside a dozen others.
A website built screen by screen is like a house made of tested bricks. A website made “in one request” is like a house where you find the crack after moving in.
Step 5. Checks: phone, speed, copy
- Open the website on a phone — most visitors will come from one.
- Ask Claude Code to check the speed and optimise the images.
- Read the copy out loud: if you wouldn’t say it to a client in person, rewrite it.
Step 6. SEO foundation and a request form
Prepare the website for launch: 1. SEO: unique titles and descriptions for each page, one H1 per page, alt text for all images, sitemap.xml and robots.txt, Schema.org structured data for the business. 2. Request form: send requests to me on Telegram via a bot. Explain step by step how to create the bot and where to get the token and chat id, and store them as secrets, not in the website code. 3. Spam protection for the form and a limit on the number of submissions. After each item, briefly explain what was done.
Step 7. Domain and publishing
Buy a domain from a registrar, then simply tell Claude Code: “I want to publish the website”. It will suggest hosting, explain step by step what to click in your account and handle the technical part itself. All you have to do is confirm the actions, connect the domain and check that the website opens.
Step 8. Changes after launch
From then on, it’s simple: open the project in Claude Code, write what to change — “add a new review”, “change the landing page price” — and ask it to publish the changes. Tip: ask it to set up a backup on GitHub straight away, so you can always go back to a previous version.
How long it really takes
If you already have a feel for design and understand how a website should work — a few days. If it’s your first time, add time for:
- structure and copy — this usually takes the most time;
- finding references and deciding what to take from them;
- dozens of “not right — redo it” iterations until you learn to phrase tasks;
- figuring out registrars, hosting, DNS, bots and analytics;
- testing on phones, speed, SEO.
When to do it yourself and when to hire someone
Conclusion: everyone should do what they do best
AI has made building websites more accessible — and that’s great. But the tool doesn’t replace experience: to drive AI, you need a trained eye and an understanding of UI, structure and how visitors make decisions. Without that, even the best tool will produce a website that looks like hundreds of others.
If you’re an entrepreneur, your main resources are time and focus on your business. Figuring out references, prompts, DNS and bots is yet another job that takes you away from clients. I work with AI every day, so I combine the speed of AI with a designer’s experience: you get a turnkey website — from structure and copy to launch and SEO — without spending weeks on it.
AI is a great tool. But the result always depends on who’s holding it.

