How to Prompt AI to Build a Website: A Step-by-Step Workflow
AI can take a website from blank page to working draft in an afternoon, but only if you run it like a project instead of a wish. This guide breaks the job into seven stages and gives you a tested prompt for each. It works with Grok and with most other capable chat models.
What you’ll end up with: a sitemap, page outlines, written copy, simple responsive HTML/CSS, and a pre-launch checklist. What you still need: a domain, hosting (static hosts like Netlify or Cloudflare Pages work well), and your own judgment.
Stage 1: Define the goal before you prompt
AI is fast at producing pages and slow at knowing why they exist. Write down, in a sentence or two:
- Who the site is for.
- The one action you want visitors to take (call, buy, subscribe, book).
- What makes you different from the three competitors that show up when you search.
Then let AI help you sharpen it:
You are a website strategist for small businesses.
I'm building a site for [business] serving [audience] in [location].
The main action I want visitors to take is [action].
Ask me up to 10 questions that would change how you'd structure
this site. Ask them one group at a time, not all at once.
Answering these questions is the most valuable ten minutes of the whole project. Save your answers in a document; you’ll paste them as context in every later stage.
Stage 2: Generate the sitemap
Using the answers below, propose a sitemap for a small website.
Context: [paste your answers]
Format: a nested list of pages. For each page give: URL slug,
the search intent it serves, the main H1, and one sentence on
why the page needs to exist.
Constraints: no more than 12 pages for launch. No pages that
exist only to target a keyword; every page must help a visitor.
That last constraint matters. Search engines and ad networks such as AdSense penalize thin “doorway” pages. Ask the model to merge any pages that overlap.
Stage 3: Outline each page
Work one page at a time. Outlines are cheap to change; finished copy isn’t.
You are a UX writer. Outline the [page name] page.
Context: [business answers] + [this page's purpose from the sitemap]
Format: H1, then H2 sections in order. Under each H2, 2–4 bullets
describing what the section must say and what proof supports it
(testimonial, number, photo, guarantee).
Constraints: one H1 only. The first screen must state who this is
for and what to do next.
Read the outline as a visitor would. Is the next step obvious? Is there proof for every claim? Fix the outline before moving on.
Stage 4: Write the copy
Write the copy for this outline: [paste outline]
Voice: match this sample of my writing: [paste 2–3 paragraphs]
Format: Markdown with the exact headings from the outline.
Constraints: short paragraphs (max 3 sentences), plain words,
no claims I haven't given you. Where proof is needed and I
haven't supplied it, write [NEED PROOF: description] instead
of inventing it.
The [NEED PROOF] instruction is the single most useful line in this guide. It stops the model from inventing testimonials, statistics, or awards, which can mislead visitors and get you into real trouble.
Stage 5: Generate the code
For a small site, plain HTML and CSS are faster, cheaper to host, and easier to maintain than a heavy framework. Ask for exactly that:
You are a front-end developer who values accessibility and speed.
Turn this page copy into a single HTML file with embedded CSS.
Copy: [paste]
Requirements:
- Semantic HTML5 (header, nav, main, section, footer)
- One <h1>; headings in order with no skipped levels
- Mobile-first responsive CSS, no frameworks, no external fonts
- A <title> under 60 characters and a meta description under 155
- All images get descriptive alt text placeholders
- Color contrast meeting WCAG AA
- No JavaScript unless a feature requires it
Return the full file, then a short list of anything you assumed.
Open the file in a browser, resize the window, and click everything. When something breaks, paste the relevant code and describe what you see: “On a 375px screen the nav overlaps the logo.” Specific bug reports get specific fixes.
If you’re using an agent tool that can create and edit files directly (for example, Grok Bot works on its own cloud computer), you can give the same requirements as a task and review the result. The prompting principles don’t change. See Grok vs Grok Bot.
Stage 6: SEO and quality pass
AI is a good second pair of eyes. Paste each finished page and run:
Review this page as an SEO and accessibility auditor.
[paste HTML]
Check: title and meta description length and uniqueness, heading
order, internal links to other pages on my site [list URLs],
image alt text, readability, and any claim that lacks support.
Format: a table with Issue | Why it matters | Exact fix.
Do not rewrite the page; only list issues.
Then verify independently: run the page through a free tool like Google’s PageSpeed Insights and check it on a real phone.
Stage 7: Launch checklist
- Every page has a unique title, meta description, and one H1.
- Contact details are correct and consistent everywhere.
- Privacy policy and terms pages exist (required for ad networks and most analytics).
- Every
[NEED PROOF]placeholder has been replaced with something real or removed. - Forms actually deliver to your inbox. Test them.
- A sitemap.xml and robots.txt are in place, and the site is submitted in Google Search Console.
- You’ve read every word yourself.
Common mistakes
Asking for the whole site in one prompt. You get something that looks finished and is shallow everywhere. Work in stages.
Letting AI invent facts. Testimonials, years in business, certifications: if you didn’t supply it, it shouldn’t appear.
Skipping the outline. Rewriting copy is ten times slower than rewriting an outline.
Copying competitors. Asking AI to “rewrite this competitor’s page” produces derivative content that doesn’t rank and may infringe copyright. Ask instead what visitors need that competitors are missing.
Never iterating after launch. Check which pages get visits and which get actions; then use AI to draft improvements for the weakest pages.
Templates to save
All seven prompts above are in the Prompt Library under “Websites,” and you can customize any of them in the prompt builder. For deeper dives, see the websites workflow hub.