Find the missing states, sizes, tokens and behaviours in a component handoff list before developers ask

Handoff spec checkFreeFor designers and developers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

Primary button | states: default, hover | sizes: 40px | tokens: color.brand.500
Text input | states: default, focus | sizes: 44 | tokens: color.border, space.3, font.body
Product card | states: default | tokens: radius.md

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

HANDOFF SPEC CHECK
Components read: 3

Primary button (read as button): gaps in states: focus, pressed, disabled, loading, behaviours
Text input (read as text input): gaps in states: hover, filled, error, disabled, read-only, behaviours
Product card (read as card): gaps in states: hover, focus, selected, loading, empty, sizes, behaviours
Findings: 3 high, 4 medium, 3 low, 2 info

[HIGH] States (convention): Primary button: 4 states not specified
  A button usually needs: default, hover, focus, pressed, disabled, loading. Missing: focus, pressed, disabled, loading.
  Fix: Design the missing states or write down that they are not needed.

[HIGH] States (convention): Text input: 5 states not specified
  A text input usually needs: default, hover, focus, filled, error, disabled, read-only. Missing: hover, filled, error, disabled, read-only.
... full output on the tool page

What you get

Per component: its inferred type and the gaps in states, sizes, tokens and behaviours

What it cannot do

Compares against typical needs for the component type guessed from its name; unusual components may be misread.

Who it is for

Designers
Developers

Free and Pro

Free	25 runs a day per IP address, up to 100,000 characters a run.
Pro	No daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called check_handoff_spec. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp

curl -X POST https://designers.allthepossibles.com/api/handoff-spec -H 'content-type: application/json' -d '{"spec":"Primary button | states: default, hover | sizes: 40px | tokens: color.brand.500\nText input | states: default, focus | sizes: 44 | tokens: color.border, space.3, font.body\nProduct card | states: default | tokens: radius.md"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

Paste component list