A living, single-page reference of the standard names for interface parts — built to help people say the right word when asking an AI (or anyone) to build something. Say "checkbox" and you get a checkbox; say "that little square you tick" and you're leaving it to luck.
Live page: https://interface-parts-catalog.pages.dev
- 140+ interface parts, each with its real name, common aliases, a live interactive example, a plain-English explanation, and a copy-ready "Tell your AI" phrasing.
- Organised into categories: buttons & actions, text entry, selection controls, containers, navigation, feedback, showing data, text & pointer concepts, states & interactions, and window chrome.
- Plus adjacent concept sections: colour basics, platform gotchas (desktop/Android/iOS differences), typography, accessibility, spacing & layout, and motion.
- Per-card "learn" links to authoritative sources (MDN, w3schools, the W3C ARIA patterns, WebAIM, NN/g, and more).
- A closing resources section pointing to tools, standards, and places to learn.
- Search (
/) and a command palette (Ctrl/Cmd+K) to jump to any part. - Light / auto / dark theme, defaulting to your OS setting.
- A "plain HTML" toggle that strips styling to show what's markup versus pure CSS.
- Live examples you can actually poke; one-way demos have a reset button.
It's a single self-contained HTML file. Open index.html in any modern browser — no build step, no server, no dependencies beyond Google Fonts loaded from a CDN.
Hosted on Cloudflare Pages. The entry file is index.html at the repo root, so a redeploy is just:
npx wrangler pages deploy . --project-name=interface-parts-catalog --branch=main
Every line — markup, styles, the live examples and the code behind them — was written by Claude Code, Anthropic's coding agent, through a plain back-and-forth conversation. The point it proves: you don't need to know how to build it, you need to know what to ask for.
Released under the MIT License — free to use, modify, and redistribute, with the copyright notice kept intact.