Website Design Prompts: 20 Copy-Paste Prompts for AI

Ask an AI for "a website for my bakery" and you get the same site everyone else gets: a gradient hero, three icon cards and a testimonial from someone who doesn't exist. The model isn't lazy. It's filling every gap you left with the most common answer. These prompts close the gaps one at a time.

This page is about whole websites and the pages inside them. If you need a single-goal page, our landing page prompts go deeper on conversion. If your problem is how individual components look (buttons, cards, type, color), the UI design prompts cover that layer.

How to use these website design prompts

Run prompt 1 in a fresh chat or project and answer its questions before any code exists. Then run prompt 3, so every later page uses the same colors and sizes. After that, build one page per prompt and check it on a real phone before moving on.

• In an AI builder. Tools such as v0, Bolt, Lovable and Figma Make take a chat prompt and generate the site. Paste these prompts one at a time.
• In ChatGPT or Claude. Add "Return one HTML file with the CSS inside it" to prompts 4 to 14 so you can open the result in a browser.
• Keep real content ready. Prices, hours, names and policies should come from you; the prompts ask for placeholders instead of inventions.
• Save the brief. When a chat gets long, start a new one and paste prompts 1 and 3 again with your answers filled in.

Which prompt for which job

Prompts to set the brief and style

These three do most of the work: a model that knows the audience, the goal and the exact colors guesses less.

1. The site brief (run this first)

Everything else on this page assumes the model has this brief. Paste it at the start of a new chat or project.

I am building a website for [business or project name], which [one sentence on what it does] for [specific audience, e.g. small accounting firms in Ohio].
The single most important action for a visitor is [one action, e.g. book a call / buy / subscribe].
Pages: [Home, About, Pricing, Contact, Blog]. Every page shares one header and one footer.
Tone of the copy: [plain and direct / warm / technical]. Reading level: a busy person skimming on a phone.
Before you write any code, reply with: a sitemap, the sections you plan for each page, and any question you need answered. Wait for my go-ahead.

2. Style direction from references

Describes a look without asking the model to copy a real site.

Set the visual direction for the whole site. I like [2 or 3 sites or products] because of [what you like, e.g. lots of white space, one strong accent color, big confident headings].
Do not copy their layouts, logos or text. Instead, describe in 5 bullets the design choices we will use: density, color, type, imagery and motion.
Things to avoid: [e.g. gradients on every section, stock photos of people pointing at laptops, more than one accent color].

3. Design tokens

Locks color, type and spacing so page 5 matches page 1.

Create design tokens for the site and use only these from now on:
Colors: primary [hex], background [hex], surface [hex], text [hex], muted text [hex], border [hex], one accent [hex].
Fonts: [font name] for headings, [font name] for body. Type scale: body 16px, small 14px, h3 20px, h2 28px, h1 40px on desktop and 32px on mobile.
Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px. Corner radius: [e.g. 8px]. Button height: [e.g. 44px].
Show the tokens as CSS variables, then confirm you will not introduce new colors or sizes without asking.

Prompts for whole websites by site type

Each site type has a different first screen. A café visitor wants hours and a phone number; a SaaS visitor wants to know what the product does.

4. SaaS product website

For a software product that needs a home page, pricing and docs entry point, not just one landing page.

Build the home page for [product], a [category] tool for [audience].
Sections in order: header with [Product, Pricing, Docs, Log in] and a [Start free / Request access] button; hero with a one-line outcome headline and a product screenshot placeholder; 3 problems the audience has today; how it works in 3 steps; 4 feature cards tied to outcomes; an integrations strip using only these names: [list, or leave a labelled placeholder]; pricing teaser linking to the pricing page; FAQ with 5 questions; footer.
Do not invent logos, user counts, testimonials or ratings; use a labelled placeholder.

5. Portfolio site

For designers, developers, writers or photographers whose work has to do the talking.

Build a portfolio site for [name], a [role] who wants [type of client or employer].
Home: a two-line intro that says what I do and for whom, then a grid of [number] projects. Each card shows a cover image placeholder, project name, my role and a one-line result.
Project page template: the problem, my role, 3 to 5 images with captions, what I would do differently, and a link to the next project.
Keep the design quiet: neutral colors, one accent, generous margins. Add short About and Contact sections with [email or booking link].

6. Local business site

For a shop, clinic, studio or restaurant where the visitor mostly wants hours, location and a way to call.

Build a website for [business name], a [type of business] in [city or neighborhood].
Above the fold on mobile: what we are, the area we serve, a tap-to-call button for [phone number] and a [Book / Order / Get directions] button.
Then: services or menu with prices from this list only [paste list], opening hours as a table, a map placeholder for [address] and a short contact form.
Add LocalBusiness structured data from schema.org using only the details above. Leave out anything I have not given you.

7. Small online store

For a store with a handful of products. Wire it to your real checkout provider afterwards.

Build a storefront for [store name], which sells [products] to [audience].
Pages: home, collection grid, product page, cart and a simple shipping and returns page.
Product page: image gallery placeholder, name, price, variant picker for [size / color], quantity, add-to-cart button, a short description and a shipping note from this text: [paste your real policy].
Use these products and prices only: [paste list]. Do not add reviews, star ratings or stock counts that I have not given you.
Make the add-to-cart button reachable without scrolling on a 375px-wide phone screen.

8. Blog or newsletter site

For writing-first sites where reading comfort matters more than visual effects.

Build a blog for [publication name], covering [topic] for [audience].
Home: the latest post as a large card, then a list of posts with title, date, reading time and a one-line summary. Include an email signup box with one field and a button labelled [Subscribe].
Post template: a readable column around 65 to 75 characters wide, 18px body text, clear h2 and h3 styles, styled blockquotes, code blocks and captions, and a related-posts row at the end.
Add category and author pages in the same layout.

Prompts for pages and sections

Build the header and footer first, because every page inherits them. For hero copy tests, our guide to A/B testing an AI-built page explains how to compare two versions properly.

9. Header and navigation

Fix the header before building more pages, because every page inherits it.

Rebuild the header so it works on every page.
Desktop: logo on the left, up to 5 links in the center, one primary button on the right.
Mobile: logo and a menu button. The menu opens full-height, links are large enough to tap, and it closes with a close button and the Escape key.
Highlight the current page and make every link reachable with the keyboard in a logical order.

10. Home page hero

A site hero has to route visitors as well as sell. For single-goal pages, see the landing page prompts linked above.

Rewrite only the home page hero. Give me 4 headline options under 10 words that say what [business] does for [audience].
Add a one-sentence subheadline, a primary button for [main action] and a secondary text link for [second most common visitor need, e.g. see pricing].
Keep the layout and tokens as they are. Change only the text and, if needed, the image placeholder description.

11. About page

Most AI About pages are vague. This one forces specifics.

Write and lay out the About page using only these facts: [when you started, who runs it, why it exists, where you are based].
Structure: a short opening that says who we are and who we help, the story in 3 short paragraphs, what we believe in 3 bullets, the team with photo placeholders, and a closing button to [main action].
Do not invent founding dates, numbers of customers, awards or quotes. If a fact is missing, leave a placeholder in [square brackets].

12. Pricing page

Makes plans comparable at a glance and keeps the fine print honest.

Build a pricing page with these plans only: [plan name, price, billing period, 4 to 6 included items] for each plan.
Show the plans as cards on desktop and stacked on mobile, with the [recommended plan] visually highlighted.
Under the cards, add a feature comparison table and an FAQ on [billing, cancellation, refunds].
Write prices exactly as I gave them, including the billing period, and do not add discounts or "most popular" labels I did not ask for.

13. Contact page and form

Short forms get finished. This prompt also asks for the states people forget.

Build a contact page with a form that asks only for: name, email, [one more field if needed] and message.
Every field has a visible label above it, not placeholder-only text. Show inline error messages that say how to fix the problem.
Design the empty, error, sending and success states. The success state says what happens next and when, using this text: [your reply time].
Next to the form, list [email, phone, address, hours] for people who would rather not use a form.

14. Footer

The footer is where visitors look for the boring but necessary links.

Design a footer shared by every page. Columns: [Product or Services], [Company], [Resources], [Legal].
Include the business name, a one-line description, contact email, social links from this list only: [list], and links to Privacy Policy and Terms.
On mobile, stack the columns and keep tap targets comfortable. Use the muted text color from the tokens, with enough contrast to stay readable.

Prompts for responsive and accessibility checks

The numbers in these prompts come from WCAG 2.2 at level AA: a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, pointer targets of at least 24 by 24 CSS pixels unless they are spaced apart, and content that works at a width of 320 CSS pixels without scrolling in two directions. Treat them as the floor, not the goal.

15. Mobile and tablet pass

Run after each page is built. AI builders often get the desktop layout right first.

Check every page at 320px, 375px, 768px and 1280px widths and fix what breaks.
Rules: nothing scrolls sideways, text never overlaps, images scale down, tables either reflow or scroll inside their own box, and the main button on each page is visible without hunting.
List each problem you found and the fix you made, page by page.

16. Accessibility review

Turns the WCAG 2.2 AA basics into a checklist the model has to answer.

Review the site for accessibility and fix the problems. Check:
1. Text contrast is at least 4.5:1, or 3:1 for large text, against its background, including text on images and buttons.
2. Every image has useful alt text, or empty alt text if it is decorative.
3. Each page has one h1 and headings do not skip levels.
4. Every form field has a visible label, and errors are announced in text, not only by color.
5. Keyboard users can reach every link and button in order, and the focus outline is always visible.
Report each fix as: page, element, problem, change.

17. Tap targets and keyboard

A second pass for fingers and keyboards, where most generated sites slip.

Go through every interactive element on [page or all pages].
Make each button, link and form control at least 24 by 24 CSS pixels, or space small ones far enough apart that they cannot be tapped by mistake. I would rather have [44px] tall buttons on mobile.
Check that the mobile menu, modals and accordions open, work and close with the keyboard, and that focus returns where it was.

18. Motion and performance

Keeps animations polite and pages light.

Review all animation and media on the site.
Wrap non-essential animation in a prefers-reduced-motion media query so it is turned off for people who ask their device for less motion.
Give every image a width and height so the layout does not jump while loading, lazy-load images below the fold, and serve sizes that match the space they fill.
List any script, font or video not needed on first load.

19. Design consistency review

Catches the drift that creeps in after 15 prompts.

Act as a strict design reviewer. Compare every page against the design tokens and the style direction we agreed.
List anything that breaks them: new colors, odd font sizes, mixed corner radii, inconsistent button styles, uneven section spacing.
Fix the 5 most visible problems first and tell me what is left.

20. One change at a time

Use this whenever the model starts redesigning things you liked.

Change only this: [one specific change, e.g. make the pricing cards equal height and move the button to the bottom of each card].
Do not touch any other section, page, color, font or text.
After the change, list every file you edited so I can check nothing else moved.

Common mistakes

• One giant prompt for the whole site. Every page comes out average. Brief first, then one page per prompt.
• No real content. If you don't give prices, hours or names, the model makes them up. Paste the real ones or demand placeholders.
• Letting it pick colors. Defaults look like every other generated site. Give hex codes in prompt 3 and hold the model to them.
• Fake proof. Invented testimonials, logos and star ratings are worse than none. Every prompt here tells the model to leave a labelled placeholder instead.
• Checking only on desktop. Run prompt 15 after every page, not once at the end.
• "Make it better." Vague feedback triggers a redesign of things you liked. Use prompt 20 and name the one change.

Need a site to practice on first? Our list of vibe coding projects has small builds where these prompts fit, and the Lovable prompts guide shows the same layered approach inside one builder.

Frequently Asked Questions

What is a good prompt for designing a website with AI?
A good website prompt names the site type, one audience, the one action you want visitors to take, the pages and sections in order, and a style direction with real colors and fonts. Run that brief first, then build one page at a time with shorter prompts, and finish with a mobile and accessibility pass.

Can I use these website design prompts in ChatGPT or Claude?
Yes. The prompts are tool-neutral. In a chat app, ask for a single HTML file with the CSS inside it so you can open it in a browser and check it. In an AI website or app builder, paste the same prompts into its chat, one at a time.

Which AI tools build websites from prompts?
Several products are built for it. As of November 2026, v0 by Vercel says it generates working applications and publishes them as live websites, Bolt describes building apps and websites by chatting with AI, Lovable calls itself a full-stack AI development platform for web applications, and Figma Make describes itself as prompt to code. Any of them can take these prompts.

How is a website prompt different from a landing page prompt?
A landing page has one goal and usually one page. A website has several pages with different jobs (home, about, pricing, contact, blog) that share a header, footer and style. That is why this collection starts with a brief and design tokens that every later page reuses.

How do I make an AI-built website accessible?
Ask for it, then check it. WCAG 2.2 at level AA sets a text contrast ratio of at least 4.5:1 (3:1 for large text), pointer targets of at least 24 by 24 CSS pixels unless spaced apart, and content that works at 320 CSS pixels wide. Prompts 16 and 17 turn those into a review.