ChatGPT Website Builder Guide: Prompts, Steps, and Limits (2026)

ChatGPT can act as a website builder in two ways: generate complete HTML, CSS, and JavaScript in chat that you host yourself, or build and host a site for you through ChatGPT Sites. The first works on any plan, including Free. The second requires a qualifying paid plan and comes with hard limits you should know before you start.

Here are the two paths, and this guide covers both step by step:

1. Path 1: Generate the site in chat. You prompt ChatGPT for the code, preview it, refine it, and publish the files yourself on GitHub Pages, Netlify, or any host. Works on every plan. You own every file.
2. Path 2: ChatGPT Sites. A public beta inside ChatGPT Work that generates and hosts the site. Paid plans only (no Free or Go), not available in the EEA, Switzerland, or the UK at launch, commerce is banned, and usage is metered.

This guide gives you six copy-paste prompt templates for Path 1, the setup steps and a full limits table for Path 2, the mistakes that waste the most time, and an honest section on when a dedicated AI website builder is the better tool.

Can you use ChatGPT as a website builder?

Yes, with one important caveat: ChatGPT is a conversation, not a canvas. A traditional website builder shows you the page while you edit it. ChatGPT gives you either code (Path 1) or a hosted preview link (Path 2), and you steer everything through text. That changes how you have to work, and it is why prompts matter so much in this workflow. If you are still deciding whether ChatGPT can produce something you would actually publish, we tested that question directly in Can ChatGPT build a website?

The short version of what each path is good for:

• Path 1 (code in chat) suits landing pages, portfolios, local business sites, and event pages: anything that fits in a handful of static files. It costs nothing beyond your existing plan, and the output is portable to any host.
• Path 2 (ChatGPT Sites) suits internal dashboards, project trackers, prototypes, and lightweight apps for teams already on ChatGPT Work plans. It removes the hosting step but adds plan, region, runtime, and commerce restrictions.

Path 1: How do you generate a website in ChatGPT chat?

This is the universal method. It works on Free, Plus, Pro, and every business plan, because it only asks ChatGPT to do what it is best at: write code and copy from a precise brief. The quality of the result tracks the quality of your prompts almost one to one, so each step below includes a template you can paste and fill in.

Step 1: Write a structured brief prompt

Do not open with "make me a website." A strong brief names six things: the business, the audience, the single action visitors should take, the sections, the style, and the technical constraints. The constraints are the part most people skip, and they are what make the output deployable instead of a fragment.

Act as a senior web designer. I need a one-page website for [business name],
a [business type] in [city]. Audience: [who visits the site and what they
want]. The one action visitors should take: [call / book / email / buy].

Sections: hero with headline and CTA button, services (3 cards), about,
testimonials, contact with phone number and address.

Style: [clean and minimal / warm and friendly / bold and premium].
Colors: [hex codes, or "choose a palette that fits the business"].
Fonts: pick a heading and body pairing from Google Fonts.

Technical requirements: one single index.html file with embedded CSS and
vanilla JavaScript. Mobile-first responsive layout. Semantic HTML. No
frameworks, no build step, no external dependencies except Google Fonts.
Include a meta title and meta description. Output the complete file.

Every bracket is a decision only you can make. The more concrete you are ("plumber in Houston, visitors want emergency repair, the action is a phone call"), the less generic the result.

Step 2: Approve the structure before any code

For anything beyond a simple page, add a checkpoint between the brief and the code. Fixing structure in plain text takes seconds; fixing it after 400 lines of HTML exist means regenerating everything.

Before writing any code, propose the page structure. List every section in
order. For each section give: the headline, what it contains, and one line on
what it moves the visitor toward. Flag anything in my brief that conflicts
with the goal of getting visitors to [primary action]. Wait for my approval
before generating code.

Read the proposal like a skeptic. If the "About" section sits above the services, or the pricing is missing, say so now. One round of structure edits here routinely saves three rounds of code edits later.

Step 3: Generate the code and preview it

Approve the structure and ChatGPT writes the file. To see it rendered, save the output as index.html and open it in your browser, or paste it into an online editor with a live preview pane so you can watch changes as you iterate. This is the moment Path 1's main weakness shows: ChatGPT cannot see its own output, so you are the rendering engine. Check the page on a phone-width window before moving on.

Step 4: Rewrite the copy with a dedicated prompt

First-pass AI copy is grammatically perfect and completely forgettable: "Welcome to our website. We offer solutions." Run a second pass that bans the filler explicitly:

Rewrite all the text on this website. Business: [name], we [what you do]
for [audience]. Tone: [plain and confident / warm / premium].

Rules:
- Headline under 10 words that names the visitor's outcome, not our service.
- Subheadline answers "what is this and who is it for" in one sentence.
- Every section heading is specific ("Emergency repairs in under 2 hours"),
  never generic ("Our Services").
- CTA button text is an action ("Book a repair"), never "Submit" or
  "Learn more".
- Banned words: solutions, passionate, cutting-edge, seamless, elevate.

Give me 3 headline options first, then the full copy after I pick one.

Step 5: Refine the visual design with numbered instructions

Vague design feedback ("make it look nicer") produces random changes. Numbered, measurable instructions produce controlled ones. This template fixes the five issues that make AI-generated pages look amateur: cramped spacing, too many colors, small body text, competing buttons, and poor contrast.

Refine the design without changing the content or the section order:
1. Section padding: at least 96px top and bottom on desktop, 48px on mobile.
2. Reduce the palette to one background, one text, and one accent color.
   Accent: [hex, or "keep the current accent"].
3. Body text 18px with 1.7 line height. Headings noticeably larger with
   tighter line height.
4. Exactly one primary button style on the whole page. Every other link is
   plain text.
5. Check every text/background pair for WCAG AA contrast and fix failures.
Return the complete updated file.

Step 6: Prepare for launch, then host the files

The site works; now make it findable and put it on the internet. This prompt handles the SEO basics and turns ChatGPT into your deployment guide:

The site is finished. Prepare it for launch:
1. Write a unique meta title (under 60 characters) and meta description
   (under 155 characters) that naturally include the phrase
   "[target keyword]".
2. Add Open Graph tags and descriptive alt text for every image.
3. Remove unused CSS and stray comments.
4. Then give me exact numbered steps to publish this file on
   [GitHub Pages / Netlify / Cloudflare Pages] with the custom domain
   [yourdomain.com], assuming I have never deployed a website before.

Hosting a single static file is a solved problem: GitHub Pages, Netlify, and Cloudflare Pages all publish it in minutes, and ChatGPT's step-by-step instructions for each are reliably accurate. The part ChatGPT cannot do for you is press the buttons: the deploy, the DNS records, and the SSL check are yours.

Path 2: How does ChatGPT Sites work?

ChatGPT Sites, in public beta since its launch inside ChatGPT Work, removes the hosting step entirely: ChatGPT generates the site, hosts it on OpenAI's infrastructure, and gives you a URL. It is aimed at dashboards, trackers, internal portals, prototypes, and lightweight apps rather than public marketing sites.

Who qualifies

• Plan: paid ChatGPT plans only. Free and Go are excluded. Pro, Pro Lite, Enterprise, and Edu received Sites first; Plus and Business followed.
• Region: not available in the EEA, Switzerland, or the United Kingdom at launch.
• Workspace settings: admins control who can create and publish Sites. In Enterprise workspaces, publishing to the public internet is off by default until an admin enables it.

The steps

1. Open Work or Codex mode in ChatGPT on the web or in the desktop app (Sites is not in the ChatGPT Classic app).
2. Describe the site, including the word "website" or an explicit @Sites mention, plus the audience, purpose, and any files, data, or links ChatGPT should use.
3. Review the private preview ChatGPT generates, and iterate through chat until it behaves the way you want.
4. Save a version before deploying. Every deployment URL is a production URL, so save and review a version first if the site is already live.
5. Set the audience and publish: owner only, selected people, the whole workspace, or (where enabled) anyone on the internet.
6. Optionally connect a custom domain you already own by adding the DNS records Sites provides. Sites does not register domains, and custom domains are not available in Enterprise workspaces at launch.

The limits, in one table

These are the constraints that decide whether Sites fits your project. Most of them come straight from OpenAI's own documentation.

If those limits rule Sites out for your project, we compared the hosted alternatives, including options that support commerce and EU users, in ChatGPT Sites alternatives for 2026.

Common mistakes when building with ChatGPT

These five mistakes account for most of the frustration people report with both paths.

1. Cramming the whole site into one prompt

A single giant prompt forces ChatGPT to make hundreds of decisions at once, and it quietly cuts corners on the ones you did not specify. Work in phases: structure, code, copy, style, launch. That is exactly why the templates above are split.

2. Never checking the page at phone width

ChatGPT cannot see the rendered page, so it will confidently produce a hero that overlaps the menu on mobile and never know. Check a phone-width viewport after every significant change, not once at the end. More than half of your visitors will only ever see that version.

3. Pasting fragments instead of the whole file

When you ask for a fix and paste only the section that looks broken, ChatGPT loses the context that caused the bug and often "fixes" it by breaking something else. Always give it the full file and demand a full file back:

Something is broken: [describe exactly what you see, e.g. "on mobile the
menu overlaps the hero headline"]. Here is my complete current file:
[paste the full HTML]. Find the cause, explain it in one sentence, then
return the complete corrected file. Change nothing unrelated to this bug.

4. Publishing the first draft of the copy

AI copy reads fine and says nothing. Read every headline out loud and ask "would a competitor cross this out and write their own name in?" If yes, it is filler. Run the copy prompt from Step 4 and cut anything that survives on politeness alone.

5. Skipping the SEO pass entirely

A page without a meta title, meta description, and alt text is invisible to search engines on day one. The launch prompt in Step 6 covers the basics in one message. On ChatGPT Sites, check what the runtime exposes for meta tags before assuming you control them; with self-hosted files, you control everything.

When is a dedicated AI website builder the better tool?

Honest answer: ChatGPT is a superb code and copy generator, and for a developer comfortable with deploys, Path 1 is a legitimate way to ship a site. But four gaps show up as soon as the site matters commercially, and they are structural, not prompt-fixable:

• Design control. In ChatGPT you edit blind: describe, regenerate, save, reload, repeat. A dedicated builder renders the page live next to the chat, so "make the header darker" is a change you watch happen rather than a file you re-download.
• Hosting and publishing. Path 1 leaves deploys, domains, and SSL to you. Sites hosts for you but meters usage, blocks the EEA, Switzerland, and the UK, and treats every deploy as production. A builder with publishing built in does the whole loop with one button and lets you connect your own domain.
• SEO surface. Rankings need per-page meta tags, sitemaps, fast loads, and clean URLs on a domain you own. Self-hosting gives you that at the cost of manual work; Sites gives you a hosted URL with a runtime you do not fully control.
• Commerce. Sites bans payments outright. If the site exists to sell, Path 2 is disqualified before you write the first prompt.

Playcode sits exactly in that gap: the same conversational workflow you just learned, but the AI applies changes to a live preview as you talk, publishing is one click on your own domain, the SEO surface is yours, and you keep the full code, so nothing is locked in. The prompt skills from this guide transfer directly; the brief, copy, and style templates above work word for word. For a feature-by-feature comparison with Sites specifically, see ChatGPT Sites vs Playcode.

Frequently Asked Questions

Is ChatGPT a website builder?

Not in the classic sense, but it can act as one in two ways. In any chat, ChatGPT can generate complete HTML, CSS, and JavaScript that you save and host yourself. Separately, ChatGPT Sites (a public beta inside ChatGPT Work) can generate and host websites for you, but only on qualifying paid plans and with hard limits: no commerce, a restricted runtime, and no availability in the EEA, Switzerland, or the UK at launch.

What is the best ChatGPT website builder prompt?

The best prompt is a structured brief, not a one-liner. Name the business, the audience, the single action visitors should take, the exact sections you want, the style with hex colors, and the technical constraints (a single index.html file, embedded CSS, mobile-first, no frameworks). A prompt with those six ingredients produces a usable site on the first pass; "make me a website" produces a generic draft you will rebuild anyway. The full template is in Step 1 above.

Can I build a website with ChatGPT on the Free plan?

You can generate the code on the Free plan: ChatGPT will write complete HTML, CSS, and JavaScript in chat. What the Free plan does not include is hosting, so you still publish the files yourself through GitHub Pages, Netlify, or another host. ChatGPT Sites, the hosted option, is not available on Free or Go plans.

What are the limits of ChatGPT Sites?

ChatGPT Sites is in public beta with hard limits: paid plans only, no availability in the EEA, Switzerland, or the UK at launch, no financial transactions or payment-card processing, a restricted runtime (D1 database and R2 file storage rather than arbitrary Node servers or Postgres), metered usage that follows the Codex usage structure, and every deployment URL is a production URL. OpenAI can also remove Sites that risk violating its policies.

Can ChatGPT Sites sell products or take payments?

No. OpenAI states that Sites must not enable financial transactions or process payment-card data, so online stores, checkouts, and paid bookings are off the table. If you need to sell anything, generate the code in chat and host it with a payment provider yourself, or use a dedicated AI website builder that supports commerce.

When should I use a dedicated AI website builder instead of ChatGPT?

Use a dedicated AI website builder when you want a live preview while you edit, hosting and a domain handled for you, full SEO control over meta tags and sitemaps, or commerce. ChatGPT excels at generating code and copy in conversation, but it does not show you the rendered page while you work, and ChatGPT Sites bans payments and is unavailable in several regions. A purpose-built tool like Playcode combines the conversational workflow with instant preview, publishing, and code ownership.