Front-end design: the toolbox

When: you're designing or building the front end of a site or app, alone or with an AI.

How to use it

Work out which job you're on right now.
Open the drawer for that job. Don't read the whole toolbox.
Each drawer has two parts:
- What we know: the rules and patterns, merged from all four sources. Each line names its source in brackets. Where sources clash, both sides are shown, plus what held up in our own build.
- Tools in this drawer: the tool cards that do that job, with when to pick each one.
Each tool card says what it does, when to use it, how to run it, and what happened when we used it.
"[our build]" means we saw it ourselves, in Pattern: building a website with AI.
"(asserted, no evidence shown)" means the source says it but shows nothing to back it.

The seven drawers

Drawer 1: Direction. Open it before any look exists: what the site is for, who it's for, the tone, the one thing people will remember.
Drawer 2: The look. Open it when you're choosing or fixing type, colour, layout and spacing, images, corners or depth.
Drawer 3: Motion. Open it before you add any animation, or when content appears late or not at all.
Drawer 4: Behaviour. Open it for forms, states, empty and error screens, interface wording, and a user's first visit.
Drawer 5: Building it. Open it when you pick a component library, write the DESIGN.md, or set up a page with no build step.
Drawer 6: Is it any good. Open it when something is built and you need to judge it: critique, audit, AI tells, accessibility, phones, speed.
Drawer 7: Shipping. Open it when the site is ready to go live or to hand over.

The sources

frontend-design. Anthropic's published skill for setting a bold design direction.
Source: impeccable. A large design skill with about two dozen commands and a rule checker.
Source: awesome-design-md. A set of DESIGN.md files describing real brands' websites.
Source: Astryx. Meta's open source React component library, in beta.

Related

Leads onward