Website design prompts

Page goal first

Start by defining the job of the page: sell, explain, collect leads, establish credibility, educate or route users. Design choices should follow the page goal.

If a page is a resource hub, it should prioritise scanning, internal links and reusable content. If it is a conversion page, the hero and CTA path carry more weight.

Visual direction

Include mood, palette, type direction, imagery rules, section rhythm, CTA style and anti-patterns.

Be concrete about density. Many AI-built sites look generic because every section becomes a soft card grid with a vague icon.

Implementation constraints

Tell the agent the stack, responsiveness requirements, accessibility needs, asset limits and what counts as finished.

Ask for real links, metadata, robots and sitemap when the page is public. Do not let the agent stop at a local mockup.

Prompt example

Build an Astro website for [brand].

Goal: explain [offer] and route users to [action].
Audience: [specific audience].
Structure: hero, promise, resources, examples, FAQ, CTA.
Visual direction: [mood], [palette], [type], [asset rules].
Technical constraints: static output, semantic HTML, sitemap, accessible contrast.
Verification: build, desktop screenshot, mobile screenshot, link crawl, no console errors.

Common mistakes

• Starting with layout before page goal.
• Using vague references like Apple, Stripe or Linear without explaining the actual rule.
• Adding fake proof because the template expects it.
• Skipping metadata and internal links.
• Treating mobile as a stacked version of desktop.

Workflow

1. Define the page job and primary CTA.
2. List required sections and real content.
3. Set the visual system and anti-patterns.
4. Implement the page with real routes and metadata.
5. Run desktop and mobile screenshot QA.
6. Patch any generic or low-trust sections.

FAQ