Calvin Iwata Memoji, smilingCalvin Iwata Memoji, celebrating with confetti
ProductApple

Apple

Design: Prototype Library

A central library for my product team's prototypes, where each new one starts from a shell we keep current.

The prototype library open in Safari, showing view and filter controls, a row of the five newest prototype cards, and the searchable table of all of them beneath it

The problem

Prototypes lived wherever each of us built them: a local folder, a scratch file, a link in a thread nobody could find later.

So the same screen got rebuilt twice, and nobody could say what had already been tried.

What I did

I built one library the whole product team prototypes in. Every piece is a real page that runs in a browser at production fidelity.

Each product has a shell: its chrome, its tokens, its components. New prototypes start from it, not a blank page, so fidelity stops depending on who was free that week.

One script pulls the live app’s computed tokens and reports the drift, so a shell gets trued up rather than guessed at.

Three cards left to right. The first, Shell, lists chrome and navigation and brand tokens above a dashed empty rectangle labelled your feature. An arrow marked one command leads to the second, Prototype, which lists built in the slot, its own registry entry, and runs in a browser. An arrow marked checks pass first leads to the third, Library, which lists newest first, filter by product or author, and whole index searchable. Below the first card, a fourth card labelled the running app reads computed tokens read live, with an arrow pointing up into the shell.
A shell is chrome, tokens and an empty slot, so a new prototype starts at production fidelity instead of at a blank page. The return path is the part that keeps it honest: tokens are read from the running app, so a shell gets corrected rather than slowly drifting away from the product.

Every prototype owns its registry entry. The first version shared one file, and two people editing it from stale copies silently dropped each other’s work.

One command scaffolds a prototype, registers it, and adds it to the gallery. There is no CI here, so checks run locally before every push: nothing lands unnamed, unregistered, or too internal to share.

The gallery makes it a library rather than a folder: newest first, filtered by product, author or status, with the full index searchable.

I also wrote the contract an AI agent reads on open, so a teammate can describe a feature and get a finished prototype, not an empty template.

Outcome

173 prototypes across six product surfaces in six months, and four teammates now build in it.

Engineering builds from a page that already runs, so nothing is lost translating a picture into behaviour.

More work

All work