Suggest 2 distinct visual directions for the website of [BUSINESS NAME], a [TYPE OF BUSINESS] for [IDEAL CUSTOMER].Brand personality: [3 ADJECTIVES]Competitors look like: [DESCRIBE OR "not sure"]Must avoid: [THINGS YOU DISLIKE]For each direction: a name, the mood in one sentence, a palette of 4 to 5 colors with hex codes and where each is used, a heading and body font pairing from Google Fonts, the photography or illustration style, and 3 homepage layout ideas. Explain why each suits my audience and how it differs from competitors.
Website Design Direction Prompts
Prompts for deciding how your site should look: mood, colors, typography, layout and imagery, before anyone starts building.
6 promptsCopy and pasteWorks with any AI assistant
About these prompts
AI assistants cannot see your brand the way a designer can, but they are useful for exploring directions, explaining tradeoffs and writing a clear brief for whoever builds the site, whether that is a designer, an AI builder or you. The key is to ask for specific, reasoned options rather than "make it modern".
Always check suggested color combinations for contrast. Text must be readable for everyone, including people with low vision, and a palette that looks good in a swatch can fail on a real page.
Copy any prompt below, or build a custom one with the Prompt Builder. Highlighted [PLACEHOLDERS] are the parts to replace with your own details.
The prompts
Here is my color palette: [HEX CODES AND INTENDED USES].For each text and background combination I would use, estimate whether it meets WCAG contrast guidance for normal text (4.5:1) and large text (3:1). Suggest adjusted hex codes for any that fail, keeping the same feel. Remind me to verify with a contrast checker.
TipAlways confirm with a dedicated contrast checker tool. AI estimates of contrast ratios can be wrong.
Suggest 5 font pairings from Google Fonts for a website that should feel [MOOD]. For each pairing: the heading font, the body font, why they work together, and one thing to watch out for (for example weights to avoid or readability at small sizes). Prefer fonts that read well on mobile.
Describe a mood board for [BUSINESS NAME] that captures: [MOOD AND PERSONALITY].List 10 specific image ideas (subject, lighting, color, composition), 5 texture or pattern ideas, and 5 words that capture the feeling. Then write 3 search phrases I could use to find matching reference images.
Plan the homepage layout for [BUSINESS NAME]. The visitor's main goal is [GOAL] and our main call to action is [ACTION].Describe each section from top to bottom: its purpose, what content goes in it, and how it should look on desktop and on mobile. Suggest where the call to action should appear and where proof or trust signals belong. Keep the page as short as it can be while still answering the visitor's questions.
Turn my notes into a one-page design brief I can send to a web designer:[PASTE NOTES: goals, audience, likes and dislikes, examples you admire, budget range, deadline, pages needed]Sections: project summary, goals, audience, brand personality, visual preferences, pages and features, content status, timeline and budget, and open questions. Keep it concise and do not add requirements I did not mention.
TipA clear brief saves rounds of revisions, whoever builds the site.
Worked example
What a response looks like
The prompt we ranPrompt 3 with the mood: calm, trustworthy and modern, for a counseling practice.
The response1. Fraunces + Inter: a soft, warm serif for headings with a very legible sans-serif for body text. Watch out: Fraunces's most decorative settings can feel too playful; keep headings at regular weight.
2. Lora + Source Sans 3: classic and gentle, easy to read at small sizes. Watch out: avoid Lora in long paragraphs on mobile.
3. DM Serif Display + DM Sans: confident headings with a matching sans. Watch out: DM Serif Display has a single weight, so use size, not boldness, for hierarchy.
Sample response, produced by running this prompt in Claude (Anthropic) with the fictional business above. AI responses vary every time you run a prompt; use this to see the kind of result to expect, not as copy to reuse.
Mistakes to avoid
- Asking for "modern" with no other direction.
- Choosing colors without checking text contrast.
- Using more than two or three fonts.
- Copying a competitor's look instead of standing apart from it.
Check every fact, number and claim in AI output before you publish. See how to fact-check AI content.
Frequently asked questions
Can AI design my website?
AI can suggest directions, palettes and layouts and can build sites through AI builders. The judgment about what fits your brand and audience is still yours, and a human eye is the best check that the result looks right.
More prompt topics
Homepage copyHeadlines, hero sections and full homepage drafts→About pageFounder stories, mission and team pages→Service pagesOne strong page for every service you offer→Landing pagesFocused pages for one offer, campaign or ad→SEO titles and metaPage titles, meta descriptions and headings→FAQ pagesFrequently asked questions that answer real buyers→