UI Refactoring and Design

This skill applies tactical, logical rules to user interface design. It prioritizes clarity, hierarchy, and systems over "artistic talent."

Core Workflow

Feature First: Do not start by designing a "shell" (nav bars, sidebars). Start with the specific functionality (e.g., the search form, the contact card).
Low Fidelity: Ignore color, shadows, and fonts initially. Design in grayscale using a thick marker or basic wireframes to solve layout and spacing first.
Define Systems: Do not use arbitrary values. establishing restrictive systems for spacing, type, and color immediately.
Refine: Apply specific tactics for hierarchy, depth, and polish.

Consult these references for specific implementation rules: