Capture → Inspect → Rebuild → Export

See how interfaces are built. Make them your own.

Layerwake turns one UI component into a layer tree, a set of design tokens and starter code you can adapt.

Try demo

Runs entirely in your browser. No account, no upload, no API key.

Live sample: select any layer
PlaceholderSubtitle

Placeholder copy

Placeholder copy that keeps the same rough length as the

TagLabel
NewText
NoteLabel
Placeholder copy

Inspect

headline

size
290 × 32
pattern
text
type
28px

Rebuild

Accent
Open in the workspace →
  1. 01

    Capture

    Pick one component on a page you can inspect. The extension saves its structure and measurements to a local file.

  2. 02

    Inspect

    Walk the layer tree. See the spacing, type, color, radius and shadow values behind each part.

  3. 03

    Rebuild

    Change the palette, type size, gaps, padding and corners. The preview follows every edit.

  4. 04

    Export

    Leave with CSS variables, a tokens file and clean HTML and CSS built on placeholder content.

What a capture holds

Sizes, positions, generic tag names and an allowlist of computed styles. Page text, form values, attributes, links and asset URLs are left behind, so a rebuild always starts from placeholder content.

One capture is one component at one viewport size. Full pages and screenshots are out of scope for this release.

Capture your own

  1. Build the extension with npm run build:extension.
  2. In Chrome, open the extensions page, turn on Developer mode and load extension/dist.
  3. Practice on the demo page, then import the file here.
Layerwake. See how interfaces are built. Make them your own.