Web Design · Strategy & planning
The Best Prompt for Web Design
The best prompt for web design gives the model the same inputs a designer asks for in a kickoff: who the site is for, what it must achieve, and what constraints apply. This prompt then forces the work into a fixed sequence — strategy, sitemap, page-by-page layout, visual direction, responsive behaviour — so you get a design plan you can hand to a designer, a builder tool or a developer rather than a list of generic tips.
Complete Website Design Prompt
A structured brief that walks an AI model from business goals to sitemap, page layouts, visual direction and responsive rules.
- Works with
- ChatGPT, Claude, Gemini
- Difficulty
- Intermediate
- Complexity
- Multi-part reply
- Variables
- 7
- Version
- 1.0
Customize this prompt
Fill in what you know. Anything left blank stays as a [bracketed placeholder]. Nothing you type leaves your browser.
7 variables · fields marked * matter most
# Role You are a senior web designer and UX strategist. You make decisions from user needs and business goals first, visual style second. # Project - Website type: [Website type] - Business / organisation: [Business or organisation] - Industry: [Industry] - Primary audience: [Primary audience] - The one action the site must drive: [Primary action the site must drive] - Visual direction: [Visual direction] - Platform or build constraints: [Platform or constraints] # Task Produce a complete design plan for this website. Work through the sections below in order. Do not skip ahead, and keep every recommendation tied to the audience and the primary action above. 1. Strategy summary — in five sentences or fewer: who the site serves, what they need to believe before they act, and how the site will earn that. 2. Sitemap — a nested list of pages. For each page give its purpose in one line. Leave out any page you cannot justify. 3. Homepage layout — list the sections from top to bottom. For each: the job it does, the content it needs, and the call to action (if any). 4. Key page layouts — repeat the same treatment for the two most important pages after the homepage. 5. Visual direction — typography (heading and body pairing, with a fallback), a colour palette of five to seven roles with hex values and a contrast note, imagery style, and spacing and shape principles. 6. Responsive behaviour — what changes at mobile, tablet and desktop widths for navigation, the hero and any multi-column sections. 7. Accessibility and performance guardrails — the specific rules this design must follow. 8. Open questions — anything you had to assume, listed so I can confirm or correct it. # Constraints - Do not invent facts about the business. Where information is missing, state the assumption and mark it [ASSUMPTION]. - Prefer fewer pages and fewer sections. Every element must have a stated job. - Body text and interactive controls must be able to meet WCAG 2.2 AA contrast. - No lorem ipsum. Where copy is needed, write a short realistic draft and label it as a draft. # Output format Use the eight numbered headings above. Use nested lists for the sitemap and tables for the colour palette and the responsive rules. End with the open questions and nothing after them.
Use it when you are
- Planning a new marketing or small-business website before opening a design tool
- Turning a vague client request into a structured design brief
- Getting a second opinion on site structure before committing to a build
- Producing a starting plan to refine with a designer or a website builder
Why this prompt works
It starts from the kickoff questions, not the canvas
A model asked to "design a website" fills the gaps with averages. Supplying audience, the single primary action and the constraints up front gives it the same anchor points a designer collects in a first meeting, so layout and content decisions can be traced back to something you actually said.
The sequence mirrors how design work is really ordered
Strategy comes before the sitemap, the sitemap before page layouts, and layouts before colour. Fixing that order stops the model from leading with a palette and a mood, and it means each section can reuse decisions made in the one before it.
Every element has to justify itself
Asking for the job of each page and each homepage section, and telling the model to drop anything it cannot justify, pushes back against the padded, twelve-section homepages that generic prompts tend to produce.
Assumptions are surfaced instead of hidden
The [ASSUMPTION] marker and the closing list of open questions turn the model's guesses into a checklist. That makes the first response a draft you can correct in one follow-up message rather than something you have to audit line by line.
How to use it
- Fill in the website type, business, audience and the one primary action. These four fields drive most of the output, so be concrete.
- Add any hard constraints under Platform: the builder or framework, brand colours you must keep, existing content you cannot change.
- Paste the customised prompt into a new conversation so earlier context does not leak into the plan.
- Read the open questions at the end first. Answer them in a single reply and ask the model to revise the affected sections only.
- Ask for one section at a time to go deeper, for example: "Expand section 3 into a wireframe description with content for each block."
- Check the palette with a contrast checker and review the plan with whoever will build the site before you treat it as final.
AI model compatibility
| Model | Status | Notes |
|---|---|---|
| ChatGPT | Expected to work | If the reply stops partway through the eight sections, ask it to continue from the last completed heading rather than regenerating everything. |
| Claude | Expected to work | Anthropic's guidance recommends separating instructions from supplied material with XML-style tags. If you paste a long client brief, wrap it in <brief> tags below the Project section. |
| Gemini | Expected to work | Keep the numbered task list intact; Google's prompting guidance favours explicit, ordered instructions and a stated output format. |
“Expected to work” means the prompt uses plain, model-independent structure and has been reviewed for that — not that it has been run on that model. A model is marked Tested only when a test record is published below.
Worked example
Scenario: A two-clinic physiotherapy practice replacing an outdated brochure site.
# Role You are a senior web designer and UX strategist. You make decisions from user needs and business goals first, visual style second. # Project - Website type: Local business site - Business / organisation: Northside Physio, a two-clinic physiotherapy practice - Industry: Healthcare - Primary audience: Adults 30–60 recovering from sports and work injuries, mostly on mobile - The one action the site must drive: Book a first appointment online - Visual direction: Warm and approachable - Platform or build constraints: Webflow; keep the existing logo and teal brand colour # Task Produce a complete design plan for this website. Work through the sections below in order. Do not skip ahead, and keep every recommendation tied to the audience and the primary action above. 1. Strategy summary — in five sentences or fewer: who the site serves, what they need to believe before they act, and how the site will earn that. 2. Sitemap — a nested list of pages. For each page give its purpose in one line. Leave out any page you cannot justify. 3. Homepage layout — list the sections from top to bottom. For each: the job it does, the content it needs, and the call to action (if any). 4. Key page layouts — repeat the same treatment for the two most important pages after the homepage. 5. Visual direction — typography (heading and body pairing, with a fallback), a colour palette of five to seven roles with hex values and a contrast note, imagery style, and spacing and shape principles. 6. Responsive behaviour — what changes at mobile, tablet and desktop widths for navigation, the hero and any multi-column sections. 7. Accessibility and performance guardrails — the specific rules this design must follow. 8. Open questions — anything you had to assume, listed so I can confirm or correct it. # Constraints - Do not invent facts about the business. Where information is missing, state the assumption and mark it [ASSUMPTION]. - Prefer fewer pages and fewer sections. Every element must have a stated job. - Body text and interactive controls must be able to meet WCAG 2.2 AA contrast. - No lorem ipsum. Where copy is needed, write a short realistic draft and label it as a draft. # Output format Use the eight numbered headings above. Use nested lists for the sitemap and tables for the colour palette and the responsive rules. End with the open questions and nothing after them.
What a good response should contain
- A strategy summary that names trust and ease of booking as the things the site must establish
- A short sitemap (roughly five to eight pages) with a one-line purpose for each, and booking reachable from every page
- A homepage section list where the booking call to action appears near the top and again after proof points
- A palette table built around the existing teal with contrast notes, and a responsive table covering navigation and the hero
- Open questions about things it could not know, such as insurance coverage, practitioner bios and the booking system in use
This is an illustrative scenario showing how to fill in the prompt and what to look for. It is not a recorded model output. Recorded outputs will be published here once this prompt has a test record.
Testing and editorial review
Status: Untested. Reviewed for structure and clarity by the editorial team. No recorded model test yet.
No test record has been published for this prompt yet. When it is tested, this section will show the model and version, the date, the inputs, the actual output and notes against our seven-point rubric. We do not publish numerical scores.
| Author | TheBestPromptFor Editorial Team — The editorial team writes, reviews and maintains the prompts and guides on TheBestPromptFor. Prompts are drafted with AI assistance and reviewed against published editorial standards. |
|---|---|
| Published | November 15, 2026 |
| Last reviewed | November 15, 2026 |
| Last tested | Not yet tested |
| Version history |
|
Limitations and things to check
- The output is a written plan, not a visual design. You still need a designer or a design tool to produce layouts.
- Hex values and font pairings are suggestions. Verify contrast ratios and font licensing yourself.
- The model does not know your analytics, customers or competitors unless you paste that information in.
- Long responses can be cut off. If a section is missing, ask the model to continue from that heading.
Alternative prompts
Web Design
Website Redesign Prompt
Diagnoses an existing site from the evidence you supply, then plans what to keep, merge or remove, the new structure, a URL map and a phased rollout.
- ChatGPT
- Claude
- Gemini
Web Design
Landing Page Design Prompt
Plans a single-goal landing page: message match with the traffic source, section order, first-screen spec, form design and draft copy using only your real proof.
- ChatGPT
- Claude
- Gemini
Web Design
Wireframing Prompt
Produces a low-fidelity wireframe of one screen as a text diagram and block spec, with content priority, states and annotations and no visual styling.
- ChatGPT
- Claude
- Gemini
Web Design
Design System Prompt
Drafts design-system foundations: tiered design tokens, type and spacing scales, and component specs with variants, states and accessibility notes.
- ChatGPT
- Claude
- Gemini
Related resources
Guide
How to Write a Good AI Prompt
The five parts of a complete prompt (goal, context, task, constraints, output format), with a worked rewrite and a pre-send checklist.
Guide
How to Improve AI Responses
A diagnostic approach to weak AI answers: name the fault, trace it to the gap in your prompt, then follow up precisely or rewrite and start again.
Frequently asked questions
Can an AI model design a complete website from this prompt?
It can produce the plan a design is built from: structure, section order, content needs and visual direction. Turning that plan into finished layouts still takes a designer, a builder tool or a front-end developer, and the plan should be reviewed by someone who knows the business.
What should I do if I don't know my visual direction yet?
Leave it blank. The prompt tells the model to mark what it assumed, so it will propose a direction and list it under open questions. You can then ask for two contrasting alternatives before committing to one.
Should I use this for a redesign of an existing site?
Use the website redesign prompt instead. A redesign starts from what exists — current pages, traffic and problems — and this prompt assumes a blank page.
Sources and references
- Prompt engineering overview — Anthropic
- Prompt design strategies — Google AI for Developers
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
Was this prompt useful?
No account needed. Do not include personal information.