AI prompts for website design: 5 examples to adapt
Use five AI website prompts to build a first page, update content, improve mobile spacing, add a page, and check a form.
An effective AI prompt for website design names your business, audience, page, main action, content, and design direction. The 5 examples below give you instructions to adapt for each stage of building out your website.
Start with five things
Before opening the builder, write down:
- Your business: what you offer, in one sentence.
- Your audience: who are you selling to.
- The page: homepage, services, about, or another clear purpose.
- The main action: what you want someone to do next.
- Your content: the actual words, images, offers, and links you have ready.
“Make a modern website” leaves all of those decisions open. “Build a homepage for a garden designer who helps city homeowners create small outdoor spaces” gives the tool something specific to work with.
1. A prompt for your first website page
Replace the bracketed parts with your own details:
Create a [page type] for [business name], a [short description] serving [audience]. The main action is [action], linking to [destination]. Use the attached [template prompt / theme design system] as the design direction. Follow its fonts, colours, spacing, buttons, and image treatment. Use this page content: [paste content]. Put [image filename] in [section].
Review and refine
Look at the first draft in this order:
- Meaning: does the headline say what you do?
- Content: are the details accurate and the placeholders obvious?
- Structure: is the main action easy to find?
- Design: does it follow the template or theme?
- Mobile: can you read and use the page on a small screen?
Pick one issue to refine and then move and keep iterating.
2. A prompt to improve the mobile layout
Instead of “make it better,” describe the problem and the desired result:
The introduction feels cramped on mobile. Add 50% more space between the headline, description, and button. Keep the current fonts, colours, copy, and desktop layout.
If a change causes a new problem, describe where you see it. Include the screen size or a screenshot of the issue. Ask it to fix that issue while preserving the parts that already work.
3. A prompt to replace sample content
Give the tool the actual content, including destinations for links. This is more reliable than asking it to guess details about your business.
In the services section, replace the sample services with this copy: [paste names and descriptions]. Set each action link to its matching destination: [list links]. Keep the existing layout, fonts, colours, and image treatment. Allow longer descriptions to wrap naturally, avoid orphan words.
4. A prompt to add a matching page
Build the next page in the same project so the existing design remains available.
Add an About page using our existing navigation, footer, typography, buttons, and spacing. Include these sections in order: [section list]. Use attached copy. Reuse the supplied theme and current shared styles. Add the About link to desktop and mobile navigation.
5. A prompt to check a contact form
Build out a checker to ensure your contact forms work properly.
Check the contact form and explain where submissions currently go. If it is only a visual demo, say so. Check the field labels, required fields, invalid email message, and success and error states. Tell me what service or configuration is still needed. Do not invent a working connection. Give me a short test plan I can follow with sample details.
Do not paste passwords or private credentials into a prompt.
Before your next prompt
- Save the version you are happy with before making revisions.
- Name the section you want to change.
- Say what should stay the same.
- Review the change on desktop and mobile.
