journal · 11 OCT 2026
The prototype machine
- Published
- 11 OCT 2026
A small control panel that moves a prototype between the states a real product can reach.
Most screens I design look different depending on who’s looking and how far along they are. The same dashboard is an empty page for a new user and a busy grid for a team. In a prototype, you can’t click your way from one to the other.
So prototypes grow a panel of toggles. Sooner or later, someone in a review turns on “has a team” without “has projects”, looks at a screen the product could never show, and gives feedback on it.
The prototype machine is my fix for that. It’s a small control panel that sits in the corner of a React prototype and moves it between the states the real product can reach. It disappears in production.
A screen recording of a sample projects app with the prototype machine panel open in the corner. The account goes from a new user with an empty page, to one project, to a team with eight. Hovering First project shows why it’s grayed out: it can’t be reached from Team. The data switches to loading placeholders, then the empty page, then back. A long project name stretches the first card, and the reset button puts everything back.
Why I built it
It started in a prototype I was building at work. Almost every screen that mattered there was a state, not a page. The overview is a wall of zeros or a useful dashboard depending on whether traffic exists, and getting there for real could take a week.
The panel is dark and plain on purpose. It doesn’t look like the product it’s driving, so it never ends up in a screenshot or in the feedback.
What I use it for
- Moving through a product’s stages. I describe the states once (new user, first project, team), and each one sets everything that goes with it. Moves the product can’t make stay grayed out, with the reason.
- Data that can go wrong. Loading, empty, and error are one click each, in any order.
- Who’s looking. Switching between admin, member, and viewer shows what each of them gets on the same page.
- Breaking it on purpose. Any text or number gets its worst cases in one click: empty, 2,000 characters, a URL with no spaces, right-to-left text, and emoji. The whole page can also flip to right-to-left, double its text size, or slow its animations down.
- Every state of one component. A bench puts one component on its own page with a link for each state, so a teammate can open exactly the one I mean.
- Getting back. Every change has its own reset, and one button puts everything back. Copy turns the current state into text I can paste into a bug report.
- Tuning by feel. A number can be a slider I drag while I watch the page, with a box beside it for an exact value. When it looks right, Copy also writes out the change that would make it the default, so I can paste it straight to a coding agent. Both ideas came from studying Josh Puckett’s DialKit.
Try it
It’s free and open source. Install it with npm install --save-dev prototype-machine, or read the code on GitHub at dneath/prototype-machine. It comes with instructions a coding agent can follow, so you can ask one to set it up for you.