How to Make a Website with Claude Code & AI (Step-by-Step 2026)
To make a website with Claude Code (or Codex): install the tool, create an empty project folder, and describe your website in one detailed prompt — business name, pages, sections, colours and contact details. Ask the AI to plan first, then build. Open the site in your browser, request changes one section at a time, test on mobile, and finally deploy it free to Cloudflare Pages, Netlify or Vercel and connect your domain. A simple business site can be live in a few hours.
📑 Table of contents
What you need
- An AI coding agent: Claude Code or OpenAI Codex (paid plan).
- Node.js and Git installed on your computer (both free).
- A free GitHub account to store your code.
- Your content: business name, services, prices, photos, phone/WhatsApp, address and logo.
Step 1: Plan the website before you prompt
The AI can only build what you clearly describe. Spend 10 minutes writing down:
- Pages: Home, About, Services, Contact (start with 3–5)
- Sections on the home page: hero, services, why choose us, reviews, FAQ, contact
- Style: colours, fonts, 2–3 websites you like
- Main goal: calls, WhatsApp messages, bookings or sales
Step 2: Set up your project
- Create an empty folder, for example
my-bakery-site. - Open it in the terminal (or in the Claude desktop app’s Code tab, or VS Code).
- Start the agent: type
claudeorcodex. - Put your photos and logo in the folder so the AI can use them.
Step 3: The first prompt (copy and adapt)
Build a fast, modern, mobile-friendly website for “Sweet Crumbs Bakery” in Okara, Pakistan. Pages: Home, Menu, About, Contact. Home sections: hero with an “Order on WhatsApp” button (wa.me/923000000000), best sellers with prices in PKR, why choose us, customer reviews, FAQ and a map. Colours: warm cream and chocolate brown. Use Astro (or plain HTML/CSS). Add SEO titles, meta descriptions and alt text. Plan the structure first and wait for my approval before writing code.
Read the plan, correct anything wrong, then say “go ahead”. When it finishes, ask: “Start the site and give me the local link.” Open it in your browser.
Step 4: Improve it section by section
Now refine. Specific feedback gets specific results:
| Instead of… | Say… |
|---|---|
| “Make it better” | “Make the hero headline bigger and add a background photo of our cakes” |
| “Fix mobile” | “On mobile, the menu cards overflow — make them one column with 16px padding” |
| “Change colours” | “Use #5B3A29 for buttons and #FFF6E9 for the background” |
| “Add SEO” | “Add LocalBusiness schema with our address and opening hours” |
After each working change, ask the agent to commit to Git. If something breaks, you can always go back.
Step 5: Test like a client
- Check every page on a phone-sized screen
- Click every button and link — especially WhatsApp and phone
- Submit the contact form and confirm you receive it
- Run Google PageSpeed Insights and ask the AI to fix what it reports
- Check spelling, prices and contact details yourself — AI can invent details
Step 6: Put the website live
- Push the code to GitHub (ask the agent: “create a GitHub repo and push this project”).
- Deploy for free on Cloudflare Pages, Netlify or Vercel by connecting the GitHub repo. Each push then updates the live site automatically.
- Connect your domain — buy a .com or .pk domain and point it to your host using the DNS records they give you.
- Submit to Google Search Console and add your sitemap so Google can find the site.
Prefer cheap shared hosting like Hostinger? Ask the AI to create a production build and upload the output folder through the hosting file manager.
Common mistakes to avoid
- Writing one-line prompts and expecting a perfect site
- Accepting changes without opening the site to check
- Building everything at once instead of section by section
- Using random images from Google (use your own or free-licence photos)
- Skipping Git — then losing a working version
Learn it properly in Okara
At IDT Okara, the Vibe Coding course walks you through this full workflow with real client-style projects: planning, prompting, reviewing code, SEO, deployment and getting your first paid orders. Prefer WordPress? See our WordPress developer guide.
Read next: What Is Vibe Coding?
Frequently asked questions
Can I make a website with AI without coding?
Yes. With Claude Code or Codex you can describe a website in plain English and the AI writes the code. Basic knowledge of HTML and how to run a project helps you fix problems and review the result, but you can get a simple site live with no coding background.
Which is better for websites: Claude Code, Codex or a WordPress builder?
Claude Code and Codex give you a fast, custom-coded site you fully own. WordPress is better if the client wants to edit content themselves through a dashboard. Many freelancers use AI agents to build custom WordPress themes too.
How much does it cost to build a website with AI?
The AI tool costs around the price of a Claude Pro or ChatGPT Plus subscription per month. Hosting can be free on Cloudflare Pages, Netlify or Vercel for small sites. A .com domain costs roughly a few thousand rupees per year, and .pk domains are also available.
How long does it take to build a website with Claude Code?
A simple 1–5 page business website can be built and launched in a few hours once you know the workflow. More complex sites with bookings, payments or dashboards take longer, mainly for testing.
Will an AI-made website rank on Google?
It can, if you ask for proper SEO basics — unique titles and meta descriptions, headings, fast loading, mobile-friendly design, alt text and good content — and then submit it to Google Search Console.
Can I sell AI-made websites to clients?
Yes, many freelancers do. Clients pay for a fast, working, good-looking website. Make sure you test everything, use licensed images and fonts, and can maintain the site after delivery.
Build your first AI-made website with a trainer beside you
In IDT Okara’s Vibe Coding course you build and launch real websites with Claude Code and Codex, learn to deploy on your own domain, and start taking client work. Small batches — apply online in 5 minutes.