01 Get the weight right
The most important thing on the screen should look the most important. Blur it and check.
“A surprisingly large part of visual design is just blurring your eyes to make sure the weight of things feels good.”
02 Pick your details and repeat them
One radius, one spacing scale, one type scale.
“6px is the most underrated corner radius.” Six pixel corners
If you copy from another product, copy why it works.
“Be careful to copy what makes them good, rather than their flaws.”
03 Respond to every press
“A scale of 0.97 on the :active pseudo-class should do the job”. Button press
Keep animations short.
“A 180ms dropdown animation feels more responsive than a 400ms one.”
04 Menus that don't close on you
Moving the mouse in diagonal to a submenu crosses other items. Without a safety triangle, the submenu closes.
“A rite of passage in design engineering: implement the safety triangle for hover interactions”
05 Answer in 0.1 seconds
“0.1 second is about the limit for having the user feel that the system is reacting instantaneously”. Every round trip to the server eats into that:
200ms Noticeable
Being 0.1s faster on mobile = 8.4% more retail conversions.
06 Show content, not spinners
Render what you already have and stream the rest.
“I contend that spinners or "loading indicators" should become a rarity”. If you need one, defer the spinner.
07 Use real HTML
In 2024 bots were 51% of web traffic. Agents read the accessibility tree, not pixels:
Order #4812
Aeron Chair
$1,395.00 · Delivered Sep 12
- article "Order #4812"
- heading "Aeron Chair" level 3
- text "$1,395.00 · Delivered Sep 12"
- button "Refund" focusable
- link "Track package" /orders/4812/track
- generic
- generic "Aeron Chair"
- generic "$1,395.00 · Delivered Sep 12"
- generic "Refund" not focusable
- generic "Track package" no href
95.9% of home pages fail basic accessibility. Use buttons, links and labels.
08 Make it cheap to change
“Good design is redesign. It's rare to get things right the first time.” Build in the browser with utilities, and extract a component after you repeat it.
“So many debates I’ve seen in my career boil down to “if it’s easy, it must be bad.””
09 Check it yourself
Agents build fast.
“Claude Code + Chrome DevTools MCP + Figma MCP = insane levels of productivity”. Someone still has to open the screen and use it.
“Technology makes it faster to build, but harder to care.” Let agents check their work