Refactoring UI, distilled

Refactoring UI (Adam Wathan and Steve Schoger) distilled for an agent that designs and reviews web UI. Figures are described, not reproduced.

How to use

Apply when drawing a screen, building a component, choosing tokens (spacing, type, color, shadow), or reviewing a screenshot or a diff that changes visual output.

Designing: read the matching chapter and pick values from the scales below instead of inventing them.

Reviewing: open the screen at mobile and desktop widths, run the Review checklist top to bottom, and report each "no" as a finding: element, rule broken, concrete fix. Report rule breaks, not taste.

Starting from Scratch

Start with a feature, not a layout

Design a real piece of functionality before the shell around it.