UI/REF

The Interface Parts Catalog

Plain-HTML mode: the examples are now (almost) unstyled — just the browser’s defaults plus the bare layout CSS that stops things overlapping. Notice what survives: real HTML controls (buttons, inputs, links) fall back to their native look, while pure-CSS constructs — the switch, spinner, skeleton, progress bar — all but vanish, because they were 100% styling. The colour section keeps its colours, since colour is its content.
A naming guide for talking to AI

Every part of an interface, with its real name.

When you ask an AI to build something, the words you use decide what you get. Say “checkbox” and you get a checkbox; say “that little square you tick” and you’re leaving it to luck. This is a living reference of the standard names for interface parts — poke each example, read the plain-English explanation, and grab the suggested phrasing.

Tip: press / to search, Ctrl+K to jump straight to any part, or click a category. Click any blue Tell your AI box to copy the phrasing.

Further reading & adjacent resources ↓
No parts match that search. Try a simpler word.

Further reading & adjacent resources

hand-picked

This page teaches you the words. These are the places to go next — for setting up a workspace, picking tools, checking how the web actually works, and learning to build it yourself. Everything below opens in a new tab. None of it is required to use an AI well; all of it helps.

Saved

Delete 3 items?

This is a confirmation dialog — it interrupts a destructive action and makes you choose. The dangerous choice is styled red, and Cancel is the safe default.