Design Layer Get started GitHub

Bring the
design layer to
your
apps.

Design Layer open on a running app: the Layers panel on the left, the selected element outlined on the page, the inspector on the right, and the toolbar along the bottom.

Design like Figma. On the real thing.

Bring your design system. Stay consistent.

Every page on one board. One click back to live.

Canvas view: every page of the app on one board, each a live frame.

Iterate with your agent. Point, compare, pick.

Numbered note pins on the page, one note being written. The Changes tab: notes and edits in one list, above Send to agent. Design options: each hero option is a switch; Subtitle is off. Another option switched on: the hero screenshot is now tilted.
Your agent, over MCP 
# Any MCP client works. Claude Code:
$ claude mcp add --transport http designlayer \
    http://127.0.0.1:5747/mcp

› designlayer.wait_for_change()
Loading…

Your machine. Nothing leaves it.

127.0.0.1
Servers listen on loopback only.
0 KB
Editor code in your production build.
0
Accounts, API keys, analytics or model calls.
MIT
Open source, so every line is yours to read.

Running in 2 minutes. Browser or Mac.

In your browser

Use it in your browser on top of your app.

git clone https://github.com/phil8-li/design-layercd design-layer && npm installnpx designlayer

As a Mac app

Keep it in your Dock, next to your other tools.

git clone https://github.com/phil8-li/design-layercd design-layer && npm installnode desktop/mac/install.mjs

Needs Node 20.9+ and a Next.js, Vite or Angular app. The Mac app also uses Chrome.

It’s early. Help us break it.

  1. Report a bug

    What you did and what happened. About 2 minutes.

    Open a bug report

  2. Fix it yourself

    All 75 test suites pass on a fresh clone.

    Read the contributing guide

  3. Ask for a tool

    Missing a Figma tool you rely on? Say so.

    Suggest a feature