GuideFrame

GuideFrame puts a practical layout reference directly inside a running browser app. It helps design engineers verify spacing, alignment, and component geometry against the interface people will actually use.

Why It Exists

Static designs are useful, but final spacing decisions happen in the browser. Moving between a mockup and a running app makes small alignment checks slower and less reliable.

GuideFrame keeps that reference where the interface is being built. It adds layout grids, rulers, snapping guides, and exact DOM measurements without changing the page itself.

Built for Inspection

The overlay can inspect dimensions, padding, gaps, and element boundaries. It also lets you pin one component and compare it with another using their rendered geometry.

Guides persist per route, support selection and duplication, and can be used with React or the framework-agnostic core package. The overlay renders in a shadow root, keeping its styles isolated from the application.

Outcome

GuideFrame makes browser-based interface work more deliberate. It gives designers and developers a shared way to check visual structure at the point where it matters most: the production-like interface.