Statecraft Trace Autor: Statecraft

Statecraft Trace turns any web page into an editable frame in your design system.

Point it at a page you want to work from — a flow you're redesigning, an internal tool nobody has touched in years, a reference you want to pull apart — and Trace rebuilds it inside a Statecraft project using your own components, your design tokens and your declared typography.

That last part is the point. You don't get a screenshot, and you don't get a pixel-for-pixel copy of someone else's styling. You get the same structure and intent re-expressed in the system you actually build with, so it's editable from the first second: change a prop, swap a component, wire it to the next state.

How it works

Open the extension on any page and pick a destination project. Hover to highlight an element, use the up and down arrows to move through its parents and children until the selection is what you want, then press Enter. The capture opens in Statecraft as a new frame.

Because it runs in your browser, it reads the page exactly as you see it — resolved computed styles, media queries, custom properties and web fonts included. Pages behind a login work the same as public ones, with no credentials leaving your machine.

What you need

A Statecraft account and a workspace with at least one design system. The extension signs you in to your own account and captures land in your own projects.

Privacy

Trace only reads a page when you explicitly start a capture on it. It does not run in the background, does not read what you have typed into form fields, and does not touch cookies or site storage. Full details: https://statecraftapp.com/privacy