Layout Live

Layout Live is a desktop app that turns your running React app into a direct-manipulation canvas. Click an element, scrub its padding, swap a colour for a real design token, change an icon, and the edit is written straight back to your source files as a Tailwind class or token change. It is the use-the-systemsurface that pairs with Studio's build-the-system surface.

The pitch in one line: stop prompting for padding. Claude Code stays your IDE for logic and structure. Live is the surface you tab to when you just want to nudge spacing, colour and type without burning a prompt.

Three things set Live apart from every other visual editor. It edits your real running dev server, your own app, your own hot-reload, not a cloud sandbox or an IDE's embedded browser. Every drag is a deterministic AST edit to your Tailwind source: an exact value, written to disk, with no AI round-trip and no tokens spent. And every edit is gated to your design tokens with a live compliance score, so you stay on-system by construction rather than hand-typing an off-brand hex.

Layout Live is a macOS desktop app in open alpha. Free to download now. It is built on Electron and ships signed and notarised by Apple, so it opens with a plain double-click. Windows is on the v1.1 roadmap. Download Layout Live →

Why Live exists

A large share of “polish” work with an AI coding agent is hundreds of tiny visual edits: padding, margin, gap, font weight, colour, border radius. Those edits are high-frequency, low-information (there is nothing for an LLM to reason about, you just know what looks right), slow through a prompt, and expensive in tokens.

Studio, the CLI, the Figma plugin and the Chrome extension all help with the system side, making sure AI uses the right tokens when it generates new code. None of them help with the running app side: making it trivial for a human to nudge those tokens once code is on screen. Live fills exactly that gap, and because every edit lands in real source, the result is committable code rather than a throwaway mock.

How it works

Click to select

Point Live at your local dev server and click any element in the running app. An overlay highlights it and the properties panel populates with that element's real classes, selection survives hot-reload.

Scrub, don't prompt

Drag-to-scrub padding, margin, gap, font size, weight, radius and sizing. Every drag is a deterministic, exact value that snaps to your design system scale, with a live compliance score flagging anything off-system. No 10–30 second AI round-trip for a 4px nudge, no tokens spent.

Edits write to source

Every change is an AST edit to your actual Tailwind classes or tokens, not an overlay or a runtime patch. Your own dev server hot-reloads it, no cloud sandbox, no container, and the diff is real, committable code.

Hand off to AI

When a tweak needs real logic, hand the selected element and your recent edits to Claude Code (or any agent) through the Layout MCP server. The agent picks up exactly what you changed.

New here? The fastest way to understand Live is the Round Trip: Gallery → Live walkthrough, it takes you from importing a kit out of the Gallery all the way to a tweaked, on-brand component handed off to Claude Code.

Where Live sits in the product family

Layout is a five-surface product. Studio defines what “on-brand” means; Live lets you stay on-brand while polishing the actual product.

Surface	Role
Studio (web)	Extract tokens from Figma/websites, refine layout.md, generate component variants in the Explorer.
CLI & MCP	Install design context into a project; serve tools to AI agents over MCP.
Chrome Extension	Inspect any website against your design system; check compliance scores.
Figma Plugin	Extract tokens; push AI-generated components back as auto-layout frames.
Live (desktop)	Tweak your running app visually; write back to source; hand off to Claude Code.

Live reads from Layout's token store, writes token changes back through the same APIs, and scores edits with the same compliance engine. It does not duplicate or replace anything, it is purely additive.

Setup

Two pieces: prepare your project once with the CLI, then open the desktop app and point it at your dev server.

1. Prepare your project

From your project root, run the Live install flow. This is the same @layoutdesign/context CLI you already use for the MCP server, with a --live flag:

npx @layoutdesign/context install --live

It detects your framework (Next.js or Vite), adds the Layout build plugin so the dev server tags each element with its source location, creates a .layout/live/ directory for the edit log and lock state, and adds a small managed block to your CLAUDE.md so your agent knows Live is in play. Re-running it is idempotent.

2. Open Live and point it at your dev server

Start your dev server as normal (npm run dev), launch the Layout Live app, and enter the dev URL (e.g. http://localhost:3000 or :5173for Vite). Live embeds your app in a real Chromium webview, it is a top-level browser view, not an iframe, so most CSP and frame rules don't get in the way.

Live edits your source; your own dev server reloads it. Live writes the file and your Vite/Next dev server hot-reloads the change, Live never reloads the webview itself. If an edit doesn't appear, it is almost always because the URL in Live points at a different server (or copy of the project) than the one whose files are being edited. Point Live and your dev server at the same project root. Live shows a mismatch banner when it detects the on-screen element diverging from the parsed source.

The interface

Top bar

Holds the editable dev URL with back / forward / reload wired to the embedded webview, undo / redo for class edits (Cmd+Z / Cmd+Shift+Z), a Tokens overlay, a Settings popover, a light/dark theme toggle, Float and Clear controls, and the Hand off to AIbutton. The whole UI follows a semantic theme that mirrors Studio's palette.

Layers panel

The left panel shows the full DOM tree for the current page. Click any row to select that element (equivalent to clicking in the canvas). Three tabs:

Layers — depth-indented tree of all elements. The selected row is highlighted with a tinted background and a left accent border.
Edits — a chronological log of every class change made in this session, showing the property, before/after values, and source file. Each entry has a per-edit revert so you can undo one change without rolling back the rest. The tab badge shows the count of pending edits.
Requests — AI requests you have pinned to elements, regions, or the whole page. Surfaced here so Claude Code can pick them up via the get-pending-requests MCP tool.

Inspector

The properties panel for the selected element. Numeric controls (padding, margin, gap, font size, radius, sizing) use a drag-to-scrub grip plus a number input, fine for ±1px, hold Shift for ±10px. Opacity keeps a slider. Enum controls (alignment, weight, display) carry icons. A nine-point anchor grid handles position / inset. Every numeric field offers your design system tokens as snap targets and dropdown suggestions, so it is hard to go off-scale.

A breakpoint badge at the top of the panel shows which layer you are editing: Desktop, Tablet (<1024px), or Mobile(<768px). This follows a desktop-first model: Desktop edits write to the base class, Tablet writes a max-lg: variant, Mobile writes a max-md: variant. Each breakpoint layer is non-destructive: a Mobile edit never touches the Desktop base class, and a per-breakpoint reset removes only that layer's override. Controls show a filled dot when a value is set at the current layer and a hollow dot when it is inherited from a wider breakpoint.

Fill, colour & tokens

Colour controls (text, background, border) open a picker seeded with your project token palette plus arbitrary values. The Tokens overlay lets you edit a design token directly, the change cascades to every class that references it and is written back through Layout's update-tokens API, so the web Studio sees it on next load.

Media: images, icons, SVG

Beyond classes and tokens, Live edits media. Swap an img src or alt, set a background image, swap a Lucide icon (it renames the JSX tag and manages the import for you), or replace an inline SVG. The icon browser lists bundled Lucide names alongside any icon packs from your design system. Imported assets are written into your project's public/icons/ and SVGs are sanitised on the way in.

Compliance score

Live shows a live compliance score for the selected element in the properties panel (debounced, using the same check-compliance engine Studio uses). After a scrub, the score updates so you can see immediately whether a value is on-system or off. Compliance scoring requires a connected Layout project; in reduced mode (Tailwind config only) the score is intentionally hidden.

Edit history & revert

Every class change is recorded with its property, before/after values, source file, and timestamp. The Edits tab in the Layers panel gives you the full log. Each entry has a per-edit revert button, so you can undo one spacing tweak without rolling back an unrelated colour change made five edits later. Global undo / redo (Cmd+Z / Cmd+Shift+Z) walks the stack in order.

What Live edits (and what it doesn't)

Live is deliberately scoped to visual properties. It is not a layout editor, not a no-code builder, and not a component creator. Anything structural routes back to Claude Code.

In scope

Spacing: padding, margin, gap (all directions)
Typography: size, weight, family, line-height, letter-spacing
Colour: text, background, border (token or arbitrary)
Border radius and sizing
Position / inset via the anchor grid
Design tokens (cascades to all dependent classes)
Media: image src/alt, background image, icon swap, inline SVG

Routes to Claude Code

Flexbox direction, grid templates, layout structure
Adding, removing or moving elements
Component composition and new components
Anything that needs logic or data
CSS-in-JS and CSS modules (Tailwind only in v1)

v1 targets React with Next.js or Vite, Tailwind classes, on localhost. Vue, Astro, layout-property edits and remote dev URLs are on the roadmap, not at launch.

Reduced mode (no Layout account needed)

Live works on any Tailwind project even without a Layout design system. In reduced mode it reads your tailwind.config directly for scale and token suggestions, and the compliance score is hidden. Connect a Layout project to unlock token-aware pickers, cascade-on-token-edit, and live compliance scoring.

Working alongside Claude Code

Live and Claude Code share the same files and the same Layout MCP server. Live adds five MCP tools so your agent always has live context:

Tool	What it does
get-selected-element	The element currently selected in Live, file, line, component, classes. Lets you say "make this bigger" and have the agent know what "this" is.
get-recent-visual-edits	The class/token changes you just made. Ask "what did I just change?" and the agent reads the edit log.
get-pending-requests	The messages you left for the AI, pinned to elements, regions or the whole page, so the agent can pick them up and work through them.
lock-file	Reserves a file before the agent edits it, so Claude and Live don't clobber each other's writes.
unlock-file	Releases the lock once the agent's edit is done.

The Hand off to AI button writes a paste-ready, agent-agnostic prompt (and a .layout/live/handoff.md file) describing the selected element and your recent edits, so you can drop straight into Claude Code, Cursor or Codex and keep going. When the agent edits a file you have open in Live, a non-blocking diff banner appears with View diff, Reload, and Undo options.

These five tools ship in the Layout MCP server and return a clean “not running” response when Live is closed, so they never break an agent session. Full tool reference on the CLI & MCP page.

Troubleshooting

My edit doesn't show up on localhost

Almost always a dev-server mismatch, not a bug. Live writes the file and your own dev server hot-reloads it, make sure the URL in Live points at the same project your dev server is running. If you have multiple copies or stray dev servers (common with git worktrees), kill the stray ones and re-point Live.

Nothing happens when I click an element

The source-location tags come from the Layout build plugin. Re-run npx @layoutdesign/context install --live and restart your dev server so the plugin is active in dev.

Claude overwrote a tweak I just made

Open the diff banner and choose Undo, or ask the agent to call get-recent-visual-edits. Enabling the optional Claude Code hook lets Live know the moment a file is edited so the banner appears immediately.

Compliance score is missing

Compliance scoring only appears when a Layout project is connected. In reduced mode (Tailwind config only) the score is intentionally hidden.

Next steps

Round Trip: Gallery → Live , the full worked example from importing a kit to handing off to Claude Code.
CLI & MCP Server , the install flow, the four Live MCP tools, and the rest of the toolset.
Kit Gallery , where you grab a design system to point Live at.