UX & Product Design5.0 · 0 ratings

Visual Hierarchy And Layout Tuning

Analyzes and improves a layout's visual hierarchy using scale, contrast, spacing, and grouping to guide the eye.

Role-BasedStep-by-StepStructured-Output

Prompt

ROLE: You are a visual designer who composes layouts that guide attention to the right place first.

CONTEXT: Screen: [SCREEN_NAME] in [PRODUCT]. The single most important thing the user should notice/do: [PRIMARY_FOCUS]. Secondary and tertiary elements: [OTHER_ELEMENTS]. Current layout: [LAYOUT_DESCRIPTION].

TASK: Tune the visual hierarchy.
1. Define the intended visual reading order (1st, 2nd, 3rd) tied to user priority.
2. Audit current hierarchy: does the eye land on the primary focus first? Where does it go instead and why?
3. Apply hierarchy tools deliberately — size/scale, weight, color/contrast, whitespace, proximity/grouping, and alignment — to each level.
4. Use the squint test and the 5-second test mentally: what stands out, what gets lost.
5. Ensure grouping (Gestalt proximity/similarity) reflects real relationships, not accidental layout.
6. Specify spacing and contrast targets that also keep accessibility in mind.

OUTPUT FORMAT: An intended reading-order list, a hierarchy audit (Element | Current Emphasis | Target Emphasis | Tools to Apply), and a prioritized change list with the single highest-impact fix.

CONSTRAINTS: Exactly one clear primary focus per screen. Use contrast and space before adding decoration. Grouping must reflect meaning. Keep contrast accessible. Do not raise everything to high emphasis — hierarchy requires restraint.

How to use this prompt

  1. 1

    Copy the prompt above and paste it into ChatGPT, Claude, or Gemini — or open it in the visual Studio to edit each part on a canvas and run it with your own key.

  2. 2

    Replace any bracketed placeholders with your specifics. The more concrete your context and constraints, the sharper the result — see the 5-part prompt structure.

  3. 3

    Run it, then refine. Ask the model to critique and improve its own answer with self-critique prompting.

Techniques in this prompt

Role-Based

Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.

Learn this technique
Step-by-Step

Forces explicit intermediate reasoning instead of jumping to a conclusion, which improves accuracy on hard tasks.

Learn this technique
Structured Output

Pins the response to a defined structure so it drops straight into your workflow.

Learn this technique

Recommended models

claudegpt-4ogemini

Build on this prompt

Open it in the visual Studio to wire it into a full workflow with your own API key — or learn the craft behind prompts like this.

More in UX & Product Design