Design

Design puts every screen in your app on a single canvas, positioned by how you reach them, and lets you pan and zoom around the whole thing. Click an element on any screen and you get its real hierarchy, its resolved styles, and where in your code it came from. Press Play on an artboard and the frozen screen is replaced by the running app in the same spot, at the same size.

It is turned on per project for now. Add ?design to the URL of a project that targets native and the Design section joins the others; without it the section is not there at all.

#Screens, not screenshots

A Design artboard is not a picture of a screen. It is the screen’s actual render tree, frozen: hierarchy, node identity, paint order, geometry, resolved style, accessibility, and the React source each node came from, all preserved.

That is why inspect works on a screen nothing is currently running. The app that produced the artboard is long gone and you can still click into its view tree, read a computed style, or drop a comment anchored to one specific element. It is also why the whole map opens fast and stays smooth: there is no app running behind each artboard, only data.

Every capture covers both light and dark. Dark is captured, not derived from light, so what you see is what the app does.

#Inspect and comment

Hover an element to outline it, click to hold the selection, and press Escape to let go. A click gives you two explicit choices: send the element to chat as context for what you are about to ask, or leave a comment on it.

Comments are anchored to the element, not to a point on the canvas, so they follow it when the screen changes. A comment stays yours until you hand it to the factory; nothing acts on one you have not marked ready.

#Where the screens come from

Capturing a screen means running your app and walking its routes, so it happens somewhere with a real runtime. On desktop, the Design section captures as you work: change a file, and after things go quiet it re-captures and uploads the result. When no desktop session is open, the same pass runs in a cloud runtime instead. Either way the finished capture is stored per project, so opening Design somewhere else, including on your phone, normally lands on an already-rendered map rather than waiting behind a fresh capture.

#Why the screens have real content in them

A capture renders your app on its own private runtime, not the preview you have been clicking around in.

This matters more than it sounds. Your preview accumulates state: you empty a table testing a delete, leave a form half filled, sit on a loading skeleton. If captures rendered there, every one of those would be photographed and shipped as what your app looks like. Instead each pass renders on a hidden copy of your project that nothing else touches, boots it cold, and lets your seed data fill it. The screens show your app with your content in it, every time, no matter what you did to the preview five minutes ago.

The copy is kept in step with your project automatically and is not a branch you have to manage. It does not appear in your branch list and you never merge it.

#On your phone

The Contrast phone app has the same map. It renders natively rather than in a web view, using the same frozen screens and your project’s own fonts, and it consumes captures rather than making them. Pinch, pan, and double-tap to zoom; tap an element to inspect it.