UX Canon translates the foundational laws of user experience into interactive demos, code patterns, and AI-powered analysis so the gap between design theory and production code finally closes.
Each of the 10 core UX laws is broken down into a plain-language definition and a set of actionable principles, written for the people actually building the thing.
Every law comes with an interactive demo designed to make you experience the principle directly, not just read about it. Click targets, drag sliders, watch decision time change in real time.
See exactly what correct implementation looks like. Copyable, syntax-highlighted code patterns that translate the law directly into CSS, HTML, and JS.
Paste your code or drop in a screenshot. The AI analyzer evaluates it against whichever law you're viewing and returns a verdict, observations, and a concrete improvement.
Drop in a code snippet or a screenshot. The analyzer evaluates it against whichever law you're viewing and returns a verdict, observations, and a concrete improvement. Powered by Claude.
$ analyze --law fitts --input button.tsx
✓ Verdict: Mostly compliant
△ Observation: Primary CTA is 36×36, below the 44px minimum recommended touch target.
→ Suggestion: Increase button padding to py-3 px-6 for a 48px hit area.
Powered by Claude · 1.2s
“Design is not just what it looks like and feels like. Design is how it works.”
Steve Jobs