Visual Hierarchy Refactoring

Take a real screen or component and refactor it so the eye lands on the right things in the right order. The deliverable is refactored code plus a before/after hierarchy audit — not design commentary. Governing principles: hierarchy is a function of size, weight, and lightness contrast — color is the last resort, and the fastest fix is de-emphasis: quiet the noise before amplifying the signal.

When to use / handoffs

• Use when a specific screen is cluttered, flat, unscannable, or "looks off" despite sane tokens.
• No consistent tokens exist at all (every fix would be a new magic number) → skills/frontend-design/design-foundation first.
• The problem is structural (columns misaligned, breaks on mobile) → skills/frontend-design/layout-system.
• Font sizes themselves are chaotic across the app → skills/frontend-design/typography-system.
• Palette is the problem (clashing hues, contrast failures everywhere) → skills/frontend-design/color-system.

Step 1 — Inspect the target