Does this skill generate high-fidelity designs?

No, it specifically uses grayscale wireframes to isolate structural emphasis and hierarchy decisions without the distraction of color or specific typography.

Can I use this for mobile app design?

Yes, the skill evaluates hierarchy for both desktop and mobile, accounting for different attention zones like bottom-weighted CTAs on mobile devices.

What is a reading order diagram?

It is a visual overlay on a wireframe that uses numbered circles and dashed paths to show the intended sequence in which a user's eye will scan the screen content, ensuring logical flow.

What is the '5-Second Test' mentioned in the critique?

It is a usability metric that asks if a new user can understand the page purpose and find the primary action within five seconds of seeing the screen.

Design Hierarchy Critique

Name: Design Hierarchy Critique
Author: metedata

bymetedata

0•

Design Tools

Evaluates and optimizes information hierarchy through annotated wireframes and reading order diagrams to improve UI clarity.

This skill automates the process of analyzing how information is prioritized, emphasized, and sequenced within user interface screens. It generates grayscale HTML wireframe artifacts featuring explicit reading order overlays (such as F-patterns or Z-patterns) and detailed emphasis keys. By simulating the '5-second test' and assessing primary action prominence, it helps developers and designers ensure that users can understand a page's purpose and find the primary call-to-action instantly, reducing cognitive load and improving task completion rates.

Key Features

010 GitHub stars

02Generates interactive HTML wireframes with visual emphasis annotations

03Automates '5-Second Test' evaluations for screen clarity and purpose

04Provides structured critiques based on established UX patterns like F-Pattern and Gutenberg Diagram

05Creates numbered reading order diagrams to visualize intended user eye-flow

06Maps elements to standardized emphasis levels: Primary, Secondary, Tertiary, and Ambient

Use Cases

01Simplifying complex dashboards to prevent cognitive overload and guide users to key metrics

02Optimizing landing pages to ensure the primary call-to-action is the most prominent element

03Refining multi-step forms by ensuring the reading order matches the logical task sequence

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-content-hierarchy

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Generates interactive HTML wireframes with visual emphasis annotations

03Automates '5-Second Test' evaluations for screen clarity and purpose

04Provides structured critiques based on established UX patterns like F-Pattern and Gutenberg Diagram

05Creates numbered reading order diagrams to visualize intended user eye-flow

06Maps elements to standardized emphasis levels: Primary, Secondary, Tertiary, and Ambient

Use Cases

01Simplifying complex dashboards to prevent cognitive overload and guide users to key metrics

02Optimizing landing pages to ensure the primary call-to-action is the most prominent element

03Refining multi-step forms by ensuring the reading order matches the logical task sequence

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-content-hierarchy

For use in Claude.ai and ChatGPT