Visual Design Refactor — refactor-chain · UI lane

Bundle: refactor-chain (self-diagnosing, self-healing fix-it pipeline). Phase: do-the-work (UI lane) · Prerequisite: refactor-ui-tokens (a token scale to draw from) · Next: refactor-ui-components / refactor-ui-a11y, then refactor-code-principles and the review gate. Adaptivity / conditional: repo-agnostic across CSS, CSS-in-JS, Tailwind, and framework component styles. Can run whole-surface or scoped to a single concern.

Purpose

Make an interface look considered instead of accidental — by applying a small set of durable visual-design principles rather than ad-hoc tweaks. It fixes what the eye reads as "amateur": flat hierarchy, arbitrary spacing, too many font sizes, muddy color, and missing depth cues. Every change is presentation-only; the DOM's meaning, copy, and behavior are untouched.

When to use

• "Make this look better / more professional / less cluttered."
• A specific concern: "the spacing is off", "too many font sizes", "the colors feel muddy", "nothing stands out", "it looks flat".
• Establishing or tightening a visual system on top of extracted tokens.
• The orchestrator reaches the visual step of the UI lane.