Design & UI/UXUI CritiqueintermediateFeatured

UI Design Visual Hierarchy, Contrast & Spatial Rhythm Critique

Conduct an objective, rigorous visual critique of a digital interface layout, typography, and density.

#design #ui-critique #visual-hierarchy #typography #spacing-system

Compatibility & Specs

Compatible AI Models

ClaudeChatGPTGemini

Last UpdatedOct 3, 2026

Customizable Variables4 parameters

Main Prompt Template4 Variables

205 words • 1562 characters

You are a Principal Product Designer and Design Systems Architect. Review the following interface layout and design specifications with objective, actionable rigor. Avoid subjective praise or vague advice like 'make it cleaner'. Evaluate it against fundamental design laws: visual hierarchy, spatial rhythm (8pt grid), typographic contrast, visual weight, and interaction affordance. Product Type & Primary User Goal: [product_context] Current Screen / Component Layout & Hierarchy: [screen_layout] Color Palette & Typography System: [design_tokens] Known Usability Concerns or Friction Points: [usability_concerns] Deliver a Systematic UI Design Critique: 1. Visual Hierarchy & Eye-Scanning Flow: Map the viewer's likely scanning path (Z-pattern or F-pattern). Identify visual competition where secondary elements distract from the primary call-to-action. 2. Typography Scale & Density: Audit font sizes, line heights, weights, and letter-spacing. Flag issues where text lacks distinct contrast or causes visual vibration. 3. Spatial Rhythm & Alignment: Evaluate padding, margins, and layout alignment against a strict 4px/8px grid system. Point out uneven whitespace, claustrophobic elements, or disconnected groupings. 4. Action Hierarchy & Affordance: Evaluate primary, secondary, and tertiary button states. Ensure interactive elements look clickable and disabled states don't cause confusion. 5. Specific Prescriptive Redesign Blueprint: Provide precise CSS/Tailwind values or spatial adjustments to elevate the UI to a world-class, premium aesthetic.

Tip:Variables marked in purple brackets can be tailored below.

Customize Prompt

Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.

Parameters (4)* Indicates required field

Product Type & User Goal*[product_context]

What the app does and what the user is trying to accomplish

Screen Layout & Elements*[screen_layout]

Layout structure, cards, navigation, and button placements

Color Palette & Typography*[design_tokens]

Brand colors, background fills, font families, and neutral tones

Known Friction or Usability Issues*[usability_concerns]

Drop-off points, customer complaints, or low conversion

4 parameters active

Live Customized OutputLive Preview

314 words

You are a Principal Product Designer and Design Systems Architect. Review the following interface layout and design specifications with objective, actionable rigor. Avoid subjective praise or vague advice like 'make it cleaner'. Evaluate it against fundamental design laws: visual hierarchy, spatial rhythm (8pt grid), typographic contrast, visual weight, and interaction affordance. Product Type & Primary User Goal: SaaS Billing & Subscription Management portal where team leads upgrade plans and manage payment methods. Current Screen / Component Layout & Hierarchy: Three pricing tier cards side-by-side on desktop. Each card has a colored border, an icon, tier name (18px bold), price ($49/mo, 24px), a 10-item feature list with green checkmarks, and a solid blue 'Choose Plan' button at the bottom. A discount toggle ('Billed Annually') is centered above the cards. Color Palette & Typography System: Font: System font stack. Background: Pure white (#FFFFFF). Card borders: 1px solid #D1D5DB. Primary button: #3B82F6. Text: #111827. Badge for 'Most Popular': Bright neon yellow pill badge with black text. Known Usability Concerns or Friction Points: Users hesitate between Tier 2 and Tier 3 because all three cards share identical visual weight and button styling. Deliver a Systematic UI Design Critique: 1. Visual Hierarchy & Eye-Scanning Flow: Map the viewer's likely scanning path (Z-pattern or F-pattern). Identify visual competition where secondary elements distract from the primary call-to-action. 2. Typography Scale & Density: Audit font sizes, line heights, weights, and letter-spacing. Flag issues where text lacks distinct contrast or causes visual vibration. 3. Spatial Rhythm & Alignment: Evaluate padding, margins, and layout alignment against a strict 4px/8px grid system. Point out uneven whitespace, claustrophobic elements, or disconnected groupings. 4. Action Hierarchy & Affordance: Evaluate primary, secondary, and tertiary button states. Ensure interactive elements look clickable and disabled states don't cause confusion. 5. Specific Prescriptive Redesign Blueprint: Provide precise CSS/Tailwind values or spatial adjustments to elevate the UI to a world-class, premium aesthetic.

Launch in:

ChatGPT Claude Gemini

How to Use This Prompt

Follow this 3-step workflow to extract high-signal responses from any compatible AI model.

1. Tailor the Parameters

Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.

2. Send to AI Model

Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.

3. Review and Iterate

Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.

Prompt Variables & Parameters

Reference breakdown of every dynamic variable embedded in this prompt template.

Placeholder	Parameter Name	Type	Status	Description & Guidance
[product_context]	Product Type & User Goal	text	Required	What the app does and what the user is trying to accomplishDefault: SaaS Billing & Subscription Management portal where team leads upgrade plans and manage payment methods.
[screen_layout]	Screen Layout & Elements	textarea	Required	Layout structure, cards, navigation, and button placementsDefault: Three pricing tier cards side-by-side on desktop. Each card has a colored border, an icon, tier name (18px bold), price ($49/mo, 24px), a 10-item feature list with green checkmarks, and a solid blue 'Choose Plan' button at the bottom. A discount toggle ('Billed Annually') is centered above the cards.
[design_tokens]	Color Palette & Typography	textarea	Required	Brand colors, background fills, font families, and neutral tonesDefault: Font: System font stack. Background: Pure white (#FFFFFF). Card borders: 1px solid #D1D5DB. Primary button: #3B82F6. Text: #111827. Badge for 'Most Popular': Bright neon yellow pill badge with black text.
[usability_concerns]	Known Friction or Usability Issues	text	Required	Drop-off points, customer complaints, or low conversionDefault: Users hesitate between Tier 2 and Tier 3 because all three cards share identical visual weight and button styling.

Example Execution & Benchmark Output

Sample input arguments and the verified AI response demonstrating expected quality and formatting.

Sample VariablesInputs

[product_context]

SaaS Billing & Subscription Management portal where team leads upgrade plans and manage payment methods.

[screen_layout]

Three pricing tier cards side-by-side on desktop. Each card has a colored border, an icon, tier name (18px bold), price ($49/mo, 24px), a 10-item feature list with green checkmarks, and a solid blue 'Choose Plan' button at the bottom. A discount toggle ('Billed Annually') is centered above the cards.

[design_tokens]

Font: System font stack. Background: Pure white (#FFFFFF). Card borders: 1px solid #D1D5DB. Primary button: #3B82F6. Text: #111827. Badge for 'Most Popular': Bright neon yellow pill badge with black text.

[usability_concerns]

Users hesitate between Tier 2 and Tier 3 because all three cards share identical visual weight and button styling.

Expected AI ResponseVerified Result

### Systematic UI Critique: Subscription Pricing Matrix #### 1. Visual Hierarchy & Weight Distribution * **Equal-Weight Paralysis:** When all three tier cards have identical solid blue buttons, borders, and dimensions, the cognitive load spikes. You force users to manually read every bullet point instead of visually guiding them to the sweet-spot plan. * **The Neon Yellow Badge Conflict:** A high-saturation yellow badge on Tier 2 creates visual vibration against #3B82F6 and looks like an unstyled warning banner rather than a premium recommendation. #### 2. Typographic Hierarchy Fixes * **Price Display:** 24px is too modest for pricing. Bump the number to 36px or 40px bold (`tracking-tight`), with `/month` in 14px muted slate (`text-muted-foreground`) to establish immediate numerical anchors. * **Feature Scanning:** Replace identical green checkmarks with subtle 16px neutral check icons. Highlight the differentiating killer features of Tier 2 in bold weight. #### 3. Spatial Rhythm & Elevation Adjustments * **Tier 2 Elevation:** Scale the recommended card up slightly (`scale-105` or `-translate-y-2`) and give it an intentional elevation (`shadow-xl ring-2 ring-primary`). * **Action Prominence:** Only the recommended plan should have a solid high-contrast primary CTA button (`bg-primary text-primary-foreground`). The other two plans should use an outline or subtle secondary variant (`variant='outline'`).

Best Use Cases

Scenarios and roles where this prompt produces maximum leverage.

Product designers conducting pre-handover visual quality audits

Frontend engineers refining dashboard and landing page aesthetics

Founders ensuring their SaaS interfaces convey enterprise credibility

Tips for Best Results

Techniques to elevate response fidelity

•Provide rich background context rather than one-sentence inputs to receive deep, non-generic responses.
•Engage in multi-turn conversation: use the initial output as a baseline, then ask the AI to sharpen specific sections.
•Prompt the model to highlight any hidden assumptions or missing trade-offs in its recommendations.

Common Mistakes to Avoid

Frequent failure modes and anti-patterns

•Giving minimal context and expecting nuanced, expert-level strategic output.
•Not validating factual references, citations, or statistical claims with verified primary sources.
•Skipping the customization step and pasting raw bracketed template variables into the AI chat.