Design and implement UI by first building a design graph (screens → components → every visually distinct state) and a UI grammar tree (named design-system composition, like a call stack for JSX). Use when building or refactoring screens, components, design-system UI, toolbars, settings panels, or agent-built interfaces; when asked for a design graph, UI grammar, state matrix, component permutations, hover/focus/ disabled/empty/error states; or when UI quality, missing states, or DS composition is the task. Do not jump straight to raw markup.
