Visual Hierarchy And Layout Tuning
Analyzes and improves a layout's visual hierarchy using scale, contrast, spacing, and grouping to guide the eye.
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
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
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
Run it, then refine. Ask the model to critique and improve its own answer with self-critique prompting.
Techniques in this prompt
Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.
Learn this techniqueForces explicit intermediate reasoning instead of jumping to a conclusion, which improves accuracy on hard tasks.
Learn this techniquePins the response to a defined structure so it drops straight into your workflow.
Learn this techniqueRecommended models
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
Heuristic Evaluation Of A UI Screen
Runs a Nielsen-style heuristic evaluation of a screen, scoring each issue by severity and proposing concrete fixes.
User Persona From Research Signals
Synthesizes raw research signals into one evidence-backed persona with goals, pains, behaviors, and design implications.
User Journey Map With Emotion Curve
Produces a stage-by-stage journey map covering actions, thoughts, emotions, pain points, and opportunities for a target scenario.
Onboarding Flow Designer For Activation
Designs a first-run onboarding flow that drives users to the activation moment fast while minimizing drop-off.