A simulation a prototype
- Takes input
- No: the field is a picture
- States drawn
- 3 of 8
- After a refresh
- Frame 1, nothing held
Every tap is one you drew by hand. Draw the error state too, and it still only appears where somebody linked it.
A working comparison · built with TokenKit
The Whole Story
Nothing in a design file is fake. It’s a simulation: an abstraction we agree to read as the product. A component in the browser is different in kind. It doesn’t depict the behavior; it performs it.
- A simulation
- Screens we agree to read as the product. Every tap is one somebody drew.
- The real thing
- Markup the machine actually runs. Type in it and it answers.
- Same pixels
- Both cards below are drawn from the same tokens. The difference isn’t fidelity.
One sign-up card, two ways. Click through the prototype, then use the component: type, submit, get it wrong, close sign-ups, refresh the page. The scorecard at the bottom keeps count.
The real thing a component
Get the monthly notes
One email a month on design systems. Unsubscribe any time.
You’re on the list.
We sent a confirmation to .
Show
- State
- empty
- Takes input
- Yes: try it
- Held
- Nothing yet
- After a refresh
- Not tested yet
Read it as a spec
Every state is one the component can actually reach, from real input or from the inspector, and each one is the same markup a developer ships.
The bar
You’re done when…
| Criterion | The prototype | The component |
|---|---|---|
| It renders every state, not just the pretty one. | No3 of 8, each one drawn | |
| It responds to real input: typing, clicking, toggling. | NoOnly the taps somebody drew | |
| State persists across a refresh. | NoBack to frame 1 | |
| A developer could open it and read it as a living spec. | NoIt’s a picture |
The deliverable isn’t a picture of the component. It’s the component.