To build a website with AI, write a short brief (what you sell, who it's for, which pages you need and the one action visitors should take), pick one to three reference sites for the look, and let the AI produce a first version. Then refine it in focused passes, swap placeholders for your real photos and facts, check titles and phone layouts, export the code and publish it on a host you control. The AI does the layout and the first draft of the copy. You supply the facts and the judgment.
The running example is a two-therapist physical therapy clinic in Denver that wants more first-assessment bookings. Swap in your own business as you read.
Before you start: gather five things
Most delays on an AI-built site come from information the AI cannot know. Collect it first:
- Facts: services, prices, hours, address, service area, phone, email.
- Proof: real reviews you have permission to quote, credentials, notable clients. Never let the AI invent these.
- Photos: your premises, your team, your work. Phone photos in good daylight beat stock.
- Logo: a PNG or SVG, ideally one version for light backgrounds and one for dark.
- Domain: bought, or at least shortlisted.
Step 1: Write a one-paragraph brief
The brief is what makes a site sound like yours. Cover the offer, the audience, the pages and the action:
A physical therapy clinic in Denver run by two therapists. We treat back pain, sports injuries and rehab after surgery for adults. Most patients are office workers and weekend runners who find us on Google. Pages: Home, Treatments, About, Prices, Contact. The main action is booking a first assessment through our existing booking system. Tone: calm and expert, no hard sell.
Notice what isn't there: colors, fonts, "modern", "clean". Words are a poor way to describe a look, because "clean" covers a thousand different designs. That job belongs to references. For more brief patterns by business type, see 20 AI website builder prompts that work.
Step 2: Choose references for the look
A reference is a screenshot or link of a website whose design you like. It gives the AI concrete values (typefaces, type sizes, palette, spacing, button shapes) where adjectives give it nothing.
For the clinic, the main reference might be a calm, well-spaced healthcare site, with a second from a fitness brand whose headings feel confident. Judge candidates on type, density (airy or packed), how color is used, and the style of buttons, cards and navigation. Use one main reference and at most two supporting ones; each extra one gives the AI more to average, and averages look bland.
In FNJ's AI website builder, a new site needs at least one reference: a screenshot, the link of a public website, or your project's ZIP or folder, up to three per prompt. It takes the look only, never the reference's words, logos or images. If you already have brand files (design tokens, a stylesheet, a Tailwind config, a brand guide, a logo), drop in the project folder and it follows your brand exactly and places your real logo.
Step 3: Decide your pages before you build
Adding a page later is easy. Reorganizing navigation after you've polished copy on five pages is not.
| Business type | Pages that usually cover it |
|---|---|
| Clinic or practice | Home, Treatments, About, Prices, Contact |
| Restaurant or cafe | Home, Menu, Private Events, Visit |
| Consultant or freelancer | Home, Services, Work, About, Contact |
| Software product | Home, Features, Pricing, About, Changelog |
| Trades and home services | Home, Services, Areas Covered, Reviews, Contact |
Start with five pages or fewer. A small site where every page is finished beats a large one with thin pages. With FNJ a focused page list is also cheaper: one prompt is 1 credit and each page it builds is 1 more, so a complete five-page site refined over about ten prompts comes to roughly 15 credits. Plans are in the pricing section.
Step 4: Run the first build
Paste the brief, attach the references and start. FNJ's builder first plans a design system (pages, palette, typefaces, reusable styles), then builds each page section by section on a live canvas while you watch. Every page is laid out at three widths at once, desktop 1440px, tablet 810px and phone 390px, each with its own type sizes and layout.
Judge the first build on structure, not wording:
- Does the first screen answer "what is this, who is it for, what do I do next"?
- Is the main action visible without scrolling, and repeated near the bottom?
- Are sections in the order a visitor wants? For the clinic: what we treat, what a first visit involves, who we are, prices, reviews, book.
- Is anything missing, or said twice?
Fix structure first. Polishing copy in a section you're about to delete is wasted effort.
Step 5: Refine in passes
Edit in passes with one goal each, rather than one giant "fix everything" prompt:
- Structure. "Move the prices section above the team section." "Add a section that explains a first assessment in three steps."
- Copy. Feed in real facts: "Replace the hero headline with: Back pain and sports injuries, treated properly. Use our real prices: [assessment price], [follow-up price]." Then read every claim the AI wrote. It writes plausible sentences, not verified ones.
- Visuals. "Make the hero darker and the headline larger." "Use the accent color only on buttons."
- Phones. Look at the 390px phone layout and read each page the way a patient on a bus would. Long headlines, cramped buttons and wide tables are the usual problems.
For small fixes, select the element on the canvas and change its text, spacing, colors, layout or image directly. Each prompt can be undone from the chat while the editor is open, so try the bolder change and roll it back if it doesn't work.
Step 6: Replace placeholders with real material
FNJ has no stock-photo library. It leaves styled spaces for photos, and you can upload or replace an image anywhere. For the clinic, the shot list is short: the treatment room in daylight, each therapist at work, and the entrance from the street so first-time patients recognize it.
Then do a facts sweep: address, phone, hours, prices, every review and who it's from. Filler such as a patient count or "award-winning" comes out unless it's true and you can back it up.
Step 7: Set the SEO basics
A page can look finished and still be hard to find. Before you export, check:
- Each page has its own search title and description, written for what a patient would type ("Sports injury physical therapy in Denver", not "Treatments").
- One main heading per page, with section headings below it in order.
- The site's address is set, so sitemap.xml and robots.txt are generated.
- Open Graph tags are in place, so shared links show a proper preview card.
FNJ covers all four. Its exported code includes Open Graph and Twitter tags, plus a canonical link and structured data when you set them. Google's SEO Starter Guide covers the rest in plain language.
Step 8: Export the code
Export decides whether you own your site. FNJ offers three outputs:
- Next.js project: an App Router project with one route per page, plain CSS per breakpoint and Google Fonts, no Tailwind or component library. Pick this if a developer may extend the site.
- Static HTML: one HTML file per page plus one stylesheet. Pick this if you just want it online.
- Push to GitHub: the code goes to a branch of your own repository; your default branch is untouched until you merge.
Uploaded images are copied into the project, and there's no FNJ runtime, script or badge in the code, so the site keeps working if you stop using FNJ. What the code export contains has the details.
Step 9: Host it and connect your domain
FNJ doesn't host your site; you put it on a host in your own account. The common choices, as checked in September 2026:
| Host | Free tier | Good fit |
|---|---|---|
| Cloudflare Pages | No published bandwidth cap for static assets, 500 deploys a month, custom domains included | Most small business sites |
| Vercel Hobby | 100 GB fast data transfer a month, personal non-commercial use only; a business site needs Pro ($20 per seat) | Personal projects |
| Netlify | Credit-based, roughly 15 GB of bandwidth a month | Light-traffic sites |
| GitHub Pages | Static sites served from a repository | Simple static sites on your own domain |
With the static HTML export, Cloudflare Pages' direct upload lets you drag the folder into the dashboard; with a GitHub repository, connect it so each merge redeploys. Then add your domain in the host's dashboard, create the DNS records it asks for, and wait for HTTPS before you share the link.
Step 10: Launch-day checks
- Open every page on a real phone and tap every button: booking, phone and email links should go where they say.
- Send yourself the home page link in a message and check the preview card.
- Visit /sitemap.xml and /robots.txt on the live domain.
- Add the site to Google Search Console and submit the sitemap.
- Replacing an old site? Redirect each old URL to its new equivalent; the redirect map guide shows how.
Build yours with FNJ
With your brief, references and photos ready, steps 4 to 8 happen in one place: FNJ plans the design system, builds every page at three widths on a canvas you can edit, and hands you a Next.js or HTML project you host yourself. No AI account or API key is needed. It builds marketing websites, not web apps, so forms, booking and checkout stay with a dedicated tool you link from a button. Start your site in FNJ's AI website builder.
Frequently asked questions
How long does it take to build a website with AI?
The build itself happens while you watch. Most of the time goes into gathering facts and photos and refining the copy, so having your brief, references and images ready before you start saves the most time.
Do I need to know how to code to build a website with AI?
No. You describe the site, then edit it with prompts or by selecting elements on a visual canvas. Code only matters at export, and static HTML can be uploaded to a host by drag and drop.
Will an AI website builder copy my reference site?
FNJ's builder takes a reference's look (grid, typography, palette, spacing and component style) and never its words, logos or images. It does not rebuild the reference section for section, and the copy is written for your business.
Can a website built with AI rank on Google?
Yes, if the content is useful and the technical basics are in place: a unique title and description per page, a clear heading structure, a sitemap and fast pages. How a page was made matters less than whether it helps the person searching.