TechnicalCollectible prompt

Visual hierarchy critique from a page screenshot

Attach a screenshot and get ranked fixes so the eye lands on what matters, in the right order.

Lovablev0Cursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Visual hierarchy critique from a page screenshot

Act as a senior product designer giving a visual hierarchy critique. I've attached a screenshot of {{page_or_feature}}. The page's job is {{goal}}, and the one action that matters most is {{call_to_action}}. If you can see the code too, read it before suggesting changes. Critique in this order: 1. Squint test: what draws the eye first, second and third when the page is blurred? Is that the order it should be? 2. Five-second read: what would a first-time visitor say this page is and what to do next? Quote the words they'd actually see. 3. Competition: everything fighting the main action for attention, such as equal-weight buttons, loud badges, decorative images or bold words scattered through paragraphs. 4. Type: whether size, weight and color make at least three clear levels, or everything is medium. 5. Grouping: spacing that joins unrelated things or splits related ones. 6. Color: whether the accent is kept for actions and key moments, or spent everywhere. 7. Scanning: headings that say something, a sensible reading order, line lengths. 8. Mobile: what falls below the first screen at 360px, and whether the main action stays in reach. For each problem, give the fix as a specific decision, such as "make the secondary button a text link", "raise the headline from 32 to 48px and the weight from 500 to 700" or "cut the subheading to one line", ranked by impact. Then apply the top fixes in the existing code, keeping components and routes, and describe what the eye should now see first, second and third. Don't fix hierarchy by adding more: arrows, badges, animation or extra color.
Technicalnvoka.com/library/nvoka-visual-hierarchy-critique-from-a-page-screenshotScan to open
Technical

Visual hierarchy critique from a page screenshot

Attach a screenshot and get ranked fixes so the eye lands on what matters, in the right order.

Nvoka logo

Curated by Nvoka

Lovablev0CursorClaude Code
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 3 filled

Your prompt

Act as a senior product designer giving a visual hierarchy critique. I've attached a screenshot of {{page_or_feature}}. The page's job is {{goal}}, and the one action that matters most is {{call_to_action}}. If you can see the code too, read it before suggesting changes. Critique in this order: 1. Squint test: what draws the eye first, second and third when the page is blurred? Is that the order it should be? 2. Five-second read: what would a first-time visitor say this page is and what to do next? Quote the words they'd actually see. 3. Competition: everything fighting the main action for attention, such as equal-weight buttons, loud badges, decorative images or bold words scattered through paragraphs. 4. Type: whether size, weight and color make at least three clear levels, or everything is medium. 5. Grouping: spacing that joins unrelated things or splits related ones. 6. Color: whether the accent is kept for actions and key moments, or spent everywhere. 7. Scanning: headings that say something, a sensible reading order, line lengths. 8. Mobile: what falls below the first screen at 360px, and whether the main action stays in reach. For each problem, give the fix as a specific decision, such as "make the secondary button a text link", "raise the headline from 32 to 48px and the weight from 500 to 700" or "cut the subheading to one line", ranked by impact. Then apply the top fixes in the existing code, keeping components and routes, and describe what the eye should now see first, second and third. Don't fix hierarchy by adding more: arrows, badges, animation or extra color.
See all