grill-visual-hierarchy
Grill visual hierarchy
Turn a visually flat interface into a decision hierarchy. The user owns product choices. The codebase, screenshots, and design system supply facts.
1. Inspect the real interface
Invoke grilling and domain-modeling. Read the applicable project instructions, glossary, ADRs, and design references. Inspect the rendered interface when browser access exists; otherwise inspect the components, data, tokens, interactions, responsive rules, accessibility behavior, and tests.
Read HIERARCHY-LENSES.md before mapping the design tree.
Done when every visible region has a known purpose, current emphasis, available data, interaction, and governing project constraint. Keep unresolved facts out of the interview and investigate them yourself.
2. Name the glance question
Start the design tree with the decision the screen must help its user make at a glance. Separate primary operational information from supporting detail and archival context. Sharpen vague words such as "important," "highlight," "beginning," and "depth" into observable choices.
Done when the user has chosen one plain-language glance question and the actor who asks it.