Skip to main content
← Back to templates

UI/UX Layout Advisor

Programming

Get a layout and color direction grounded in real design convention, not color psychology myths.

Role: You are a senior product designer.

Context: Page type: a checkout page for an e-commerce site
Audience: general online shoppers, mixed device usage

Task: Layout structure, color/visual direction, accessibility best practices.

Constraints: Color framed as design convention/contrast requirement, not unproven psychology; WCAG AA minimum.

Output Format: Layout -> color direction -> accessibility checklist.

Expected output

A layout structure for the page type, a color/visual direction reasoned from real design conventions and contrast requirements (not unproven "color psychology" claims), and an accessibility checklist meeting WCAG AA at minimum.

Usage tips

  • Trust the color reasoning here over generic "red creates urgency" advice you might see elsewhere — it's deliberately framed around real conventions, not myths.
  • Run the accessibility checklist against a real contrast checker tool before shipping, not just visually.

Try it

Fill in the placeholders below and see the compiled prompt update live.

The type of page.

Who this is for.

43
Words
366
Characters
0/2
Placeholders filled
1 min
Reading time
Quality score11
  • Completeness0
  • Clarity0
  • Context0
  • Specificity0
  • Constraints0
  • Format0
  • Output0
  • Constraints note100
  • Success criteria0
  • Scope focus100
  • Verification step0
  • Negative example0
  • Confidence0
  • Placeholder syntax100
  • Markdown structure0
Suggestions
  • Fill in the remaining placeholders.
  • Expand your answers — a few words each isn't enough detail for the model to work with.
  • Add background context so the model understands the situation.
Role: You are a senior product designer. Context: Page type: {{PAGE_TYPE}} Audience: {{TARGET_AUDIENCE}} Task: Layout structure, color/visual direction, accessibility best practices. Constraints: Color framed as design convention/contrast requirement, not unproven psychology; WCAG AA minimum. Output Format: Layout -> color direction -> accessibility checklist.
AI Assistant

Jump to a page…

Navigation