Field guide
Guide 04 / 10Vertical prototyping3 min

Nobody Can Build From 168 States: The Case for Vertical Prototyping

Why static state matrices fail, how vertical slices with realistic dummy data become the spec, and what this changes about handoff.

There's a ritual most product teams still perform. The designer spends weeks producing a Figma file with every state of a complex widget — all 168 of them: hover, focus, disabled, loading, empty, error, first-run, overflowing, truncated, multiplied across breakpoints and themes. The file goes to the development team with a prayer disguised as a spec: please don't miss one.

They miss several. Not because they're careless, but because static documentation of dynamic behavior is a translation problem with a guaranteed error rate. Frames can't express transitions. Annotations can't express timing. And no reviewer on earth can hold 168 states in their head while checking a pull request.

Before and after: the same widget, two handoffs

  • Before: 168 static frames. Engineers interpret the timing, guess the transitions, and skip the truncation state nobody noticed. QA catches three misses; users catch the rest — as distrust.
  • After: a working slice — the widget running in a browser with real interactions, real motion, real data flowing through it. The transition either feels right or it doesn't; no annotation required. Engineers harden and extend working code. Coding agents pattern-match a live reference instead of interpreting pictures.

The first handoff is a reading-comprehension test. The second is the answer key.

Why this is suddenly affordable

Vertical prototyping used to be prohibitively expensive — which is why the ritual survived. AI-assisted coding removed the excuse. A designer working with a coding agent can stand up a functioning vertical slice in hours, not sprints.

So the approach inverts: instead of designing every state of every component horizontally across the product, take one feature and build it completely — design through working code — before moving to the next.

Dummy data is a design material

A vertical prototype is only honest if the data flowing through it is honest. Lorem ipsum and perfectly-sized placeholder content are how designs pass review and fail in production.

Realistic dummy data forces the design to confront the states that actually occur:

  • Names that are too long
  • Tables with one row — and with ten thousand
  • Empty accounts and half-configured settings
  • An AI response that's uncertain, partial, or slow instead of crisp

For AI products this is doubly true: the interface must be designed for the response that's wrong, slow, partial, or weird — because those responses aren't edge cases. They're Tuesday.

Designing with real-shaped data also changes what you notice. A component that looks elegant with curated content reveals its actual information hierarchy when the content misbehaves. You find the truncation rules, the overflow behavior, and the empty-state messaging while they're still cheap to fix.

Go deeper: what this changes about the designer's role

The handoff-heavy model made the designer a producer of artifacts and the engineer a translator of them. Every translation layer added drift, and the designer's intent degraded with each hop — especially now that one of the "translators" is often a coding agent that takes instructions literally and invents nothing it wasn't told. The vertical model makes the designer the author of behavior. Design the flow, build the slice with dummy data, feel the transitions, fix what's wrong, and hand over something that runs. The engineering conversation shifts from "what did you mean by this frame?" to "how do we harden and scale what's already working?" — a materially better conversation for everyone, including the agents.

Try this: pick one feature on your roadmap and build it as a complete slice this week — real interactions, realistic data, one flow end-to-end. Write down every state you discover that wasn't in the design file. That list is the drift your old handoffs were shipping.

None of this eliminates the design file. Systems thinking, visual language, and token architecture still live upstream. What it eliminates is the fantasy that a sufficiently thorough set of static states can substitute for the product itself. It never could. Now there's no longer any reason to pretend.

Next guide

05Attention Is Cheap. Motivation Is the Product.

Getting attention, keeping it through felt progress, progressive disclosure, and the one-screen audit that predicts retention.