The static mockup is dead — design on the real thing

The static mockup was never the goal. It was a workaround. For decades, the live page was off-limits to designers — it lived in a codebase, behind a build step, guarded by people who weren't in the design tool. So we drew a picture of it instead and called that the design.

That constraint is gone. And once it's gone, the mockup is just extra work that introduces error.

What the mockup quietly costs you

• Fidelity drift: the comp and the live site diverge the moment either one changes.
• Double work: every screen gets built twice — once as a picture, once as code.
• Lost states: mockups capture the happy path; real pages have empty states, long content, and edge cases.
• Translation loss: intent leaks at every handoff between picture and implementation.

We accepted all of this because the alternative — touching the real page — wasn't available to us. It is now.

Designing on the real thing flips the defaults

When the live page is the canvas, fidelity is free: you're already looking at the real fonts, content, and layout. There's no second build, because the design is expressed as changes to the thing that ships. Edge cases show up while you design, not after launch.

The objection: "but I need to explore freely"

You do — early. Divergent, blue-sky exploration wants an empty canvas with no constraints. But most design work isn't blue-sky; it's refinement of something real. That's exactly where editing the live page wins, because the constraints you're "escaping" in a mockup are the constraints you actually have to ship within.

A picture of the design is not the design. The design is the change that ships.

Where this goes

The tools are catching up to a simple idea: the closer you design to the real medium, the less is lost on the way to production. Mockups will stick around for the parts they're still good at. But for redesigning what exists, the static picture has had its run.

Disagree? Try it before you decide. Open the editor, load a page you'd normally mock up, and edit it directly instead.