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.
Domain-Specific Tactics
Consult these references for specific implementation rules:
- •Making elements stand out/fit in: See hierarchy.md (Size, weight, contrast, semantics).
- •Whitespace and alignment: See layout-spacing.md (Grids, spacing scales, density).
- •Text and fonts: See typography.md (Type scales, line-height, fonts).
- •Colors and palettes: See color.md (HSL, saturation, accessible contrast).
- •Images, shadows, and polish: See depth-and-polish.md (Light sources, assets, finishing touches).
Quick Heuristics
- •Limit Choices: If you can't decide between two options, you have too many choices. constrain your inputs (colors, font sizes, spacing) to a pre-defined scale.
- •Personality:
- •Serious/Elegant: Serif fonts, sharp corners, gold/blue colors, formal language.
- •Playful/Friendly: Rounded sans-serifs, large border-radius, pink/orange, casual language.
- •Complexity: Do not design for edge cases first. Design the "happy path" (simple version), then iterate for complexity.