Build a website with AI: a practical path for small businesses
How to build a website with AI the right way: purpose, content, design, the right route, Arabic and RTL, SEO, speed, privacy, hosting and upkeep.
Published 10 min read
Yes, you can build a website with AI. An AI website builder will give you a first version in minutes, and with an agentic coding tool you can build a fully custom site in days. The page that appears on screen is the easy part. What makes a website work for a business is everything around it: a clear job, real content, a design that looks like you, two languages done properly, and the quiet essentials of speed, privacy, security and upkeep.
I design brands and interfaces, and I built this bilingual portfolio site myself, with Claude Code as my tool. This guide is the path I would give a small business owner or a fellow designer: what to decide first, which of the three routes fits, how to handle Arabic and English, and the checks to finish before you share the link. For the bigger picture behind building with AI, read what vibe coding is.
1. Decide what the site must do
Before any tool, answer five questions on one page:
- Who is it for, and what should they do? Call, book, order, send a brief, download a menu.
- Which languages, and which comes first?
- Which pages does the first version need? Usually fewer than you think.
- Who updates it, and how often? A café that changes its menu every week needs an editor it can use. A studio portfolio may change a few times a year.
- What does it need beyond pages? Forms, bookings, payments, logins.
The last answer decides the route more than anything else. Pages and a contact form work on any route. Logins, stored customer data or payments mean you are building an app, and the risks change with it.
2. Content and structure before the first prompt
Write a simple sitemap: the pages, and the one action each page should lead to. Then write the real text for the main pages, in each language. AI is a good tool for drafting and tightening copy, but you check every fact: prices, opening hours, services, names.
Gather real photos of your products, your place and your team. Stock and generated images make your site look like everyone else's.
3. Design direction: a designer's eye still matters
Every AI builder produces a competent average: a large hero image, three cards, a strip of testimonials. That is fine for a test and forgettable for a brand. Give the tool a direction instead:
- Your logo, colours and fonts, following your brand rules if you have them.
- Two or three sites you admire, and exactly what you like about each.
- The feeling you want: calm and premium, warm and local, sharp and technical.
- Arabic type chosen on purpose, not the builder's default. My guide to choosing brand fonts covers pairing Arabic and Latin.
Put all of this into the first prompt, the way you would brief a designer. For example: "A one-page website for a specialty coffee roastery in Cairo. Arabic first, right to left, with an English version at its own address. Sections: our story, the coffees, wholesale enquiries, location and opening hours. Warm and calm, lots of space, our logo and two brand colours only. Use the text and photos I attach. Don't invent reviews, prices or awards."
Then judge the result as a designer would: hierarchy, spacing, contrast, text size on a phone, and whether the Arabic looks designed or merely flipped.
4. Choose your route
AI website builders: Wix, Framer, Durable and similar
Wix says you can "go from a prompt to a business-ready website", then keep editing with drag and drop. Framer's agent creates editable pages, sections, copy and visuals inside your project, with a CMS, hosting and SEO settings in the same place. Durable calls itself "the complete AI business builder" and adds tools such as bookings and a customer list for service businesses. Hosting is included in all three.
AI app builders: Lovable, Bolt and v0
These generate real code from a chat, often with a database and logins. They suit a site that is really an app: accounts, dashboards, custom logic.
Coding with an agent: Claude Code
You direct an agent inside your own project. You own every file and host wherever you like. This suits custom design, bilingual sites built exactly as designed, and sites that may grow into products.
| Route | Good for | What you own | Effort |
|---|---|---|---|
| AI website builder | Brochure sites, menus, portfolios, simple bookings | Your content and domain; the site lives on the platform | Low, the platform handles updates |
| AI app builder | Sites with logins, data or custom features | The code, if you sync it to GitHub | Medium, security is yours |
| Agentic coding tool | Custom design, products, full control | Everything | Higher, you maintain the code |
Which route, in one minute
- A menu, a portfolio, a services page with a contact form: an AI website builder.
- A booking system with customer accounts, or a members' area: an app builder, or an agentic tool if you want full control. Either way, plan the security checks.
- A site that must match a custom design exactly, or may grow into a product: an agentic coding tool, or a designer who works with one.
I compare the app builders and agentic tools in detail in Claude Code vs Cursor vs Lovable vs Bolt vs v0.
5. Arabic and English, done properly
A bilingual site is two sites that share a design system, not one site with a translate button.
- Give each language its own address, such as
/arand/en. Google recommends "using different URLs for each language version of a page rather than using cookies or browser settings", and advises against redirecting visitors automatically by guessed language. - Set language and direction in the page itself:
lang="ar"anddir="rtl"on thehtmlelement. The W3C advises against using CSS to set the base direction. - Link the versions with hreflang. In Google's words, "Each language version must list itself as well as all other language versions."
- Mirror the layout, not everything. Spacing, navigation and arrows flip. Logos, photos and phone numbers don't.
- Choose your digits once. Western digits (0 to 9) or Arabic-Indic digits, used the same way on every page.
- Check mixed text: English brand names inside Arabic sentences, prices, dates and forms.
Builders differ here. Wix Multilingual supports Arabic and right-to-left text, but its help centre notes that in some apps, such as Stores, "the writing direction applies to all languages". Framer has a Reverse layout setting that flips stacks and grids for right-to-left locales, while icons and padding need manual work. Test your real pages before you commit. I go deeper in my guide to Arabic RTL UI design, and the SkillUp MENA website is a bilingual site I designed and built.
6. SEO basics
- A clear title and meta description for every page, in each language, written for that reader.
- One main heading per page, logical subheadings, and links that say where they go.
- Alt text for meaningful images, and real text instead of text baked into images.
- Clean addresses, a sitemap, and the site verified in Google Search Console.
- The same business name, address and phone everywhere, including your Google Business Profile if you serve customers locally.
On AI content, Google's guidance is clear: using generative AI "to generate many pages without adding value for users may violate Google's spam policy", and the same review applies to titles, descriptions and alt text. Check what the tool wrote.
7. Speed and accessibility
Google's Core Web Vitals give clear targets, as published on web.dev: the main content should load within 2.5 seconds, the page should respond to a tap within 200 milliseconds, and layout shift should stay at 0.1 or less, met by at least three in every four page loads. In practice: compress images and size them for the screen, load only the font weights you use (Arabic fonts can be heavy), keep third-party scripts few, and test on an ordinary phone over a slow connection.
For accessibility, the W3C's Web Content Accessibility Guidelines (WCAG 2.2) are the reference. The basics: enough colour contrast, alt text, a visible label on every form field, a site you can use with a keyboard alone, and the correct language set on each page so screen readers pronounce it properly.
8. Forms, privacy and cookie consent
Forms are where a site meets real people, so treat them carefully. Ask only for what you need, add spam protection, send each submission to an inbox and keep a copy, show a clear confirmation, and test the form in both languages.
Publish a privacy page that says what you collect, why, where it is stored and how to contact you. If you use analytics, ask first. Under EU rules, cookies that are not strictly necessary, which usually includes analytics, need consent before they are set. Saudi Arabia has its Personal Data Protection Law, and Egypt has Law 151 of 2020. The safe habit is the same everywhere: load analytics only after the visitor agrees, and make "no" as easy as "yes". I am a designer, not a lawyer, so check the official guidance for your market.
9. Hosting, domain and security basics
- Own your domain. Register it in the business's name, on an account you control, with auto-renew on. Never let a supplier hold it for you.
- Turn on two-step login for the builder or host, the domain registrar and your email.
- Keep secrets out of the code. API keys for forms, maps or email belong in the host's environment settings, never in front-end code or a public repository.
- Use HTTPS everywhere. Modern builders and hosts set it up for you.
- Review access. Remove people who no longer work with you.
- Keep backups of your content and any form data, and know how to restore them. If you write your own code, keep it in a private Git repository.
10. Keep it alive
A website is never finished. Once a month, send a test through every form, update prices, hours and menus, look at Search Console for errors, apply platform or package updates, and check renewal dates for the domain and plan. A short monthly check keeps a small site healthy.
From my work: this site
This portfolio is my own example. I designed it and built it with Claude Code as my tool. What you can see from the outside is what this guide describes: Arabic and English, each at its own address, a real right-to-left layout in Arabic rather than a flipped English page, pages built to load fast, and analytics that wait until a visitor says yes. The agentic route fits a site like this, where every detail has to match the design in both directions and the code stays fully in the owner's hands.
Conclusion
Building a website with AI is fast. Building a good one still takes the same decisions as before: a clear job, real content, a considered design, proper Arabic and English, and care for speed, privacy and security. Pick the route that fits the job, own your domain and your content, and check everything the tool produces before your customers see it.
If you want a bilingual website designed with care and built properly, tell me about your project.
Questions people ask
Can AI build a whole website for me?
It can produce a first version in minutes, with pages, text and images. You still have to decide what the site is for, give it your real content, judge the design, connect the domain, check privacy and keep it updated. AI speeds up the making; the decisions and the checking stay with you.
What is the best AI website builder?
It depends on the job. For a brochure site, a menu or a portfolio, a website builder such as Wix or Framer, with hosting included, is often enough. If the site needs logins, user data or custom logic, an app builder or an agentic coding tool such as Claude Code fits better. If you need Arabic, test right-to-left support before you commit.
Are websites built with AI bad for SEO?
Not in themselves. Google says that using generative AI to produce many pages without adding value for users may break its spam policies, so the risk is thin, unchecked content, not the tool. Write real content for real readers, and check the titles, descriptions and image alt text the tool generates.
How do I make a website in Arabic and English?
Give each language its own address, such as /ar and /en, and set the language and direction on each page, with dir="rtl" for Arabic. Link the versions to each other with hreflang. Write each language for its reader rather than publishing a raw machine translation, and check every page in both directions.
Do I need a cookie banner on a small business website?
If you use analytics or advertising tools that set cookies, in many places you do. Under EU rules, cookies that are not strictly necessary, which usually includes analytics, need consent before they are set. The simplest safe habit is to load analytics only after the visitor agrees, and to check the rules where your visitors live.
