TechnicalCollectible prompt
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.
Curated by Nvoka
Lovablev0CursorClaude Code
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 filledYour 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.