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.

Getting set up

Your workshop — the free tools most projects start with.

VS Code the editor Claude Code plugs into Node.js runs JS tools outside the browser Git tracks and undoes changes GitHub stores and shares your code Cloudflare Pages free hosting — where this page lives Vercel one-click hosting & deploys

AI coding tools

The current crop of “tell it what you want” builders.

Claude Code Anthropic’s agent — built this page Claude chat, artifacts, and projects Anthropic Docs how to build with the API Cursor an AI-first code editor GitHub Copilot inline AI autocomplete v0 generate UI from a prompt

Web standards & reference

The source of truth for how the web behaves.

MDN Web Docs the definitive HTML/CSS/JS reference web.dev Google’s modern best-practices Can I Use which browsers support what WCAG the accessibility standard The A11y Project accessibility, made approachable WHATWG who actually writes the HTML spec

Learn to build

From “never touched code” to shipping, all free.

MDN Learn structured from the ground up freeCodeCamp hands-on, certification tracks The Odin Project a full self-taught curriculum JavaScript.info the deep JavaScript tutorial Josh W. Comeau superb CSS & React writing W3Schools quick “try it” references

Design & polish

Make it look and feel like you meant it.

Refactoring UI design tips for non-designers Laws of UX the principles, one card each Nielsen Norman Group decades of UX research Coolors generate colour palettes fast Google Fonts free typefaces (used here) Heroicons clean, free SVG icons
✓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.