mr.freedom
AI

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.

Author: Artem Himich13 min read

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

ToolWhat it doesWho it suits
Claude CodeAn AI agent that writes and edits the website’s code in your folder, runs it and helps you publish itThose willing to learn a little and who want full control over the website
In-browser website generators (Lovable, Bolt, v0)Create a website from a text description right in the browserQuick prototypes and simple pages
Website builders with AI (Framer, Wix)Generate a website from the builder’s templates, then you edit visuallyThose who don’t want to touch code
Chat assistants (Claude, ChatGPT)Structure, copy, block ideas, checking for mistakesEveryone — it’s the first step in any approach
Figma and reference websites (Awwwards, Dribbble, Pinterest)Design and finding examples to followAnyone who wants a non-generic look
The main types of tools

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

ProsCons
Fast: the first screen can be built in hoursWithout experience, it’s easy to end up with a generic design
Cheaper than full developmentAI makes mistakes — you need to spot them and explain what’s wrong
Full control: the code and website are yoursLong sessions “eat” your subscription limits if you work chaotically
Changes are made in plain text, without a programmerStructure, copy and SEO are still on you
You can learn as you goA business owner’s time costs money too

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”.

PromptWebsite structure and 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:

PromptStarting the project
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.

PromptOne website screen
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

PromptSEO 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

SituationWhat to choose
You’re curious to learn and have free timeDo it yourself — it’s useful experience
You need a simple page “just to have one”Do it yourself or use a builder with AI
The website must bring in enquiries and stand out from competitorsBetter to trust a specialist
You need many pages for SEO, case studies, a blogA specialist: structure is what matters here
Your time is worth more than the cost of developmentHire someone and focus on your business

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.

FAQ

You might want to ask.

Answers to common questions on the topic of this article. Didn’t find yours? Message me directly.

  • Yes. Tools like Claude Code write the code for you, and you direct them in plain text. But you’ll need an understanding of website structure and basic design principles, and a willingness to deal with the domain, hosting and request forms.

  • For a simple page, a website builder with AI or an in-browser generator will do. If you need full control, your own code and the ability to grow the website, an agent like Claude Code. Copy and structure are easy to prepare in a regular AI chat.

  • The model is trained on millions of websites, and with a vague request it produces the most typical solution. Uniqueness appears when you give it clear positioning, copy and references for every screen.

  • That way, bugs are fixed once in one component, finished blocks are reused on other pages, and short, precise tasks use fewer AI limits. You control the quality of every screen.

  • You’ll need an AI tool subscription, a domain and possibly paid hosting — prices depend on the services. The main “cost” is your time for learning, iterations and setup. If you’re comparing with turnkey development, see the article “How much does a website cost”.

Didn’t find your answer?

Message me directly — I’ll help you figure it out and answer your question.

Author

A web designer
who thinks like a marketer.

I know not only how to make things look good, but also what makes people interested, builds trust and gets them to send a request.

Artem Himich — web designer and website developer

web designer

Artem Himich

I came to design through marketing. Courses in paid ads, e-commerce and online business taught me the main thing: how to capture attention and how people make decisions.

For over 8 years I’ve been working as a freelancer, and most clients come through referrals. Because I put 100% into every project — something few people on the market do.

More about me
Freedom is bringing the boldest ideas to life without compromise.

Freedom is my core value, and discipline and responsibility are what make it possible.

Bold ideas used to be cut down by the limits of website builders or misunderstandings with developers. Now, thanks to AI, I run the whole process myself — from concept to code. And your project gets that freedom.

My clients:

  • Маркетинг 0–100
  • Brabus
  • Big Money University
  • 50+ more

Shall we discuss a website that works for your business?

Leave your contact to get recommendations for your website and a rough estimate of the cost and timeline. I reply personally, and the consultation is free.

Artem Himich

Artem Himich

Web designer

I’ll reply personally and help you figure out where to start.

Or reach me via your preferred messenger:

Preferred way to reach you