Round Trip: Gallery → Live

Open the Kit Gallery and pick a design system to build against, say the linear-lite kit. On the kit page you can preview it live (palette, type, spacing, components rendered in its own tokens), browse the full token set, and read the generated layout.md. Every kit page shows two ways in: Import to Studio and a CLI install command.

For the Live workflow we want the kit on disk in our project, so we use the CLI command, but importing to Studio first is handy if you want to tweak the tokens or generate components before you start.

From your project root, install the kit straight into a local .layout/ directory and wire up the MCP server. Use the install command shown on the kit page:

npx @layoutdesign/context install linear-lite --live

The kit slug pulls the design system; the --live flag also prepares the project for Layout Live. In one command this:

• writes the kit's tokens and layout.md into .layout/
• registers the Layout MCP server with Claude Code / Cursor / Windsurf
• detects your framework and adds the Layout build plugin so the dev server tags every element with its source location
• creates .layout/live/ (edit log, lock state, config) and a managed CLAUDE.md block

Run your app the way you always do. Note the URL it serves on:

npm run dev
# Next.js  → http://localhost:3000
# Vite     → http://localhost:5173

Live never runs or restarts your dev server. It edits source files; your own server hot-reloads them. Keep this terminal running.

Launch the Layout Live desktop app and enter your dev URL in the top bar (http://localhost:3000). Your app loads in an embedded Chromium view. Sign in with your Layout account so Live can resolve the linear-lite tokens you just installed, that is what powers the token-aware pickers and the compliance score.

Click a button in your running app. The overlay highlights it and the inspector fills with its real Tailwind classes. Now make it on-brand against the Linear kit:

• Scrub the padding.Drag the padding grip up a notch. Values snap to the kit's spacing scale, so you land on a real token (px-4 → px-5), not an arbitrary value.
• Change the colour. Open the background picker, it is seeded with the Linear palette. Pick the accent token; the class updates to the token-backed utility.
• Round the corners.Nudge the radius to the kit's pill value.

Each change writes back to source immediately and your dev server hot-reloads it. Watch the file update in your editor as you scrub. The compliance score in the panel stays green because every value came from the kit.

Decide the kit's accent is a touch too blue for your product? Open the Tokensoverlay and edit the accent token directly. Live writes the change through Layout's update-tokens API, so it cascades to every class that references it, and the web Studio picks up the same change next time you open the project. One edit, consistent everywhere.

You have the button looking right, but now you want a loading state with a spinner, that is logic, not a tweak. With the button still selected, click Hand off to AI. Live writes a paste-ready prompt (and a .layout/live/handoff.md file) describing the selected element and your recent edits.

In Claude Code, the Layout MCP server already exposes the live context. Just ask:

Add a loading state to the button I just selected in Live , 
spinner + disabled, using the existing accent token.

Claude calls get-selected-element to find the exact file and line, and get-recent-visual-edits to see the padding, colour and radius you just changed, so it builds the loading state on top of your tweaks instead of reverting them. It calls lock-file before writing so it doesn't collide with Live, then unlock-file when done. Back in Live, a diff banner shows what Claude changed, with Reload and Undo on hand.

Nothing here is a throwaway mock. Every Live tweak and every Claude edit landed in your actual source files as Tailwind classes and token changes. Review the diff and commit:

git add -A
git commit -m "feat(ui): on-brand button with loading state"